/* ========================================
   TITI BROCANTE – Style global PRO (Version C, premium)
   Palette: vintage doré (champagne)
   -> Header unique, sans doublons
======================================== */

/* ===== Variables de thème ===== */
:root{
  --bg:#f6efe4;
  --panel:#fffaf3;
  --text:#2d1c13;
  --muted:#7a675b;
  --brand:#d2b678;     /* doré champagne */
  --brand-ink:#2a1a12;
  --accent:#c8975d;    /* cuivre/doré vif */
  --border:rgba(100,70,40,0.22);
  --radius:18px;
  --shadow:0 10px 24px rgba(100,70,40,.16);
  --ring:#e0b87f;
}

/* ===== Reset & base ===== */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Raleway', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  color:var(--text); line-height:1.7;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background: linear-gradient(135deg, #fcfaf6 0%, #f4e7cf 45%, #e8d3a3 100%) fixed;
}
a{color:inherit;text-decoration:none;transition:.25s ease}
a:hover{color:var(--accent)}
img{display:block;max-width:100%;height:auto}
.container{width:min(1200px,92vw);margin:0 auto}

/* ===== Header PREMIUM (Version C) — UNE SEULE VERSION ===== */
/* Utilise <header class="site-header"> dans l’HTML */
header.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.80);
  backdrop-filter:saturate(1.12) blur(10px);
  border-bottom:1px solid rgba(210,182,120,.45);
  transition:background .25s ease, box-shadow .25s ease;
}
header.site-header.scrolled{ background:rgba(255,255,255,.92); box-shadow:0 10px 26px rgba(0,0,0,.08); }

header.site-header .container.nav{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:8px 0; flex-wrap:wrap; /* ✅ peut passer sur 2 lignes si besoin */
}

/* Bloc marque (gauche) */
header.site-header .brand{
  display:flex; align-items:center; gap:10px; flex-shrink:0; text-decoration:none;
}
header.site-header .logo-img{ width:40px; height:40px; border-radius:10px; background:var(--brand); padding:4px; box-shadow:var(--shadow) }
header.site-header .brand-name{ font-weight:900; white-space:nowrap; color:var(--text); }
header.site-header .brand-tagline{ display:none !important; } /* on la masque pour gagner de la place */

/* Menu (centre) — maintenant plus compact & peut se mettre sur 2 lignes */
header.site-header .menu{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex:1 1 auto; min-width:0; flex-wrap:wrap; /* ✅ wrap au lieu de tout forcer sur une ligne */
  overflow:visible; /* ✅ pas de scroll horizontal caché */
}
header.site-header .menu::-webkit-scrollbar{ display:none; }
header.site-header .menu a{
  position:relative; display:inline-block; white-space:nowrap;
  padding:6px 12px; /* ✅ moins gros, donc moins large */
  border-radius:999px;
  border:1px solid rgba(210,182,120,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.12));
  font-weight:800; color:#3b2f2f; letter-spacing:.2px;
  font-size:0.9rem; /* ✅ texte un peu plus petit */
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(130,90,40,.10);
}
header.site-header .menu a:hover{
  transform:translateY(-2px);
  border-color:#d8bd86; box-shadow:0 10px 24px rgba(181,101,29,.18);
}
header.site-header .menu a.active{
  background:linear-gradient(180deg,#d8bd86,#c89a5c);
  color:#fff; border-color:#b88542;
}
header.site-header .menu a::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-6px; height:3px; border-radius:3px;
  background:linear-gradient(90deg,#b77b3c 0%,#c49a6c 100%); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
header.site-header .menu a:hover::after,
header.site-header .menu a.active::after{ transform:scaleX(1); }

/* Sélecteur de langue (droite) */
header.site-header .lang-switch{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
}
header.site-header .lang-switch .chip{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:32px; padding:0 10px;
  border-radius:999px; border:1px solid rgba(196,154,108,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.12));
  font-weight:800; cursor:pointer; transition:all .2s ease; white-space:nowrap;
}
header.site-header .lang-switch .chip:hover,
header.site-header .lang-switch .chip.active{
  background:linear-gradient(180deg,#d8bd86,#c89a5c); color:#fff; border-color:#b88542;
}
/* petits drapeaux (optionnels) via data-lang */
header.site-header .lang-switch .chip::before{ content:""; margin-right:6px; transform:translateY(1px); }
header.site-header .lang-switch .chip[data-lang="fr"]::before{ content:"🇫🇷"; }
header.site-header .lang-switch .chip[data-lang="nl"]::before{ content:"🇳🇱"; }
header.site-header .lang-switch .chip[data-lang="de"]::before{ content:"🇩🇪"; }
header.site-header .lang-switch .chip[data-lang="en"]::before{ content:"🇬🇧"; }

/* Burger (mobile) */
header.site-header .nav-toggle{
  display:none; width:42px; height:34px; border:1px solid rgba(210,182,120,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.2));
  border-radius:10px; position:relative; cursor:pointer; flex-shrink:0;
}
header.site-header .nav-toggle span{
  position:absolute; left:9px; right:9px; height:2px; background:#5c4636; border-radius:2px;
}
header.site-header .nav-toggle span:nth-child(1){ top:9px; }
header.site-header .nav-toggle span:nth-child(2){ top:16px; }
header.site-header .nav-toggle span:nth-child(3){ top:23px; }

/* Compactage supplémentaire sur écrans moyens */
@media (max-width: 1100px){
  header.site-header .menu a{
    padding:5px 10px;
    font-size:0.8rem;
  }
  header.site-header .lang-switch .chip{
    min-width:36px;
    padding:0 6px;
    font-size:0.75rem;
  }
}

/* Responsive : < 860px -> menu coulissant (burger) */
@media (max-width: 860px){
  header.site-header .nav-toggle{ display:block; }
  header.site-header .brand-tagline{ display:block !important; color:var(--muted); font-size:12px; line-height:1; }

  header.site-header .menu{
    position:absolute; left:0; right:0; top:100%;
    display:grid; grid-template-columns:1fr; gap:8px;
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
    border-bottom:1px solid rgba(210,182,120,.35);
    padding:12px 16px; transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
  /* Ajouter/retirer la classe .open sur <header> côté JS */
  header.site-header.open .menu{ transform:translateY(0); opacity:1; pointer-events:auto; }
  header.site-header .menu a{ width:100%; text-align:center; }
  header.site-header .lang-switch{ margin-left:auto; }
}

/* — Micro-ajustements très étroits — */
@media (max-width: 760px){
  header.site-header .menu{ overflow:auto; scrollbar-width:none; }
  header.site-header .menu::-webkit-scrollbar{ display:none; }
  header.site-header .lang-switch .chip{ min-width:38px; height:30px; padding:0 8px; }
}

/* ===== Hero / Titres ===== */
.hero{padding:60px 0 40px}
.hero .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;align-items:center}
.title{font-family:'Playfair Display',serif;font-size:clamp(28px,4.5vw,48px);margin-bottom:10px;line-height:1.2}
.section-title{font-family:'Playfair Display',serif;font-size:clamp(24px,4vw,34px);margin:0 0 10px}
.subtitle{color:var(--muted);margin-bottom:18px;font-size:18px}
.illus{aspect-ratio:4/3;display:grid;place-items:center;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);box-shadow:var(--shadow)}
.hero-img{width:100%;transition:transform .5s ease, filter .5s ease;filter:saturate(1.02) contrast(1.02)}
.hero .illus:hover .hero-img{transform:scale(1.02);filter:saturate(1.06) contrast(1.06)}

