/* ===================================== */
/* NAUDET 1860 — VERSION PREMIUM PROPRE  */
/* CSS COMPLET UNIFIÉ                    */
/* ===================================== */


/* ===================================== */
/* VARIABLES */
/* ===================================== */
:root{
  --naudet-bg:#f3efe8;
  --naudet-white:#ffffff;
  --naudet-text:#1f1a17;
  --naudet-text-soft:#6f5c49;
  --naudet-line:#d9ccba;
  --naudet-line-soft:#ebe2d7;
  --naudet-hover:#f7f2eb;
  --naudet-footer:#e8dfd3;
  --naudet-shadow:0 8px 22px rgba(0,0,0,0.05);
}


/* ===================================== */
/* RESET */
/* ===================================== */
*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  padding:0;
  background:var(--naudet-bg);
  font-family:'Playfair Display', serif;
  overflow-x:hidden;
  color:var(--naudet-text);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

a{
  transition:all 0.28s ease;
}


/* ===================================== */
/* STRUCTURE CENTRALE */
/* ===================================== */
#maincontainer,
#bodycontainer{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  background:var(--naudet-white);
  position:relative;
}

/* compensation header */
#bodycontainer{
  padding-top:120px;
}


/* ===================================== */
/* HEADER NAUDET */
/* ===================================== */

#headercontainer{
width:100%;
max-width:1280px;
margin:0 auto;
background:#f5f1e8;
border-bottom:1px solid #e0d7c9;
}

/* logo */

#headerlogo{
text-align:center;
padding:20px 0 10px 0;
}

#headerlogo img{
max-width:140px;
margin:auto;
display:block;
}

/* MENU HORIZONTAL */

#hmenu{
text-align:center;
margin:0;
padding:10px 0 20px 0;
}

#hmenu li{
display:inline-block;
margin:0 25px;
}

#hmenu a{
font-size:15px;
text-transform:uppercase;
letter-spacing:1px;
color:#000;
text-decoration:none;
}

#hmenu a:hover{
color:#8c6f4e;
}

/* ===================================== */
/* HEADER */
/* ===================================== */
#headercontainer{
  position:fixed;
  top:42px;
  left:50%;
  transform:translateX(-50%);
  width:100%;
  max-width:1280px;
  z-index:99999;
  background:rgba(245,241,232,0.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid #e7ddd0;
  transition:all 0.4s ease;
}

/* ombre scroll */
#headercontainer.scrolled{
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  background:#f5f1e8;
  border-bottom:1px solid #e0d7c9;
}


/* ===================================== */
/* LOGO */
/* ===================================== */
#headerarea{
  padding:18px 20px 8px 20px;
  text-align:center;
  transition:all 0.4s ease;
}

#headerlogo img{
  max-width:140px;
  transition:all 0.4s ease;
}

/* header compact scroll */
#headercontainer.scrolled #headerlogo{
  display:none;
}

#headercontainer.scrolled #headerarea{
  padding:0;
  margin:0;
  height:0;
  overflow:hidden;
}


/* ===================================== */
/* MENU */
/* ===================================== */
#headermenu{
  margin-top:8px;
  transition:all 0.4s ease;
}

#hmenu{
  text-align:center;
}

#hmenu > li{
  display:inline-block;
  margin:0 28px;
}

#hmenu > li > a.menu{
  text-decoration:none;
  color:#000;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  transition:color 0.3s ease;
}

#hmenu > li > a.menu:hover{
  color:#8c6f4e;
}

/* menu compact scroll */
#headercontainer.scrolled #headermenu{
  margin-top:0;
  padding:10px 0;
}


/* ===================================== */
/* CONTENU */
/* ===================================== */
#bodyarea{
  padding:40px 20px;
}


/* ===================================== */
/* TITRES PRODUITS */
/* ===================================== */
.productname a,
.viewtbl a,
.sectiontbarea a,
h2 a,
h3 a{
  color:#000 !important;
  text-decoration:none !important;
  font-weight:normal !important;
  font-family:'Playfair Display', serif;
  font-size:18px;
  letter-spacing:0.4px;
  line-height:1.25;
  transition:color 0.3s ease;
}

