:root {
  --cream: #FAF6F0;
  --sand: #F1E7DA;
  --plum: #4A1E33;
  --plum-dark: #2B1420;
  --gold: #B8935A;
  --gold-light: #E9D9BE;
  --text: #2B1F24;
  --muted: #7A6A70;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Jost', sans-serif; color: var(--text); background: var(--cream); line-height: 1.6; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; line-height: 1.15; }

/* Bandeau du haut */
.topbar {
  background: var(--plum-dark); color: var(--gold-light);
  text-align: center; font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; padding: 8px 12px;
}

/* En-tête */
.header {
  position: sticky; top: 0; z-index: 50; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; border-bottom: 1px solid #eee4d8;
}
.logo img { height: 52px; width: auto; }
.burger { background: none; border: none; font-size: 1.6rem; cursor: pointer; color: var(--plum); }
.nav {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; flex-direction: column;
  padding: 12px 20px 20px; border-bottom: 1px solid #eee4d8;
}
.nav.open { display: flex; }
.nav a { padding: 12px 0; letter-spacing: .1em; text-transform: uppercase; font-size: .82rem; }
.nav a:hover { color: var(--gold); }
.header-right { display: flex; align-items: center; gap: 16px; font-size: .9rem; }
.cart-link { color: var(--plum); font-weight: 500; }

.lang-switch { display: flex; align-items: center; gap: 6px; }
.lang-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: .9rem; color: #aaa; }
.lang-btn.active { color: var(--plum); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }

@media (min-width: 900px) {
  .burger { display: none; }
  .nav { display: flex; position: static; flex-direction: row; gap: 32px; padding: 0; border: none; }
  .nav a { padding: 0; }
  .logo img { height: 60px; }
}

/* Boutons */
.btn {
  display: inline-block; background: var(--gold); color: #fff;
  padding: 14px 32px; letter-spacing: .12em; text-transform: uppercase;
  font-size: .8rem; font-weight: 500; transition: background .25s;
}
.btn:hover { background: var(--plum); }
.btn-outline {
  display: inline-block; border: 1px solid var(--plum); color: var(--plum);
  padding: 9px 22px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  transition: all .25s;
}
.btn-outline:hover { background: var(--plum); color: #fff; }

/* Bannière */
.hero {
  position: relative; min-height: 78vh; display: flex; align-items: center; justify-content: center;
  text-align: center; color: #fff; padding: 60px 20px;
  background-image: var(--img, none), linear-gradient(135deg, #4A1E33 0%, #7B3F55 55%, #B8935A 130%);
  background-size: cover; background-position: center;
}
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(43, 20, 32, .38); }
.hero-inner { position: relative; max-width: 680px; }
.hero h2 { font-size: clamp(2.2rem, 6vw, 3.8rem); margin: 10px 0 16px; }
.hero-text { font-weight: 300; font-size: 1.05rem; margin-bottom: 28px; }
.eyebrow { text-transform: uppercase; letter-spacing: .25em; font-size: .75rem; color: var(--gold-light); }
.eyebrow.dark { color: var(--gold); text-align: center; }

/* Sections */
.section { padding: 70px 20px; max-width: 1150px; margin: 0 auto; }
.section.alt { max-width: none; background: var(--sand); }
.section.alt > * { max-width: 1150px; margin-left: auto; margin-right: auto; }
.section-title { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--plum); margin: 6px 0 36px; }
.section-title.left { text-align: left; }

/* Catégories */
.categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.cat {
  position: relative; aspect-ratio: 3/4; display: flex; align-items: flex-end;
  overflow: hidden; color: #fff;
  background-image: var(--img, none), var(--ph, linear-gradient(160deg, #6B3047, #B07A88));
  background-size: cover; background-position: center;
  transition: transform .3s;
}
.cat:nth-child(2) { --ph: linear-gradient(160deg, #8A5A44, #D9B99B); }
.cat:nth-child(3) { --ph: linear-gradient(160deg, #3F4A3C, #A3AE95); }
.cat:nth-child(4) { --ph: linear-gradient(160deg, #2B1420, #7B3F55); }
.cat:nth-child(5) { --ph: linear-gradient(160deg, #B8A58A, #F1E7DA); }
.cat:nth-child(6) { --ph: linear-gradient(160deg, #5A3A55, #C9A8B8); }
.cat::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,20,32,.65), transparent 55%); }
.cat span {
  position: relative; z-index: 1; padding: 18px;
  font-family: 'Cormorant Garamond', serif; font-size: 1.4rem; font-weight: 600;
}
.cat:hover { transform: translateY(-4px); }

@media (min-width: 768px) {
  .categories { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}

/* Produits */
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.product { text-align: center; }
.product-img {
  aspect-ratio: 3/4; margin-bottom: 12px; display: grid; place-items: center;
  background-color: #fff; color: var(--muted); font-size: .85rem;
  background-image: var(--img, none); background-size: cover; background-position: center;
}
.product h3 { font-size: 1.15rem; color: var(--plum); }
.price { color: var(--gold); font-weight: 500; margin: 4px 0 12px; }

@media (min-width: 768px) {
  .products { grid-template-columns: repeat(4, 1fr); gap: 22px; }
}

/* Réassurance */
.perks {
  display: grid; grid-template-columns: 1fr; gap: 28px;
  padding: 60px 20px; text-align: center; background: var(--plum); color: #fff;
}
.perk h3 { color: var(--gold-light); font-size: 1.4rem; margin-bottom: 8px; }
.perk p { font-weight: 300; max-width: 320px; margin: 0 auto; }
@media (min-width: 768px) { .perks { grid-template-columns: repeat(3, 1fr); padding: 60px 8%; } }

/* Localisation */
.location { display: grid; gap: 30px; align-items: center; }
.location-info p { margin-bottom: 12px; }
.location-info .address { color: var(--muted); }
.location-info .btn { margin-top: 10px; }
.map-box {
  aspect-ratio: 16/11; background: var(--sand); border: 1px solid #e2d3bf;
  display: grid; place-items: center; color: var(--muted);
}
.map-box iframe { width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) { .location { grid-template-columns: 1fr 1.2fr; gap: 50px; } }

/* Footer */
.footer { background: var(--plum-dark); color: #E9DFD3; }
.newsletter { text-align: center; padding: 60px 20px 40px; }
.newsletter h3 { font-size: 1.7rem; color: #fff; margin-bottom: 22px; }
.newsletter-form { display: flex; max-width: 560px; margin: 0 auto; }
.newsletter-form input {
  flex: 1; min-width: 0; padding: 15px 18px; border: none; background: #3B2530;
  color: #fff; font-family: inherit; font-size: .95rem;
}
.newsletter-form input::placeholder { color: #a99aa1; }
.newsletter-form button {
  padding: 0 24px; border: none; background: var(--gold); color: #fff;
  font-family: inherit; font-weight: 500; cursor: pointer; transition: background .25s;
}
.newsletter-form button:hover { background: #cfa96d; }

.footer-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 34px;
  max-width: 1150px; margin: 0 auto; padding: 40px 20px 50px;
}
.footer-brand { grid-column: 1 / -1; }
.brand-name { font-family: 'Cormorant Garamond', serif; font-size: 1.7rem; color: #fff; margin-bottom: 14px; }
.socials { display: flex; gap: 14px; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid #5a4450; border-radius: 50%; transition: all .25s;
}
.socials a:hover { background: var(--gold); border-color: var(--gold); }
.socials svg { width: 19px; height: 19px; }
.footer-grid h4 { font-family: 'Jost', sans-serif; font-size: .78rem; letter-spacing: .15em; text-transform: uppercase; color: #fff; margin-bottom: 14px; }
.footer-grid a, .footer-grid p { display: block; font-weight: 300; margin-bottom: 8px; font-size: .95rem; }
.footer-grid a:hover { color: var(--gold-light); }

.footer-bottom { border-top: 1px solid #3B2530; padding: 20px; font-size: .85rem; font-weight: 300; max-width: none; text-align: center; }

@media (min-width: 900px) {
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.2fr; }
  .footer-brand { grid-column: auto; }
}

/* Cartes produit : dégradé tant que la photo n'existe pas */
.product-img {
  display: block;
  background-image: var(--img, none), linear-gradient(160deg, var(--sand), #e3d1b8);
}
button.btn { border: none; cursor: pointer; font-family: inherit; }

/* Catalogue */
.page-head { text-align: center; padding: 50px 20px 0; }
.page-head .section-title { margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0 20px 34px; }
.chip {
  border: 1px solid #dccdb7; background: #fff; padding: 8px 18px;
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; transition: all .25s;
}
.chip:hover, .chip.active { background: var(--plum); color: #fff; border-color: var(--plum); }
.catalogue { max-width: 1150px; margin: 0 auto; padding: 0 20px 70px; }
.empty { text-align: center; color: var(--muted); padding: 40px 0; }

/* Page produit */
.pd { display: grid; gap: 30px; max-width: 1100px; margin: 0 auto; padding: 30px 20px 50px; }
.pd-main {
  aspect-ratio: 3/4; background-size: cover; background-position: center;
  background-image: var(--img, none), linear-gradient(160deg, var(--sand), #e3d1b8);
}
.pd-thumbs { display: flex; gap: 10px; margin-top: 10px; }
.pd-thumb {
  width: 70px; aspect-ratio: 3/4; padding: 0; cursor: pointer;
  border: 2px solid transparent; background-size: cover; background-position: center;
  background-image: var(--img, none), linear-gradient(160deg, var(--sand), #e3d1b8);
}
.pd-thumb.active { border-color: var(--gold); }
.pd-info h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--plum); }
.pd-price { font-size: 1.5rem; color: var(--gold); margin: 8px 0 16px; }
.pd-desc { color: var(--muted); margin-bottom: 24px; }
.pd-label { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.swatches { display: flex; gap: 12px; margin-bottom: 24px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 2px solid #fff; box-shadow: 0 0 0 1px #cdbda6;
}
.swatch.active { box-shadow: 0 0 0 2px var(--gold); }
.sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.size {
  min-width: 48px; padding: 10px 14px; border: 1px solid #cdbda6;
  background: #fff; cursor: pointer; font-family: inherit;
}
.size.active { background: var(--plum); color: #fff; border-color: var(--plum); }
.qty { display: inline-flex; border: 1px solid #cdbda6; background: #fff; margin-bottom: 24px; }
.qty button { width: 42px; border: none; background: none; font-size: 1.2rem; cursor: pointer; }
.qty span { width: 44px; display: grid; place-items: center; }
.pd-add { width: 100%; padding: 16px; }
.pd-msg { margin-top: 14px; font-size: .92rem; min-height: 1.5em; }
.pd-msg.error { color: #a33; }
.pd-msg.ok { color: #2f6b3f; }
.pd-msg a { text-decoration: underline; }
@media (min-width: 900px) { .pd { grid-template-columns: 1fr 1fr; gap: 60px; } }

[hidden] { display: none !important; }

.cart-page { max-width: 1100px; margin: 0 auto; padding: 50px 20px 70px; }
.cart-layout { display: grid; gap: 40px; }
@media (min-width: 900px) { .cart-layout { grid-template-columns: 1.3fr 1fr; align-items: start; } }

.cart-row {
  display: grid; grid-template-columns: 90px 1fr auto; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid #e8dccb;
}
.cart-thumb {
  aspect-ratio: 3/4; background-size: cover; background-position: center;
  background-image: var(--img, none), linear-gradient(160deg, var(--sand), #e3d1b8);
}
.cart-name { font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--plum); font-weight: 600; }
.cart-meta { color: var(--muted); font-size: .9rem; }
.cart-unit { color: var(--gold); font-size: .95rem; margin-bottom: 8px; }
.cart-actions { display: flex; align-items: center; gap: 16px; }
.cart-line-total { font-weight: 500; white-space: nowrap; }
.qty.small { margin: 0; }
.qty.small button { width: 34px; height: 34px; }
.qty.small span { width: 34px; }
.link-btn {
  background: none; border: none; cursor: pointer; font-family: inherit;
  color: var(--muted); text-decoration: underline; font-size: .85rem; padding: 0;
}
.link-btn:hover { color: var(--plum); }

.order-box { background: #fff; border: 1px solid #e8dccb; padding: 26px 22px; }
.order-box h3 { font-size: 1.6rem; color: var(--plum); margin-bottom: 14px; }
.total-row { display: flex; justify-content: space-between; font-size: 1.2rem; padding: 12px 0; border-top: 1px solid #eee4d8; }
.total-row strong { color: var(--plum); }
.note { color: var(--muted); font-size: .85rem; margin-bottom: 20px; }

#order-form label { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
#order-form input, #order-form textarea {
  display: block; width: 100%; margin-top: 6px; padding: 12px 14px;
  border: 1px solid #d6c7b0; background: var(--cream); font-family: inherit;
  font-size: 1rem; letter-spacing: 0; text-transform: none;
}
#order-form input:focus, #order-form textarea:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
.pd-add:disabled { opacity: .6; cursor: wait; }

.done { text-align: center; max-width: 520px; margin: 0 auto; padding: 30px 0; }
.done h3 { font-size: 2.2rem; color: var(--plum); margin-bottom: 14px; }
.done-number { margin-bottom: 10px; }
.hp { position: absolute; left: -9999px; height: 0; width: 0; opacity: 0; }
#order-form select {
  padding: 12px 10px; border: 1px solid #d6c7b0; background: var(--cream);
  font-family: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none;
  color: var(--text);
}
#order-form select:focus { outline: 2px solid var(--gold); border-color: var(--gold); }
#order-form .phone-row { display: flex; gap: 8px; margin-top: 6px; }
#order-form .phone-row select { flex: 0 0 48%; min-width: 0; }
#order-form .phone-row input { flex: 1; min-width: 0; width: auto; margin-top: 0; }
.hint { display: block; margin-top: 6px; color: var(--muted); font-size: .78rem; letter-spacing: 0; text-transform: none; }
/* ===== Administration ===== */
.admin-top {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 20px; background: var(--plum-dark); color: #fff;
}
.admin-top h1 { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; }
.admin-logout {
  background: none; border: 1px solid #5a4450; color: #fff; padding: 7px 14px;
  cursor: pointer; font-family: inherit; font-size: .85rem;
}
.admin-logout:hover { background: var(--gold); border-color: var(--gold); }
.admin-main { max-width: 900px; margin: 0 auto; padding: 24px 16px 60px; }

.login-card { max-width: 380px; margin: 50px auto; background: #fff; border: 1px solid #e8dccb; padding: 28px 24px; }
.login-card h2 { color: var(--plum); font-size: 1.8rem; margin-bottom: 16px; }
.login-card label { display: block; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.login-card input {
  width: 100%; padding: 12px 14px; border: 1px solid #d6c7b0;
  background: var(--cream); font-family: inherit; font-size: 1rem; margin-bottom: 10px;
}
.login-card input:focus { outline: 2px solid var(--gold); border-color: var(--gold); }

.admin-bar { display: flex; gap: 10px; margin-bottom: 14px; }
.admin-bar input {
  flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid #d6c7b0;
  background: #fff; font-family: inherit; font-size: .95rem;
}
.admin-bar .btn-outline { background: none; cursor: pointer; font-family: inherit; }
.admin-chips { justify-content: flex-start; padding: 0 0 18px; }
.admin-chips .chip { cursor: pointer; font-family: inherit; }

.ord { background: #fff; border: 1px solid #e8dccb; margin-bottom: 16px; }
.ord-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid #f0e6d6; background: var(--cream);
}
.ord-date { margin-left: auto; color: var(--muted); font-size: .85rem; }
.badge { padding: 3px 10px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.s-nouvelle { background: #f7e3c0; color: #7a4d00; }
.s-confirmee { background: #d9e7f7; color: #1d4e89; }
.s-livree { background: #d5ecd9; color: #1f6b3a; }
.s-annulee { background: #eadcdc; color: #8a2b2b; }
.ord-body { display: grid; gap: 16px; padding: 16px; }
@media (min-width: 700px) { .ord-body { grid-template-columns: 1fr 1fr; } }
.ord-cust p { margin-bottom: 4px; font-size: .95rem; word-break: break-word; }
.ord-cust a { text-decoration: underline; }
.ord-lang { color: var(--muted); font-size: .82rem !important; }
.ord-items { list-style: none; font-size: .92rem; }
.ord-items li { padding: 6px 0; border-bottom: 1px dashed #eadfcf; display: flex; justify-content: space-between; gap: 10px; }
.ord-line { white-space: nowrap; color: var(--gold); }
.ord-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-top: 1px solid #f0e6d6;
}
.ord-actions { display: flex; gap: 10px; align-items: center; }
.ord-actions select {
  padding: 9px 10px; border: 1px solid #d6c7b0; background: var(--cream);
  font-family: inherit; font-size: .9rem;
}
/* ===== Administration : articles ===== */
.admin-tabs { display: flex; gap: 6px; margin-bottom: 20px; border-bottom: 1px solid #e8dccb; }
.tab {
  background: none; border: none; padding: 10px 20px; cursor: pointer;
  font-family: inherit; font-size: .95rem; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab.active { color: var(--plum); border-bottom-color: var(--gold); font-weight: 500; }
.admin-bar .btn { border: none; cursor: pointer; font-family: inherit; }

.prod-row {
  display: grid; grid-template-columns: 70px 1fr; gap: 14px; align-items: center;
  background: #fff; border: 1px solid #e8dccb; padding: 12px; margin-bottom: 12px;
}
.prod-row.is-off { opacity: .65; }
.prod-thumb {
  aspect-ratio: 3/4; background-color: var(--sand); background-size: cover; background-position: center;
}
.prod-info { display: flex; flex-direction: column; gap: 4px; font-size: .92rem; min-width: 0; }
.prod-info strong { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: var(--plum); }
.prod-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.prod-actions .btn-outline { background: none; cursor: pointer; font-family: inherit; }
@media (min-width: 700px) {
  .prod-row { grid-template-columns: 70px 1fr auto; }
  .prod-actions { grid-column: auto; }
}
.link-btn.danger { color: #a33; }
.tag { display: inline-block; padding: 2px 9px; font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; font-style: normal; }
.tag.on { background: #d5ecd9; color: #1f6b3a; }
.tag.off { background: #eadcdc; color: #8a2b2b; }
.tag.new { background: #f7e3c0; color: #7a4d00; }

#prod-form { background: #fff; border: 1px solid #e8dccb; padding: 22px 18px; }
#prod-form h2 { color: var(--plum); font-size: 1.8rem; margin-bottom: 16px; }
#prod-form label:not(.check) {
  display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px;
}
#prod-form input[type=text], #prod-form input[type=number], #prod-form textarea, #prod-form select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid #d6c7b0;
  background: var(--cream); font-family: inherit; font-size: 1rem; letter-spacing: 0; text-transform: none;
}
#prod-form input:focus, #prod-form textarea:focus, #prod-form select:focus { outline: 2px solid var(--gold); }
.f-grid { display: grid; gap: 0 14px; }
@media (min-width: 700px) { .f-grid { grid-template-columns: 1fr 1fr; } }
#prod-form fieldset { border: 1px solid #e8dccb; padding: 12px 14px 14px; margin-bottom: 16px; }
#prod-form legend { padding: 0 8px; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.color-row { display: grid; grid-template-columns: 44px 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.color-row input[type=color] { width: 44px; height: 40px; padding: 2px; border: 1px solid #d6c7b0; background: #fff; cursor: pointer; }
.color-row input[type=text] { margin-top: 0 !important; }
.size-checks, .f-checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .95rem; cursor: pointer; text-transform: none; letter-spacing: 0; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; margin-bottom: 12px; }
.photo-img { aspect-ratio: 3/4; background-color: var(--sand); background-size: cover; background-position: center; }
.photo-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; margin-top: 6px; font-size: .82rem; }
.f-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.f-actions .btn { border: none; cursor: pointer; font-family: inherit; }
.f-actions .btn:disabled { opacity: .6; cursor: wait; }
.f-actions .btn-outline { background: none; cursor: pointer; font-family: inherit; }