/* ==========================================================================
   D'un Coup de Fil — feuille de style
   Palette : crème, vert sauge pastel, rose poudré
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --cream:      #FBF7F1;
  --cream-deep: #F3ECE1;
  --paper:      #FFFDFA;
  --sage-50:    #EEF3EA;
  --sage-100:   #DCE8D6;
  --sage-300:   #AEC9A4;
  --sage-500:   #7FA377;
  --sage-700:   #5A7E55;
  --blush-50:   #FBEBEA;
  --blush-100:  #F6D8D6;
  --blush-300:  #EFB3B8;
  --blush-500:  #E28E97;
  --gold:       #CFA35E;
  --coral:      #E2795F;
  --ink:        #3B342C;
  --ink-soft:   #6B6156;
  --line:       #E7DDCE;
  --shadow:     0 20px 45px -25px rgba(59, 52, 44, 0.35);
  --shadow-sm:  0 8px 20px -12px rgba(59, 52, 44, 0.28);
  --radius:     22px;
  --radius-sm:  14px;
}

*, *::before, *::after{ box-sizing: border-box; }
[hidden]{ display:none !important; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; width: 100%; }
body.nav-open-lock{ overflow-y: hidden; }
body{
  margin:0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-700);
  font-weight: 600;
}
.eyebrow::before{
  content:"";
  width: 22px; height: 1px;
  background: var(--sage-500);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  border: 1px solid transparent;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  white-space: nowrap;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--ink-soft);
  color: var(--cream);
  box-shadow: var(--shadow-sm);
  padding: 16px 32px;
  font-size: 1rem;
}
.btn-primary:hover{ background: var(--sage-700); transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover{ background: var(--ink-soft); color: var(--cream); transform: translateY(-2px); }
.btn-insta{
  background: linear-gradient(135deg, #F6D8D6, #EFC9A6 45%, #E28E97);
  color: #4A2A2E;
  box-shadow: var(--shadow-sm);
}
.btn-insta:hover{ transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow); }
.btn-sm{ padding: 10px 20px; font-size: 0.85rem; }
.btn-icon-sm{ width: 40px; height: 40px; padding: 0; font-size: 1.1rem; line-height:1; flex: none; }
.btn-primary.btn-icon-sm{ background: var(--sage-500); }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-disabled-look{ opacity:.5; pointer-events:none; }

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(251, 247, 241, 0.9);
  backdrop-filter: blur(5px);
  border-bottom: 1px solid var(--line);
}
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 20px;
}
.logo{
  font-family: 'Fraunces', serif;
  font-size: 1.5rem;
  font-weight: 600;
  display:flex;
  flex-direction:column;
  line-height:1;
}
.logo span{
  font-family: 'Work Sans', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sage-700);
  font-weight: 600;
  margin-top: 4px;
}
.main-nav{
  display:flex;
  align-items:center;
  gap: 28px;
}
.main-nav a{
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-soft);
  position: relative;
  padding: 4px 0;
  transition: color .2s ease;
}
.main-nav a:hover, .main-nav a.active{ color: var(--ink); }
.main-nav a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height: 2px; background: var(--blush-500); border-radius: 2px;
}
.header-actions{ display:flex; align-items:center; gap: 14px; }
.icon-btn{
  width: 42px; height: 42px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 50%;
  background: var(--sage-100);
  color: var(--sage-700);
  border: none; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.icon-btn:hover{ background: var(--blush-100); color: #9C4550; transform: translateY(-2px); }
.icon-btn svg{ width: 19px; height: 19px; }
.burger{ display:none; }
.mobile-only-link{ display:none; }
.cart-btn{ position:relative; }
.cart-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:18px; height:18px; padding:0 4px;
  border-radius:999px;
  background: var(--coral);
  color:#fff;
  font-size:0.66rem; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  line-height:1;
}

/* ---------- Hero ---------- */
.hero{
  position: relative;
  padding: 65px 0 50px;
  overflow: hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
}
.hero h1{
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  line-height: 1.08;
  margin: 18px 0 22px;
}
.hero h1 em{
  font-style: italic;
  color: var(--sage-700);
}
.hero p.lead{
  font-size: 1.08rem;
  color: var(--ink-soft);
  max-width: 480px;
  margin-bottom: 34px;
}
.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 38px; max-width:70%; }
.hero-ctas .btn{ flex:1; text-align:center; padding: 17px 32px; font-size: 1.02rem; }
.hero-badges{ display:flex; flex-direction:column; gap: 12px; }
.hero-badge{
  display:flex; align-items:center; gap:10px;
  font-size: 0.82rem; color: var(--ink-soft); font-weight:500;
}
.hero-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--coral);
  flex:none;
}
.hero-badge-google{ color: var(--ink); transition: color .2s ease; }
.hero-badge-google svg{ color: var(--gold); flex:none; }
.hero-badge-google:hover{ color: var(--sage-700); }
.hero-badge-count{ color: var(--ink-soft); font-weight:400; }
.hero-visual{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px;
  aspect-ratio: 1/1;
}
.hero-visual .tile{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  background: var(--sage-100);
}
.hero-visual .tile img{ width:100%; height:100%; object-fit:cover; }
.hero-visual .tile.tall{ grid-row: 1 / span 2; }
.hero-blob{
  position:absolute;
  border-radius: 50%;
  filter: blur(50px);
  z-index:-1;
  opacity:.55;
}
.hero-blob.b1{ width:320px; height:320px; background: var(--blush-100); top:-80px; left:-100px; }
.hero-blob.b2{ width:260px; height:260px; background: var(--sage-100); bottom:-60px; right:10%; }

