/*
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
*/
    /*
    :root {
      --cream: #f5f0e8;
      --warm-white: #faf8f4;
      --ink: #1a1612;
      --muted: #7a7168;
      --accent: #c17f4a;
      --accent-dark: #9a6238;
      --border: #ddd8ce;
      --card-bg: #ffffff;
      --shadow: 0 2px 24px rgba(26,22,18,0.08);
    }*/

    html { scroll-behavior: smooth; }

   /* body {
      font-family: 'Jost', sans-serif;
      background: var(--cream);
      color: var(--ink);
      min-height: 100vh;
    }
*/
    /* ── HEADER ── */
   /* header {
      background: var(--warm-white);
      border-bottom: 1px solid var(--border);
      padding: 0 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 72px;
      position: sticky;
      top: 0;
      z-index: 100;
    }*/

    /*.logo {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
      font-weight: 300;
      letter-spacing: 0.04em;
      color: var(--ink);
      text-decoration: none;
    }
    .logo em { font-style: italic; color: var(--accent); }
    */
    /*

    .cart-btn {
      display: flex;
      align-items: center;
      gap: 10px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 8px 18px;
      font-family: 'Jost', sans-serif;
      font-size: 0.8rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ink);
      cursor: pointer;
      transition: all 0.2s;
    }
    .cart-btn:hover { border-color: var(--accent); color: var(--accent); }
    .cart-count {
      background: var(--accent);
      color: white;
      border-radius: 50%;
      width: 20px; height: 20px;
      font-size: 0.7rem;
      display: flex; align-items: center; justify-content: center;
      font-weight: 500;
      transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
    }
    .cart-count.bump { transform: scale(1.5); }

*/
    /* ── GRID ── */
    .grid-section {
      padding: 16px 48px 80px;
    }
    .section-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 28px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }

    #product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 24px;
    }

    /* ── CARD ── */
    .product-card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 2px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
      animation: fadeUp 0.4s ease both;
    }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(20px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .product-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow);
      border-color: var(--accent);
    }

    .card-image {
      width: 100%;
      aspect-ratio: 4/3;
      object-fit: cover;
      display: block;
      background: var(--cream);
    }

    /* Placeholder SVG quand l'image est absente */
    .card-placeholder {
      width: 100%;
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--cream);
      color: var(--border);
    }
    .card-placeholder svg { width: 48px; opacity: 0.5; }

    .card-body { padding: 20px; }
    .card-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    .tag {
      font-size: 0.65rem;
      font-weight: 500;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      background: var(--cream);
      border: 1px solid var(--border);
      border-radius: 2px;
      padding: 2px 7px;
    }
    .card-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.2rem;
      font-weight: 400;
      margin-bottom: 8px;
      color: var(--ink);
    }
    .card-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 14px;
    }
    .card-price {
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--accent);
      letter-spacing: 0.02em;
    }
    .card-cta {
      font-size: 0.68rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      transition: color 0.2s;
    }
    .product-card:hover .card-cta { color: var(--accent); }

    /* ── SKELETON LOADER ── */
    .skeleton {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
    .skel-img {
      width: 100%; aspect-ratio: 4/3;
      background: linear-gradient(90deg, var(--cream) 25%, var(--border) 50%, var(--cream) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    .skel-body { padding: 20px; }
    .skel-line {
      height: 12px; border-radius: 2px; margin-bottom: 10px;
      background: linear-gradient(90deg, var(--cream) 25%, var(--border) 50%, var(--cream) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.4s infinite;
    }
    .skel-line.short { width: 50%; }
    @keyframes shimmer {
      to { background-position: -200% 0; }
    }

    /* ── OVERLAY ── */
    #overlay {
      display: none;
      position: fixed; inset: 0;
      background: rgba(26,22,18,0.55);
      backdrop-filter: blur(4px);
      z-index: 200;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }
    #overlay.visible { display: flex; }

    /* ── POPUP ── */
    #popup {
      background: var(--warm-white);
      border: 1px solid var(--border);
      border-radius: 2px;
      max-width: 1100px;
      width: 100%;
      max-height: 90vh;
      overflow-y: auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      box-shadow: 0 24px 80px rgba(26,22,18,0.25);
      animation: popIn 0.3s cubic-bezier(.34,1.56,.64,1) both;
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.9) translateY(20px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }

    #popup-image-wrap {
      position: relative;
      background: var(--cream);
      min-height: 360px;
    }
    #popup-image {
      width: 100%; height: 100%;
      object-fit: cover;
      display: block;
    }
    #popup-placeholder {
      width: 100%; height: 100%;
      display: flex; align-items: center; justify-content: center;
      color: var(--border); min-height: 360px;
    }
    #popup-placeholder svg { width: 72px; opacity: 0.4; }

        #popup-content {
          padding: 40px 36px;
          display: flex;
          flex-direction: column;
          color: #2c2c2c;
          /* ou ta couleur de texte principale */
        }
    
        #popup-content h2,
        #popup-content p,
        #popup-content span {
          color: inherit;
        }