.productname a:hover,
.viewtbl a:hover,
.sectiontbarea a:hover,
h2 a:hover,
h3 a:hover{
  color:#8c6f4e !important;
}


/* ===================================== */
/* BOUTONS PREMIUM */
/* ===================================== */
.btnmain,
.btn-savoir-plus,
.btn,
.btn-secondary,
.btn-outline,
button,
input[type="submit"],
input[type="button"],
a.button,
a.button-secondary{
  display:inline-block;
  background:#ffffff !important;
  color:var(--naudet-text) !important;
  border:1px solid var(--naudet-line) !important;
  border-radius:0 !important;
  padding:10px 24px !important;
  min-width:120px;
  text-align:center;
  text-decoration:none !important;
  text-transform:uppercase;
  font-family:'Playfair Display', serif;
  font-size:13px !important;
  letter-spacing:0.8px;
  box-shadow:inset 0 0 0 1px #f1e8dc;
  transition:all 0.28s ease;
}

.btnmain:hover,
.btn-savoir-plus:hover,
.btn:hover,
.btn-secondary:hover,
.btn-outline:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.button:hover,
a.button-secondary:hover{
  background:var(--naudet-hover) !important;
  color:var(--naudet-text) !important;
  border-color:#cbb89f !important;
  box-shadow:0 4px 10px rgba(0,0,0,0.04), inset 0 0 0 1px #f4ede4;
  transform:translateY(-1px);
}

.btnmain:active,
.btn-savoir-plus:active,
.btn:active,
.btn-secondary:active,
.btn-outline:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.button:active,
a.button-secondary:active{
  transform:translateY(0);
  box-shadow:inset 0 2px 6px rgba(0,0,0,0.06);
}


/* ===================================== */
/* GRILLE PRODUITS CUSTOM */
/* ===================================== */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px,1fr));
  gap:30px;
}

.product-item{
  background:#fff;
  border:1px solid var(--naudet-line);
  padding:18px;
  position:relative;
  transition:all 0.28s ease;
}

.product-item::before{
  content:"";
  position:absolute;
  top:6px;
  left:6px;
  right:6px;
  bottom:6px;
  border:1px solid var(--naudet-line-soft);
  pointer-events:none;
}

.product-item:hover{
  border-color:#cfbea8;
  box-shadow:var(--naudet-shadow);
  transform:translateY(-2px);
}


/* ===================================== */
/* STRUCTURE BOUTIQUE */
/* ===================================== */
#left-column{
  width:25%;
  float:left;
}

#content-wrapper{
  width:75%;
  float:left;
}


/* ===================================== */
/* LISTING PRODUITS OXATIS */
/* Cadres produits + style premium       */
/* ===================================== */

/* Cartes produits les plus probables */
td[align="center"][valign="top"],
td[valign="top"][align="center"]{
  background:#fff;
  border:1px solid var(--naudet-line);
  padding:16px 14px 18px 14px !important;
  vertical-align:top;
  position:relative;
  transition:all 0.28s ease;
}

td[align="center"][valign="top"]::before,
td[valign="top"][align="center"]::before{
  content:"";
  position:absolute;
  top:6px;
  left:6px;
  right:6px;
  bottom:6px;
  border:1px solid var(--naudet-line-soft);
  pointer-events:none;
}

td[align="center"][valign="top"]:hover,
td[valign="top"][align="center"]:hover{
  border-color:#cfbea8;
  box-shadow:var(--naudet-shadow);
  transform:translateY(-2px);
}

/* Images produits */
td[align="center"][valign="top"] img,
td[valign="top"][align="center"] img,
.product-item img{
  margin:0 auto 14px auto;
}

/* Textes internes */
td[align="center"][valign="top"] .productname,
td[valign="top"][align="center"] .productname,
td[align="center"][valign="top"] .price,
td[valign="top"][align="center"] .price,
td[align="center"][valign="top"] .productprice,
td[valign="top"][align="center"] .productprice{
  margin-bottom:10px;
}

