/* ==========================================================================
   MADE IN BALI — Système de design
   Palette : sable, teck, soleil, lagon
   ========================================================================== */


:root{
  --sable: #EDE4D3;
  --sable-clair: #F7F2E8;
  --blanc-casse: #FAF7F0;
  --teck: #3D2B1F;
  --teck-clair: #5A4636;
  --soleil: #D9A441;
  --soleil-fonce: #B8842F;
  --lagon: #5B8C7B;
  --lagon-fonce: #466E5F;
  --ligne: rgba(61,43,31,0.12);

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;

  --container: 1180px;
  --espace-section: clamp(64px, 9vw, 120px);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sable);
  color:var(--teck);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.1;
  margin:0;
  color:var(--teck);
}

.eyebrow{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--lagon-fonce);
}

.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding:0 28px;
}

/* Focus visible pour l'accessibilité */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--lagon-fonce);
  outline-offset:3px;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

/* ============================== HEADER ============================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(250,247,240,0.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ligne);
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:84px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.brand img{
  height:48px;
  width:48px;
  border-radius:50%;
  object-fit:cover;
}
.brand-text{
  font-family:var(--serif);
  font-size:21px;
  font-weight:600;
  letter-spacing:0.01em;
}
.brand-text span{
  display:block;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  letter-spacing:0.16em;
  color:var(--lagon-fonce);
  text-transform:uppercase;
  margin-top:1px;
}

nav.main-nav{
  display:flex;
  gap:32px;
}
nav.main-nav a{
  font-size:15px;
  font-weight:500;
  color:var(--teck-clair);
  position:relative;
  padding:6px 0;
}
nav.main-nav a:hover, nav.main-nav a.active{
  color:var(--teck);
}
nav.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--soleil);
  border-radius:2px;
}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  width:24px;height:2px;background:var(--teck);border-radius:2px;
}

@media (max-width:860px){
  nav.main-nav{
    position:fixed;
    top:84px; left:0; right:0;
    background:var(--blanc-casse);
    flex-direction:column;
    gap:0;
    padding:8px 28px 20px;
    border-bottom:1px solid var(--ligne);
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  nav.main-nav.open{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  nav.main-nav a{
    padding:14px 0;
    border-bottom:1px solid var(--ligne);
  }
  .nav-toggle{display:flex;}
}

/* ============================== BOUTONS ============================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:100px;
  font-size:15px;
  font-weight:600;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease;
}
.btn-primaire{
  background:var(--teck);
  color:var(--blanc-casse);
}
.btn-primaire:hover{
  background:var(--lagon-fonce);
  transform:translateY(-1px);
}
.btn-secondaire{
  background:transparent;
  color:var(--teck);
  border-color:var(--teck);
}
.btn-secondaire:hover{
  background:var(--teck);
  color:var(--blanc-casse);
}

/* ============================== HERO ============================== */
.hero{
  position:relative;
  padding:72px 0 var(--espace-section);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-size:clamp(38px, 5.2vw, 64px);
  font-style:italic;
  font-weight:500;
}
.hero h1 em{
  font-style:normal;
  color:var(--soleil-fonce);
}
.hero p.lead{
  margin-top:22px;
  font-size:18px;
  color:var(--teck-clair);
  max-width:46ch;
}
.hero .actions{
  margin-top:34px;
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.hero-photo{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  aspect-ratio:4/5;
  box-shadow:0 30px 60px -20px rgba(61,43,31,0.35);
}
.hero-photo img{
  width:100%;height:100%;object-fit:cover;
}
.hero-tag{
  position:absolute;
  bottom:22px; left:22px;
  background:rgba(250,247,240,0.94);
  padding:12px 18px;
  border-radius:12px;
  font-family:var(--serif);
  font-size:15px;
}
.hero-tag b{display:block;font-size:18px;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-photo{order:-1;aspect-ratio:5/4;}
}

/* ============================== SECTIONS GÉNÉRALES ============================== */
section{padding:var(--espace-section) 0;}
.section-head{
  max-width:640px;
  margin-bottom:48px;
}
.section-head h2{
  font-size:clamp(28px,3.4vw,42px);
  margin-top:10px;
}
.section-head p{
  margin-top:14px;
  color:var(--teck-clair);
  font-size:17px;
}

/* ============================== CATÉGORIES (accueil) ============================== */
.categories-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
}
.cat-card{
  background:var(--blanc-casse);
  border-radius:16px;
  padding:32px 24px;
  border:1px solid var(--ligne);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 32px -16px rgba(61,43,31,0.25);
}
.cat-card .num{
  font-family:var(--serif);
  font-style:italic;
  color:var(--soleil-fonce);
  font-size:14px;
}
.cat-card h3{
  font-size:21px;
  margin-top:14px;
}
.cat-card p{
  margin-top:8px;
  font-size:14px;
  color:var(--teck-clair);
}
@media (max-width:980px){
  .categories-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .categories-grid{grid-template-columns:1fr;}
}