/* ===== Boutons ===== */
.cta{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-weight:700;letter-spacing:.5px;border:1px solid var(--brand);box-shadow:var(--shadow)}
.cta.primary{background:linear-gradient(145deg, #dec392, #cfa86f);color:var(--brand-ink)}
.cta.secondary{background:transparent;color:var(--accent)}
.cta:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ===== Panels / Cards / Grilles ===== */
.panel{background:#fff;border:1px solid rgba(0,0,0,.06);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.05);padding:28px;margin-bottom:20px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{overflow:hidden;border-radius:var(--radius);background:var(--panel);border:1px solid var(--border);transition:.25s ease;box-shadow:var(--shadow)}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(120,80,40,.22);border-color:rgba(210,182,120,.45)}
.thumb{position:relative;aspect-ratio:4/3;background:#f2e7d6;overflow:hidden;border-bottom:1px solid var(--border)}
.thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform .45s ease, filter .45s ease;filter:saturate(1.03) contrast(1.03);cursor:zoom-in}
.card:hover .thumb img{transform:scale(1.05);filter:saturate(1.1) contrast(1.08)}
.thumb .label{position:absolute;left:10px;bottom:10px;padding:6px 10px;background:rgba(0,0,0,.45);color:#fff;font-size:13px;border-radius:8px;backdrop-filter:blur(3px)}

.info{padding:14px;text-align:center}
.name{font-weight:800;margin:0 0 6px}
.meta{font-size:14px;color:var(--muted);margin:0}
.price{
  margin:8px 0 12px;font-weight:800;font-size:18px;
  background:linear-gradient(90deg,#b77b3c 0%,#c49a6c 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ===== Bienvenue (centré) ===== */
.welcome-section{text-align:center;background:linear-gradient(180deg,#fffaf3,#f6efe4);padding:40px 20px;border-radius:18px;box-shadow:var(--shadow);margin:30px auto;max-width:900px}
.welcome-title{font-family:'Playfair Display',serif;font-size:clamp(28px,4vw,40px);margin-bottom:14px;color:var(--text)}
.welcome-text{font-size:17px;line-height:1.8;color:var(--muted);margin-bottom:14px}
.welcome-text strong{color:var(--accent);font-weight:700}
.welcome-text em{color:var(--brand);font-style:normal;font-weight:600}

/* ===== Témoignages ===== */
.testimonials{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start}
.avatar{width:42px;height:42px;border-radius:50%;background:#e0c7a2;display:grid;place-items:center;font-weight:800}

/* ===== Footer ===== */
footer{border-top:2px solid var(--brand);color:var(--muted);text-align:center;padding:24px 0;margin-top:32px}
.foot-links{display:flex;gap:18px;justify-content:center;margin-top:8px}

/* ===== Mode compact (espacements réduits) ===== */
section,main{padding:24px 0!important}
.hero{padding:36px 0 24px!important}
.panel{padding:20px!important;margin-bottom:18px!important}
.grid{gap:12px!important}
.menu{gap:10px!important}
.menu a{padding:10px 16px!important}
.title,.section-title{margin-bottom:8px!important}
.subtitle{margin-bottom:10px!important}
p{margin-bottom:10px!important;line-height:1.6!important}
footer{padding:18px 0!important;margin-top:24px!important}

/* ===== Animations douces ===== */
.reveal-on-scroll{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}
.reveal-on-scroll.in-view{opacity:1;transform:none}
.reveal-img{opacity:0;transform:scale(.98);transition:opacity .6s ease,transform .6s ease}
.reveal-img.in-view-img{opacity:1;transform:none}

/* ===== Page hero commun ===== */
.page-hero{display:grid;gap:10px;align-items:center;padding:26px 20px;border-radius:16px;background:linear-gradient(180deg,var(--panel),#efe6d8);border:1px solid var(--border);box-shadow:var(--shadow);margin:18px 0}
.page-hero .h1{font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,36px);margin:0}
.page-hero .lead{color:var(--muted);margin:2px 0 0}
.page-hero .crumbs{font-size:13px;color:var(--muted)}
.page-hero.grid{grid-template-columns:1fr 360px}
.page-hero-ill{aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--border);background:#f2e7d6}
.page-hero-ill img{width:100%;height:100%;object-fit:cover;display:block}
/* variante premium utilisée sur /paiement */
.page-hero.premium{display:grid;gap:10px;align-items:center;padding:28px 22px;margin:18px 0;border-radius:20px;background:linear-gradient(180deg,var(--panel),#efe6d8);border:1px solid rgba(196,154,108,.35);box-shadow:0 10px 30px rgba(120,80,40,.18)}
.page-hero .h1{font-family:'Playfair Display',serif;font-size:clamp(26px,4vw,38px);margin:0}
.page-hero .lead{color:var(--muted);margin:4px 0 0}

/* ===== Formulaires / colonnes ===== */
form{display:grid;gap:12px}
.cols{display:grid;gap:16px;grid-template-columns:1fr 1fr}
label{font-size:14px;color:var(--muted)}
input,textarea,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#f6efe1;color:var(--text)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--ring);outline-offset:2px}
@media(max-width:1000px){.hero .wrap{grid-template-columns:1fr}}
@media(max-width:720px){
  .page-hero.grid{grid-template-columns:1fr}
  .cols{grid-template-columns:1fr}
}

/* ===== LIGHTBOX ===== */
#lightbox{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); justify-content:center; align-items:center; z-index:2147483647 !important; }
#lightbox.open{ display:flex !important; }
#lightbox .lightbox-wrap{ position:relative; max-width:90vw; max-height:80vh; overflow:hidden; border-radius:12px; box-shadow:0 0 25px rgba(0,0,0,.45); background:#000; }
#lightbox .lightbox-img{ display:block; width:auto !important; height:auto !important; max-width:90vw; max-height:80vh; transform-origin:0 0; cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:none; }
#lightbox.dragging .lightbox-img{ cursor:grabbing; }
#lightbox .lightbox-close{ position:absolute; top:16px; right:24px; color:#fff; font-size:40px; font-weight:800; cursor:pointer; text-shadow:0 2px 10px rgba(0,0,0,.6); }
#lightbox .lightbox-close:hover{ color:var(--brand); }
#lightbox .lightbox-nav{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); display:flex; justify-content:space-between; padding:0 24px; color:#fff; font-size:42px; user-select:none; }
#lightbox .lightbox-nav span{ cursor:pointer; text-shadow:0 2px 10px rgba(0,0,0,.6); }
#lightbox .lightbox-nav span:hover{ color:var(--brand); }
.hint{ position:absolute; left:16px; bottom:14px; color:#fff; font-size:13px; opacity:.85; user-select:none; }

/* ===== Lien d'évitement (accessibilité) ===== */
.skip{
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip:focus,.skip:focus-visible{
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 10px 14px;
  border-radius: 10px; background: #fff; color: #111;
  border: 2px solid var(--brand); box-shadow: 0 6px 18px rgba(0,0,0,.15); z-index: 10000;
}

/* ===== Petits extras (avis étoiles) ===== */
.stars{ display:inline-flex; gap:2px; line-height:1; }
.stars .star{
  font-size:18px; font-weight:900; letter-spacing:1px;
  background: linear-gradient(180deg,#fff2a8 0%, #f2c75c 45%, #d4af37 70%, #b8860b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.12));
}
.stars .star.empty{ background:none; color:#d6cfbe; -webkit-text-fill-color:#d6cfbe; }
.stars.lg .star{ font-size:24px; }

/* === Bouton paiement premium — sans rien casser ailleurs === */
#submit-btn{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 22px;
  border-radius:14px;
  border:1px solid rgba(210,182,120,.65);
  background:
    linear-gradient(180deg,#ecd8ac 0%,#d8b57b 60%,#cfa86f 100%);
  color:var(--brand-ink);
  font-weight:900; letter-spacing:.3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 24px rgba(130,90,40,.18);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor:pointer;
  will-change:transform, box-shadow;
}
#submit-btn::before{
  content:"";
  width:18px; height:18px; flex:0 0 18px;
  background: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%232a1a12' d='M12 2a5 5 0 0 1 5 5v2h1.5A1.5 1.5 0 0 1 20 10.5v8A1.5 1.5 0 0 1 18.5 20h-13A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H7V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v2h6V7a3 3 0 0 0-3-3Z'/>\
  </svg>") no-repeat center/100%;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
#submit-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 14px 28px rgba(181,101,29,.22);
  filter:saturate(1.02) contrast(1.02);
}
#submit-btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 18px rgba(130,90,40,.16);
}
#submit-btn:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
}
#submit-btn:disabled{
  cursor:not-allowed;
  filter:grayscale(.2) saturate(.8) opacity(.85);
  background:linear-gradient(180deg,#e8ddc2,#d7c19a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
@media (hover:hover){
  #submit-btn:hover{
    background:linear-gradient(180deg,#e7cf9e,#cfa86f);
  }
}

/* === Bouton "Envoyer" premium doré (Titi Brocante) === */
#sendBtn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border-radius:14px;
  border:1px solid rgba(210,182,120,.65);
  background:linear-gradient(180deg,#ecd8ac 0%,#d8b57b 60%,#cfa86f 100%);
  color:var(--brand-ink);
  font-weight:900;
  letter-spacing:.3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 10px 24px rgba(130,90,40,.18);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  cursor:pointer;
  will-change:transform, box-shadow;
}
#sendBtn::before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  background:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <path fill='%232a1a12' d='M12 2a5 5 0 0 1 5 5v2h1.5A1.5 1.5 0 0 1 20 10.5v8A1.5 1.5 0 0 1 18.5 20h-13A1.5 1.5 0 0 1 4 18.5v-8A1.5 1.5 0 0 1 5.5 9H7V7a5 5 0 0 1 5-5Zm0 2a3 3 0 0 0-3 3v2h6V7a3 3 0 0 0-3-3Z'/>\
  </svg>") no-repeat center/100%;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.35));
}
#sendBtn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 14px 28px rgba(181,101,29,.22);
  filter:saturate(1.05) contrast(1.05);
}
#sendBtn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 6px 18px rgba(130,90,40,.16);
}
#sendBtn:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
}
#sendBtn[disabled]{
  cursor:not-allowed;
  opacity:.8;
  background:linear-gradient(180deg,#e9d9b6,#d7c19a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}

/* Icônes sociales dans la section coordonnées */
.social-icon img {
  display:inline-block;
  vertical-align:middle;
  margin-left:6px;
  transition:transform .2s ease;
}
.social-icon:hover img {
  transform:scale(1.1);
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.2));
}

/* =========================================================
   ⤵️ BOUTIQUE — AJOUTS SCOPÉS, sans casser les autres pages
   - Filtre catégories
   - Slider de vignettes (thumb.slider)
   - Badges (vendu / demande / enchères)
   - Pastille de catégorie
   - Description produit
   - Bouton enchères
========================================================= */

/* Barre de filtre (catégories) */
.filter-bar{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  padding:12px; border:1px solid var(--border); border-radius:12px;
  background:linear-gradient(180deg,#fff,#fffaf3);
  box-shadow:0 6px 18px rgba(0,0,0,.04);
  margin:8px 0 22px;
}
select.cat-select{
  padding:10px 12px; border-radius:12px; border:1px solid var(--border);
  background:#f6efe1; color:var(--text);
}
.filter-bar .count{ color:var(--muted); font-weight:700; }

/* Carte produit — éléments supplémentaires */
.info .desc{
  margin:0 0 12px; color:var(--text); font-size:14px; line-height:1.5;
}
.cat-chip{
  display:inline-block; margin:0 0 8px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(196,154,108,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
  font-weight:700; font-size:12px; color:#7a675b;
}

/* Badges d’état (prix logique) */
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(196,154,108,.45);
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
  font-weight:800; font-size:12px; color:#7a675b;
}
.badge.sold{ background:linear-gradient(180deg,#f6d9d2,#f2c2b6); color:#6b3a2e; }
.badge.ask{  background:linear-gradient(180deg,#fff3d6,#ffe4a6); color:#6a4d16; }
.badge.auct{ background:linear-gradient(180deg,#e2f1ff,#cfe6ff); color:#1a4d7a; }

/* CTA enchères (quand price===2) */
.cta.auction{
  border:1px solid rgba(60,100,160,.35);
  background:linear-gradient(180deg,#e8f2ff,#d7e8ff);
  color:#0f365c; font-weight:900;
}
.cta.auction:hover{
  background:linear-gradient(180deg,#dff0ff,#cae2ff);
  border-color:#8db5e8; color:#0a2a49;
}

/* Slider dans les cartes (compatible avec ton HTML) */
.thumb.slider{ position:relative; aspect-ratio:4/3; overflow:hidden; border-bottom:1px solid var(--border); background:#f2e7d6; }
.thumb .slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transform:scale(1); transition:opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1), filter .45s ease;
  filter:saturate(1.03) contrast(1.03); cursor:zoom-in;
}
.thumb .slide.active{ opacity:1; }
.card:hover .thumb .slide.active{ transform:scale(1.04); filter:saturate(1.08) contrast(1.06); }

/* Boutons prev/next */
.thumb .nav{
  position:absolute; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.78); backdrop-filter:blur(4px); display:grid; place-items:center; font-weight:900; cursor:pointer; user-select:none;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.thumb .nav.prev{ left:8px; }
.thumb .nav.next{ right:8px; }
.thumb .nav:hover{ border-color:rgba(196,154,108,.6); }

/* Petits points du slider */
.thumb .dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; gap:6px; justify-content:center; }
.thumb .dot{ width:8px; height:8px; border:none; border-radius:999px; background:rgba(255,255,255,.7); box-shadow:0 1px 3px rgba(0,0,0,.2); }
.thumb .dot.active{ background:var(--brand); }

/* Fine cohérence des prix/CTA quand présent dans les cartes */
.card .price{ margin-top:6px; }
.card .cta{ min-width:140px; }

/* Responsive carte produit */
@media (max-width:680px){
  .filter-bar{ padding:10px; }
  .card .cta{ width:100%; }
}
/* =======================================================
   SURCOUCHE PREMIUM (ajouts, ne remplace rien)
   -> à coller APRES tout ton CSS actuel
======================================================= */

/* Texte légèrement plus clean */
body{
  text-rendering: optimizeLegibility;
}

/* --------- HEADER : effet plus luxe & net --------- */
header.site-header{
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

header.site-header.scrolled{
  box-shadow: 0 14px 32px rgba(0,0,0,.12);
}

/* Petite lueur intérieure sur les boutons de menu */
header.site-header .menu a{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    0 6px 18px rgba(130,90,40,.12);
}

header.site-header .menu a:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 12px 26px rgba(181,101,29,.22);
}

/* Lang chips un peu plus “bijou” */
header.site-header .lang-switch .chip{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 6px 16px rgba(130,90,40,.16);
}

/* --------- IMAGES : cadre & relief doux --------- */
.illus,
.thumb,
.page-hero-ill,
.welcome-section,
.page-hero.premium,
.card{
  position: relative;
  overflow: hidden;
}

.illus::before,
.thumb::before,
.page-hero-ill::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.45),
    inset 0 0 0 1.5px rgba(160,110,55,.12);
  mix-blend-mode:soft-light;
}

/* Légère variation de lumière au survol */
.illus img,
.thumb img,
.page-hero-ill img{
  transition: transform .5s ease, filter .5s ease;
}

.illus:hover img,
.thumb:hover img,
.page-hero-ill:hover img{
  transform: scale(1.03);
  filter: saturate(1.08) contrast(1.07);
}

/* --------- CARTES PRODUITS & PANELS --------- */
.card{
  backdrop-filter: blur(6px);
}

.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(120,80,40,.26);
}

/* Cadre subtil autour des panels (paiement, contact, etc.) */
.panel{
  border-radius: 20px;
  box-shadow:
    0 10px 26px rgba(0,0,0,.08),
    0 0 0 1px rgba(255,255,255,.5);
}

/* --------- SECTIONS HERO (titre + encart) --------- */
.hero .wrap{
  row-gap: 28px;
}

.page-hero,
.page-hero.premium{
  position: relative;
}

.page-hero::after,
.page-hero.premium::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(circle at 0 0,
    rgba(255,255,255,.6) 0,
    rgba(255,255,255,0) 45%);
  opacity:.75;
}

/* --------- TEXTE : titres plus “galerie” --------- */
.title,
.section-title,
.page-hero .h1,
.welcome-title{
  letter-spacing:.03em;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}

.subtitle,
.lead,
.welcome-text{
  color: var(--muted);
}

/* --------- BOUTONS / CTA : aspect bijou --------- */
.cta,
#submit-btn,
#sendBtn,
button,
input[type="submit"]{
  transform: translateY(0);
}

.cta.primary,
#submit-btn,
#sendBtn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 10px 24px rgba(130,90,40,.22);
}

.cta.primary:hover,
#submit-btn:hover,
#sendBtn:hover{
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    0 16px 32px rgba(181,101,29,.26);
}

/* Boutons “liens” dans les cartes produits -> largeur uniforme */
.card .cta{
  min-width: 150px;
  justify-content: center;
}

/* --------- AVIS / TÉMOIGNAGES --------- */
.testimonials .quote{
  background: linear-gradient(180deg,#fffaf3,#f6efe4);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
}

.avatar{
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* --------- MICRO-ANIMATIONS RÉVÉLATION --------- */
.reveal-on-scroll{
  will-change: transform, opacity;
}

/* Si tu ajoutes la classe .in-view via JS, l’effet sera très fluide */
.reveal-on-scroll.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* --------- FOOTER un peu plus marqué --------- */
footer{
  background: linear-gradient(180deg,#f6efe4,#eedfbf);
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
}
/* ==========================================
   FINITIONS PREMIUM – PAGE BOUTIQUE
   (surcouche légère, rien ne remplace)
========================================== */

/* Cartes produits : un peu plus "galerie d’art" */
.grid .card{
  border-radius: 22px;
  overflow: hidden;
}

/* Bandeau filtre : aspect carte luxe */
.filter-bar{
  border-radius: 20px;
  border: 1px solid rgba(210,182,120,.45);
  background: linear-gradient(145deg,#fffefb,#fff7e8);
  box-shadow:
    0 10px 26px rgba(0,0,0,.06),
    0 0 0 1px rgba(255,255,255,.7);
}
.filter-bar .count{
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Select catégorie : plus chic */
select.cat-select{
  border-radius: 999px;
  border: 1px solid rgba(210,182,120,.55);
  background: linear-gradient(180deg,#faf0dd,#f3e1c0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 4px 12px rgba(160,110,55,.18);
  font-weight: 600;
}

/* Images de produits : focus, contraste doux */
.thumb.slider,
.thumb{
  background: #f1e2ce;
}

.thumb .slide,
.thumb img{
  filter: saturate(1.04) contrast(1.04);
}

.thumb .slide.active,
.thumb:hover img{
  filter: saturate(1.10) contrast(1.08);
}

/* Petit dégradé en bas des photos pour effet premium */
.thumb::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:35%;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.12) 60%,rgba(0,0,0,.22) 100%);
  opacity:.45;
}

/* Pastille catégorie au-dessus du titre : mieux posée */
.info .cat-chip{
  margin-top:4px;
  margin-bottom:10px;
}

/* Typo des titres produits : légèrement plus compacte */
.info .name{
  font-size:18px;
  line-height:1.3;
}

/* Texte descriptif : un tout petit peu plus clair */
.info .desc{
  color:#8a7464;
}

/* Dots du slider : plus discrets, façon bijou */
.thumb .dots{
  bottom:12px;
}
.thumb .dot{
  width:7px;
  height:7px;
  background:rgba(255,255,255,.8);
}
.thumb .dot.active{
  background:var(--brand);
  transform:scale(1.15);
}

/* Flèches slider : moins envahissantes */
.thumb .nav{
  width:32px;
  height:32px;
  opacity:.82;
}
.thumb .nav:hover{
  opacity:1;
}

/* Cartes alignées visuellement (titre / bouton) */
.grid{
  align-items:stretch;
}
.grid .card{
  display:flex;
  flex-direction:column;
}
.grid .card .info{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.grid .card .price{
  margin-top:4px;
}
.grid .card .cta{
  margin-top:auto;
}
/* ==========================================
   FINITIONS PREMIUM – Héros avec grande photo
   (Musée / Collection / Accueil)
========================================== */

/* Mise en page un peu plus “exposition” */
.hero .wrap{
  column-gap: 38px;
  align-items: stretch;
}

/* Bloc photo façon vitrine de galerie */
.hero .illus{
  position: relative;
  border-radius: 26px;
  padding: 14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.9) 0, rgba(255,255,255,.3) 40%, transparent 70%),
    linear-gradient(135deg,#f3e2c8,#e8cfaa);
  box-shadow:
    0 18px 40px rgba(120,80,40,.30),
    0 0 0 1px rgba(255,255,255,.6);
  border: 1px solid rgba(160,112,60,.28);
}

/* L’image elle-même, bien encadrée */
.hero .hero-img{
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow:
    0 14px 30px rgba(60,40,20,.30),
    0 0 0 1px rgba(160,112,60,.15);
  filter: saturate(1.05) contrast(1.04);
  transform: translateY(0);
}

/* Petit halo au survol, comme une œuvre éclairée */
.hero .illus:hover .hero-img{
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.10) contrast(1.08);
}

/* Ruban discret en bas du visuel (effet premium) */
.hero .illus::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:18px;
  height:60px;
  border-radius: 18px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 80%);
  pointer-events:none;
  opacity:.55;
}

/* Sur mobile, on simplifie un peu pour garder l’air léger */
@media (max-width: 720px){
  .hero .wrap{
    row-gap: 22px;
  }
  .hero .illus{
    padding:10px;
    border-radius:22px;
  }
  .hero .hero-img{
    border-radius:18px;
  }
}

/* ==========================================
   FINITIONS PREMIUM – Bloc “Objets emblématiques”
   (le panel juste en dessous)
========================================== */

section .panel:first-of-type{
  background: linear-gradient(180deg,#fffdf8,#f7ecdd);
  border-radius: 22px;
  box-shadow:
    0 16px 40px rgba(120,80,40,.18),
    0 0 0 1px rgba(255,255,255,.8);
}

/* Les images dans cette zone gagnent un peu de relief */
section .panel:first-of-type .thumb img,
section .panel:first-of-type .thumb .slide{
  filter: saturate(1.06) contrast(1.06);
}

section .panel:first-of-type .card:hover .thumb img,
section .panel:first-of-type .card:hover .thumb .slide.active{
  filter: saturate(1.12) contrast(1.10);
}
/* Bloc des consentements dans le formulaire d'avis */
.reviews-consents {
  margin: 1.6rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;        /* ✔️ Resserre l’espace entre les deux cases */
}

/* Chaque ligne (case + texte) */
.reviews-consents label {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.45rem;        /* ✔️ Resserre l’espace case → texte */
  font-size: 0.92rem;  /* ✔️ Texte légèrement plus compact */
  line-height: 1.35;
  color: #8a6f57;      /* couleur douce premium */
  max-width: 34rem;    /* ✔️ Largeur un peu réduite */
}

/* Case à cocher */
.reviews-consents input[type="checkbox"] {
  margin-top: 0.12rem; /* ✔️ Ajuste l’alignement vertical */
  transform: scale(0.95); /* ✔️ Case très légèrement réduite */
  flex-shrink: 0;
}
/* ==== CORRECTIF HEADER TITI BROCANTE (ne pas toucher au reste) ==== */

/* 1) Le header n’est plus sticky : il ne recouvre plus le contenu */
header.site-header {
  position: relative;
  top: auto;
  z-index: 100;
}

/* 2) On force le menu à rester dans le flux, pas en superposition */
header.site-header .menu {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 3) On neutralise l’effet "open" qui transformait le menu en panneau flottant */
header.site-header.open .menu {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* 4) On cache définitivement le burger pour éviter les comportements bizarres */
header.site-header .nav-toggle {
  display: none !important;
}

/* 5) Sur mobile : le menu reste un simple bloc qui peut passer sur 2 lignes */
@media (max-width: 900px) {
  header.site-header .container.nav {
    flex-wrap: wrap;
  }

  header.site-header .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 6px;
  }
/* =========================================
   PATCH GLOBAL 2025 – Corrections CSS
   (version nettoyée)
========================================= */

/* 1. Tous les boutons cliquables : curseur “main” */
button,
input[type="button"],
input[type="submit"],
.cta,
.btn,
.btn-primary,
.nav-cart,
.hero a.cta,
.panel a.cta {
  cursor: pointer;
}

/* 2. Empêcher les débordements horizontaux et coller moins le contenu aux bords */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.container {
  padding-left: min(4vw, 18px);
  padding-right: min(4vw, 18px);
}

/* 3. Header / menu : meilleur comportement sur petits écrans */
@media (max-width: 900px) {
  header.site-header .container.nav {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  header.site-header .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding-top: 6px;
  }

  header.site-header .nav-right {
    margin-left: auto;
  }
}

@media (max-width: 720px) {
  header.site-header .container.nav {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  header.site-header .menu {
    width: 100%;
    justify-content: center;
  }

  header.site-header .nav-right {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}

/* 4. Images : ne débordent plus, restent responsives */
img {
  max-width: 100%;
  height: auto;
}

.thumb img,
.hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 5. Formulaires : champs bien alignés et 100% largeur dispo */
form .cols {
  align-items: flex-start;
}

form input,
form select,
form textarea {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* 6. Boutons .cta : plus confortables sur mobile */
@media (max-width: 600px) {
  .cta {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* 7. Cartes cliquables : on sent que c’est interactif */
.card a {
  cursor: pointer;
}

/* === Correction alignement modes de livraison === */
.shipping-card {
  position: relative;
}

.shipping-label {
  display: flex !important;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  cursor: pointer;
}

/* Le petit rond */
.shipping-label input[type="radio"] {
  margin-top: 4px;
  flex: 0 0 auto;
}

/* Le texte prend toute la place à droite du rond */
.shipping-content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Titre + prix sur la même ligne */
.shipping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* On force le texte à s’aligner à gauche et à revenir à la ligne normalement */
.shipping-header strong,
.shipping-header .shipping-price,
.shipping-card .meta {
  text-align: left;
  white-space: normal;
}

/* === Logos partenaires transport (La Poste, Colissimo, Mondial Relay) === */
.partner-logos {
  margin-top: 8px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px dashed rgba(196,154,108,.45);
  background: #fffdf8;
}

.partner-logos-title {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #7a675b;
}

/* Logos alignés et centrés sur grand écran */
.partner-logos-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

/* Carte de logo */
.partner-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 3px 12px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.partner-logo img {
  max-height: 30px;
  width: auto;
  display: block;
}

.partner-logo:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  border-color: rgba(196,154,108,.6);
}

/* Sur mobile : alignés à gauche, pas collés */
@media (max-width: 600px) {
  .partner-logos-grid {
    justify-content: flex-start;
  }
}

/* === Hero Checkout dans un cadre premium centré + rassurant === */

.page-hero.premium.checkout-hero {
  background: transparent;
  padding: 0;
  margin-bottom: 28px;
}

.checkout-hero-card {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 22px;
  border-radius: 22px;
  background: #fffdf8;
  border: 1px solid rgba(196, 154, 108, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  column-gap: 28px;
  row-gap: 12px;
  align-items: center;
}

/* pastille "Étape X sur 3" */
.checkout-step {
  grid-column: 1 / -1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.03);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a7768;
  margin: 0 0 4px;
}

/* bloc texte gauche */
.checkout-hero-text {
  grid-column: 1 / 2;
}

.checkout-hero-text .h1 {
  margin: 0 0 6px;
  font-size: clamp(1.9rem, 3.2vw, 2.4rem);
  line-height: 1.2;
  text-align: left;
}

.checkout-hero-text .lead {
  margin: 0;
  font-size: 0.95rem;
  color: #7b6658;
}

/* bloc info sécurité à droite */
.checkout-hero-meta {
  grid-column: 2 / 3;
  justify-self: end;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* badge "Paiement sécurisé" */
.checkout-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(196, 154, 108, 0.55);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.checkout-badge-icon {
  font-size: 1.1rem;
}

.checkout-badge-text {
  font-size: 0.8rem;
  font-weight: 700;
  color: #5f4938;
  line-height: 1.2;
}

.checkout-badge-sub {
  font-weight: 500;
  color: #8a7768;
}

.checkout-mini {
  font-size: 0.8rem;
  color: #9b8576;
  margin: 0;
}

/* Icônes de moyens de paiement sur une ligne */
.checkout-payment-icons {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 18px;
}

.payment-icon {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.payment-icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* Version image unique (bandeau logos) */
.checkout-payment-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  text-align: center;
}

.checkout-payment-logos img {
  max-width: 180px;
  width: 100%;
  height: auto;
  display: inline-block;
  object-fit: contain;
  opacity: 0.95;
}

@media (max-width: 600px) {
  .checkout-payment-logos img {
    max-width: 140px;
  }
}

/* Responsive : tout dans un seul cadre, en colonne */
@media (max-width: 900px) {
  .checkout-hero-card {
    grid-template-columns: 1fr;
    padding: 18px 16px 20px;
  }

  .checkout-hero-meta {
    grid-column: 1 / 2;
    justify-self: flex-start;
    max-width: 100%;
  }

  .checkout-hero-text .h1,
  .checkout-hero-text .lead {
    text-align: left;
  }
}

/* === Cartes de paiement (étape 2) === */

.payment-card {
  border-radius: 14px;
  padding: 14px 14px 10px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid rgba(196, 154, 108, 0.25);
}

.payment-card--active {
  background: #f4fff6;
  border-color: rgba(80, 150, 90, 0.4);
}

.payment-card--disabled {
  background: #ffffff;
  border-style: dashed;
  border-color: rgba(180, 180, 180, 0.7);
  opacity: 0.6;
}

.payment-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  cursor: pointer;
}

.payment-card--disabled .payment-label {
  cursor: not-allowed;
}

.payment-label input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
}

.payment-content {
  flex: 1;
  min-width: 0;
}

.payment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.payment-header strong {
  font-size: 0.98rem;
}

.payment-content .meta {
  margin: 4px 0 0;
  font-size: 0.87rem;
  color: #6b5a4c;
  word-break: break-word;
}

.payment-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  border: 1px solid rgba(150, 150, 150, 0.45);
  background: #f8f8f8;
  color: #746a63;
  white-space: nowrap;
}

.payment-pill--green {
  border-color: rgba(80, 150, 90, 0.5);
  background: #e6f8ec;
  color: #2d7a3a;
}

@media (max-width: 700px) {
  .payment-header {
    align-items: flex-start;
  }
}

/* Image dans le bloc "Récapitulatif paiement" */
.payment-summary-image-container {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.payment-summary-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0.9;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.08));
}

/* Hero centré (page paiement / confirmation) */
.centered-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.centered-hero h1 {
  text-align: center;
  margin: 0 auto;
}

.centered-hero .lead {
  max-width: 750px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.centered-hero .checkout-step {
  text-align: center;
  width: 100%;
}

/* ===== NAV BAR : TOUT SUR UNE LIGNE EN DESKTOP ===== */
@media (min-width: 900px) {
  .site-header .nav,
  header.site-header .container.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;              /* empêche le retour à la ligne */
  }

  /* Logo à gauche */
  .site-header .brand,
  header.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;                 /* évite que le logo se compresse trop */
  }

  /* Menu au centre */
  .site-header .menu,
  header.site-header .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;              /* les liens restent sur une ligne */
    flex: 1 1 auto;                 /* occupe l’espace au milieu */
  }

  .site-header .menu a,
  header.site-header .menu a {
    white-space: nowrap;            /* le texte d’un lien ne casse pas sur 2 lignes */
  }

  /* Panier + langues à droite */
  .site-header .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;                 /* reste compact à droite */
  }

  .site-header .lang-switch,
  header.site-header .lang-switch {
    display: flex;
    gap: 6px;
    white-space: nowrap;
  }
}

}

/* Panier + langues à droite */
.site-header .nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.site-header .lang-switch {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}
/* ===== NAV BAR : TOUT SUR UNE LIGNE EN DESKTOP ===== */
@media (min-width: 900px) {
  .site-header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: nowrap;              /* empêche le retour à la ligne */
  }

  /* Logo à gauche */
  .site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;                 /* évite que le logo se compresse trop */
  }

  /* Menu au centre */
  .site-header .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: nowrap;              /* les liens restent sur une ligne */
    flex: 1 1 auto;                 /* occupe l’espace au milieu */
  }

  .site-header .menu a {
    white-space: nowrap;            /* le texte d’un lien ne casse pas en 2 lignes */
  }

  /* Panier + langues à droite */
  .site-header .nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;                 /* reste compact à droite */
  }

  .site-header .lang-switch {
    display: flex;
    gap: 6px;
    white-space: nowrap;
  }
/* FORCER TOUT LE HEADER SUR UNE LIGNE EN DESKTOP */
@media (min-width: 900px) {
  .site-header.nav-premium .nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    flex-wrap: nowrap !important;
  }

  .site-header.nav-premium .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  .site-header.nav-premium .menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;      /* empêche la 2e ligne */
    flex: 1 1 auto !important;         /* prend tout l’espace au milieu */
  }

  .site-header.nav-premium .menu a {
    white-space: nowrap !important;    /* un lien ne casse pas sur 2 lignes */
  }

  .site-header.nav-premium .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
  }

  .site-header.nav-premium .lang-switch {
    display: flex !important;
    gap: 6px !important;
    white-space: nowrap !important;
  }
/* =========================================
   NAV BAR PLUS COMPACTE EN DESKTOP
   (réduction taille / espacements)
========================================= */

@media (min-width: 900px) {
  /* Moins d’espace global dans la barre */
  header.site-header .container.nav {
    gap: 12px;
    padding: 6px 0;
  }

  /* Nom "Titi Brocante" un peu plus petit */
  header.site-header .brand-name {
    font-size: 0.9rem;
  }

  /* Menu plus serré */
  header.site-header .menu {
    gap: 10px;
  }

  /* Boutons de menu plus fins et plus courts */
  header.site-header .menu a {
    padding: 4px 10px;
    font-size: 0.8rem;
  }

  /* Langues plus compactes aussi */
  header.site-header .lang-switch .chip {
    min-width: 40px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.75rem;
  }
/* =========================================
   NAV BAR COMPACTE + LISIBILITÉ AMÉLIORÉE
   MENUS PLUS GRANDS MAIS TOUJOURS SUR 1 LIGNE
========================================= */

@media (min-width: 900px) {

  .site-header .nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    width: 100%;
  }

  /* === LOGO === */
  .site-header .brand {
    min-width: 160px;
    max-width: 200px;
  }

  /* === MENU CENTRAL — AGRANDI + lisible === */
  .site-header .menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 14px !important;     /* 🔥 un peu plus d'espace entre les items */
    min-width: 0;
    overflow: hidden;
  }

  .site-header .menu a {
    padding: 9px 18px !important;   /* 🔥 boutons plus grands */
    font-size: 0.92rem !important;  /* 🔥 texte plus lisible */
    white-space: nowrap !important;
    flex: 0 0 auto;
  }

  /* === PANIER + LANGUES === */
  .site-header .nav-right {
    display: flex !important;
    align-items: center;
    gap: 10px !important;
    flex-shrink: 1 !important;
  }

  .nav-cart {
    transform: scale(0.98);       /* léger ajustement */
  }

  /* === LANGUES — légèrement plus grandes === */
  .site-header .lang-switch .chip {
    padding: 0 10px !important;
    min-width: 42px !important;
    height: 30px !important;
    font-size: 0.82rem !important;
  }
/* ===== FOOTER PREMIUM ===== */

.site-footer.shop-footer {
  padding: 40px 0 24px;
  background: linear-gradient(180deg, #fbeedb 0%, #f3e1c7 100%);
}

/* Mise en page 3 colonnes sur ordinateur */
.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1.6fr 1.2fr;
  gap: 32px;
  align-items: flex-start;
}

/* Style des colonnes */
.site-footer .footer-col {
  font-size: 0.95rem;
  color: #6b5242;
}

.site-footer .footer-title {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 800;
}

/* Liste des liens "Infos" */
.site-footer .footer-links {
  list-style: none;        /* plus de points */
  padding-left: 0;
  margin: 0;
}

.site-footer .footer-links li {
  padding: 4px 0;
}

/* Newsletter : look premium */
.newsletter-form {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 10px;
}

.newsletter-form input {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .12);
  padding: 10px 14px;
  font-size: 0.95rem;
  background: #fffaf3;
}

.newsletter-form button {
  border-radius: 999px;
  padding: 0 20px;
  min-width: 52px;
  border: none;
  font-weight: 800;
  cursor: pointer;
}

/* Ligne des moyens de paiement (contient notre image) */
.payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* ===== Version mobile : tout vertical mais chic ===== */
@media (max-width: 900px) {
  .site-footer .footer-grid {
    display: flex;
    flex-direction: column;   /* les 3 colonnes l’une sous l’autre */
    gap: 28px;
    text-align: center;
  }

  .site-footer .footer-links li {
    margin-bottom: 4px;
  }

  .newsletter-form {
    flex-direction: column;   /* input au-dessus, bouton en dessous */
  }

  .newsletter-form button {
    width: 100%;
  }

  .payment-row {
    justify-content: center;  /* centrer l'image sur mobile */
  }
}

/* ===== Image unique des moyens de paiement ===== */

.payment-row.logo-single {
  display: flex;
  justify-content: flex-start;   /* aligné à gauche sur grand écran */
  align-items: center;
  margin-top: 16px;
}

.pay-logos-img {
  width: 100%;
  max-width: 360px;             /* taille max sur desktop */
  height: auto;
  display: block;
  border-radius: 12px;          /* arrondi chic */
  box-shadow: 0 6px 16px rgba(0,0,0,0.15); /* ombre premium */
  background: #ffffff;          /* fond propre */
  padding: 12px;                /* marge autour de l'image */
}

/* Version mobile : centré + un peu plus petit */
@media (max-width: 900px) {
  .payment-row.logo-single {
    justify-content: center;
  }

  .pay-logos-img {
    max-width: 280px;
    padding: 10px;
  }
}
/* ===== HERO BOUTIQUE PREMIUM ===== */

.shop-hero {
  margin: 26px 0 30px;
}

.shop-hero-card {
  background: linear-gradient(180deg, #fffdf8, #f6efe4);
  border-radius: 24px;
  border: 1px solid rgba(196, 154, 108, 0.45);
  box-shadow: 0 16px 40px rgba(120, 80, 40, 0.18);
  padding: 26px 28px 24px;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  column-gap: 28px;
  row-gap: 18px;
  align-items: center;
}

/* Colonne gauche */

.shop-hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9b8572;
  margin-bottom: 6px;
  font-weight: 700;
}

.shop-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.3vw, 2.6rem);
  margin: 0 0 8px;
  color: #3b2a20;
}

