*{margin:0;padding:0;box-sizing:border-box;list-style:none;text-decoration:none;scroll-behavior:smooth}
:root{
  /* Palette Jacquemus B&W */
  --bg-color:#fffaf4;
  --text-color:#111111;
  --main-color:#111111;   /* boutons/accents */
  --other-color:#040404;  /* texte secondaire *#9a9a9a*/
  --second-color:#000000; /* liens/accents secondaires #111111 */

  --h1-font:3.5rem;
  --h2-font:2.3rem;
  --p-font:1.1rem;

  /* hauteur header dynamique pour le drawer mobile */
  --header-h:72px;
}
body{background:var(--bg-color);color:var(--text-color);font-family:'Inter','Poppins',sans-serif}

/* 
   HEADER + NAV
 */
header{
  position:fixed;top:0;right:0;width:100%;z-index:1000;
  background:#fffaf4;box-shadow:0 1px 0 rgba(0,0,0,.06);
  padding:16px 6%;display:flex;align-items:center;justify-content:space-between;transition:.3s;
}
.logo{
  display:flex;
  align-items:center;
  gap:8px;
  /* You can keep font declarations if you ever add text next to the logo,
     but they won't affect the image itself */
  font-family:'Oswald','Poppins',sans-serif;
  font-size:40px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--text-color);
  text-transform:uppercase;
}
.logo{
  font-family:'Oswald','Poppins',sans-serif;font-size:40px;font-weight:600;letter-spacing:1px;color:var(--text-color);text-transform:uppercase
}
.logo-img{
  display:block;
  height:48px;        /* adjust if you want it bigger/smaller */
  width:auto;
  object-fit:contain;
}