/* ---------- Section basics ---------- */
section{ padding: 50px 0; }
.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 12px; }
.section-head p{ color: var(--ink-soft); max-width: 460px; margin-top: 10px; }

/* ---------- Category tiles ---------- */
.cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.cat-card{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  aspect-ratio: 3/3.6;
  box-shadow: var(--shadow-sm);
  transition: transform .35s ease, box-shadow .35s ease;
}
.cat-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow); }
.cat-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.cat-card:hover img{ transform: scale(1.08); }
.cat-card::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(59,52,44,0) 40%, rgba(48,42,34,.78) 100%);
}
.cat-card .cat-label{
  position:absolute; left:18px; right:18px; bottom:16px; z-index:2;
  color: #fff;
}
.cat-card .cat-label small{
  display:block;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 4px;
}
.cat-card .cat-label strong{
  font-family:'Fraunces', serif;
  font-size: 1.25rem;
  font-weight: 500;
}

/* ---------- Product grid ---------- */
.filters-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.filter-chips{ display:flex; gap:10px; flex-wrap:wrap; }
.filters-secondary{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.chip{
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: all .2s ease;
}
.chip:hover{ border-color: var(--sage-500); color: var(--ink); }
.chip.active{ background: var(--ink-soft); border-color: var(--ink-soft); color: var(--cream); }
.search-wrap{
  position:relative;
  min-width: 240px;
}
.search-wrap input{
  width:100%;
  padding: 11px 18px 11px 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--ink);
}
.search-wrap input:focus{ outline: 2px solid var(--sage-300); }
.search-wrap svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color: var(--ink-soft);
}
.product-hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items:center;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-thumb{ position:relative; display:block; min-width:0; aspect-ratio: 1/1; background: var(--sage-50); }
.hero-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.product-hero:hover .hero-thumb img{ transform: scale(1.04); }
.hero-thumb .badge{ position:absolute; top:16px; left:16px; }
.hero-info{ min-width:0; padding: 20px 44px 20px 0; }
.hero-info h3{ font-family:'Fraunces', serif; font-weight:500; font-size: clamp(1.6rem, 2.6vw, 2.15rem); margin: 12px 0 14px; }
.hero-info p{ color: var(--ink-soft); margin-bottom: 24px; max-width: 440px; }
.hero-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.hero-bottom .product-price{ font-size:1.35rem; font-weight:700; }
@media (max-width: 720px){
  .product-hero{ grid-template-columns: 1fr; }
  .hero-info{ padding: 4px 22px 26px; }
}