.shop-hero-lead {
  margin: 0 0 14px;
  font-size: 0.98rem;
  color: #7b6758;
  line-height: 1.7;
}

.shop-hero-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: #6b5647;
}

.shop-hero-points li {
  position: relative;
  padding-left: 18px;
}

.shop-hero-points li::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 0;
  color: #c8975d;
  font-size: 1.1rem;
  line-height: 1;
}

/* Colonne droite : bloc confiance / paiement */

.shop-hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.shop-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(196, 154, 108, 0.7);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.shop-hero-badge-icon {
  font-size: 1.2rem;
}

.shop-hero-badge-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: #5a4334;
}

.shop-hero-badge-sub {
  font-size: 0.78rem;
  color: #8b7565;
}

.shop-hero-mini {
  font-size: 0.85rem;
  color: #8b7565;
  margin: 0;
}

.shop-hero-logos {
  margin-top: 4px;
}

.shop-hero-logos-img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
  background: #ffffff;
  padding: 10px;
}

/* Responsive */

@media (max-width: 900px) {
  .shop-hero-card {
    grid-template-columns: 1fr;
    padding: 20px 18px 18px;
  }

  .shop-hero-right {
    align-items: flex-start;
  }

  .shop-hero-logos-img {
    max-width: 220px;
  }
}