#popup-name {
  color: #1a1a1a;
}

    .popup-close {
      position: absolute;
      top: 16px; right: 16px;
      background: rgba(255,255,255,0.9);
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1rem;
      color: var(--ink);
      transition: background 0.2s, border-color 0.2s;
      z-index: 10;
    }
    .popup-close:hover { background: white; border-color: var(--accent); color: var(--accent); }

    .popup-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }

    #popup-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      font-weight: 300;
      line-height: 1.2;
      margin-bottom: 16px;
    }

    #popup-summary {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      flex: 1;
      margin-bottom: 12px;
    }

    #popup-description {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      flex: 1;
      margin-bottom: 12px;
    }

    #popup-caracteristiques {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      flex: 1;
      margin-bottom: 12px;
    }

   #popup-vertu {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      flex: 1;
      margin-bottom: 12px;
    }
        
    #popup-signe {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      flex: 1;
      margin-bottom: 12px;
    }

    #popup-couleur {
      font-size: 0.88rem;
      font-weight: 300;
      line-height: 1.75;
      color: var(--muted);
      flex: 1;
      margin-bottom: 12px;
    }

    .popup-pricing {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 12px;
    }
    #popup-price {
      font-size: 1.8rem;
      font-weight: 300;
      color: var(--accent);
      font-family: 'Cormorant Garamond', serif;
    }
    #popup-stock {
      font-size: 0.75rem;
      font-weight: 400;
      letter-spacing: 0.06em;
      color: var(--muted);
    }

    .qty-row {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 20px;
    }
    .qty-label {
      font-size: 0.72rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .qty-control {
      display: flex;
      align-items: center;
      border: 1px solid var(--border);
      border-radius: 2px;
      overflow: hidden;
    }
    .qty-btn {
      background: none; border: none;
      width: 32px; height: 32px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      color: var(--ink);
      transition: background 0.15s;
    }
    .qty-btn:hover { background: var(--cream); }
    #popup-qty {
      width: 40px;
      text-align: center;
      border: none;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
      font-family: 'Jost', sans-serif;
      font-size: 0.88rem;
      height: 32px;
      background: white;
      color: var(--ink);
    }

    #add-to-cart {
      width: 100%;
      padding: 14px;
      background: var(--ink);
      color: white;
      border: none;
      border-radius: 2px;
      font-family: 'Jost', sans-serif;
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.2s;
      position: relative;
      overflow: hidden;
    }
    #add-to-cart:hover { background: var(--accent); }
    #add-to-cart.added { background: #4a7c59; }
    #add-to-cart .btn-text { transition: opacity 0.2s; }

    /* ── CART DRAWER (mini notif) ── */
    #cart-notif {
      position: fixed;
      bottom: 32px; right: 32px;
      background: var(--ink);
      color: white;
      border-radius: 2px;
      padding: 14px 22px;
      font-size: 0.82rem;
      font-weight: 400;
      letter-spacing: 0.04em;
      box-shadow: 0 8px 32px rgba(0,0,0,0.2);
      transform: translateY(80px);
      opacity: 0;
      transition: all 0.35s cubic-bezier(.34,1.56,.64,1);
      z-index: 300;
      max-width: 280px;
    }
    #cart-notif.show { transform: translateY(0); opacity: 1; }

    /* ── RESPONSIVE ── */
    /*
    @media (max-width: 680px) {
      header { padding: 0 20px; }
      .hero { padding: 40px 20px 32px; }
      .grid-section { padding: 16px 20px 60px; }
      #popup { grid-template-columns: 1fr; max-height: 95vh; }
      #popup-image-wrap { min-height: 220px; }
      #popup-content { padding: 24px 20px; }
    }*/