.product-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px 22px;
  margin-top: 26px;
}
.product-card{
  background: var(--paper);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .3s ease, box-shadow .3s ease;
  display:flex; flex-direction:column;
}
.product-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow); }
.product-thumb{
  position:relative;
  display:block;
  aspect-ratio: 1/1;
  overflow:hidden;
  background: var(--sage-50);
}
.product-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s ease;
}
.product-card:hover .product-thumb img{ transform: scale(1.06); }
.badge{
  position:absolute; top:10px; left:10px;
  font-size: 0.62rem;
  font-weight:600;
  letter-spacing:0.03em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.92);
  color: var(--sage-700);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.badge.out{ background: rgba(255,255,255,0.88); color: #9C4550; }
.product-info{ padding: 16px 18px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-cat{
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sage-700);
  font-weight:600;
}
.product-name{ font-size: 1.02rem; font-weight:500; font-family:'Fraunces', serif; }
.product-bottom{
  margin-top:auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.product-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.product-price{ font-weight:600; font-size:1.02rem; }
.empty-state{
  text-align:center;
  padding: 70px 20px;
  color: var(--ink-soft);
}

/* ---------- Petits composants partagés (fermeture, notes) ---------- */
.modal-close{
  position:absolute; top:18px; right:18px;
  width:36px; height:36px; border-radius:50%;
  background: var(--sage-100); display:flex; align-items:center; justify-content:center;
  border: none; cursor: pointer; color: inherit;
}
.modal-close:hover{ background: var(--blush-100); }
.modal-note{
  margin-top: 22px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  background: var(--sage-50);
  padding: 14px 16px;
  border-radius: 14px;
}

/* ---------- Cart drawer ---------- */
.cart-drawer-overlay{
  position:fixed; inset:0;
  background: rgba(59,52,44,0.55);
  backdrop-filter: blur(2px);
  z-index: 520;
  display:flex; justify-content:flex-end;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
}
.cart-drawer-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  background: var(--paper);
  width: 100%; max-width: 420px;
  height: 100%;
  display:flex; flex-direction:column;
  box-shadow: -30px 0 60px -30px rgba(0,0,0,.35);
  transform: translateX(24px);
  transition: transform .3s ease;
}
.cart-drawer-overlay.open .cart-drawer{ transform: translateX(0); }
.cart-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.cart-drawer-head h3{ font-size: 1.25rem; }
.cart-drawer-body{ flex:1; overflow-y:auto; padding: 18px 24px; display:flex; flex-direction:column; gap:16px; }
.cart-item{ display:flex; gap:14px; align-items:center; }
.cart-item img{ width:64px; height:64px; object-fit:cover; border-radius:12px; flex:none; }
.cart-item-info{ flex:1; display:flex; flex-direction:column; gap:5px; }
.cart-item-name{ font-family:'Fraunces', serif; font-size:0.95rem; }
.cart-item-price{ font-size:0.85rem; color: var(--ink-soft); }
.qty-stepper{ display:flex; align-items:center; gap:10px; margin-top:2px; }
.qty-stepper button{
  width:24px; height:24px; border-radius:50%;
  background: var(--sage-100); color: var(--sage-700);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:0.9rem; border:none;
}
.qty-stepper button:hover{ background: var(--blush-100); color:#9C4550; }
.qty-stepper span{ font-size:0.88rem; font-weight:600; min-width:14px; text-align:center; }
.cart-item-remove{
  background:none; border:none; color: var(--ink-soft); flex:none;
  width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:50%;
}
.cart-item-remove:hover{ background: var(--blush-50); color:#9C4550; }
.empty-cart{ text-align:center; color: var(--ink-soft); padding: 40px 10px; }
.empty-cart a{ color: var(--sage-700); font-weight:600; }
.cart-drawer-foot{
  padding: 20px 24px 26px;
  border-top: 1px solid var(--line);
  display:flex; flex-direction:column; gap:12px;
}
.cart-subtotal{
  display:flex; align-items:center; justify-content:space-between;
  font-size:1rem; color: var(--ink-soft);
}
.cart-subtotal strong{ color: var(--ink); font-size:1.2rem; }

/* ---------- Instagram section ---------- */
.insta-section{
  background: linear-gradient(160deg, var(--blush-50), var(--cream) 55%);
  border-radius: 32px;
  margin: 0 auto;
  max-width: 1200px;
  padding: 70px 40px;
}
.insta-inner{
  display:grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 50px;
  align-items:center;
}
.insta-inner h2{ font-size: clamp(1.8rem,3vw,2.4rem); margin: 14px 0 16px; }
.insta-inner p{ color: var(--ink-soft); margin-bottom: 26px; max-width: 440px; }
.insta-handle{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Fraunces', serif; font-size:1.3rem;
  margin-bottom: 22px;
}
.insta-handle .ig-icon{
  width:46px; height:46px; border-radius: 14px;
  background: linear-gradient(135deg,#F6D8D6,#EFC9A6,#E28E97);
  display:flex; align-items:center; justify-content:center;
  color:#4A2A2E;
}
.insta-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.insta-grid a{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  aspect-ratio: 1/1;
  box-shadow: var(--shadow-sm);
}
.insta-grid img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.insta-grid a:hover img{ transform: scale(1.09); }
.insta-grid a::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(226,142,151,0);
  transition: background .25s ease;
}
.insta-grid a:hover::after{ background: rgba(226,142,151,0.18); }

/* ---------- Story / About blocks ---------- */
.story{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items:center;
}
.story-img{
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 4/5;
}
.story-img img{ width:100%; height:100%; object-fit:cover; }
.story h2{ font-size: clamp(1.8rem,3vw,2.4rem); margin: 14px 0 20px; }
.story p{ color: var(--ink-soft); margin-bottom: 16px; }
.story-quote{
  font-family:'Fraunces', serif;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--sage-700);
  border-left: 3px solid var(--sage-300);
  padding-left: 20px;
  margin: 26px 0;
}
.values-row{
  display:grid; grid-template-columns: repeat(3,1fr); gap: 22px;
  margin-top: 20px;
}
.value-card{
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: 26px 22px;
  box-shadow: var(--shadow-sm);
}
.value-card .ic{
  width:44px; height:44px; border-radius: 12px;
  background: var(--sage-100); color: var(--sage-700);
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 14px;
}
.value-card h4{ font-size: 1.05rem; margin-bottom: 8px; }
.value-card p{ color: var(--ink-soft); font-size: 0.9rem; margin:0; }

/* ---------- Product detail page ---------- */
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:0.82rem; color: var(--ink-soft); flex-wrap:wrap; }
.breadcrumb a:hover{ color: var(--sage-700); }
.breadcrumb span{ color: var(--line); }
.breadcrumb .current{ color: var(--ink); font-weight:600; }
.pdp-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap: 50px; align-items:start; }
.pdp-image{
  position:relative;
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  aspect-ratio: 1/1;
  background: var(--sage-50);
}
.pdp-image img{ width:100%; height:100%; object-fit:cover; }
.pdp-image .badge{ position:absolute; top:16px; left:16px; }
.pdp-thumbs{ display:flex; gap:12px; margin-top:14px; flex-wrap:wrap; }
.pdp-thumb{
  width:72px; height:72px; border-radius:12px; overflow:hidden;
  border:2px solid transparent; padding:0; background:none; cursor:pointer;
  opacity:.65; transition: opacity .2s ease, border-color .2s ease;
}
.pdp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pdp-thumb:hover{ opacity:1; }
.pdp-thumb.active{ opacity:1; border-color: var(--sage-500); }
.pdp-info h1{ font-size: clamp(1.7rem, 3vw, 2.3rem); margin: 10px 0 12px; }
.pdp-price{ font-size:1.4rem; font-weight:700; color: var(--sage-700); margin-bottom:16px; }
.pdp-lead{ color: var(--ink-soft); font-size:1.02rem; margin-bottom: 22px; }
.pdp-specs{ width:100%; border-collapse:collapse; margin: 26px 0; font-size:0.9rem; }
.pdp-specs tr{ border-top: 1px solid var(--line); }
.pdp-specs tr:last-child{ border-bottom: 1px solid var(--line); }
.pdp-specs th{ text-align:left; padding: 11px 12px 11px 0; width:150px; color: var(--ink-soft); font-weight:600; }
.pdp-specs td{ padding: 11px 0; color: var(--ink); }
.pdp-desc{ margin-top: 6px; margin-bottom: 24px; }
.pdp-desc p{ color: var(--ink-soft); line-height:1.7; }
@media (max-width: 900px){ .pdp-grid{ grid-template-columns: 1fr; } }