/* Alignement des boutons dans les fiches */
td[align="center"][valign="top"] a.button,
td[valign="top"][align="center"] a.button,
td[align="center"][valign="top"] input[type="button"],
td[valign="top"][align="center"] input[type="button"],
td[align="center"][valign="top"] input[type="submit"],
td[valign="top"][align="center"] input[type="submit"],
td[align="center"][valign="top"] .btn,
td[valign="top"][align="center"] .btn{
  margin:6px 4px 0 4px;
}

/* Prix */
.price,
.productprice,
.prix,
span[class*="price"]{
  color:var(--naudet-text);
  font-family:'Playfair Display', serif;
  font-size:17px;
}

/* Libellés rouge discret */
small,
.red,
span[style*="red"],
font[color="red"]{
  color:#9c3d2f !important;
  letter-spacing:0.3px;
}


/* ===================================== */
/* FOOTER */
/* ===================================== */
#footercontainer{
  background:var(--naudet-footer);
  width:100%;
  border-top:1px solid #d6cfc4;
  margin-top:60px;
}

#footercontainer > div{
  max-width:1280px;
  margin:0 auto;
  padding:60px 40px;
}

#fmenu{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:60px;
  align-items:start;
}

/* colonne marque */
.footer-brand img{
  max-width:170px;
  margin-bottom:20px;
}

.footer-address{
  font-size:14px;
  line-height:1.7;
  color:#333;
  letter-spacing:0.3px;
}

/* titres */
.footer-title{
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:18px;
  font-weight:600;
}

/* liens */
#fmenu ul{
  list-style:none;
  padding:0;
  margin:0;
}

#fmenu li{
  margin-bottom:12px;
}

#fmenu a{
  text-decoration:none;
  color:#000;
  font-size:14px;
  letter-spacing:0.3px;
  transition:all 0.25s ease;
}

#fmenu a:hover{
  color:#8c6f4e;
}

/* bas footer */
.footer-bottom{
  margin-top:50px;
  padding-top:25px;
  border-top:1px solid #d6cfc4;
  text-align:center;
  font-size:13px;
  color:#444;
}

.footer-bottom a{
  color:#444;
  text-decoration:none;
}

.footer-bottom a:hover{
  color:#8c6f4e;
}


/* ===================================== */
/* SUPPRESSION ÉLÉMENTS OXATIS */
/* ===================================== */
.epv,
#ctl00_lblEpv,
ul:empty,
li:empty{
  display:none !important;
}

ul{
  list-style:none;
  padding-left:0;
  margin:0;
}


/* ===================================== */
/* NETTOYAGE VISUEL */
/* ===================================== */
.product-buttons,
.btnarea{
  text-align:center;
}


/* ===================================== */
/* RESPONSIVE */
/* ===================================== */
@media screen and (max-width:1024px){

  #bodycontainer{
    padding-top:100px;
  }

  #headerlogo img{
    max-width:150px;
  }

  #hmenu > li{
    display:block;
    margin:12px 0;
    text-align:center;
  }

  #fmenu{
    grid-template-columns:1fr;
    text-align:center;
  }

  .btnmain,
  .btn-savoir-plus,
  .btn,
  .btn-secondary,
  .btn-outline,
  button,
  input[type="submit"],
  input[type="button"],
  a.button,
  a.button-secondary{
    min-width:110px;
    padding:10px 18px !important;
    font-size:12px !important;
  }
}

@media screen and (max-width:1000px){

  #fmenu{
    grid-template-columns:1fr 1fr;
    gap:40px;
  }

  .footer-brand{
    grid-column:1 / -1;
    text-align:center;
  }
}

@media screen and (max-width:600px){

  #fmenu{
    grid-template-columns:1fr;
    text-align:center;
  }

  #left-column,
  #content-wrapper{
    width:100%;
    float:none;
  }
}