/* Target only header (does not affect other sections) */
header.full-bleed, .header.full-bleed {
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  background: transparent !important;
}

header.full-bleed > .container,
.header.full-bleed > .container {
  max-width: var(--header-inner-maxwidth);
  margin: 0 auto !important;
  padding-left: var(--header-inner-left-padding) !important;
  padding-right: var(--header-inner-right-padding) !important;
}

header.full-bleed[data-fixed="true"], .header.full-bleed[data-fixed="true"] {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100vw !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* CORRECTION DU PROBLÈME DE SCROLL */
html, body { 
  overflow-x: hidden; 
  height: 100%;
}

#wrapper {
  min-height: 100%;
  position: relative;
}

@media (max-width: 900px) {
  :root { --header-inner-left-padding: 16px; --header-inner-right-padding: 12px; }
}

/* --- Namespaced product CSS to avoid collisions with Bootstrap/site CSS --- */
    :root{
      --bg:#fafafa;
      --card:#ffffff;
      --muted:#6b6b6b;
      --accent1:#0a0a0a;
      --accent2:#0e0d0d;
      --radius:12px;
      --shadow: 0 8px 20px rgba(12,12,20,0.08);
      --max-width:100%; /* CHANGED: de 1100px à 100% pour s'adapter au conteneur */
      --gap:20px;
      --transition:200ms ease;
    }

    .product-root * { box-sizing: border-box; }

    body{
      margin:0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background: linear-gradient(180deg,#fff 0%, #fbfbfb 100%);
      color:#111;
      padding:var(--body-side-padding);
      display:flex;
      justify-content:center;
      align-items:flex-start;
      min-height:100vh;
      overflow-x: hidden; /* Assure qu'il n'y a pas de scroll horizontal */
    }

    .product-container{
      width:100%;
      max-width:var(--max-width);
      display:grid;
      grid-template-columns: 1fr 380px; /* CHANGED: de 1fr 420px à 1fr 380px pour réduire la largeur */
      gap:var(--gap);
      align-items:start;
      margin: 0 auto; /* CHANGED: supprimé margin-left: 200px pour centrer */
    }

    .gallery-card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px; /* CHANGED: réduit de 22px à 18px */
      overflow:visible;
    }

    /* Updated gallery layout */
    .product-top{ display:flex; flex-direction: column; gap:16px; align-items:center; } /* CHANGED: gap réduit de 18px à 16px */

    /* make main-image responsive: width 100% with max-width */
    .main-image { 
      overflow:hidden; 
      display:flex; 
      align-items:center; 
      justify-content:center; 
      
    
      max-width:460%; /* CHANGED: de 820px à 100% */
      position:relative; /* allow overlay button */
      /* NEW: Consistent square aspect ratio for all devices */
      aspect-ratio: 1 / 1;
      max-height: 460%; /* Limit maximum height */
    }
    .main-image img{ 
      width:460px; 
      height:460px; 
      object-fit:contain; /* CHANGED: from cover to contain to show full image */
      display:block; 
      transition:transform 180ms ease; 
    }

    /* Restore button over main image */
    .restore-btn{
      position:absolute;
      left:12px;
      bottom:12px;
      z-index:6;
      padding:8px 10px;
      border-radius:8px;
      background:white;
      border:1px solid #eee;
      cursor:pointer;
      font-size:13px;
      display:none;
      box-shadow:0 6px 18px rgba(0,0,0,0.08);
    }

    /* 
    nail grid styles (24 thumbnails) */
    .thumbs-container {
      position: relative;
      width: 100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap:10px;
      background-color: #0a0a0a;
       background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; position:sticky; top:36px; height:fit-content; background-color: #f2f2f2;
    }

    .thumbs-controls{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:12px; }
    .select-all { display:flex; align-items:center; gap:8px; font-size:14px; }
    .choose-btn{ padding:8px 12px; border-radius:8px; border:1px solid #eee; cursor:pointer; background:white; }

    .thumbs-grid{ display:grid; gap:8px; justify-content:center; grid-template-columns: repeat(6, 1fr); width:100%; max-width:100%; } /* CHANGED: gap réduit de 10px à 8px, max-width de 820px à 100% */

    .thumb-wrap{ position:relative; display:flex; align-items:center; justify-content:center; }
    .thumb{ 
      width:80px; /* CHANGED: réduit de 90px à 80px */
      height:80px; /* CHANGED: réduit de 90px à 80px */
      border-radius:8px; 
      object-fit:cover; 
      cursor:pointer; 
      border:2px solid transparent; 
      transition:box-shadow var(--transition), transform var(--transition); 
      flex-shrink: 0;
      display:block;
    }
    .thumb:hover{ transform:translateY(-4px) }
    .thumb.selected{ box-shadow:0 6px 18px rgba(0,0,0,0.12); border-color:rgba(0,0,0,0.06) }

    /* checkbox overlay */
    .thumb-checkbox{ position:absolute; top:6px; right:6px;  border-radius:6px; padding:2px; display:flex; align-items:center; justify-content:center; }
    .thumb-checkbox input{ width:16px; height:16px; }

    /* Hide original swiper nav (removed swiper behavior) */
    .swiper-button { display:none; }

    .info-card{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px; position:sticky; top:36px; height:fit-content; } /* CHANGED: padding réduit de 22px à 18px */

    .brand{ font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
    h1{ margin:6px 0 10px 0; font-size:20px; line-height:1.05; } /* CHANGED: font-size réduit de 22px à 20px */
    .price{ font-weight:700; font-size:18px; color:var(--accent1); margin-bottom:8px; } /* CHANGED: font-size réduit de 20px à 18px */
    .short-desc{ color:var(--muted); font-size:14px; margin-bottom:14px; }

    .option-group{ margin-bottom:14px; }
    .label{ font-size:13px; color:#333; margin-bottom:8px; display:block; }

    .swatches{ display:flex; gap:10px; align-items:center; }
    .swatch{
      width:36px; height:36px; border-radius:50%; border:2px solid transparent; cursor:pointer;
      display:inline-flex; align-items:center; justify-content:center; box-shadow:0 1px 0 rgba(0,0,0,0.06);
      transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
    }
    .swatch.selected{ transform:scale(1.08); border-color:rgba(0,0,0,0.08); box-shadow:0 6px 18px rgba(0,0,0,0.08); }

    .product-container select, .product-container input[type="tel"], .product-container input[type="number"], .product-container input[type="text"], .product-container input[type="email"], .product-container textarea{
      width:100%;
      padding:10px 12px;
      border-radius:8px;
      border:1px solid #e6e6e6;
      font-size:14px;
      resize:vertical;
    }

    .actions{ display:flex; gap:12px; margin-top:14px; }
    .product-btn{ flex:1; padding:12px 14px; border-radius:10px; border:none; cursor:pointer; font-weight:600; font-size:15px; transition:transform var(--transition), box-shadow var(--transition); }
    .product-btn-primary{ background:linear-gradient(90deg,var(--accent1), var(--accent2)); color:white; box-shadow:0 10px 30px rgba(255,76,76,0.14); }
    .product-btn-ghost{ background:transparent; border:1px solid #ececec; color:#333; }
    .product-btn:hover{ transform:translateY(-3px) }

    .details-panel{ margin-top:18px; padding:16px; border-radius:10px; background:linear-gradient(180deg, rgba(255,76,76,0.03), rgba(255,110,110,0.02)); display:none; animation:fadeIn 220ms ease both; }
    .tabs{ display:flex; gap:10px; margin-bottom:12px; }
    .tab{ padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer; font-size:13px; background:transparent; border:1px solid transparent; }
    .tab.active{ background:white; box-shadow:var(--shadow) }

    .tab-content{ font-size:14px; color:var(--muted); line-height:1.6; }

    /* popup/menu titles */
    .menu-titles-popup{
      position:fixed;
      top:70px;
      left:50%;
      transform:translateX(-50%);
      background:rgba(255,255,255,0.98);
      border-radius:10px;
      box-shadow:0 16px 40px rgba(0,0,0,0.12);
      padding:10px 14px;
      z-index:12000;
      min-width:200px;
      max-width:90%;
      display:none;
      font-size:14px;
    }
    .menu-titles-popup .close-popup {
      position:absolute;
      right:10px;
      top:8px;
      background:transparent;
      border:none;
      font-size:20px;
      cursor:pointer;
    }
    .menu-titles-popup h4{ margin:0 28px 8px 0; font-size:15px; }
    .menu-titles-popup ul{ list-style:none; padding:0; margin:0; }
    .menu-titles-popup li{ padding:6px 0; border-bottom:1px dashed #eee; }
    .menu-titles-popup li:last-child{ border-bottom:none; }
    .menu-titles-popup a{ color:var(--accent1); text-decoration:none; display:block; padding:6px 4px; }
    .menu-titles-popup .submenu{ padding-left:12px; font-size:13px; }

    /* small clicked-images area (ADDED) */
    .clicked-images {
      margin-top: 12px;
      display: grid;
      gap: 10px;
      /* responsive columns: fill with as many 140px columns as fit */
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      width: 100%;
      max-width: 100%; /* CHANGED: de 820px à 100% */
      align-items: start;
    }
    .clicked-item {
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      transition: transform 180ms ease, box-shadow 180ms ease;
      background: white;
      border: 1px solid #eee;
      /* keep a consistent preview box size while preserving image ratio inside */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
      height: 140px; /* preview box height */
    }
    /* Keep the original image aspect ratio inside the preview box:
       - don't force square (width/height) cropping.
       - let the image scale to fit inside the preview container.
    */
    .clicked-item img {
      max-width: 100%;
      max-height: 100%;
      width: auto;
      height: auto;
      object-fit: contain;
      display: block;
      vertical-align: middle;
      cursor: pointer;
      transition: transform 200ms ease;
    }
    /* enlarged / selected preview */
    .clicked-item.selected {
      transform: scale(1.03);
      box-shadow: 0 8px 30px rgba(0,0,0,0.12);
      z-index: 4;
    }
    .clicked-item .delete-btn {
      position: absolute;
      top: 6px;
      right: 6px;
      background: rgba(255,255,255,0.95);
      border: 1px solid #eee;
      border-radius: 6px;
      padding: 4px 7px;
      font-size: 12px;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.06);
    }

    /* When screen is very narrow and tall, show larger preview images stacked */
    @media (max-width:480px){
      .clicked-images {
        grid-template-columns: 1fr;
      }
      .clicked-item {
        height: 220px;
        padding: 10px;
      }
      .clicked-item img {
        max-height: 100%;
      }
    }

    /* mobile full-screen variant */
    @media (max-width:768px){
      .menu-titles-popup{
        left:0;
        transform:none;
        top:0;
        right:0;
        width:100%;
        height:100%;
        border-radius:0;
        padding:18px;
        overflow:auto;
      }
      .menu-titles-popup h4{ margin-top:0; }
    }

    /* Responsive adjustments */
    @media (max-width:1200px){
      .product-container{ margin-left:auto; margin-right:auto; }
    }

    @media (max-width:980px){
      .product-container{ grid-template-columns: 1fr; padding:0 6px; gap:14px; margin-left:auto; }
      .main-image{ 
        height: auto; /* NEW: Let aspect-ratio handle height */
        max-height: 400px; /* NEW: Slightly smaller max-height on tablet */
      }
      .info-card{ position:relative; top:0 }
      .thumbs-grid{ grid-template-columns: repeat(4, 1fr); max-width:100% } /* CHANGED: max-width de 620px à 100% */
      .thumb{ width:80px; height:80px }
      .product-top{ align-items:center }
      body{ padding:18px }
    }

    @media (max-width:640px){
      .thumbs-grid{ grid-template-columns: repeat(3, 1fr); max-width:100% } /* CHANGED: max-width de 360px à 100% */
      .thumb{ width:74px; height:74px }
      body{ padding:12px }
    }

    /* Small screens: make thumbs horizontally scrollable and main image adapt */
    @media (max-width:480px){
      :root { --body-side-padding: 12px; }
      body{ padding:12px; }
      .product-container{ grid-template-columns: 1fr; gap:12px; margin-left:auto; margin-right:auto; max-width:100%; }
      .product-container{ padding:0; }
      .product-container { max-width: 100%; }
      .product-top { align-items:stretch; }
      .main-image{
        height: auto; /* NEW: Let aspect-ratio handle height */
        max-height: 350px; /* NEW: Consistent max-height on mobile */
      }
      .main-image img{ width:100%; height:100%; object-fit:contain; } /* CHANGED: from cover to contain */
      .thumbs-grid{
        display:flex;
        grid-template-columns: none;
        overflow-x:auto;
        padding-bottom:6px;
        -webkit-overflow-scrolling: touch;
        gap:10px;
        width:100%;
        justify-content:flex-start;
      }
      .thumb-wrap{ flex:0 0 auto; }
      .info-card{ position:relative; top:0; box-shadow:none; padding:16px; }
      .product-btn{ width:100%; }
      .thumb{ width:68px; height:68px }
      .brand{ font-size:11px }
      h1{ font-size:20px }
      .price{ font-size:18px }
      .short-desc{ font-size:13px }
      .thumb-checkbox input{ width:14px; height:14px }
      .menu-titles-popup{ top:56px; }
    }

    @keyframes fadeIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
    
    /* ========================= */
    /* FORM FONT CHANGES TO MATCH FOOTER AND CANAPÉ MODERNE "LINEA" */
    /* ========================= */
    
    /* Apply the same font family to all form elements in the info-card */
    .info-card,
    .info-card .label,
    .info-card input[type="tel"],
    .info-card input[type="text"],
    .info-card input[type="email"],
    .info-card input[type="number"],
    .info-card textarea,
    .info-card .price,
    .info-card .short-desc,
    .info-card .product-btn {
      font-family: 'Roboto', 'Droid Serif', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    }
    
    /* Specifically style the form labels to match footer text */
    .info-card .label {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #333;
    }
    
    /* Style form inputs to match */
    .info-card input[type="tel"],
    .info-card input[type="text"],
    .info-card input[type="email"],
    .info-card input[type="number"],
    .info-card textarea {
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
    }
    
    /* Style the product title in the form section to match "Canapé Moderne 'Linea'" */
    .info-card .price {
      font-family: 'Droid Serif', serif;
      font-weight: 700;
    }
    
    /* Style the button to match footer button styling */
    .info-card .product-btn {
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
    }
	
/* CORRECTION DU PROBLÈME DE SCROLL - AJOUTS */
    html {
      overflow-x: hidden;
      height: 100%;
    }
    
    body {
      overflow-x: hidden;
      position: relative;
    }
    
    #wrapper {
      overflow-x: hidden;
      width: 100%;
    }

    /* Small UX improvements for mobile touch targets and layout */
    @media (max-width:900px) {
      :root { --body-side-padding: 14px; }
      /* make navbar toggle more visible on mobile */
      #mobileMenuBtn { padding: 10px; border-radius: 8px; }
      /* ensure big CTA buttons remain tappable */
      .product-btn { padding:14px; font-size:16px; }
      /* slightly larger thumbnails for better tap on small devices */
      .thumb { min-width:72px; min-height:72px; }
    }

    /* At very small widths move the info-card below gallery (explicit) and remove sticky */
    @media (max-width:980px) {
      .info-card { position:relative !important; top:0 !important; box-shadow:none !important; }
      .product-container { grid-template-columns: 1fr !important; margin-left:auto !important; margin-right:auto !important; }
      /* full-width main image and clicked images */
      .main-image, #clickedImagesContainer { width:100% !important; max-width:100% !important; }
      /* increase readable font size a touch */
      body, .info-card, .gallery-card { font-size: 15px; }
    }

    /* Keep things from overflowing horizontally */
    html, body, #wrapper { 
      max-width:100%; 
      overflow-x: hidden !important;
    }

    /* Improve header spacing on phones */
    @media (max-width:480px) {
      header.full-bleed > .container { padding-left:12px !important; padding-right:12px !important; }
      .product-container { gap:12px !important; padding:6px !important; }
      .brand { font-size:12px; }
      .thumbs-controls { padding: 6px 0; }
    }

    /* Ensure clicked previews are full width on narrow screens */
    @media (max-width:420px) {
      .clicked-item img { height: 260px; object-fit:contain; }
      .clicked-item .delete-btn { padding:6px 8px; font-size:13px; }
    }