/* ---------- Checkout ---------- */
.checkout-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items:start; }

/* Bandeau récap, juste sous le titre de la page. .checkout-recap-slot réserve
   la hauteur du bandeau collapsed pour que le contenu en dessous ne saute pas
   quand le bandeau passe en position fixed (.is-mini) au défilement. */
.checkout-recap-slot{ min-height: 62px; margin-bottom: 26px; }
.checkout-recap-bar{
  display:flex; align-items:center; gap:14px;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 14px 20px;
  transition: left .3s ease, top .3s ease, padding .3s ease, box-shadow .3s ease;
}
.checkout-recap-toggle{
  display:none; align-items:center; justify-content:center;
  background:none; border:none; padding:4px; margin:0; flex:none;
  color: var(--ink-soft); cursor:pointer;
  transition: transform 0.25s ease;
}
/* Réservée à la mini-fenêtre : en pleine largeur, tout est déjà affiché. */
.checkout-recap-bar.is-mini .checkout-recap-toggle{ display:flex; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-toggle{ transform: rotate(90deg); }
.checkout-recap-body{ display:flex; align-items:center; gap:14px; flex:1; min-width:0; }
.checkout-recap-items{ display:flex; flex-wrap:wrap; gap:14px; }
.checkout-recap-chip{ display:flex; align-items:flex-start; gap:8px; font-size:0.86rem; color:var(--ink-soft); white-space:nowrap; }
/* Dans le bandeau pleine largeur, TOUS les articles de la commande restent
   visibles : le client doit voir ce qu'il paie sans avoir à déplier quoi que ce
   soit. Le repli à un seul article ne concerne que la mini-fenêtre flottante,
   qui n'a pas la place de tout montrer. */
.checkout-recap-bar.is-mini .checkout-recap-chip.extra{ display:none; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-chip.extra{ display:flex; }
.checkout-recap-chip img{ width:32px; height:32px; object-fit:cover; border-radius:8px; flex:none; transition: width .25s ease, height .25s ease; }
.checkout-recap-chip-body{ display:flex; flex-direction:column; gap:3px; }
.checkout-recap-chip-prices{ display:flex; justify-content:space-between; gap:12px; font-size:0.74rem; color: var(--ink-soft); opacity:.85; }
/* Un seul article de cette référence (qté 1) : pas de prix unitaire affiché,
   le total garde son alignement à droite même seul dans la ligne. */
.checkout-recap-chip-prices .checkout-recap-chip-line:only-child{ margin-left:auto; }
.checkout-recap-total{ font-weight:600; white-space:nowrap; margin-left:auto; }
.checkout-recap-total strong{ font-size:1.05rem; margin-left:6px; }

/* Une fois la position d'origine sortie de l'écran au scroll : bascule en
   mini-fenêtre flottante, glissée sur la gauche — largeur libre (jamais de
   texte rogné), n'affiche que le 1er article, mais reste dépliable. */
.checkout-recap-bar.is-mini{
  position: fixed;
  left: 20px;
  top: 90px;
  width: auto;
  max-width: calc(100vw - 40px);
  padding: 8px 14px;
  box-shadow: 10px 8px 20px -10px rgba(59, 52, 44, 0.32);
  z-index: 150;
}
.checkout-recap-bar.is-mini .checkout-recap-items{ flex-wrap: nowrap; }
.checkout-recap-bar.is-mini .checkout-recap-chip-label,
.checkout-recap-bar.is-mini .checkout-recap-chip-prices{ display:none; }
.checkout-recap-bar.is-mini .checkout-recap-chip img{ width:26px; height:26px; }
/* Panier réduit déplié : la flèche reste à gauche du premier article (pas au-dessus
   de tout), la liste s'empile en dessous, et le Total passe tout en bas sur sa
   propre ligne, après tous les articles — plus "au milieu à côté". */
.checkout-recap-bar.is-mini.is-expanded{ align-items: flex-start; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-toggle{ margin-top:2px; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-body{ flex-direction:column; align-items:stretch; gap:10px; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-items{ flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:10px; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-chip{ align-items:center; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-chip-label,
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-chip-prices{ display:flex; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-chip-body{
  flex-direction:row; align-items:center; justify-content:space-between; flex:1; gap:10px;
}
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-chip-prices{ justify-content:flex-end; }
.checkout-recap-bar.is-mini.is-expanded .checkout-recap-total{
  margin-left:0; padding-top:10px; border-top:1px solid var(--line);
}
.two-col-row{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 24px; align-items:start; }
@media (max-width: 800px){ .two-col-row{ grid-template-columns: 1fr; } }
.codes-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin:20px 0; font-family:monospace; font-size:1rem; }
@media (max-width: 480px){ .codes-grid{ grid-template-columns: 1fr; } }
.ck-label{
  display:flex; flex-direction:column; gap:6px;
  font-size: 0.84rem; font-weight:600; color: var(--ink-soft);
  margin-bottom: 14px;
}
.ck-label input, .ck-label select{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
}
.ck-label input:focus, .ck-label select:focus{ outline: 2px solid var(--sage-300); }
.checkout-section-title{ display:block; margin: 18px 0 12px; padding-top:16px; border-top:1px solid var(--line); }
.ck-check{
  display:flex; align-items:center; gap:8px;
  font-size:0.86rem; font-weight:600; color: var(--ink-soft);
  margin-bottom:14px; cursor:pointer;
}
.ck-check input{ width:16px; height:16px; accent-color: var(--sage-700); cursor:pointer; }
.checkout-price-detail{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.checkout-price-detail .cart-subtotal{ font-size:0.88rem; }
.checkout-price-detail .cart-subtotal strong{ font-size:0.88rem; color:var(--ink-soft); font-weight:600; }
.checkout-price-detail .checkout-price-grand-total{
  padding-top:12px; margin-top:4px; border-top:1px solid var(--line);
  font-size:1rem; color:var(--ink);
}
.checkout-price-detail .checkout-price-grand-total strong{ font-size:1.2rem; color:var(--ink); }
#payment-element{
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--cream);
}
@media (max-width: 900px){ .checkout-grid{ grid-template-columns: 1fr; } }
@media (min-width: 901px){ .checkout-pay-col{ position: sticky; top: 90px; } }

/* ---------- Sur-mesure page ---------- */
.sm-hero{
  display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center;
}
.sm-hero img{ border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit:cover; }
.sm-steps{ display:grid; gap: 20px; margin-top: 30px; }
.sm-step{ display:flex; gap: 18px; align-items:flex-start; }
.sm-step .num{
  flex:none; width:38px; height:38px; border-radius:50%;
  background: var(--blush-100); color:#9C4550;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:600;
}
.sm-step h4{ font-size:1rem; margin-bottom:4px; }
.sm-step p{ margin:0; color: var(--ink-soft); font-size:0.92rem; }
.contact-card{
  background: var(--paper);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-sm);
  display:flex; flex-direction:column; gap:16px;
}
.contact-row{
  display:flex; align-items:center; gap:14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--sage-50);
}
.contact-row .ic{
  width:38px; height:38px; border-radius:10px;
  background: var(--paper); display:flex; align-items:center; justify-content:center;
  color: var(--sage-700); flex:none;
}

/* ---------- Auth pages ---------- */
.auth-section{ padding: 50px 0 90px; }
.auth-wrap{ display:flex; justify-content:center; }
.auth-card{
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 40px 38px;
  width: 100%;
  max-width: 440px;
  text-align:center;
}
.auth-card h1{ font-size: 1.9rem; margin: 10px 0 10px; }
.auth-sub{ color: var(--ink-soft); font-size: 0.92rem; margin-bottom: 26px; }
.auth-error{
  background: var(--blush-50);
  color: #9C4550;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.86rem;
  margin-bottom: 20px;
}
.auth-divider{
  display:flex; align-items:center; gap:14px;
  margin: 24px 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background: var(--line);
}
.auth-form{ display:flex; flex-direction:column; gap:16px; text-align:left; }
.auth-form label{
  display:flex; flex-direction:column; gap:6px;
  font-size: 0.84rem; font-weight:600; color: var(--ink-soft);
}
.auth-form input, .auth-form select, .auth-form textarea{
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--cream);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  resize: vertical;
}
.auth-form input:focus, .auth-form select:focus, .auth-form textarea:focus{ outline: 2px solid var(--sage-300); }
.auth-form button{ margin-top: 6px; }
.auth-switch{ margin-top: 22px; font-size: 0.88rem; color: var(--ink-soft); }
.auth-switch a{ color: var(--sage-700); font-weight:600; transition: color .2s ease; }
.auth-switch a:hover{ color: var(--coral); }

/* ---------- No-spam banner ---------- */
.no-spam{
  display:flex; align-items:center; gap:12px;
  font-size: 0.85rem; color: var(--sage-700); font-weight:600;
  background: var(--sage-50);
  padding: 12px 18px;
  border-radius: 999px;
  width:fit-content;
}

/* ---------- Footer ---------- */
.site-footer{
  background: var(--ink);
  color: var(--cream-deep);
  padding: 70px 0 30px;
  margin-top: 100px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 46px;
  border-bottom: 1px solid rgba(251,247,241,0.14);
}
.footer-grid h4{
  color: var(--cream);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family:'Work Sans', sans-serif;
  font-weight:600;
  margin-bottom: 18px;
}
.footer-grid p, .footer-grid a{
  color: rgba(251,247,241,0.72);
  font-size: 0.9rem;
}
.footer-grid ul{ display:flex; flex-direction:column; gap:11px; }
.footer-grid ul a:hover{ color: var(--coral); }
.footer-brand .logo{ color: var(--cream); }
.footer-brand .logo span{ color: var(--sage-300); }
.footer-brand p{ margin: 16px 0 20px; max-width: 280px; }
.footer-insta-btn{
  display:inline-flex; align-items:center; gap:10px;
  background: rgba(251,247,241,0.08);
  border: 1px solid rgba(251,247,241,0.2);
  padding: 11px 20px;
  border-radius: 999px;
  font-weight:600;
  font-size:0.88rem;
  transition: all .2s ease;
}
.footer-insta-btn:hover{ background: linear-gradient(135deg,#F6D8D6,#EFC9A6,#E28E97); color:#4A2A2E; border-color: transparent; }
.footer-bottom{
  padding-top: 26px;
  display:flex; justify-content:space-between; align-items:center;
  gap: 14px; flex-wrap:wrap;
  font-size: 0.8rem;
  color: rgba(251,247,241,0.5);
}
.footer-bottom a:hover{ color: var(--cream); }
.footer-bottom-links{ display:flex; gap: 20px; }

/* ---------- Page header (sub-pages) ---------- */
.page-hero{
  padding: 56px 0 40px;
  text-align:center;
}
.page-hero h1{ font-size: clamp(2rem,4vw,2.9rem); margin: 14px 0 14px; }
.page-hero p{ color: var(--ink-soft); max-width: 560px; margin: 0 auto; }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0 !important; }
.center{ text-align:center; }

/* ---------- Animations ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@keyframes dcfFadeUp{ from{ opacity:0; transform: translateY(22px); } to{ opacity:1; transform: translateY(0); } }
@keyframes dcfPageIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes dcfBadgePulse{ 0%{ transform: scale(1); } 35%{ transform: scale(1.4); } 65%{ transform: scale(0.9); } 100%{ transform: scale(1); } }
@keyframes dcfSpin{ to{ transform: rotate(360deg); } }

body{ animation: dcfPageIn .45s ease both; }

.reveal{ opacity:0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

.product-card, .cat-card{ animation: dcfFadeUp .5s cubic-bezier(.2,.7,.3,1) both; }

.cart-badge.pulse{ animation: dcfBadgePulse .5s ease; }

/* micro-interactions */
.cat-card, .product-card, .stat-card, .value-card{ transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease; }
.hero-badge .dot{ transition: transform .3s ease; }
.hero-badge:hover .dot{ transform: scale(1.4); }
.chip{ transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; }
.chip:active{ transform: scale(0.95); }
.btn{ transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease; }

/* Filet de sécurité : les enfants directs d'une grille CSS ne rétrécissent pas sous leur
   contenu (texte, image) par défaut, ce qui peut les faire déborder de leur colonne. */
.hero-grid > *, .cat-grid > *, .product-grid > *, .pdp-grid > *, .checkout-grid > *,
.two-col-row > *, .story > *, .sm-hero > *, .footer-grid > *, .insta-inner > *,
.values-row > *, .admin-stats > *, .product-hero > *{ min-width: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; }
  .cat-grid{ grid-template-columns: repeat(2,1fr); }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .insta-inner{ grid-template-columns: 1fr; }
  .story{ grid-template-columns: 1fr; }
  .values-row{ grid-template-columns: 1fr; }
  .sm-hero{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .modal-box{ grid-template-columns: 1fr; }
  .modal-img img{ min-height: 240px; }
}
@media (max-width: 700px){
  .hero-ctas{ max-width:100%; }
  .hero-ctas .btn{
    flex: 1; min-width: 0;
    white-space: normal; text-align:center; line-height:1.2;
    padding: 14px 14px; font-size: 0.88rem;
  }
  .main-nav{
    position: fixed; top: 74px; left:0; right:0;
    height: calc(100vh - 74px);
    background: var(--cream);
    flex-direction:column;
    align-items:flex-start;
    padding: 30px 28px;
    gap: 22px;
    transform: translateX(100%);
    transition: transform .3s ease;
    z-index: 190;
    overflow-y:auto;
  }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size: 1.1rem; }
  .burger{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    width:42px; height:42px; border-radius:50%;
    background: var(--sage-100); color: var(--sage-700);
    transition: background .25s ease;
  }
  .burger-bar{
    width:18px; height:2px; border-radius:2px;
    background: currentColor;
    transition: transform .3s ease, opacity .2s ease;
  }
  .burger.open{ background: var(--blush-100); color:#9C4550; }
  .burger.open .burger-bar:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .burger.open .burger-bar:nth-child(2){ opacity:0; }
  .burger.open .burger-bar:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .header-actions .icon-btn.desktop-only{ display:none; }
  .mobile-only-link{ display:block; font-size:1.1rem; }
  .filters-bar{ flex-direction:column; align-items:stretch; min-width:0; }
  .filter-chips{
    width:100%; min-width:0; max-width:100%;
    overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* défilement horizontal discret, sans barre visible */
  }
  .filter-chips::-webkit-scrollbar{ display:none; }
  .filter-chips .chip{ flex:none; }
  .filters-secondary{ width:100%; min-width:0; max-width:100%; align-items:stretch; }
  .filters-secondary .search-wrap{ min-width:0; width:100%; }
  .footer-grid{ grid-template-columns: 1fr; gap: 30px; }
  .insta-grid{ grid-template-columns: repeat(3,1fr); }

  /* Rythme vertical resserré : les grands espacements pensés pour desktop
     paraissent démesurés sur téléphone. */
  section{ padding: 48px 0; }
  .hero{ padding: 36px 0 48px; }
  .page-hero{ padding: 36px 0 28px; }
  .insta-section{ padding: 40px 24px; border-radius: 22px; }
  .story{ gap: 32px; }
  .site-footer{ padding: 48px 0 26px; margin-top: 56px; }
}

/* Petits téléphones : cartes compactes, paires de boutons empilées pleine largeur */
@media (max-width: 520px){
  .cat-grid{ grid-template-columns: 1fr 1fr; gap: 14px; }
  .product-hero{ border-radius: 18px; }
  .hero-info{ padding: 4px 20px 24px; }
  .hero-info h3{ font-size: 1.4rem; }

  /* Carte produit : prix à gauche, bouton rond à droite, toujours sur une ligne */
  .product-info{ padding: 12px 14px 14px; gap: 8px; }
  .product-cat{ font-size: 0.64rem; }
  .product-name{ font-size: 0.92rem; }
  .product-price{ font-size: 0.92rem; }
  .product-bottom{ flex-wrap: nowrap; }

  /* Dès qu'il y a deux gros boutons côte à côte, on les empile pleine largeur
     plutôt que de les laisser se replier n'importe comment */
  /* Prix sur sa propre ligne, les deux boutons côte à côte juste en dessous */
  .hero-bottom{ flex-direction: column; align-items: stretch; gap: 12px; }
  .hero-bottom .product-actions{ flex-direction: row; gap: 10px; }
  .hero-bottom .product-actions .btn{
    flex: 1; min-width: 0;
    white-space: normal; text-align:center; line-height:1.2;
    padding-left: 10px; padding-right: 10px;
  }
  .hero-ctas{ max-width:100%; }
  .hero-ctas .btn{
    flex: 1; min-width: 0;
    white-space: normal; text-align:center; line-height:1.2;
    padding: 14px 14px; font-size: 0.88rem;
  }

  .chip{ padding: 8px 14px; font-size: 0.82rem; }
  .btn{ padding: 12px 22px; font-size: 0.9rem; }
  .btn-sm{ padding: 8px 14px; font-size: 0.78rem; }
  .btn-icon-sm{ width: 38px; height: 38px; padding: 0; font-size: 1rem; }
  .search-wrap input{ font-size: 16px; } /* évite le zoom auto iOS sur focus */
}

/* ---------- Compte client dans le checkout (popup) ---------- */
.checkout-guest-link{
  background:none; border:none; padding:0; margin-top:10px;
  color: var(--sage-700); font-size:0.86rem; font-weight:600;
  text-decoration:underline; cursor:pointer; display:block;
  transition: color .2s ease;
}
.checkout-guest-link:hover{ color: var(--coral); }
.auth-modal-overlay{
  position:fixed; inset:0;
  background: rgba(59,52,44,0.55);
  backdrop-filter: blur(2px);
  z-index: 520;
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease;
}
.auth-modal-overlay.open{ opacity:1; pointer-events:auto; }
.checkout-auth-modal{
  position:relative;
  max-height: calc(100vh - 40px);
  overflow-y:auto;
  transform: translateY(12px);
  transition: transform .25s ease;
}
.auth-modal-overlay.open .checkout-auth-modal{ transform: translateY(0); }
.checkout-auth-tabs{
  display:flex; gap:6px;
  background: var(--sage-50);
  border-radius: 999px;
  padding: 4px;
  margin: 6px 0 22px;
}
.checkout-auth-tab{
  flex:1; border:none; background:none; cursor:pointer;
  padding: 10px 14px; border-radius: 999px;
  font-size:0.86rem; font-weight:600; color: var(--ink-soft);
  transition: background .2s ease, color .2s ease;
}
.checkout-auth-tab.active{ background: var(--paper); color: var(--ink); box-shadow: var(--shadow-sm); }
.checkout-auth-notice{
  background: var(--sage-50); color: var(--ink);
  padding: 12px 16px; border-radius: 12px;
  font-size: 0.86rem; margin-top:4px;
}

/* ---- Frise d'avancement d'une commande (commande.php) ---- */
.order-timeline{
  display:flex; list-style:none; margin:0 0 24px; padding:0; gap:0;
}
.order-step{
  flex:1; position:relative; text-align:center;
  font-size:0.78rem; color: var(--ink-soft);
}
/* Le trait qui relie une étape à la précédente. */
.order-step + .order-step::before{
  content:""; position:absolute; top:7px; right:50%; left:-50%;
  height:2px; background: var(--line);
}
.order-step.done + .order-step.done::before,
.order-step.done + .order-step.current::before{ background: var(--sage-700); }
.order-step-dot{
  position:relative; z-index:1; display:block; width:16px; height:16px;
  margin:0 auto 8px; border-radius:50%;
  background: var(--paper); border:2px solid var(--line);
}
.order-step.done .order-step-dot{ background: var(--sage-700); border-color: var(--sage-700); }
.order-step.current .order-step-label{ color: var(--ink); font-weight:600; }

/* ---- Mon compte : navigation par onglets (compte.php) ----
   Même logique visuelle que l'administration : un seul bloc à l'écran,
   plus de défilement pour atteindre ses commandes. */
.account-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:6px;
}
.account-head-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.account-tabs{
  display:flex; gap:22px; flex-wrap:wrap;
  border-bottom:1px solid var(--line); margin-bottom:26px;
}
.account-tabs button{
  background:none; border:none; cursor:pointer;
  font-size:0.95rem; font-weight:500; font-family:inherit; color: var(--ink-soft);
  padding:10px 0; margin-bottom:-1px; border-bottom:2px solid transparent;
}
.account-tabs button:hover{ color: var(--ink); }
.account-tabs button[aria-selected="true"]{ color: var(--ink); border-color: var(--blush-500); }

/* Une commande dans la liste */
.account-order{
  display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line);
}
.account-order:last-child{ border-bottom:none; }
.account-order-ref{ font-weight:600; color: var(--ink); }
.account-order-meta{ font-size:0.82rem; color: var(--ink-soft); margin-top:3px; }
.account-order-links{ font-size:0.82rem; margin-top:6px; display:flex; gap:14px; flex-wrap:wrap; }
.account-order-links a{ color: var(--sage-700); font-weight:600; }
.account-order-total{ font-weight:600; white-space:nowrap; }

/* Pastille d'état, reprise du vocabulaire de couleur du site */
.order-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background: var(--ink-soft); }
.order-dot.progress{ background: var(--sage-700); }
.order-dot.done{ background: var(--sage-700); }
.order-dot.waiting{ background: var(--blush-500); }
.order-dot.cancelled{ background: var(--line); }

/* ---- Grille de formulaire : regroupe les champs courts sur une même ligne ----
   Empilés, les 7 champs de coordonnées obligeaient à faire défiler la page pour
   les remplir. Grille de 12 colonnes pour doser les largeurs (un code postal n'a
   pas besoin d'autant de place qu'une ville). Tout se remet en colonne sur
   mobile, où la largeur manque. */
.form-grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px 16px; }
.form-grid > .fg-full   { grid-column: span 12; }
.form-grid > .fg-half   { grid-column: span 6; }
.form-grid > .fg-postal { grid-column: span 3; }
.form-grid > .fg-city   { grid-column: span 5; }
.form-grid > .fg-country{ grid-column: span 4; }
@media (max-width: 640px){
  .form-grid{ grid-template-columns: 1fr; }
  .form-grid > *{ grid-column: auto; }
}