/* ============================== GRILLE PRODUITS ============================== */
.produits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 28px;
}
.produit-card{
  background:var(--blanc-casse);
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--ligne);
  transition:transform .2s ease, box-shadow .2s ease;
}
.produit-card:hover{
  transform:translateY(-5px);
  box-shadow:0 20px 40px -18px rgba(61,43,31,0.28);
}
.produit-card .photo{
  aspect-ratio:4/3.4;
  overflow:hidden;
  position:relative;
}
.produit-card .photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.produit-card:hover .photo img{
  transform:scale(1.05);
}
.produit-card .badge-coup-de-coeur{
  position:absolute; top:14px; left:14px;
  background:var(--soleil);
  color:var(--teck);
  font-size:12px;
  font-weight:600;
  padding:6px 12px;
  border-radius:100px;
  letter-spacing:0.02em;
}
.produit-card .info{
  padding:22px 22px 26px;
}
.produit-card .cat-label{
  font-size:12px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--lagon-fonce);
}
.produit-card h3{
  font-size:22px;
  margin-top:8px;
}
.produit-card .desc{
  margin-top:8px;
  font-size:14px;
  color:var(--teck-clair);
}
.produit-card .prix-ligne{
  margin-top:16px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.produit-card .a-partir-de{
  font-size:13px;
  color:var(--teck-clair);
}
.produit-card .prix{
  font-family:var(--serif);
  font-size:22px;
  color:var(--soleil-fonce);
}
.produit-card .voir{
  margin-top:18px;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.produit-card .voir svg{transition:transform .2s ease;}
.produit-card:hover .voir svg{transform:translateX(3px);}

@media (max-width:980px){
  .produits-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .produits-grid{grid-template-columns:1fr;}
}

/* ============================== FILTRES CATALOGUE ============================== */
.filtres{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:44px;
}
.filtre-btn{
  padding:10px 20px;
  border-radius:100px;
  border:1px solid var(--ligne);
  background:var(--blanc-casse);
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:all .15s ease;
}
.filtre-btn:hover{
  border-color:var(--teck);
}
.filtre-btn.active{
  background:var(--teck);
  color:var(--blanc-casse);
  border-color:var(--teck);
}

/* ============================== FICHE PRODUIT ============================== */
.fiche-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.fiche-photo{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 30px 60px -24px rgba(61,43,31,0.3);
}
.fiche-photo img{width:100%;height:auto;display:block;}

.galerie-vignettes{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap;}
.galerie-vignettes .vignette{
  width:84px;height:84px;padding:0;border:2px solid transparent;border-radius:12px;
  overflow:hidden;cursor:pointer;background:none;transition:border-color .2s;
}
.galerie-vignettes .vignette img{width:100%;height:100%;object-fit:cover;display:block;}
.galerie-vignettes .vignette.active{border-color:var(--soleil);}
.galerie-vignettes .vignette:hover{border-color:var(--teck-clair);}

.fil-ariane{
  font-size:13px;
  color:var(--teck-clair);
  margin-bottom:28px;
}
.fil-ariane a:hover{color:var(--teck);text-decoration:underline;}

.fiche-info .cat-label{
  font-size:13px;
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--lagon-fonce);
}
.fiche-info h1{
  font-size:clamp(32px,4vw,46px);
  margin-top:12px;
}
.fiche-info .description{
  margin-top:20px;
  font-size:17px;
  color:var(--teck-clair);
  max-width:48ch;
}

.tailles-titre{
  margin-top:36px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--teck);
}
.tailles-liste{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.taille-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  background:var(--blanc-casse);
  border:1px solid var(--ligne);
  border-radius:12px;
}
.taille-item .dim{
  font-size:15px;
  font-weight:500;
}
.taille-item .px{
  font-family:var(--serif);
  font-size:19px;
  color:var(--soleil-fonce);
}

