/* ==========================================================================
   CATANGA — Feuille de style unique
   Design tokens · composants partagés · styles par page · responsive · a11y
   ========================================================================== */

:root {
  --beige:      #F7F3ED;
  --beige-mid:  #ECE4D8;
  --sand:       #C9A876;
  --noir:       #171514;
  --gris:       #7A736C;
  --gris-clair: #A69E95;
  --blanc:      #FFFFFF;
  --accent:     #C9A227;
  --gold-dark:  #9c7d1a;

  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Jost', system-ui, sans-serif;

  --nav-h: 66px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--blanc);
  color: var(--noir);
  font-weight: 300;
  overflow-x: hidden;
}
a { text-decoration: none; }
img { max-width: 100%; }

/* Accessibilité : focus visible clair pour navigation clavier */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--noir); color: #fff; padding: .7rem 1.2rem;
  font-size: .8rem; letter-spacing: .1em;
}
.skip-link:focus { left: 1rem; top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── BOUTONS ── */
.btn-catanga {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  padding: .95rem 2.6rem;
  background: var(--noir); color: #fff;
  border: 1px solid var(--noir); cursor: pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.btn-catanga:hover { background: var(--gold-dark); color: #fff; border-color: var(--gold-dark); }
.btn-light-outline { background: #fff; color: var(--noir); border-color: #fff; }
.btn-light-outline:hover { background: var(--accent); color: var(--noir); border-color: var(--accent); }
.btn-dark-outline { background: transparent; color: var(--noir); border-color: var(--noir); }
.btn-dark-outline:hover { background: var(--accent); color: var(--noir); border-color: var(--accent); }

/* ── TITRES DE SECTION ── */
.section-label { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); margin-bottom: .9rem; }
.section-title { font-family: var(--ff-display); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 300; line-height: 1.1; color: var(--accent); }
.section-title em { font-style: italic; }

/* ── TOP BAR ── */
.topbar { background: var(--noir); color: var(--beige); text-align: center; padding: .55rem 1rem; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; }

/* ── NAVBAR ── */
.navbar { background: var(--noir); padding: 1.1rem 0; position: sticky; top: 0; z-index: 1000; }
.navbar-brand { font-family: var(--ff-display); font-size: 1.8rem; font-weight: 600; letter-spacing: .28em; color: #fff !important; text-transform: uppercase; padding-left: .28em; }
.nav-icons a { color: #fff; font-size: 1.15rem; margin-left: 1.3rem; position: relative; transition: opacity .2s; }
.nav-icons a:hover { opacity: .6; }
.nav-icons .bag-dot { position: absolute; top: -2px; right: -4px; width: 7px; height: 7px; background: var(--sand); border-radius: 50%; }
.navbar-toggler { color: #fff; border: 0; }

/* ── OFFCANVAS ── */
.offcanvas { background: var(--noir); }
.offcanvas .nav-link { color: rgba(255,255,255,.8) !important; font-size: 1rem; padding: .8rem 0; letter-spacing: .14em; text-transform: uppercase; transition: color .25s; }
.offcanvas .nav-link:hover, .offcanvas .nav-link.active { color: #fff !important; }
.offcanvas-social a { color: #fff; font-size: 1.2rem; margin-right: 1rem; }

/* ── HERO ── */
.hero { position: relative; height: 90vh; min-height: 580px; display: flex; align-items: center; background: url('https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1600&q=80') center 30%/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(23,21,20,.42) 0%, rgba(23,21,20,.12) 55%, transparent 100%); }
.hero-content { position: relative; z-index: 2; max-width: 620px; padding: 0 1rem; }
.hero-eyebrow { font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: #fff; margin-bottom: 1.5rem; opacity: .9; }
.hero-title { font-family: var(--ff-display); font-size: clamp(3rem, 6.5vw, 6rem); font-weight: 300; line-height: 1.02; color: #fff; margin-bottom: 1.8rem; }
.hero-title em { font-style: italic; }
.hero-sub { font-size: .9rem; letter-spacing: .06em; line-height: 1.8; color: rgba(255,255,255,.9); margin-bottom: 2.6rem; max-width: 420px; }

/* ── FEATURES STRIP ── */
.features { background: var(--beige); padding: 2.2rem 0; }
.feature-item { display: flex; align-items: center; justify-content: center; gap: .8rem; }
.feature-item i { font-size: 1.5rem; color: var(--accent); }
.feature-item .ft-title { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--noir); font-weight: 400; }
.feature-item .ft-sub { font-size: .72rem; color: var(--gris); letter-spacing: .04em; }
.feature-divider { border-left: 1px solid var(--beige-mid); }

/* ── PRODUITS + TABS (accueil) ── */
.produits { padding: 6rem 0 5rem; }
.cat-tabs { display: flex; justify-content: center; gap: .6rem; margin: 2.5rem 0 3.5rem; flex-wrap: wrap; }
.cat-tab { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; padding: .6rem 1.6rem; background: transparent; color: var(--gris); border: 1px solid var(--beige-mid); cursor: pointer; transition: all .25s; }
.cat-tab:hover { border-color: var(--sand); color: var(--noir); }
.cat-tab.active { background: var(--noir); color: #fff; border-color: var(--noir); }
.cat-panel { display: none; }
.cat-panel.active { display: block; animation: fadeIn .5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── CARTE PRODUIT (partagée accueil + catalogue) ── */
.product-card { cursor: pointer; }
.product-media { position: relative; overflow: hidden; background: var(--beige); aspect-ratio: 3/4; }
.product-media img { width: 100%; height: 100%; object-fit: cover; transition: opacity .5s ease, transform .7s ease; }
.product-media img.img-hover { position: absolute; inset: 0; opacity: 0; }
.product-card:hover .img-main { opacity: 0; }
.product-card:hover .img-hover { opacity: 1; }
.product-media .badge-tag { position: absolute; top: 1rem; left: 1rem; z-index: 3; font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; background: var(--noir); color: #fff; padding: .32rem .7rem; }
.product-media .badge-tag.promo { background: var(--accent); }
.product-media .quick-add { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; background: var(--noir); color: #fff; text-align: center; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; padding: .85rem; transform: translateY(100%); transition: transform .35s ease; }
.product-card:hover .quick-add { transform: translateY(0); }
.product-info { padding: 1.1rem 0 .3rem; text-align: center; }
.product-cat { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gris-clair); margin-bottom: .3rem; }
.product-name { font-family: var(--ff-display); font-size: 1.25rem; font-weight: 400; color: var(--noir); margin-bottom: .35rem; }
.product-price { font-size: .82rem; letter-spacing: .05em; color: var(--noir); }
.product-price .old { color: var(--gris-clair); text-decoration: line-through; margin-right: .5rem; }
.product-hidden { display: none !important; }

/* ── BANNER PROMO ── */
.banner { position: relative; min-height: 460px; display: flex; align-items: center; background: url('https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=1600&q=80') center/cover no-repeat; margin: 2rem 0; }
.banner::before { content: ''; position: absolute; inset: 0; background: rgba(23,21,20,.35); }
.banner-content { position: relative; z-index: 2; color: #fff; max-width: 520px; }
.banner-content .section-label { color: var(--beige); }
.banner-title { font-family: var(--ff-display); font-size: clamp(2.4rem, 4.5vw, 3.6rem); font-weight: 300; line-height: 1.08; color: #fff; margin-bottom: 1.4rem; }
.banner-title em { font-style: italic; }
.banner-text { font-size: .88rem; line-height: 1.8; color: rgba(255,255,255,.9); margin-bottom: 2rem; max-width: 400px; }

/* ── ABOUT (2 photos gauche, texte droite) ── */
.about { padding: 6rem 0; background: var(--beige); }
.about-photos { display: flex; flex-direction: column; gap: 1.6rem; perspective: 1200px; }
.about-photo {
  position: relative; overflow: hidden; height: 340px;
  border-radius: 4px;
  box-shadow: 0 14px 30px -10px rgba(23,21,20,.28), 0 3px 8px rgba(23,21,20,.12);
  transform: rotateY(0deg) rotateX(0deg) translateZ(0);
  transition: transform .5s ease, box-shadow .5s ease;
  transform-style: preserve-3d;
}
.about-photo:nth-child(1) { transform: rotateY(4deg) rotateX(1.5deg); }
.about-photo:nth-child(2) { transform: rotateY(-4deg) rotateX(1.5deg); }
.about-photo:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(1.02);
  box-shadow: 0 22px 44px -12px rgba(23,21,20,.38), 0 6px 14px rgba(23,21,20,.16);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.about-photo:hover img { transform: scale(1.06); }
.about-photo .ph-label { position: absolute; bottom: 1rem; left: 1rem; font-family: var(--ff-display); font-style: italic; font-size: 1.3rem; color: #fff; z-index: 2; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.about-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,21,20,.4), transparent 50%); }
@media (max-width: 767px) {
  .about-photo:nth-child(1), .about-photo:nth-child(2) { transform: none; }
  .about-photo:hover { transform: scale(1.01); }
  .about-photo { height: 240px; }
}
.about-text-wrap { padding: 1rem 0 1rem 3rem; display: flex; flex-direction: column; justify-content: center; height: 100%; gap: 1.4rem; }
.about-text-wrap p { font-size: .9rem; line-height: 1.95; color: var(--gris); }
.about-signature { font-family: var(--ff-display); font-style: italic; font-size: 1.5rem; color: var(--accent); }

/* ── EN-TÊTE DE PAGE (catalogue / contact) ── */
.page-header { background: var(--beige); padding: 3.5rem 0 3rem; text-align: center; }
.breadcrumb-nav { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); margin-bottom: 1rem; }
.breadcrumb-nav a { color: var(--gris); }
.breadcrumb-nav a:hover { color: var(--noir); }
.page-header h1 { font-family: var(--ff-display); font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 300; color: var(--accent); margin-bottom: .8rem; }
.page-header h1 em { font-style: italic; }
.page-header p { font-size: .88rem; color: var(--gris); letter-spacing: .04em; max-width: 520px; margin: 0 auto; line-height: 1.8; }

/* ── TOOLBAR CATALOGUE ── */
.toolbar { border-bottom: 1px solid var(--beige-mid); padding: 1.3rem 0; position: sticky; top: var(--nav-h); background: var(--blanc); z-index: 900; }
.filter-pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.filter-pill { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; padding: .55rem 1.4rem; background: transparent; color: var(--gris); border: 1px solid var(--beige-mid); cursor: pointer; transition: all .25s; white-space: nowrap; }
.filter-pill:hover { border-color: var(--sand); color: var(--noir); }
.filter-pill.active { background: var(--noir); color: #fff; border-color: var(--noir); }
.sort-select { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--noir); border: 1px solid var(--beige-mid); background: var(--blanc); padding: .55rem 2rem .55rem 1rem; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%237A736C' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; }
.result-count { font-size: .74rem; letter-spacing: .08em; color: var(--gris); }

.catalogue { padding: 3rem 0 5rem; }
.pagination-wrap { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; }
.page-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--gris); border: 1px solid var(--beige-mid); background: transparent; cursor: pointer; transition: all .25s; }
.page-btn:hover { border-color: var(--sand); color: var(--noir); }
.page-btn.active { background: var(--noir); color: #fff; border-color: var(--noir); }

/* ── CONTACT ── */
.contact-body { padding: 5rem 0; }
.block-title { font-family: var(--ff-display); font-size: 2rem; font-weight: 400; color: var(--noir); margin-bottom: 1.8rem; }
.info-item { display: flex; gap: 1.1rem; margin-bottom: 2rem; }
.info-item .ic { flex-shrink: 0; width: 46px; height: 46px; background: var(--beige); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.2rem; }
.info-item h6 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--noir); margin-bottom: .4rem; }
.info-item p { font-size: .86rem; color: var(--gris); line-height: 1.7; margin: 0; }
.info-item p a { color: var(--gris); transition: color .2s; }
.info-item p a:hover { color: var(--noir); }
.info-socials { display: flex; gap: .7rem; margin-top: 2rem; }
.info-socials a { width: 44px; height: 44px; border: 1px solid var(--beige-mid); display: flex; align-items: center; justify-content: center; color: var(--noir); font-size: 1.05rem; transition: all .25s; }
.info-socials a:hover { background: var(--noir); color: #fff; border-color: var(--noir); }

.form-wrap { background: var(--beige); padding: 2.8rem; }
.form-label { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--noir); margin-bottom: .5rem; }
.form-control, .form-select { border: 1px solid var(--beige-mid); background: var(--blanc); border-radius: 0; padding: .8rem 1rem; font-size: .86rem; font-weight: 300; color: var(--noir); box-shadow: none !important; }
.form-control:focus, .form-select:focus { border-color: var(--sand); }
.form-control::placeholder { color: var(--gris-clair); }
textarea.form-control { resize: vertical; min-height: 120px; }
.btn-submit { width: 100%; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; padding: 1rem; background: var(--noir); color: #fff; border: 1px solid var(--noir); transition: all .3s; cursor: pointer; }
.btn-submit:hover { background: var(--accent); border-color: var(--accent); }
.form-note { font-size: .74rem; color: var(--gris); margin-top: 1rem; text-align: center; }
.form-success { display: none; background: #e8f5e9; color: #2e7d32; padding: 1rem; font-size: .82rem; text-align: center; margin-bottom: 1rem; border: 1px solid #a5d6a7; }

.map-section { position: relative; height: 440px; filter: grayscale(.3); }
.map-section iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-badge { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); background: var(--noir); color: #fff; padding: .9rem 2rem; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; z-index: 5; display: flex; align-items: center; gap: .6rem; }

/* ── LOCALISATION (accueil : grande carte) ── */
.localisation-map { position: relative; height: 480px; border-top: 1px solid var(--beige-mid); }
.localisation-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.3); }
.lm-badge { position: absolute; top: 2rem; left: 50%; transform: translateX(-50%); background: var(--noir); color: #fff; padding: .9rem 2rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; z-index: 5; display: flex; align-items: center; gap: .6rem; max-width: 90%; text-align: center; }
@media (max-width: 768px) { .localisation-map { height: 360px; } .lm-badge { font-size: .64rem; padding: .7rem 1.2rem; } }

/* ── BADGE STOCK (carte produit) ── */
.stock-line { font-size: .7rem; letter-spacing: .06em; margin-top: .4rem; }
.stock-line.ok    { color: var(--gris); }
.stock-line.low   { color: #b5651d; font-weight: 400; }
.stock-line.out   { color: #b00020; }

/* ── BOUTON AJOUTER (remplace le cœur) ── */
.add-cart { position: absolute; top: 1rem; right: 1rem; z-index: 3; width: 38px; height: 38px; background: var(--noir); color: #fff; border: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s, background .25s; }
.product-card:hover .add-cart { opacity: 1; transform: translateY(0); }
.add-cart:hover { background: var(--accent); }
.add-cart:disabled { background: var(--gris-clair); cursor: not-allowed; }
.add-cart.added { background: #2e7d32; }

/* ── COMPTEUR PANIER (navbar) ── */
.nav-icons .bag-count { position: absolute; top: -8px; right: -10px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--sand); color: var(--noir); border-radius: 9px; font-size: .66rem; line-height: 18px; text-align: center; font-weight: 500; }

/* ── PANIER (tiroir latéral droit) ── */
.cart-overlay { position: fixed; inset: 0; background: rgba(23,21,20,.45); z-index: 1100; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 400px; max-width: 90vw; background: var(--blanc); z-index: 1200; transform: translateX(100%); transition: transform .35s ease; display: flex; flex-direction: column; }
.cart-drawer.open { transform: translateX(0); }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 1.6rem 1.6rem 1.2rem; border-bottom: 1px solid var(--beige-mid); }
.cart-head h3 { font-family: var(--ff-display); font-size: 1.5rem; font-weight: 400; margin: 0; }
.cart-close { background: 0; border: 0; font-size: 1.4rem; color: var(--noir); cursor: pointer; line-height: 1; }
.cart-body { flex: 1; overflow-y: auto; padding: 1.2rem 1.6rem; }
.cart-empty { text-align: center; color: var(--gris); padding: 3rem 1rem; }
.cart-empty i { font-size: 2.4rem; color: var(--gris-clair); display: block; margin-bottom: 1rem; }
.cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--beige-mid); }
.cart-item img { width: 70px; height: 88px; object-fit: cover; background: var(--beige); flex-shrink: 0; }
.cart-item .ci-info { flex: 1; min-width: 0; }
.cart-item .ci-name { font-family: var(--ff-display); font-size: 1.05rem; margin: 0 0 .2rem; }
.cart-item .ci-meta { font-size: .72rem; color: var(--gris-clair); margin: 0 0 .5rem; }
.cart-item .ci-price { font-size: .8rem; color: var(--noir); }
.ci-qty { display: inline-flex; align-items: center; border: 1px solid var(--beige-mid); margin-top: .5rem; }
.ci-qty button { width: 28px; height: 28px; background: #fff; border: 0; cursor: pointer; font-size: .9rem; color: var(--noir); }
.ci-qty span { width: 34px; text-align: center; font-size: .8rem; }
.ci-remove { background: 0; border: 0; color: var(--gris-clair); font-size: .95rem; cursor: pointer; align-self: flex-start; transition: color .2s; }
.ci-remove:hover { color: #b00020; }
.cart-foot { border-top: 1px solid var(--beige-mid); padding: 1.4rem 1.6rem; }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.2rem; }
.cart-total .lbl { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.cart-total .val { font-family: var(--ff-display); font-size: 1.6rem; color: var(--noir); }
.cart-foot .btn-catanga { width: 100%; text-align: center; }
.cart-foot .btn-catanga:disabled { background: var(--gris-clair); border-color: var(--gris-clair); cursor: not-allowed; }

/* ── RECHERCHE (panneau navbar) ── */
.search-panel { position: sticky; top: var(--nav-h); z-index: 995; background: var(--blanc); border-bottom: 1px solid var(--beige-mid); max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.search-panel.open { max-height: 70vh; overflow-y: auto; }
.search-box { display: flex; align-items: center; gap: .8rem; padding: 1.4rem 0; }
.search-box > i { font-size: 1.2rem; color: var(--gris); }
.search-box input { flex: 1; border: 0; outline: 0; font-family: var(--ff-body); font-size: 1.1rem; font-weight: 300; color: var(--noir); background: transparent; }
.search-box input::placeholder { color: var(--gris-clair); }
.search-box button { background: 0; border: 0; font-size: 1.1rem; color: var(--gris); cursor: pointer; }
.search-results { padding-bottom: 1.5rem; }
.search-item { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--beige-mid); color: inherit; }
.search-item img { width: 52px; height: 64px; object-fit: cover; background: var(--beige); }
.search-item .si-name { font-family: var(--ff-display); font-size: 1.1rem; margin: 0; }
.search-item .si-meta { font-size: .74rem; color: var(--gris); margin: 0; }
.search-item:hover .si-name { color: var(--accent); }
.search-empty { color: var(--gris); font-size: .88rem; padding: 1rem 0; }

/* ── FICHE PRODUIT : description détaillée ── */
.pd-details { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--beige-mid); }
.pd-detail { margin-bottom: 1.2rem; }
.pd-detail-title { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--noir); font-weight: 400; margin-bottom: .3rem; }
.pd-detail-text { font-size: .84rem; line-height: 1.7; color: var(--gris); margin: 0; }

/* ── SUGGESTIONS (Vous aimerez aussi) ── */
.suggestions { padding: 4rem 0 5rem; background: var(--beige); }

/* ── MODAL COMMANDE : récap + totaux ── */
.order-recap { max-height: 220px; overflow-y: auto; margin-bottom: 1.2rem; }
.or-item { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--beige-mid); }
.or-item img { width: 48px; height: 60px; object-fit: cover; background: var(--beige); }
.or-info { flex: 1; min-width: 0; }
.or-name { font-family: var(--ff-display); font-size: 1rem; margin: 0; }
.or-name .or-qty { color: var(--gris-clair); font-size: .8rem; margin-left: .4rem; }
.or-meta { font-size: .72rem; color: var(--gris-clair); margin: 0; }
.or-price { font-size: .82rem; color: var(--noir); white-space: nowrap; }
.or-remove { background: 0; border: 0; color: var(--gris-clair); font-size: .9rem; cursor: pointer; padding: .3rem; line-height: 1; transition: color .2s; }
.or-remove:hover { color: #b00020; }
.order-totals { background: var(--noir); color: #fff; padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.ot-line { display: flex; justify-content: space-between; font-size: .82rem; padding: .3rem 0; color: rgba(255,255,255,.85); }
.ot-line .ot-free { color: var(--sand); }
.ot-grand { border-top: 1px solid rgba(255,255,255,.2); margin-top: .5rem; padding-top: .8rem; font-family: var(--ff-display); font-size: 1.3rem; color: #fff; }
.order-form-title { text-align: center; font-size: .8rem; color: var(--gris); margin-bottom: 1.2rem; }

/* ── PANIER : note dans le tiroir ── */
.cart-note { margin-bottom: 1.2rem; }
.cart-note .form-label { display: block; }
.cart-note textarea { min-height: 60px; width: 100%; }

/* ── PAGE PANIER ── */
.cart-page { padding: 3rem 0 5rem; }
.cart-page-empty { text-align: center; padding: 4rem 1rem; }
.cart-page-empty i { font-size: 3rem; color: var(--gris-clair); display: block; margin-bottom: 1.2rem; }
.cart-page-empty p { color: var(--gris); margin-bottom: 1.8rem; }
.cart-table-head { padding: 0 0 1rem; border-bottom: 1px solid var(--noir); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.cart-table-head .cth-product { flex: 1; }
.cart-table-head .cth-qty { width: 160px; text-align: center; }
.cart-table-head .cth-total { width: 140px; text-align: right; }
.cart-row { display: flex; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--beige-mid); flex-wrap: wrap; gap: 1rem; }
.cr-product { flex: 1; display: flex; gap: 1.2rem; min-width: 240px; }
.cr-product img { width: 90px; height: 112px; object-fit: cover; background: var(--beige); }
.cr-name { font-family: var(--ff-display); font-size: 1.25rem; margin: 0 0 .2rem; }
.cr-meta { font-size: .76rem; color: var(--gris-clair); margin: 0 0 .3rem; }
.cr-price { font-size: .84rem; color: var(--gris); margin: 0 0 .6rem; }
.cr-remove { background: 0; border: 0; padding: 0; font-size: .78rem; color: var(--gris); text-decoration: underline; cursor: pointer; }
.cr-remove:hover { color: #b00020; }
.cr-qty { width: 160px; display: flex; justify-content: center; }
.cr-total { width: 140px; text-align: right; font-size: .95rem; color: var(--noir); }
.cart-page-foot { display: flex; justify-content: space-between; gap: 3rem; margin-top: 2.5rem; flex-wrap: wrap; }
.cpf-note { flex: 1; min-width: 260px; max-width: 420px; }
.cpf-note textarea { min-height: 110px; }
.cpf-summary { width: 340px; max-width: 100%; }
.cps-line { display: flex; justify-content: space-between; font-size: .88rem; color: var(--gris); padding: .5rem 0; }
.cps-line .ot-free { color: var(--accent); }
.cps-grand { border-top: 1px solid var(--beige-mid); margin-top: .4rem; padding-top: 1rem; font-family: var(--ff-display); font-size: 1.5rem; color: var(--noir); }
.continue-link { display: block; text-align: center; margin-top: 1rem; font-size: .8rem; color: var(--gris); }
.continue-link:hover { color: var(--noir); }
@media (max-width: 768px) { .cart-row { flex-direction: column; align-items: flex-start; } .cr-qty, .cr-total { width: auto; text-align: left; } }

/* ── FOOTER ── */
footer { background: var(--noir); color: var(--gris-clair); padding: 4.5rem 0 2rem; }
.footer-brand { font-family: var(--ff-display); font-size: 2rem; font-weight: 300; letter-spacing: .3em; color: #fff; margin-bottom: .6rem; padding-left: .3em; }
.footer-tagline { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--sand); margin-bottom: 1.8rem; }
footer p.desc { font-size: .84rem; line-height: 1.9; max-width: 290px; color: var(--gris-clair); }
footer h6 { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: #fff; margin-bottom: 1.3rem; }
footer ul { list-style: none; }
footer ul li { margin-bottom: .65rem; }
footer ul li a { color: var(--gris-clair); font-size: .84rem; transition: color .2s; }
footer ul li a:hover { color: #fff; }
.footer-social a { color: var(--gris-clair); font-size: 1.15rem; margin-right: 1.1rem; transition: color .2s; }
.footer-social a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(184,165,133,.18); margin-top: 3rem; padding-top: 1.6rem; font-size: .74rem; letter-spacing: .06em; color: var(--gris); }

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .about-text-wrap { padding: 2.5rem 0 0; }
  .feature-divider { border-left: none; }
  .form-wrap { margin-top: 2.5rem; }
}
@media (max-width: 768px) {
  .hero { background-position: center; }
  .banner { min-height: 380px; }
  .form-wrap { padding: 1.8rem; }
  .filter-pills { justify-content: center; }
}