/* ---- Compte : coordonnées en lecture, modification dans une fenêtre ---- */
.account-identity{ font-weight:600; color: var(--ink); }
.account-address{ color: var(--ink-soft); font-size:0.92rem; line-height:1.7; margin:14px 0 18px; }
.account-address .muted{ font-style:italic; }

/* ---- Fiche produit : les deux boutons de contact, côte à côte ----
   Ils utilisaient .hero-ctas, calibré pour la grande bannière d'accueil : dans
   la colonne étroite d'une fiche produit, ses marges intérieures généreuses
   faisaient passer chaque bouton à la ligne, avec des largeurs inégales.
   Grille de deux colonnes égales : même largeur, même hauteur, côte à côte. */
.pdp-actions{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; margin-top:14px; }
.pdp-actions .btn{ width:100%; padding-left:12px; padding-right:12px; text-align:center; }
@media (max-width: 480px){ .pdp-actions{ grid-template-columns: 1fr; } }

/* ---- Ventes physiques : marchés et salons ---- */
/* auto-FILL et non auto-fit : auto-fit fait disparaître les colonnes inoccupées,
   si bien qu'une date unique s'étirait sur toute la largeur de la page. Avec
   auto-fill les colonnes restent en place et la vignette garde sa taille. */
.event-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap:20px; }
.event-card{
  display:flex; flex-direction:column;
  background: var(--paper); border-radius: var(--radius); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.event-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow); }