.fiche-cta{
  margin-top:36px;
  padding:24px;
  background:var(--lagon);
  border-radius:16px;
  color:var(--blanc-casse);
}
.fiche-cta p{
  font-size:14px;
  opacity:0.92;
  margin:0 0 14px;
}
.fiche-cta .btn{
  background:var(--blanc-casse);
  color:var(--lagon-fonce);
}
.fiche-cta .btn:hover{
  background:var(--teck);
  color:var(--blanc-casse);
}

@media (max-width:860px){
  .fiche-grid{grid-template-columns:1fr;gap:36px;}
}

/* ============================== PÉPINIÈRES ============================== */
.pepiniere-card{
  background:var(--blanc-casse);
  border:1px solid var(--ligne);
  border-radius:18px;
  padding:36px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:28px;
  align-items:center;
}
.pepiniere-card .pin{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--soleil);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.pepiniere-card h3{font-size:24px;}
.pepiniere-card .adresse{
  margin-top:6px;
  color:var(--teck-clair);
  font-size:15px;
}
@media (max-width:700px){
  .pepiniere-card{grid-template-columns:1fr;text-align:left;}
}

/* ============================== À PROPOS ============================== */
.about-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}
.about-grid img{
  border-radius:20px;
  object-fit:cover;
}
.about-text p{
  margin-top:18px;
  color:var(--teck-clair);
  font-size:17px;
  max-width:50ch;
}
@media (max-width:860px){
  .about-grid{grid-template-columns:1fr;}
}

/* ============================== BANDE CTA ============================== */
.cta-bande{
  background:var(--teck);
  color:var(--blanc-casse);
  border-radius:24px;
  padding:56px;
  text-align:center;
}
.cta-bande h2{color:var(--blanc-casse);font-size:clamp(26px,3.2vw,38px);}
.cta-bande p{
  margin-top:14px;
  opacity:0.85;
  max-width:48ch;
  margin-inline:auto;
}
.cta-bande .actions{
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.cta-bande .btn-primaire{background:var(--soleil);color:var(--teck);}
.cta-bande .btn-primaire:hover{background:var(--blanc-casse);}
.cta-bande .btn-secondaire{border-color:var(--blanc-casse);color:var(--blanc-casse);}
.cta-bande .btn-secondaire:hover{background:var(--blanc-casse);color:var(--teck);}

/* ============================== FOOTER ============================== */
footer{
  border-top:1px solid var(--ligne);
  padding:48px 0 32px;
  margin-top:40px;
}
.footer-grid{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:32px;
}
.footer-brand .brand-text{font-size:19px;}
.footer-brand p{
  margin-top:10px;
  font-size:14px;
  color:var(--teck-clair);
  max-width:34ch;
}
.footer-links{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
}
.footer-col h4{
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--lagon-fonce);
  margin-bottom:14px;
}
.footer-col a{
  display:block;
  font-size:14px;
  color:var(--teck-clair);
  padding:5px 0;
}
.footer-col a:hover{color:var(--teck);}
.footer-bottom{
  margin-top:40px;
  padding-top:24px;
  border-top:1px solid var(--ligne);
  font-size:13px;
  color:var(--teck-clair);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}

/* ============================== UTILITAIRES ============================== */
.signature-divider{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 8px;
}
.signature-divider .ligne{
  height:1px;
  flex:1;
  background:var(--ligne);
}

/* ============================== AJOUTS MULTI-CATÉGORIES ============================== */

/* Grille 8 catégories sur l'accueil */
.categories-grid.huit{
  grid-template-columns:repeat(4,1fr);
}
@media (max-width:980px){
  .categories-grid.huit{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .categories-grid.huit{grid-template-columns:1fr;}
}

/* Navigation par pills entre catégories */
.cat-nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:32px;
}
.cat-pill{
  padding:9px 18px;
  border-radius:100px;
  border:1px solid var(--ligne);
  background:var(--blanc-casse);
  font-size:14px;
  font-weight:500;
  color:var(--teck-clair);
  transition:all .15s ease;
  white-space:nowrap;
}
.cat-pill:hover{
  border-color:var(--teck);
  color:var(--teck);
}
.cat-pill.active{
  background:var(--teck);
  color:var(--blanc-casse);
  border-color:var(--teck);
}