@media (max-width: 600px) {
  .shop-hero-card {
    border-radius: 20px;
  }

  .shop-hero-title {
    font-size: 1.8rem;
  }

  .shop-hero-lead {
    font-size: 0.94rem;
  }
}
.checkout-payment-logos img {
  max-width: 190px;
  width: 100%;
  height: auto;
  display: block;
  margin: 8px auto 0;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
/* ===========================
   CHECKOUT HEADER / STEP CARD
   =========================== */

.checkout-section {
  max-width: 1200px;
  margin: 40px auto 32px;
  padding: 0 16px;
}

.checkout-card {
  background: linear-gradient(180deg, #fbf4ea 0%, #f5e7d4 100%);
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08);
  padding: 32px 40px;
  display: flex;
  gap: 32px;
  align-items: flex-start;
}

/* Colonne gauche */
.checkout-main {
  flex: 2;
}

.checkout-step {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  margin: 0 0 8px;
  color: #b08c6a;
  font-weight: 600;
}

.checkout-title {
  font-family: "Playfair Display", serif;
  font-size: 2.6rem;
  line-height: 1.1;
  margin: 0 0 14px;
  color: #4a2f23;
}

.checkout-subtitle {
  font-size: 1.05rem;
  line-height: 1.6;
  color: #7a644e;
  max-width: 42rem;
  margin: 0 0 18px;
}

.checkout-text p {
  margin: 2px 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #655241;
}

/* Colonne droite : badge sécurisé */
.checkout-secure {
  flex: 1.3;
  display: flex;
  justify-content: flex-end;
}

.secure-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #fff7ef;
  border: 1px solid #f0dcc5;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.03);
}