.event-card-img{ aspect-ratio: 4 / 3; overflow:hidden; }
.event-card-img img{ width:100%; height:100%; object-fit:cover; }
.event-card-body{ padding:16px 18px 20px; }
.event-card h3{ font-size:1.05rem; margin:6px 0 4px; }
.event-date{
  display:inline-block; padding:4px 10px; border-radius:999px;
  background: var(--sage-100); color: var(--sage-700);
  font-size:0.76rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
}
.event-place{ color: var(--ink-soft); font-size:0.88rem; margin:0; }

/* Page dédiée : une date par bloc, photo à gauche */
.event-list{ display:flex; flex-direction:column; gap:26px; }
.event-item{
  display:grid; grid-template-columns: 260px 1fr; gap:26px; align-items:start;
  background: var(--paper); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow-sm);
}
.event-item-cover{ border-radius: 14px; overflow:hidden; aspect-ratio: 4 / 3; }
.event-item-cover img{ width:100%; height:100%; object-fit:cover; }
.event-meta{ color: var(--ink-soft); font-size:0.92rem; line-height:1.7; margin:0 0 12px; }
/* Les dates passées s'effacent légèrement : elles informent sans concurrencer les prochaines. */
.event-list.is-past .event-item{ opacity:.88; }
.event-photos{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.event-photos img{ width:110px; height:110px; object-fit:cover; border-radius:12px; }
@media (max-width: 700px){
  .event-item{ grid-template-columns: 1fr; gap:16px; }
  .event-item-cover{ max-width:320px; }
}