.navlist{display:flex;gap:30px}
.navlist a{
  display:inline-block;font-size:var(--p-font);font-weight:500;color:#222;
  text-transform:uppercase;letter-spacing:.06em;transition:color .25s ease;
}
.navlist a:hover{color:#000}
.nav-right{display:flex;align-items:center}
.nav-right a{display:inline-block;font-size:22px;color:#222;margin:0 12px}

#menu-icon{
  display:none;font-size:32px;color:var(--text-color);margin-left:10px;cursor:pointer;z-index:1001
}

/* Drawer mobile (ancien) — conservé pour compat mais plus utilisé */
.navlist.mobile{
  position:fixed;left:0;right:0;top:64px;display:none;flex-direction:column;align-items:center;
  background:var(--bg-color);box-shadow:0 1px 0 rgba(0,0,0,.06);padding:24px 0;z-index:1001
}
.navlist.mobile.open{display:flex!important}

/* --- Nav overflow-aware --- */
header.compact .navlist{display:none;}
header.compact #menu-icon{display:inline-flex;}

/* 
   LAYOUT
*/
section{padding:110px 6% 80px}
.center-text{text-align:center}
.center-text h2{
  font-size:var(--h2-font);font-weight:600;
  text-transform:uppercase;letter-spacing:.12em
}

/* 
   HERO (auto-contrast + CTA)
*/
.home{
  position:relative;isolation:isolate;min-height:calc(100vh - 72px);
  display:grid;align-items:end;padding:14vh 6% 14vh;
  background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;
  background-color:transparent;
}
.home::before{
  content:"";position:absolute;inset:0;background:#7f7f7f;mix-blend-mode:soft-light;opacity:.25;pointer-events:none
}
.home::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 160% at 85% 95%, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0) 40%);
  mix-blend-mode:normal;pointer-events:none
}
.home-text{position:relative;z-index:1;max-width:680px}
.home-text h6{color:#fff;opacity:.95;text-transform:uppercase;letter-spacing:.22em;margin:0 0 14px;font-weight:500;mix-blend-mode:difference}
.home-text h1{font-size:clamp(32px,6vw,68px);line-height:1.04;margin:0 0 18px;color:#fff;mix-blend-mode:difference}
.home-text p{max-width:560px;font-size:var(--p-font);line-height:1.9;color:#fff;mix-blend-mode:difference}

/* 
   BUTTONS
*/
.btn{
  display:inline-block;padding:12px 32px;background:#111;color:#fff;border:1px solid #111;border-radius:0;
  font-size:15px;font-weight:500;transition:background .2s ease,color .2s ease,transform .2s ease
}
.btn:hover{background:#fff;color:#111;transform:none}
.btn i{margin-left:9px}
.btn2{
  display:inline-block;padding:12px 32px;background:transparent;color:#111;border:1px solid #111;border-radius:0;transition:.2s
}
.btn2:hover{background:#fc8fb7;color:#fff}

/* 
   BRANDS STRIP
*/
.brands{padding:40px 6%;background:#000;color:#fff}
.main-brands{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.brands-c img{width:100%;height:auto;filter:grayscale(100%);opacity:.85}

/* 
   PRODUCT GRID (générique)
*/
.n-content{
  display:grid;gap:2.2rem;margin-top:3rem;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))
}
.row{background:transparent;padding:0;border-radius:0;box-shadow:none;transition:none}
.row-img{overflow:hidden;border-radius:0;margin-bottom:12px}
.row-img img{display:block;width:100%;height:auto;transition:none;object-fit:cover}
.row h3{font-size:16px;font-weight:600;margin:10px 0 6px;text-transform:uppercase;letter-spacing:.06em;color:#111}
.stars{display:none}
.row-in{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.row-left a{color:#666;text-transform:uppercase;font-size:.9rem}
.row-left a:hover{color:#000}
.row-right h6{font-size:14px;font-weight:600;color:#111}

/*  mini cards centrées  */
.n-product .n-content{
  display:grid!important;justify-content:center;gap:2.2rem!important;
  grid-template-columns:repeat(auto-fit,260px);margin-top:3rem!important
}
.n-product .row{width:260px}
.n-product .row-img{width:100%;aspect-ratio:4/5;background:#f5f5f5}
.n-product .row-img img{width:100%;height:100%}
.n-product .product-description{color:#666;font-size:.92rem;line-height:1.45;margin-bottom:10px}
.n-product .row form{display:grid;grid-template-columns:1fr auto;column-gap:10px;align-items:end}
.n-product .row-left select{
  width:100%;height:40px;border:1px solid #111;border-radius:0;background:#fff;color:#111;padding:0 10px;appearance:none
}
.n-product .row-left button{
  height:40px;padding:0 14px;border:1px solid #111;border-radius:0;background:#111;color:#fff;
  text-transform:uppercase;letter-spacing:.04em;cursor:pointer
}
.n-product .row-left button:hover{background:#fff;color:#111}
.n-product .row-right h6{margin-left:8px}



/* 
   FOOTER
 */
.footer{background:#fffaf4;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:3rem}
.footer-box h3{font-size:20px;font-weight:600;margin-bottom:20px;color:#111}
.footer-box a{display:block;color:#666;font-size:15px;margin-bottom:10px}
.footer-box a:hover{color:#000}
.social{display:flex;gap:15px}
.social a{font-size:20px;color:#111}
.copyright{background:#111;color:#fff;padding:20px 6%;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.end-text p{font-size:15px}
.end-img{display:flex;gap:15px}
.end-img i{font-size:24px}

/* 
   CONTACT
 */
.contact{padding:120px 6% 70px}
.contact-content{display:grid;grid-template-columns:1fr 1fr;gap:4rem;margin-top:3rem}
.contact-info h3{font-size:24px;font-weight:600;margin-bottom:20px}
.contact-info p{font-size:var(--p-font);color:var(--other-color);margin-bottom:30px;line-height:1.6}
.contact-details{margin-top:30px}
.contact-item{display:flex;align-items:center;margin-bottom:20px}
.contact-item i{font-size:20px;color:#111;margin-right:15px}
.contact-item span{font-size:16px;color:#111}
.contact-form{background:#f4f4f4;padding:40px;border-radius:0;box-shadow:none}
.contact-form input,.contact-form textarea{
  width:100%;padding:15px;margin-bottom:20px;border:1px solid #ddd;border-radius:0;font-size:16px;font-family:'Poppins',sans-serif;transition:border-color .2s
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:#111}
.contact-form textarea{resize:vertical;min-height:120px}

/* 
   SEARCH OVERLAY
 */
.search-overlay{
  position:fixed;inset:0;display:flex;justify-content:center;align-items:center;background:rgba(0,0,0,.5);z-index:9999
}
.search-overlay[hidden]{display:none}
.search-popup{
  background:#fff;padding:30px 20px;border-radius:0;box-shadow:0 10px 30px rgba(0,0,0,.15);
  max-width:450px;width:90%;position:relative
}
.search-popup input{
  width:100%;padding:15px;font-size:16px;border:1px solid #ddd;border-radius:0;background:#fff;color:#111
}
.search-popup input::placeholder{color:#9a9a9a}
#closeSearch{
  position:absolute;top:10px;right:15px;background:none;border:none;font-size:28px;cursor:pointer;color:#111
}

/* 
   PRODUCT DETAIL (desktop defaults)
 */
.product-detail .center-text h2{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.product-detail .product-container{
  display:grid!important;grid-template-columns:320px minmax(260px,420px);gap:48px!important;
  align-items:start;justify-content:center;margin:60px auto!important;padding:0 6%!important
}
.product-detail .product-gallery{max-width:320px;width:320px;border-radius:0;overflow:hidden;background:#fff;box-shadow:none;margin:0 auto}
.product-detail .product-gallery .gallery-wrapper{display:flex!important;gap:0!important;transition:transform .45s ease-in-out!important}
.product-detail .product-gallery .gallery-img{width:100%!important;aspect-ratio:4/5!important;object-fit:cover!important;border-radius:0!important}
.product-detail .gallery-controls{margin-top:12px!important;text-align:left!important}
.product-detail .gallery-controls button{
  background:#fff!important;color:#111!important;border:1px solid #111!important;border-radius:0!important;
  padding:8px 12px!important;font-size:12px!important;letter-spacing:.06em;cursor:pointer
}
.product-detail .gallery-controls button:hover{background:#111!important;color:#fff!important}
.product-detail .product-info{max-width:420px!important}
.product-detail .product-info h3{text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:600;margin-bottom:10px}
.product-detail .product-info p{color:#333;line-height:1.6}
.product-detail .product-info h3+br,.product-detail .product-info h3+br+br{display:none}
.product-detail .product-info h3:nth-of-type(2){font-size:18px;font-weight:600;margin:20px 0 6px}
.product-detail .product-info strong{font-weight:600}
.product-detail label[for="size"]{display:block;margin:18px 0 8px;letter-spacing:.03em}
.product-detail select#size{
  width:100%!important;height:44px!important;border:1px solid #111!important;border-radius:0!important;background:#fff!important;color:#111!important;padding:0 12px!important;appearance:none
}
.product-detail .product-info .btn{
  width:100%!important;background:#111!important;color:#fff!important;border:1px solid #111!important;border-radius:0!important;padding:14px 18px!important;transform:none!important
}
.product-detail .product-info .btn:hover{background:#fff!important;color:#111!important}
.product-detail .out-of-stock{color:#b00020!important}

/* 
   CART
 */
.cart-section .center-text h2{text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.cart-section{padding:110px 6% 80px!important}
.cart-section .n-content{
  display:grid!important;grid-template-columns:1fr;row-gap:18px;max-width:920px;margin:24px auto 0
}
.cart-section .row{
  display:grid!important;grid-template-columns:120px 1fr;column-gap:18px;align-items:start;
  padding:0 0 16px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;border-bottom:1px solid #eee
}
.cart-section .row-img{width:120px;aspect-ratio:4/5;overflow:hidden}
.cart-section .row-img img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important;box-shadow:none!important;margin:0!important}
.cart-section .row h3{font-size:14px;font-weight:600;margin:0 0 6px;text-transform:uppercase;letter-spacing:.06em}
.cart-section .row-in{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.cart-section .row-left input[type="number"]{width:64px!important;height:40px;border:1px solid #111;border-radius:0;padding:0 6px}
.cart-section .row-left .btn{height:40px;padding:0 14px;border:1px solid #111;border-radius:0;background:#111;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.cart-section .row-left .btn:hover{background:#fff;color:#111}
.cart-section .row-right{display:flex;align-items:center;gap:10px}
.cart-section .row-right h6{color:#111;font-weight:600;font-size:14px}
.cart-section .row-right .btn{height:40px;padding:0 12px;border-radius:0}
.cart-section .center-text h3{margin-top:10px;font-weight:600}

/* 
   MOBILE BOTTOM BAR
 */
.mobile-bottom-bar{display:none}
@media (max-width:768px){
  .mobile-bottom-bar{
    position:fixed;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;justify-content:space-around;
    background:#fff;box-shadow:0 -1px 0 rgba(0,0,0,.06);z-index:1002;padding-bottom:env(safe-area-inset-bottom)
  }
  .mobile-bottom-bar a{font-size:24px;color:#111}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}

/* 
   RESPONSIVE (global)
 */
@media (max-width:1200px){
  section{padding:90px 8% 70px}
  header{padding:18px 8%}
  .copyright{padding:20px 8%}
}
@media (max-width:1000px){
  :root{--h1-font:2.5rem;--h2-font:1.8rem;--p-font:1rem}
  #menu-icon{display:inline-flex}
  .navlist.mobile{top:64px}
  .home{height:90vh}
  .navlist a{font-size:16px;padding:14px 0}
  .contact-content{grid-template-columns:1fr;gap:2rem}
  .newsletter form{flex-direction:column;align-items:center}
  .newsletter input[type="email"]{min-width:100%;margin-bottom:15px}
}
@media (max-width:768px){
  .nav-right a{display:none}
  #menu-icon{display:inline-flex!important;align-items:center;justify-content:center;width:42px;height:42px}
}
@media (max-width:640px){
  .cart-section .row{grid-template-columns:90px 1fr;column-gap:12px}
  .cart-section .row-img{width:90px}
  .cart-section .row-left input[type="number"]{width:56px!important;height:36px}
  .cart-section .row-left .btn,.cart-section .row-right .btn{height:36px}
}
@media (max-width:520px){
  .n-product .n-content{grid-template-columns:repeat(auto-fit,180px)}
  .n-product .row{width:180px}
  .n-product .row form{grid-template-columns:1fr;row-gap:8px}
  .n-product .row-left button{width:100%}
}
@media (max-width:480px){
  section{padding:90px 5% 60px}
  header{padding:15px 5%}
}
@media (max-width:400px){
  .nav-right a[aria-label="Compte"]{display:none}
}

/* 
   PRODUCT DETAIL — MOBILE OVERRIDES 
 */
@media (max-width:768px){
  /* Stack gallery + info */
  .product-detail .product-container{
    display:block !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin:20px auto !important;
    padding:0 5% !important;
  }

  /* Gallery full width */
  .product-detail .product-gallery{
    width:100% !important;
    max-width:100% !important;
    margin:0 auto 14px !important;
    border-radius:12px !important;
    overflow:hidden !important;
  }
  .product-detail .product-gallery .gallery-img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;         /* cancel 4/5 on phones */
    max-height:60vh !important;
    object-fit:cover !important;
    display:block !important;
  }
  .product-detail .gallery-controls{
    text-align:center !important;
    margin-top:8px !important;
  }
  .product-detail .gallery-controls button{
    min-width:44px !important;min-height:44px !important;font-size:16px !important;padding:10px 14px !important;
  }

  /* Info block */
  .product-detail .product-info{max-width:100% !important;margin:0 !important}
  .product-detail .product-info h3{font-size:clamp(16px,4.5vw,20px) !important}
  .product-detail .product-info p{font-size:clamp(14px,4vw,16px) !important;line-height:1.6 !important}
  .product-detail label[for="size"]{margin:16px 0 8px !important}
  .product-detail select#size,
  .product-detail .product-info .btn{width:100% !important;min-height:44px !important;font-size:16px !important;padding:12px 14px !important}

  /* Section spacing + title */
  section.product-detail,
  .product-detail{padding:90px 5% 60px !important}
  .product-detail .center-text h2{font-size:clamp(22px,6vw,28px) !important;margin:8px 0 6px !important}
}
@media (max-width:380px){
  .product-detail .center-text h2{font-size:20px !important}
}


@media (max-width: 480px) {
  .center-text[style*="display:flex"] .btn {
    width: 100%;
    text-align: center;
  }
}


@media (max-width: 640px) {
  .contact-form form[action="admin_dashboard.php"] {
    display: block !important;
  }
  .contact-form form[action="admin_dashboard.php"] > * {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  .contact-form form[action="admin_dashboard.php"] .btn,
  .contact-form form[action="admin_dashboard.php"] a.btn {
    width: 100% !important;
    text-align: center;
  }
}

@media (max-width: 900px) {
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "id amount"
      "email email"
      "date actions" !important;
  }
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(1) { grid-area: id; }
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(2) { grid-area: amount; }
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(3) { grid-area: email; }
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(4) { grid-area: date; }
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(5) { grid-area: actions; text-align: right; }

  /* Les emails très longs ne débordent plus */
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(3) {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
}
@media (max-width: 480px) {
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "id"
      "amount"
      "email"
      "date"
      "actions" !important;
  }
  .contact-form .row[style*="1fr 1fr 1fr 1fr auto"] > :nth-child(5) .btn {
    width: 100%;
  }
}

@media (max-width: 800px) {
  .contact-form .row[style*="110px 1fr auto"] {
    grid-template-columns: 80px 1fr !important;
  }
  .contact-form .row[style*="110px 1fr auto"] img {
    max-width: 100%;
    height: auto;
    display: block;
  }
}
@media (max-width: 480px) {
  .contact-form .row[style*="110px 1fr auto"] {
    grid-template-columns: 1fr !important;
  }
  .contact-form .row[style*="110px 1fr auto"] .btn {
    width: 100%;
    margin-bottom: 8px;
  }
  .contact-form .row[style*="110px 1fr auto"] form {
    width: 100%;
  }
}

/* 5) Petits plus généraux dans le dashboard */
@media (max-width: 640px) {
  /* évite la coupure moche des textes dans les grilles du dashboard */
  .contact-form .row > div { overflow-wrap: anywhere; }
}
/* Wrap long meta lines (email, address) in the header */
section .center-text p { overflow-wrap: anywhere; word-break: break-word; }

/* Tighter heading tracking on small screens */
@media (max-width: 600px){
  .center-text h2 { letter-spacing: .06em; line-height: 1.2; }
}

/* Items list: row defined inline as "grid-template-columns: 1fr 120px 120px 140px".
   Recompose it on smaller screens without touching the HTML. */
@media (max-width: 900px){
  .contact-form .row[style*="1fr 120px 120px 140px"]{
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "prod prod"
      "qty price"
      "total total" !important;
    gap: 12px !important;
  }
  .contact-form .row[style*="1fr 120px 120px 140px"] > :nth-child(1){ grid-area: prod; overflow-wrap:anywhere; word-break: break-word; }
  .contact-form .row[style*="1fr 120px 120px 140px"] > :nth-child(2){ grid-area: qty; }
  .contact-form .row[style*="1fr 120px 120px 140px"] > :nth-child(3){ grid-area: price; }
  .contact-form .row[style*="1fr 120px 120px 140px"] > :nth-child(4){ grid-area: total; text-align: right; }
}

@media (max-width: 480px){
  .contact-form .row[style*="1fr 120px 120px 140px"]{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "prod"
      "qty"
      "price"
      "total" !important;
    gap: 8px !important;
  }
  .contact-form .row[style*="1fr 120px 120px 140px"] > *{ margin: 0 !important; }
  .contact-form .row[style*="1fr 120px 120px 140px"] > :nth-child(4){ text-align: left !important; }
}

/* =============== */
/*  BURGER MOBILE  */
/* =============== */
@media (max-width:1000px){
  /* cacher la nav inline et n'afficher que le burger */
  .navlist{ display:none; }

  /* le drawer quand ouvert (vertical sous le header) */
  .navlist.open{
    display:flex !important;
    position:fixed; left:0; right:0; top:var(--header-h,72px);
    flex-direction:column; align-items:center;
    background:var(--bg-color);
    padding:16px 0 24px;
    box-shadow:0 1px 0 rgba(0,0,0,.06);
    z-index:1200;
    height:calc(100vh - var(--header-h,72px));
    overflow:auto;
  }
  .navlist.open a{
    padding:14px 0; width:100%; text-align:center;
  }

  /* forcer l'affichage du burger */
  #menu-icon{ display:inline-flex !important; align-items:center; justify-content:center; width:42px; height:42px; }
}
@media (max-width:768px){
  .logo-img{
    height:40px;
  }
}