/* Configurateur coussins */
.config-coussin{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:14px;
}
.config-coussin label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  font-weight:600;
  color:var(--teck);
}
.config-coussin select{
  padding:13px 16px;
  border-radius:12px;
  border:1px solid var(--ligne);
  background:var(--blanc-casse);
  font-size:15px;
  font-family:var(--sans);
  color:var(--teck);
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233D2B1F' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
}
.config-coussin select:focus-visible{
  outline:2px solid var(--lagon-fonce);
  outline-offset:2px;
}
.prix-config{
  margin-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 22px;
  background:var(--sable-clair);
  border-radius:14px;
  border:1px solid var(--ligne);
}
.prix-config span:first-child{
  font-size:14px;
  font-weight:600;
  color:var(--teck-clair);
}
.prix-config .prix-val{
  font-family:var(--serif);
  font-size:28px;
  color:var(--soleil-fonce);
}

/* ============================== BOUTON RETOUR EN HAUT ============================== */
.back-to-top{
  position:fixed;
  bottom:24px; right:24px;
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--teck);
  color:var(--blanc-casse);
  border:none; border-radius:50%;
  cursor:pointer;
  box-shadow:0 12px 28px -10px rgba(61,43,31,0.55);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease, background .2s ease;
  z-index:60;
}
.back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
.back-to-top:hover{background:var(--lagon-fonce);}

/* ============================== VÉRIFIER LA DISPONIBILITÉ ============================== */
.fiche-cta-actions{display:flex; gap:12px; flex-wrap:wrap;}
.fiche-cta .btn-dispo{
  background:transparent;
  color:var(--blanc-casse);
  border-color:rgba(250,247,240,0.6);
}
.fiche-cta .btn-dispo:hover{
  background:var(--blanc-casse);
  color:var(--lagon-fonce);
}
.dispo-num{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:16px;
  padding:13px 20px;
  border-radius:100px;
  background:rgba(250,247,240,0.15);
  color:var(--blanc-casse);
  font-family:var(--serif);
  font-size:19px;
  font-weight:600;
  letter-spacing:0.5px;
}
.dispo-num:hover{background:rgba(250,247,240,0.26);}
.dispo-num[hidden]{display:none;}

@media (max-width:860px){
  .back-to-top{bottom:18px; right:18px; width:44px; height:44px;}
}

/* ============================== LIEN INSTAGRAM (footer) ============================== */
.footer-insta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:14px;
  font-weight:500;
  color:var(--teck-clair);
  transition:color .2s ease;
}
.footer-insta:hover{color:var(--lagon-fonce);}
.footer-insta svg{flex-shrink:0;}