.secure-icon {
  font-size: 1.6rem;
}

.secure-text {
  display: flex;
  flex-direction: column;
}

.secure-title {
  margin: 0 0 2px;
  font-weight: 600;
  color: #4f3727;
}

.secure-subtitle {
  margin: 0;
  font-size: 0.9rem;
  color: #8c6f55;
}

/* Carte avec les logos de paiement */
.checkout-payment-card {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.checkout-payment-card img {
  display: block;
  padding: 14px 28px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  max-width: 360px;
}

/* Responsive */
@media (max-width: 900px) {
  .checkout-card {
    flex-direction: column;
    padding: 24px 20px;
  }

  .checkout-secure {
    justify-content: flex-start;
  }

  .checkout-title {
    font-size: 2.1rem;
  }

  .checkout-section {
    margin-top: 24px;
  }
}
/* Réduction globale des marges excessives dans la page Boutique */
.boutique-section p {
  margin-bottom: 10px !important;
}

.boutique-section h1,
.boutique-section h2,
.boutique-section h3 {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.boutique-section ul {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

.boutique-hero,
.boutique-info,
.boutique-payment,
.boutique-products {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

/* Réduction des grands espacements entre sections */
section {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
/* ==========================
   RÉGLAGE ESPACEMENTS BOUTIQUE
   ========================== */

.page-boutique .shop-hero {
  /* moins d’espace autour du hero */
  margin-top: 32px;
  margin-bottom: 18px;
}

.page-boutique .shop-hero-card {
  /* on réduit le “gros coussin” en haut/bas du cadre */
  padding-top: 30px;
  padding-bottom: 30px;
}

/* Texte du hero un peu plus compact */
.page-boutique .shop-hero-lead {
  margin-bottom: 10px;
}

.page-boutique .shop-hero-points {
  margin-top: 8px;
  margin-bottom: 0;
}

/* Écart entre le hero et le bloc "Produits à la une" */
.page-boutique .shop-hero + .panel {
  margin-top: 10px;      /* au lieu d’un gros trou */
}

/* Marges des paragraphes dans la partie boutique */
.page-boutique main p {
  margin-top: 0;
  margin-bottom: 8px;
}

/* Un peu moins d’espace autour des panneaux produits */
.page-boutique .panel {
  margin-top: 18px;
  margin-bottom: 18px;
}
/* ==========================
   PAGE COORDONNÉES & LIVRAISON
   (on réduit le hero et l'image)
   ========================== */

.page-checkout-address .shop-hero {
  margin-top: 28px;
  margin-bottom: 20px;
}

.page-checkout-address .shop-hero-card {
  padding: 24px 24px;          /* moins de “coussin” haut/bas */
  align-items: center;
}

/* Titre et texte un peu plus compacts */
.page-checkout-address .shop-hero-title.h1 {
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  margin-bottom: 6px;
}

.page-checkout-address .shop-hero-lead {
  margin-bottom: 8px;
}

/* Liste de points plus serrée */
.page-checkout-address .shop-hero-points {
  margin-top: 6px;
  margin-bottom: 0;
}

/* Image / illustration du hero : plus petite */
.page-checkout-address .shop-hero-logos-img {
  max-width: 180px;      /* tu peux descendre à 150px si tu veux encore plus petit */
  height: auto;
  display: block;
  margin: 8px auto 0;
}

/* Sur mobile on réduit encore un peu */
@media (max-width: 800px) {
  .page-checkout-address .shop-hero-card {
    padding: 18px 16px;
  }

  .page-checkout-address .shop-hero-logos-img {
    max-width: 140px;
    margin-top: 6px;
  }
}

/* Logos transporteur dans la colonne de droite : un peu plus petits aussi */
.page-checkout-address .partner-logos-grid img {
  max-width: 70px;
  height: auto;
}
/* =========================================================
   OPTIMISATION MOBILE GLOBALE
   S'applique à toutes les pages pour écran ≤ 900px / 600px
   ========================================================= */

/* --------- GÉNÉRAL --------- */
@media (max-width: 900px) {
  body {
    font-size: 15px;
  }

  main.container {
    padding: 24px 12px 40px !important;
  }

  .h1,
  .shop-hero-title,
  h1 {
    font-size: 1.9rem;
    line-height: 1.2;
  }

  .h2,
  h2 {
    font-size: 1.4rem;
  }

  .h3,
  h3 {
    font-size: 1.15rem;
  }

  p {
    margin-bottom: 8px;
  }
}

/* --------- HEADER / NAV --------- */
@media (max-width: 900px) {
  .site-header .nav {
    padding: 8px 12px;
    gap: 8px;
  }

  .brand-name,
  .brand-tagline {
    font-size: 0.85rem;
  }

  .nav-right {
    gap: 6px;
  }

  .lang-switch .chip {
    padding: 2px 6px;
    font-size: 0.7rem;
  }

  .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px;
    background: #fffaf4;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
  }

  .site-header.open .menu {
    transform: scaleY(1);
    opacity: 1;
    pointer-events: auto;
  }

  .menu a {
    padding: 6px 0;
    font-size: 0.9rem;
  }
}

/* --------- PANELS / GRILLES 2 COLONNES --------- */
/* Formulaire + récap (livraison, confirmation, etc.) */
@media (max-width: 900px) {
  .panel {
    padding: 14px 12px !important;
  }

  /* Tous les panels qui utilisent grid pour 2 colonnes */
  .panel {
    display: block !important;              /* on empile tout */
    grid-template-columns: 1fr !important;  /* override inline */
  }

  /* Rattrapage si tu gardes display:grid dans le HTML */
  section.panel {
    display: block !important;
  }

  /* Espacements entre colonnes empilées */
  section.panel > div,
  section.panel > aside {
    margin-bottom: 16px;
  }
}

/* --------- BOUTIQUE / HERO GÉNÉRAUX (.shop-hero) --------- */
@media (max-width: 900px) {
  .shop-hero {
    margin-top: 20px;
    margin-bottom: 16px;
    padding: 0 10px;
  }

  .shop-hero-card {
    padding: 20px 16px;
    grid-template-columns: 1fr !important;
    gap: 18px;
  }

  .shop-hero-left,
  .shop-hero-right {
    max-width: 100%;
  }

  .shop-hero-lead {
    font-size: 0.95rem;
    margin-bottom: 8px;
  }

  .shop-hero-points {
    margin-top: 6px;
    margin-bottom: 4px;
  }

  .shop-hero-badge {
    padding: 10px 12px;
    border-radius: 14px;
  }

  .shop-hero-mini {
    font-size: 0.9rem;
  }

  .shop-hero-logos-img {
    max-width: 170px;
    height: auto;
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .shop-hero-card {
    padding: 16px 12px;
  }

  .shop-hero-title.h1 {
    font-size: 1.7rem;
  }

  .shop-hero-logos-img {
    max-width: 140px;
  }
}

/* --------- PAGE COORDONNÉES & LIVRAISON (si body a cette classe) --------- */
@media (max-width: 900px) {
  .page-checkout-address .shop-hero-card {
    padding: 18px 14px;
  }

  .page-checkout-address .shop-hero-logos-img {
    max-width: 150px;
  }

  .page-checkout-address .partner-logos-grid img {
    max-width: 60px;
  }
}

/* --------- PAGE CONFIRMATION COMMANDE --------- */
@media (max-width: 900px) {
  /* hero confirmation */
  .shop-hero.payment-hero .shop-hero-card {
    padding: 18px 14px;
  }

  .shop-hero.payment-hero .shop-hero-title.h1 {
    font-size: 1.8rem;
  }

  /* bloc résumé + bloc paiement à droite empilés */
  main .panel {
    margin-top: 16px;
  }
}

/* --------- FORMULAIRES --------- */
@media (max-width: 900px) {
  .form .grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .form input,
  .form select,
  .form textarea {
    font-size: 0.95rem;
    padding: 8px 10px;
  }

  .cta.primary,
  .cta.secondary {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* --------- PANIER --------- */
@media (max-width: 900px) {
  .cart-layout {
    display: block !important;
  }

  .cart-layout > div,
  .cart-layout > aside {
    margin-bottom: 16px;
  }

  .cart-item {
    padding: 8px 0;
  }

  .cart-item img {
    max-width: 60px;
  }

  .cart-item .cta.tiny {
    padding: 4px 8px;
    font-size: 0.8rem;
  }
}

/* --------- DIVERS --------- */
@media (max-width: 600px) {
  footer p {
    font-size: 0.8rem;
    padding: 10px 8px;
  }

  .payment-summary-image-container img,
  .payment-summary-icon {
    max-width: 160px;
    height: auto;
  }
}/* ===== PATCH FINAL HEADER MOBILE TITI (doit être le DERNIER bloc) ===== */

@media (max-width: 900px) {

  /* Ligne du header */
  header.site-header .container.nav{
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    gap: 8px !important;
  }

  /* Logo + burger sur la première ligne */
  header.site-header .brand{
    order: 1;
    flex-shrink: 0;
  }

  header.site-header .nav-toggle{
    display: block !important;
    order: 2;
  }

  /* Menu + panier/langues = cachés par défaut */
  header.site-header .menu,
  header.site-header .nav-right{
    width: 100% !important;
    display: none !important;
    position: static !important;
    padding: 0 !important;
    margin-top: 4px;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* Quand le header a la classe .open (JS) -> on les montre */
  header.site-header.open .menu,
  header.site-header.open .nav-right{
    display: flex !important;
  }

  /* Menu en lignes, qui peut passer sur plusieurs colonnes */
  header.site-header .menu{
    order: 3;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  header.site-header .menu a{
    padding: 6px 10px !important;
    font-size: 0.86rem !important;
  }

  /* Panier + langues en dessous du menu */
  header.site-header .nav-right{
    order: 4;
    justify-content: space-between !important;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .nav-cart{
    flex: 1 1 100%;
    justify-content: center;
  }

  header.site-header .lang-switch .chip{
    min-width: 38px;
    height: 28px;
    padding: 0 6px;
    font-size: 0.74rem;
  }
}/* ===== FIX DEFINITIF : forcer le burger sur mobile ===== */
@media (max-width: 900px) {
  header.site-header .nav-toggle {
    display: block !important;
  }
/* ===== PATCH 2025 – HEADER TITI BROCANTE (FINAL) ===== */

/* --- Mise en page desktop (≥ 900px) : tout sur une seule ligne --- */
@media (min-width: 900px) {

  header.site-header .container.nav {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 8px 18px !important;
  }

  /* Logo à gauche */
  header.site-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  /* Menu au centre */
  header.site-header .menu {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }

  header.site-header .menu a {
    white-space: nowrap !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
  }

  /* Panier + langues à droite */
  header.site-header .nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
  }

  header.site-header .lang-switch .chip {
    min-width: 40px !important;
    height: 28px !important;
    padding: 0 8px !important;
    font-size: 0.8rem !important;
  }

  /* Pas de burger en desktop */
  header.site-header .nav-toggle {
    display: none !important;
  }
}

/* --- Mise en page mobile (< 900px) : logo + burger, menu déroulant --- */
@media (max-width: 899px) {

  /* Ligne principale */
  header.site-header .container.nav {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }

  /* Logo */
  header.site-header .brand {
    order: 1;
    flex-shrink: 0;
  }

  /* Burger toujours visible sur mobile */
  header.site-header .nav-toggle {
    display: block !important;
    order: 2;
  }

  /* Menu + nav-right cachés par défaut */
  header.site-header .menu,
  header.site-header .nav-right {
    width: 100% !important;
    display: none !important;
    position: static !important;
    margin-top: 4px;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
  }

  /* Quand le header a .open -> on affiche menu + nav-right */
  header.site-header.open .menu,
  header.site-header.open .nav-right {
    display: flex !important;
  }

  /* Menu en petites pastilles sur plusieurs lignes */
  header.site-header .menu {
    order: 3;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 6px !important;
  }

  header.site-header .menu a {
    padding: 6px 10px !important;
    font-size: 0.86rem !important;
  }

  /* Panier + langues en dessous du menu */
  header.site-header .nav-right {
    order: 4;
    justify-content: space-between !important;
    flex-wrap: wrap;
    row-gap: 6px;
  }

  header.site-header .lang-switch .chip {
    min-width: 36px;
    height: 28px;
    padding: 0 6px;
    font-size: 0.74rem;
  }
}
/* =========================================
   FIN des ajouts Boutique
========================================= */