/* === FILTRE/TRI + RECHERCHE === */
.filtre-bar{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin:4px 0 28px;padding-bottom:18px;border-bottom:1px solid var(--ligne);}
.filtre-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--teck-clair);background:var(--sable-clair);border:1px solid var(--ligne);border-radius:999px;padding:8px 15px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.chip:hover{border-color:var(--soleil);color:var(--teck);}
.chip.active{background:var(--teck);border-color:var(--teck);color:#fff;}
.filtre-droite{display:flex;align-items:center;gap:14px;}
.tri-wrap{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;color:var(--teck-clair);}
.tri-select{font-family:var(--sans);font-size:14px;color:var(--teck);background-color:#fff;border:1px solid var(--ligne);border-radius:10px;padding:8px 32px 8px 13px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235A4636' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;}
.tri-select:hover{border-color:var(--soleil);}
.resultats-info{font-family:var(--sans);font-size:13px;color:var(--teck-clair);white-space:nowrap;}
.grille-vide{font-family:var(--serif);font-size:19px;color:var(--teck-clair);text-align:center;padding:54px 0;}
@media(max-width:640px){.filtre-droite{width:100%;justify-content:space-between;}}

.nav-search{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:transparent;color:var(--teck);cursor:pointer;border-radius:10px;transition:background .15s;margin-left:4px;}
.nav-search:hover{background:var(--sable);}
.search-overlay{position:fixed;inset:0;z-index:200;background:rgba(61,43,31,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:13vh 20px 20px;}
.search-overlay[hidden]{display:none;}
.search-panel{width:100%;max-width:620px;background:var(--blanc-casse);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;animation:searchin .18s ease;}
@keyframes searchin{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
.search-box{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--ligne);}
.search-box svg{flex:none;color:var(--teck-clair);}
.search-input{flex:1;min-width:0;border:none;background:transparent;font-family:var(--serif);font-size:20px;color:var(--teck);outline:none;}
.search-close{flex:none;border:none;background:transparent;font-size:17px;color:var(--teck-clair);cursor:pointer;width:32px;height:32px;border-radius:8px;}
.search-close:hover{background:var(--sable);color:var(--teck);}
.search-results{max-height:54vh;overflow:auto;padding:8px;}
.search-hint{font-family:var(--sans);font-size:14px;color:var(--teck-clair);text-align:center;padding:28px 16px;}
.search-res{display:flex;align-items:center;gap:14px;padding:10px;border-radius:12px;text-decoration:none;color:var(--teck);}
.search-res:hover{background:var(--sable-clair);}
.search-res img{width:54px;height:54px;object-fit:cover;border-radius:9px;background:var(--sable);flex:none;}
.sr-info{display:flex;flex-direction:column;flex:1;min-width:0;}
.sr-name{font-family:var(--serif);font-size:16px;line-height:1.2;}
.sr-cat{font-family:var(--sans);font-size:12px;color:var(--teck-clair);margin-top:2px;}
.sr-prix{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--soleil-fonce);white-space:nowrap;}
@media(max-width:640px){.search-panel{max-width:none;}.search-input{font-size:18px;}}

.fiche-note{display:flex;align-items:center;gap:9px;margin:14px 0 4px;padding:11px 14px;background:var(--sable-clair);border:1px solid var(--ligne);border-left:3px solid var(--lagon);border-radius:10px;font-family:var(--sans);font-size:14px;color:var(--teck-clair);}
.fiche-note svg{flex:none;color:var(--lagon-fonce);}

/* ============================== PAGE GALERIE ============================== */
.galerie-flow{
  columns:2;
  column-gap:22px;
  margin-top:40px;
}
.galerie-flow figure{
  margin:0 0 22px;
  break-inside:avoid;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--ligne);
  background:var(--blanc-casse);
}
.galerie-flow img{
  width:100%;
  height:auto;
  display:block;
  transition:transform .45s ease;
}
.galerie-flow figure:hover img{transform:scale(1.035);}
.galerie-texte{
  max-width:68ch;
  margin-top:16px;
  color:var(--teck-clair);
  font-size:17px;
  line-height:1.75;
}
@media (max-width:640px){
  .galerie-flow{columns:1;}
}

/* ============================== BANDEAU SOLDES ============================== */
.bandeau-soldes{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  background:linear-gradient(100deg, var(--soleil-fonce) 0%, var(--soleil) 30%, var(--soleil) 70%, var(--soleil-fonce) 100%);
  color:var(--teck);
  padding:12px 24px;
  text-decoration:none;
  transition:filter .25s ease;
}
.bandeau-soldes:hover{filter:brightness(1.06);}
.bandeau-soldes .soldes-tag{
  flex:none;
  font-family:var(--sans);
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  background:var(--teck);
  color:var(--sable-clair);
  padding:5px 12px;
  border-radius:999px;
}
.bandeau-soldes .soldes-texte{
  font-family:var(--sans);
  font-size:15.5px;
  font-weight:500;
  letter-spacing:.01em;
}
.bandeau-soldes .soldes-texte b{
  font-family:var(--serif);
  font-style:italic;
  font-weight:600;
  font-size:21px;
  padding:0 2px;
}
.bandeau-soldes svg{
  flex:none;
  transition:transform .25s ease;
}
.bandeau-soldes:hover svg{transform:translateX(4px);}
@media (max-width:560px){
  .bandeau-soldes{gap:10px; padding:11px 16px;}
  .bandeau-soldes .soldes-texte{font-size:14px;}
  .bandeau-soldes .soldes-texte b{font-size:18px;}
}