/* =====================================================================
   BOIS CHALEUR — design system
   Reproduit fidelement la charte du gabarit de reference :
   couleurs, glassmorphism, rayons, ombres, typographie, animations.
   ===================================================================== */

:root {
  --forest: #8a4a2a;
  --forest-deep: #2e1b12;
  --leaf: #e08a3e;
  --leaf-bright: #f5b878;
  --paper: #fdf8f2;
  --mist: #f5ebdd;
  --ink: #2b2018;
  --muted: #7d6e5f;
  --border-soft: #e8dac5;
  --card-bg: #fffaf3;
  --panel-bg: #f9f0e3;
  --star: #e0a529;
  --font-sans: "Avenir Next", "SF Pro Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  letter-spacing: 0;
  background: linear-gradient(180deg, #fff 0, var(--paper) 45%, #f7ede0 100%);
  background-attachment: fixed;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button, input, textarea, select { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4, p { margin: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- Layout helpers ---------- */
.section-shell { width: min(1120px, 100% - 32px); margin-inline: auto; }
.section-shell--wide { width: min(1400px, 100% - 32px); margin-inline: auto; }
.overflow-hidden { overflow: hidden; }

/* ---------- Effects ---------- */
.glass {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.74);
  box-shadow: 0 24px 70px rgba(46, 27, 18, 0.12);
}
.noise { position: relative; }
.noise::after {
  content: "";
  pointer-events: none;
  opacity: 0.05;
  background-image:
    linear-gradient(90deg, rgba(138, 74, 42, 0.22) 1px, transparent 0),
    linear-gradient(rgba(138, 74, 42, 0.22) 1px, transparent 0);
  background-size: 42px 42px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#000, transparent 84%);
  mask-image: linear-gradient(#000, transparent 84%);
}
:focus-visible {
  outline: 3px solid rgba(224, 138, 62, 0.72);
  outline-offset: 4px;
}

/* Reveal-on-scroll animation (JS toggles .is-visible) */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .7s ease, transform .7s ease; }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  border-radius: 9999px;
  padding: 1rem 1.75rem;
  font-weight: 600;
  transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
  border: none;
  cursor: pointer;
}
.btn:hover { transform: translateY(-3px); }
.btn svg { width: 19px; height: 19px; }
.btn-primary {
  background: var(--forest);
  color: #fff;
  box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2);
}
.btn-primary:hover { background: var(--forest-deep); }
.btn-bright {
  background: var(--leaf-bright);
  color: var(--forest-deep);
  box-shadow: 0 22px 55px rgba(245, 184, 120, 0.34);
}
.btn-bright:hover { background: #fff; }
.btn-outline {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.btn-outline:hover { background: rgba(255, 255, 255, 0.18); }
.btn-outline-nav {
  background: transparent;
  color: var(--forest);
  border: 1px solid var(--border-soft);
}
.btn-outline-nav:hover { background: var(--mist); }
.btn-sm { padding: 0.7rem 1.3rem; font-size: 0.9rem; }
.eyebrow {
  display: block;
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--forest);
}

/* ---------------------------------------------------------------------
   HEADER / NAV
   --------------------------------------------------------------------- */
.site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding: 1.25rem 1rem 0; }

.site-nav {
  position: relative;
  margin-inline: auto;
  display: flex;
  height: 4.25rem;
  width: 100%;
  max-width: 72rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-radius: 9999px;
  padding: 0 0.6rem 0 1.1rem;
  background: rgba(255, 250, 243, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 14px 40px rgba(46, 27, 18, 0.12);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: box-shadow .3s ease, background-color .3s ease;
}
.site-header.is-scrolled .site-nav {
  background: rgba(255, 250, 243, 0.96);
  box-shadow: 0 18px 46px rgba(46, 27, 18, 0.18);
}
.brand { display: flex; align-items: center; gap: 0.7rem; border-radius: 9999px; }
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.6rem; height: 2.6rem;
  border-radius: 9999px;
  background: linear-gradient(145deg, var(--leaf) 0%, var(--forest) 100%);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(138, 74, 42, 0.4), inset 0 0 0 2px rgba(255,255,255,0.22);
}
.brand-mark svg { width: 19px; height: 19px; }
.brand-text { line-height: 1.2; }
.brand-name { display: block; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.brand-tagline { display: none; font-size: 0.72rem; font-weight: 500; color: var(--muted); }
.brand-logo-img { height: 2.4rem; width: auto; display: block; }
.primary-menu { display: none; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.primary-menu a {
  position: relative;
  display: inline-block;
  padding: 0.55rem 0.9rem;
  border-radius: 9999px;
  transition: color .2s ease, background-color .2s ease;
  white-space: nowrap;
}
.primary-menu a:hover { color: var(--forest); background: rgba(138, 74, 42, 0.08); }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.nav-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.85rem; height: 2.85rem;
  border-radius: 9999px;
  background: var(--mist);
  color: var(--forest);
  transition: background-color .2s ease;
}
.nav-cart:hover { background: var(--leaf-bright); }
.nav-cart svg { width: 20px; height: 20px; }
.nav-cart-count {
  position: absolute; top: -3px; right: -3px;
  background: var(--leaf); color: var(--forest-deep);
  font-size: 0.65rem; font-weight: 700;
  min-width: 18px; height: 18px; border-radius: 9999px;
  display: grid; place-items: center; padding: 0 3px;
  box-shadow: 0 0 0 2px rgba(255, 250, 243, 0.9);
}
.nav-cta-group { display: none; align-items: center; gap: 0.6rem; }
.nav-toggle {
  display: grid; place-items: center;
  width: 2.85rem; height: 2.85rem;
  border-radius: 9999px;
  background: var(--mist);
  color: var(--forest);
  border: none; cursor: pointer;
  transition: background-color .2s ease;
}
.nav-toggle:hover { background: var(--leaf-bright); }
.mobile-menu {
  display: none;
  margin: 0.5rem auto 0;
  max-width: 72rem;
  border-radius: 28px;
  padding: 1.25rem;
  flex-direction: column;
  gap: 0.9rem;
}
.mobile-menu.is-open { display: flex; }
.mobile-menu a { font-weight: 600; font-size: 1rem; padding: 0.4rem 0; }

@media (min-width: 768px) {
  .primary-menu { display: flex; }
  .nav-cta-group { display: flex; }
  .nav-toggle { display: none; }
  .brand-tagline { display: block; }
}
@media (min-width: 1024px) {
  .primary-menu { gap: 0.15rem; }
}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 92svh;
  overflow: hidden;
  background: var(--forest-deep) radial-gradient(120% 120% at 50% 0%, #5c3a22 0%, var(--forest-deep) 60%);
  color: #fff;
}
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; opacity: 0.85; }
.hero-media img.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.2s ease;
}
.hero-media img.hero-slide.is-active { opacity: 0.85; }
.hero-media.is-placeholder {
  display: grid; place-items: center;
  background: linear-gradient(160deg, #8a4a2a 0%, #2e1b12 70%);
}
.hero-media.is-placeholder svg { width: 30%; height: 30%; max-width: 220px; opacity: 0.18; }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(12, 7, 4, 0.75) 0%, rgba(12, 7, 4, 0.68) 34%, rgba(12, 7, 4, 0.4) 56%, rgba(12, 7, 4, 0.1) 80%),
    linear-gradient(to bottom, rgba(0,0,0,.28) 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.12) 65%, var(--forest-deep) 100%);
}
.hero-inner {
  position: relative; z-index: 10;
  display: flex; align-items: flex-end;
  min-height: 92svh;
  padding: 8rem 0 4rem;
}
.hero-content { max-width: 34rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1);
  padding: 0.5rem 1rem;
  font-size: 0.85rem; font-weight: 500;
  color: rgba(255,255,255,0.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.hero-badge svg { width: 16px; height: 16px; flex-shrink: 0; }
.hero-title {
  font-size: 2.5rem; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em;
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.4);
}
.hero-sub {
  margin-top: 1.5rem; max-width: 30rem; font-size: 1.0625rem; line-height: 1.75;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}
.hero-actions { margin-top: 2.25rem; display: flex; flex-direction: column; gap: 0.75rem; }

@media (min-width: 640px) { .hero-actions { flex-direction: row; } }
@media (min-width: 768px) {
  .hero-inner { align-items: center; padding-bottom: 0; }
  .hero-title { font-size: 3.25rem; }
}
@media (min-width: 1024px) { .hero-title { font-size: 3.75rem; } }

/* Quick stats / badges strip */
.stats-strip {
  position: relative; z-index: 20;
  margin-top: -2.5rem;
  display: grid; gap: 1rem;
}
.stat-card { border-radius: 28px; padding: 1.5rem; }
.stat-card svg { width: 28px; height: 28px; margin-bottom: 1.25rem; color: var(--forest); }
.stat-card p { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.stat-card span { display: block; margin-top: 0.35rem; font-size: 0.9rem; font-weight: 500; color: var(--muted); line-height: 1.5; }
@media (min-width: 768px) { .stats-strip { grid-template-columns: repeat(4, 1fr); } }

/* ---------------------------------------------------------------------
   GENERIC SECTIONS
   --------------------------------------------------------------------- */
.section { padding: 6rem 0; }
.section-white { background: #fff; }
.section-dark { background: var(--forest-deep); color: #fff; }
.section-head { margin: 0 auto 3rem; max-width: 44rem; text-align: center; }
.section-head h2 { font-size: 1.875rem; font-weight: 600; line-height: 1.25; color: var(--ink); }
.section-dark .section-head h2 { color: #fff; }
.section-head p { margin: 1.25rem auto 0; max-width: 42rem; font-size: 1rem; line-height: 1.8; color: var(--muted); }
@media (min-width: 768px) { .section-head h2 { font-size: 3rem; } }

/* About */
.about-grid { display: grid; align-items: center; gap: 3rem; }
.about-media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 34px; box-shadow: 0 30px 90px rgba(46, 27, 18, 0.18);
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
.about-media.is-placeholder { display: grid; place-items: center; background: var(--mist); }
.about-media.is-placeholder svg { width: 25%; height: 25%; color: var(--leaf); opacity: .7; }
.about-copy h2 { font-size: 1.875rem; font-weight: 600; line-height: 1.25; }
.about-copy .content { margin-top: 1.75rem; display: grid; gap: 1.25rem; font-size: 1.125rem; line-height: 1.8; color: var(--muted); }
@media (min-width: 1024px) { .about-grid { grid-template-columns: 0.95fr 1.05fr; } }
/* Page "A propos" independante (template-apropos.php) : sans photo, le
   texte prend toute la largeur au lieu de garder la colonne prevue pour
   l'image (utilisee elle sur le bloc "A propos" de la page d'accueil). */
.about-grid.about-grid-solo { grid-template-columns: 1fr; }
@media (min-width: 768px) { .about-copy h2 { font-size: 3rem; } }

/* Feature / service cards */
.card-grid { display: grid; gap: 1.25rem; }
.feature-card {
  border-radius: 30px;
  border: 1px solid var(--border-soft);
  background: var(--card-bg);
  padding: 1.75rem;
  box-shadow: 0 18px 45px rgba(46, 27, 18, 0.06);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover { border-color: var(--leaf); box-shadow: 0 28px 70px rgba(138, 74, 42, 0.12); }
.feature-icon {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  margin-bottom: 2rem;
  border-radius: 1rem;
  background: var(--mist);
  color: var(--forest);
  transition: transform .25s ease, background-color .25s ease, color .25s ease;
}
.feature-card:hover .feature-icon { transform: rotate(3deg); background: var(--forest); color: #fff; }
.feature-icon svg { width: 27px; height: 27px; }
.feature-card h3 { font-size: 1.25rem; font-weight: 600; }
.feature-card p { margin-top: 1rem; line-height: 1.7; color: var(--muted); }
@media (min-width: 768px) { .card-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid-4 { grid-template-columns: repeat(4, 1fr); } }

/* Compare slider (bois vert / bois sec) */
.compare-grid { display: grid; gap: 1.5rem; }
.compare-frame {
  position: relative; min-height: 480px; height: 44vw; max-height: 680px; overflow: hidden;
  border-radius: 34px; background: var(--forest-deep);
  box-shadow: 0 30px 90px rgba(46, 27, 18, 0.16);
}
.compare-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.compare-after-wrap { position: absolute; inset: 0; overflow: hidden; border-right: 2px solid rgba(255,255,255,0.9); width: 50%; }
.compare-tag { position: absolute; top: 1.25rem; border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.compare-tag-after { left: 1.25rem; background: rgba(255,255,255,0.88); color: var(--forest); }
.compare-tag-before { right: 1.25rem; background: rgba(0,0,0,0.38); color: #fff; }
.compare-handle-line { position: absolute; top: 0; left: 50%; height: 100%; width: 2px; transform: translateX(-50%); background: rgba(255,255,255,0.9); box-shadow: 0 0 20px rgba(0,0,0,.3); }
.compare-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 3rem; height: 3rem; border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.8); background: rgba(255,255,255,0.9);
  color: var(--forest); box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.compare-handle svg { width: 19px; height: 19px; }
.compare-slider-input {
  position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.5rem;
  height: 0.5rem; appearance: none; border-radius: 9999px;
  background: rgba(255,255,255,0.35); cursor: ew-resize;
}
.compare-slider-input::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; }
.compare-slider-input::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: none; }
.compare-side { display: grid; gap: 1.5rem; grid-template-rows: auto 1fr; }
.compare-photo { position: relative; min-height: 460px; overflow: hidden; border-radius: 30px; background: var(--forest-deep); }
.compare-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.compare-photo.is-placeholder { display: grid; place-items: center; background: var(--mist); }
.compare-note { border-radius: 30px; padding: 2rem; }
.compare-note h3 { font-size: 1.5rem; font-weight: 600; }
.compare-note p { margin-top: 1rem; line-height: 1.7; color: var(--muted); }
@media (min-width: 1024px) { .compare-grid { grid-template-columns: 1.08fr 0.92fr; } }

/* Process steps */
.steps-grid { position: relative; display: grid; gap: 1.25rem; }
.steps-line { position: absolute; left: 0; right: 0; top: 3rem; height: 1px; background: rgba(255,255,255,0.18); display: none; }
.step-card { position: relative; border-radius: 28px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); padding: 1.5rem; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.step-num { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--leaf); color: var(--forest-deep); font-size: 1.125rem; font-weight: 600; }
.step-card h3 { margin-top: 1.75rem; font-size: 1.25rem; font-weight: 600; }
.step-card p { margin-top: 0.75rem; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.68); }
@media (min-width: 768px) { .steps-grid { grid-template-columns: repeat(4, 1fr); } .steps-line { display: block; } }

/* Badge de note moyenne (logo + note + etoiles), au-dessus des avis */
.rating-badge-wrap { text-align: center; margin: -1rem 0 2.5rem; }
.rating-badge {
  display: inline-flex; align-items: center; gap: 1.25rem;
  padding: 1rem 1.75rem; text-align: left;
  background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 9999px;
  box-shadow: 0 18px 45px rgba(46, 27, 18, 0.06);
}
.rating-badge-logo { height: 2.5rem; width: auto; flex-shrink: 0; }
.rating-badge-score { display: grid; gap: 0.2rem; }
.rating-badge-score strong { font-size: 1.5rem; font-weight: 800; color: var(--ink); line-height: 1; }
.rating-badge-label { font-size: 0.78rem; color: var(--muted); }
.rating-stars { position: relative; display: inline-flex; }
.rating-stars-base, .rating-stars-fill { display: flex; gap: 0.1rem; }
.rating-stars-base { color: var(--border-soft); }
.rating-stars-base svg, .rating-stars-fill svg { width: 15px; height: 15px; }
.rating-stars-fill { position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; color: var(--star); }

/* Testimonials */
.testimonial-grid { display: grid; gap: 1.25rem; }
.testimonial-card { border-radius: 30px; background: #fff; padding: 1.75rem; box-shadow: 0 24px 70px rgba(46, 27, 18, 0.08); }
.testimonial-stars { display: flex; gap: 0.15rem; margin-bottom: 1.25rem; color: var(--star); }
.testimonial-stars svg { width: 18px; height: 18px; }
.testimonial-card p.quote { line-height: 1.8; color: var(--muted); }
.testimonial-author { margin-top: 1.75rem; }
.testimonial-author strong { display: block; font-weight: 600; }
.testimonial-author span { font-size: 0.9rem; color: var(--muted); }
@media (min-width: 768px) { .testimonial-grid { grid-template-columns: repeat(3, 1fr); } }

/* Contact */
.contact-grid { display: grid; gap: 2.5rem; }
.contact-copy h2 { font-size: 1.875rem; font-weight: 600; line-height: 1.25; }
.contact-methods { margin-top: 2rem; display: grid; gap: 1rem; }
.contact-method { display: flex; align-items: center; gap: 1rem; border-radius: 24px; padding: 1.25rem; transition: transform .2s ease; }
a.contact-method:hover { transform: translateY(-3px); }
.contact-method-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--forest); color: #fff; flex-shrink: 0; }
.contact-method-icon svg { width: 20px; height: 20px; }
.contact-method strong { display: block; }
.contact-method span.value { color: var(--muted); }
.contact-legal { margin-top: 1rem; border-radius: 24px; padding: 1.25rem; }
.contact-legal h3 { margin: 0 0 0.75rem; font-size: 1.1rem; }
.contact-legal address { margin: 0.35rem 0 1rem; color: var(--muted); font-style: normal; line-height: 1.6; }
.contact-legal dl { display: grid; gap: 0.55rem; margin: 0; }
.contact-legal dl div { display: grid; grid-template-columns: minmax(8rem, 0.8fr) 1.2fr; gap: 0.75rem; }
.contact-legal dt { color: var(--muted); }
.contact-legal dd { margin: 0; font-weight: 600; }
.contact-panel { border-radius: 34px; background: var(--panel-bg); padding: 1rem; box-shadow: 0 30px 90px rgba(46, 27, 18, 0.12); }
.contact-form { display: grid; gap: 1rem; }
.contact-form .row-2 { display: grid; gap: 1rem; }
.contact-form input, .contact-form textarea {
  border-radius: 1rem; border: 1px solid var(--border-soft); background: #fff;
  padding: 1rem 1.25rem; outline: none; width: 100%;
}
.contact-form textarea { resize: none; }
.contact-map { margin-top: 1.25rem; height: 18rem; width: 100%; border-radius: 26px; border: 0; }
.form-notice { border-radius: 1rem; padding: 1rem 1.25rem; font-size: 0.9rem; }
.form-notice.success { background: var(--mist); color: var(--forest); }
.form-notice.error { background: #fdecec; color: #a3312c; }
@media (min-width: 640px) { .contact-form .row-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 0.92fr 1.08fr; } }
@media (min-width: 768px) { .contact-copy h2, .contact-panel-title { font-size: 3rem; } .contact-panel { padding: 1.5rem; } }
@media (max-width: 480px) { .contact-legal dl div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* Suivi de commande */
.order-tracking { max-width: 40rem; margin-inline: auto; }
.order-tracking-form { border-radius: 34px; padding: 1.5rem; display: grid; gap: 1rem; box-shadow: 0 30px 90px rgba(46, 27, 18, 0.12); }
.order-tracking-form .row-2 { display: grid; gap: 1rem; }
.order-tracking-form input {
  border-radius: 1rem; border: 1px solid var(--border-soft); background: #fff;
  padding: 1rem 1.25rem; outline: none; width: 100%;
}
.order-tracking-form input:focus { border-color: var(--leaf); }
.order-tracking-form button { justify-self: start; }
@media (min-width: 640px) { .order-tracking-form .row-2 { grid-template-columns: repeat(2, 1fr); } }

.order-tracking-result { margin-top: 2rem; }
.order-status-card {
  border-radius: 28px; border: 1px solid var(--border-soft); background: var(--card-bg);
  padding: 2rem; box-shadow: 0 18px 45px rgba(46, 27, 18, 0.08);
}
.order-status-card h3 { margin-top: .85rem; font-size: 1.35rem; font-weight: 600; }
.order-status-card p { margin-top: .75rem; color: var(--muted); line-height: 1.7; }
.order-status-badge {
  display: inline-flex; align-items: center; border-radius: 9999px;
  padding: .4rem 1rem; font-size: .8rem; font-weight: 700;
  background: var(--mist); color: var(--forest);
}
.order-status-badge.status-processing { background: var(--leaf-bright); color: var(--forest-deep); }
.order-status-badge.status-completed { background: var(--forest); color: #fff; }
.order-status-badge.status-cancelled, .order-status-badge.status-failed { background: #fdecec; color: #a3312c; }
.order-status-meta {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft);
  display: grid; gap: .5rem; font-size: .9rem; color: var(--muted); list-style: none;
}
.order-status-meta strong { color: var(--ink); }

/* Shop teaser on homepage */
.shop-teaser-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 2.5rem; }
.shop-teaser-head h2 { font-size: 1.875rem; font-weight: 600; }
@media (min-width: 768px) { .shop-teaser-head h2 { font-size: 3rem; } }

/* Generic content pages (page.php / single.php / archive.php) */
.page-wrap { padding: 9rem 0 6rem; min-height: 40vh; }
.page-wrap .page-title { font-size: 2.25rem; font-weight: 600; margin-bottom: 2rem; }
.page-wrap .entry-content { max-width: 44rem; line-height: 1.8; color: var(--muted); }
.page-wrap .entry-content > * + * { margin-top: 1.25rem; }
/* Panier / Commande / Mon compte / pages construites avec un page builder
   (Elementor...) : ce contenu a deja sa propre mise en page (largeur,
   grilles) et a besoin de toute la largeur de la page, pas de la colonne de
   lecture etroite prevue pour du texte simple (44rem, cf. AGB, FAQ...).
   Sinon tout se retrouve ecrase a gauche avec un grand vide a cote. */
.page-wrap .entry-content:has(.wp-block-woocommerce-cart),
.page-wrap .entry-content:has(.wp-block-woocommerce-checkout),
.page-wrap .entry-content:has(.woocommerce),
.page-wrap .entry-content:has(.elementor) {
  max-width: none;
}
.post-list { display: grid; gap: 2rem; max-width: 44rem; }
.post-list article { border-radius: 26px; border: 1px solid var(--border-soft); background: var(--card-bg); padding: 1.75rem; }
.post-list h2 { font-size: 1.35rem; font-weight: 600; }
.post-list h2 a:hover { color: var(--forest); }
.post-list .entry-meta { font-size: .85rem; color: var(--muted); margin-top: .35rem; }
.post-list .entry-excerpt { margin-top: 1rem; color: var(--muted); line-height: 1.7; }

/* Footer */
.site-footer { background: var(--forest-deep); color: #fff; padding: 3rem 0; }
.footer-grid { display: grid; gap: 2.5rem 3.5rem; }
.footer-brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; }
.footer-brand .brand-mark { background: #fff; color: var(--forest); }
.footer-logo-wrap {
  display: inline-flex; align-items: center;
  background: #fff; border-radius: 14px; padding: .6rem 1rem;
}
.footer-logo-img { height: 2rem; width: auto; display: block; }
.footer-col h3 { margin-bottom: 1rem; font-weight: 600; }
.footer-col .links { display: grid; gap: 0.75rem; color: rgba(255,255,255,0.68); }
.footer-col .links a:hover { color: #fff; }
.footer-about-text { max-width: 30rem; line-height: 1.7; color: rgba(255,255,255,0.68); }
.footer-meta { margin-top: 1.5rem; display: grid; gap: 0.6rem; font-size: 0.92rem; color: rgba(255,255,255,0.68); }
.footer-meta strong { color: rgba(255,255,255,0.92); font-weight: 600; }
.footer-meta a { color: rgba(255,255,255,0.68); }
.footer-meta a:hover { color: #fff; }
.footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.85rem; color: rgba(255,255,255,0.5); text-align: center; }

.newsletter-card {
  margin-top: 2rem;
  padding: 1.5rem;
  border-radius: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
}
.newsletter-card h4 { font-weight: 600; margin-bottom: 0.5rem; }
.newsletter-card p { font-size: 0.9rem; color: rgba(255,255,255,0.68); margin-bottom: 1rem; }
.newsletter-form { display: grid; gap: 0.6rem; }
.newsletter-form input[type="email"] {
  border-radius: 9999px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1); color: #fff; padding: 0.75rem 1.1rem;
  outline: none; width: 100%;
}
.newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.newsletter-form button {
  border-radius: 9999px; background: var(--leaf-bright); color: var(--forest-deep);
  border: none; padding: 0.75rem 1.1rem; font-weight: 600; cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.newsletter-form button:hover { background: #fff; transform: translateY(-2px); }
.newsletter-notice { font-size: 0.85rem; padding: 0.6rem 0.9rem; margin-bottom: 0.75rem; }
.newsletter-notice.success { background: rgba(184,229,189,0.18); color: var(--leaf-bright); }
.newsletter-notice.error { background: rgba(220,80,70,0.18); color: #ffb4ac; }

@media (min-width: 640px) { .footer-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid-4 { grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr; } }

/* =====================================================================
   WOOCOMMERCE
   ===================================================================== */
.woocommerce-breadcrumb { display: none; }
.shop-hero { position: relative; overflow: hidden; padding: 9rem 0 3rem; background: var(--forest-deep); color: #fff; }
.shop-hero-media { position: absolute; inset: 0; }
.shop-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.shop-hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(18,36,25,.42), var(--forest-deep) 92%); }
.shop-hero .section-shell { position: relative; z-index: 2; }
.shop-hero h1 { font-size: 2.25rem; font-weight: 600; }
.shop-hero p { margin-top: .75rem; color: rgba(255,255,255,.72); max-width: 40rem; }
.woo-wrap { padding: 3rem 0 6rem; }
/* Fiche produit : pas de bandeau shop-hero au-dessus, donc il faut son propre
   espace pour ne pas passer sous le header fixe (sinon le titre du produit,
   premier element de la colonne resume, se retrouve cache derriere le header). */
.woo-wrap--no-hero { padding-top: 9rem; }

/* Blocs produits qui se rafraichissent tout seuls (voir data-live-products) :
   petit fondu pendant que le nouveau tirage aleatoire remplace l'ancien. */
[data-live-products] { transition: opacity .2s ease; }
[data-live-products].is-refreshing { opacity: 0; }

/* Avis clients : glissement droite -> gauche a chaque rafraichissement
   (au lieu d'un simple fondu) — l'ancien lot glisse et disparait vers la
   gauche, le nouveau apparait depuis la droite et vient se centrer. */
[data-live-reviews] { transition: transform .35s ease, opacity .35s ease; }
[data-live-reviews].is-sliding-out { transform: translateX(-2rem); opacity: 0; }
[data-live-reviews].is-sliding-in { transition: none; transform: translateX(2rem); opacity: 0; }

.woocommerce ul.products { display: grid; gap: 1.5rem; grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }

.woocommerce ul.products li.product {
  position: relative; list-style: none;
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--border-soft);
  border-radius: 28px; padding: 1.1rem; box-shadow: 0 18px 45px rgba(46, 27, 18, 0.07);
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.woocommerce ul.products li.product:hover { border-color: var(--leaf); box-shadow: 0 28px 70px rgba(138, 74, 42, 0.14); transform: translateY(-4px); }
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { display: block; text-decoration: none; color: inherit; }
.woocommerce ul.products li.product img {
  border-radius: 20px; aspect-ratio: 1/1; object-fit: cover; margin-bottom: 1.1rem;
  background: var(--mist);
}
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-size: 1.02rem; font-weight: 600; line-height: 1.35; color: var(--ink); margin: 0 0 .4rem;
}
.woocommerce ul.products li.product .price { display: block; margin-bottom: .2rem; color: var(--forest); font-weight: 700; font-size: 1.05rem; }
.woocommerce ul.products li.product .price del { color: var(--muted); font-weight: 400; opacity: .7; margin-right: .4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .star-rating { color: var(--star); margin-bottom: .35rem; }
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link { margin-bottom: .25rem; }
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .buy-now-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; border-radius: 9999px;
  padding: .7rem 1rem; font-weight: 600; font-size: .9rem; border: none;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.woocommerce ul.products li.product .button {
  margin-top: auto; background: var(--forest); color: #fff !important;
}
.woocommerce ul.products li.product .button:hover { background: var(--forest-deep); transform: translateY(-2px); }
.woocommerce ul.products li.product .buy-now-button {
  margin-top: .6rem; background: transparent; color: var(--forest) !important;
  border: 1.5px solid var(--border-soft);
}
.woocommerce ul.products li.product .buy-now-button:hover { background: var(--forest); border-color: var(--forest); color: #fff !important; transform: translateY(-2px); }
.woocommerce ul.products li.product .onsale {
  position: absolute; margin: .9rem; border-radius: 9999px; background: var(--leaf-bright); z-index: 2;
  color: var(--forest-deep); font-size: .7rem; font-weight: 700; padding: .3rem .7rem; min-height: 0; min-width: 0; left: auto; top: 0; right: 0;
}

/* Sorting / result count */
.woocommerce-result-count, .woocommerce-ordering { color: var(--muted); font-size: .9rem; }
.woocommerce-ordering select, .woo-category-filter { border-radius: 9999px; border: 1px solid var(--border-soft); padding: .5rem 1rem; background: #fff; }
form.woocommerce-ordering { margin-bottom: 0; }
.woo-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; }
.woo-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }

/* Pagination */
.woocommerce nav.woocommerce-pagination { margin-top: 2rem; }
.woocommerce nav.woocommerce-pagination ul { display: flex; justify-content: center; gap: .5rem; border: none; }
.woocommerce nav.woocommerce-pagination ul li { border: none; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 9999px;
  background: #fff; border: 1px solid var(--border-soft); color: var(--ink);
}
.woocommerce nav.woocommerce-pagination ul li span.current { background: var(--forest); color: #fff; border-color: var(--forest); }

/* Single product */
.woocommerce div.product { display: grid; gap: 3.5rem; }
@media (min-width: 1024px) { .woocommerce div.product { grid-template-columns: 1.05fr 1fr; align-items: start; } }

/* On laisse WooCommerce gerer entierement le comportement de la galerie
   (FlexSlider + PhotoSwipe, mesures en JS au chargement) : uniquement de
   l'habillage visuel ici, rien qui puisse changer les dimensions ou la
   position du conteneur apres coup (sticky, width force, reflow...), sinon
   le slider affiche une image alors que le calcul interne pointe sur une
   autre ("l'image principale reste figee"). */
.woocommerce div.product .woocommerce-product-gallery { position: relative; border-radius: 30px; overflow: hidden; box-shadow: 0 30px 90px rgba(46, 27, 18, 0.14); background: var(--mist); }
.woocommerce div.product .woocommerce-product-gallery__trigger {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border-radius: 9999px; background: rgba(255,255,255,0.9); box-shadow: 0 10px 24px rgba(18,36,25,.18);
}
.woocommerce div.product .flex-control-thumbs { display: flex; gap: .75rem; margin-top: .9rem; list-style: none; padding: 0; flex-wrap: wrap; }
.woocommerce div.product .flex-control-thumbs li { width: 4.25rem; }
.woocommerce div.product .flex-control-thumbs img {
  border-radius: 14px; cursor: pointer; opacity: .65; border: 2px solid transparent;
  transition: opacity .2s ease, border-color .2s ease;
}
.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover { opacity: 1; border-color: var(--leaf); }

.woocommerce div.product .summary { max-width: none; }
.woocommerce div.product .summary h1.product_title { font-size: 2.1rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.woocommerce-product-rating { display: flex; align-items: center; gap: .6rem; margin: .85rem 0 0; }
.woocommerce-product-rating .woocommerce-review-link { font-size: .85rem; color: var(--muted); }
.woocommerce div.product .summary .price {
  display: block; font-size: 1.65rem; color: var(--forest); font-weight: 700;
  margin: 1.25rem 0; padding-bottom: 1.25rem; border-bottom: 1px solid var(--border-soft);
}
.woocommerce div.product .summary .woocommerce-product-details__short-description { color: var(--muted); line-height: 1.8; }
.woocommerce div.product .summary .woocommerce-product-details__short-description > *:first-child { margin-top: 0; }

/* Variations produit (ex. "Ladungsgroesse") : le <select> natif de
   WooCommerce n'a aucun style par defaut, on l'aligne sur les autres champs
   du theme (fleche personnalisee, coins arrondis, etats hover/focus). */
.woocommerce div.product form.cart .variations {
  width: 100%; border-collapse: collapse; margin: 0 0 .5rem;
}
.woocommerce div.product form.cart .variations tr {
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
}
.woocommerce div.product form.cart .variations tr + tr { margin-top: 1.1rem; }
.woocommerce div.product form.cart .variations th.label {
  padding: 0; text-align: left; vertical-align: baseline;
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--forest);
}
.woocommerce div.product form.cart .variations td.value { padding: 0; width: 100%; }
.woocommerce div.product form.cart .variations select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  display: block; width: 100%; max-width: 22rem;
  border-radius: 16px; border: 1.5px solid var(--border-soft);
  background-color: var(--mist);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a4a2a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 16px;
  padding: .9rem 2.75rem .9rem 1.1rem;
  font-weight: 600; font-size: .95rem; color: var(--ink);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.woocommerce div.product form.cart .variations select:hover { border-color: var(--leaf); }
.woocommerce div.product form.cart .variations select:focus {
  outline: none; border-color: var(--forest); background-color: #fff;
  box-shadow: 0 0 0 4px rgba(138, 74, 42, 0.12);
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-block; font-size: .82rem; font-weight: 600;
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  transition: color .2s ease;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--forest); }

.woocommerce div.product .single_variation_wrap { width: 100%; }
.woocommerce div.product .woocommerce-variation.single_variation:not(:empty) {
  margin: .25rem 0 1.25rem; padding: 1rem 1.25rem;
  background: var(--panel-bg); border: 1px solid var(--border-soft); border-radius: 18px;
}
.woocommerce div.product .woocommerce-variation-price .price {
  margin: 0; padding: 0; border: none; font-size: 1.25rem;
}
.woocommerce div.product .woocommerce-variation-availability { margin-top: .35rem; font-size: .85rem; color: var(--muted); }
.woocommerce div.product .woocommerce-variation-availability .stock.in-stock { color: var(--forest); font-weight: 600; }

.woocommerce div.product form.cart {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
  margin: 1.75rem 0 0; padding-top: 1.75rem; border-top: 1px solid var(--border-soft);
}
.woocommerce div.product form.cart .quantity { display: inline-flex; }
.woocommerce div.product form.cart .quantity input.qty {
  width: 4.5rem; border-radius: 9999px; border: 1px solid var(--border-soft); padding: .85rem 1rem; text-align: center; background: #fff;
}
.woocommerce div.product form.cart button.single_add_to_cart_button {
  border-radius: 9999px; background: var(--forest); color: #fff; border: none;
  padding: 1rem 2rem; font-weight: 600; box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2); transition: background-color .2s ease, transform .2s ease;
}
.woocommerce div.product form.cart button.single_add_to_cart_button:hover { background: var(--forest-deep); transform: translateY(-2px); }
.woocommerce div.product form.cart .buy-now-button {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; background: transparent; color: var(--forest) !important;
  border: 1.5px solid var(--border-soft); padding: 1rem 2rem; font-weight: 600;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.woocommerce div.product form.cart .buy-now-button:hover { background: var(--forest); border-color: var(--forest); color: #fff !important; transform: translateY(-2px); }

.product-trust-badges {
  margin: 1.75rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border-soft);
  list-style: none; display: grid; gap: .9rem;
}
.product-trust-badges li { display: flex; align-items: center; gap: .85rem; font-size: .92rem; font-weight: 500; color: var(--ink); }
.product-trust-badges .badge-icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 2.15rem; height: 2.15rem; border-radius: 9999px;
  background: var(--mist); color: var(--forest);
}
.product-trust-badges .badge-icon svg { width: 16px; height: 16px; }

.woocommerce div.product .product_meta {
  margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border-soft);
  font-size: .85rem; color: var(--muted); display: grid; gap: .4rem;
}
.woocommerce div.product .product_meta > span { display: block; }
.woocommerce div.product .product_meta a { color: var(--forest); }
.woocommerce div.product .product_meta a:hover { text-decoration: underline; }

.woocommerce div.product .woocommerce-tabs { margin-top: 3.5rem; grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border-soft); padding: 0; list-style: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { padding-bottom: .85rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { color: var(--forest); border-bottom: 2px solid var(--forest); }
.woocommerce div.product .woocommerce-tabs .panel { padding-top: 1.75rem; line-height: 1.8; color: var(--muted); max-width: 44rem; }
.woocommerce div.product .woocommerce-tabs .panel h2 { font-size: 1.35rem; font-weight: 600; color: var(--ink); margin-bottom: 1rem; }

/* Retire le lien "Voir le panier" que WooCommerce insere en JS apres un ajout AJAX
   (le tiroir panier fait deja office de confirmation visuelle). */
.added_to_cart.wc-forward { display: none !important; }

/* Related / upsell products */
.related.products, .upsells.products { grid-column: 1 / -1; margin-top: 4rem; }
.related.products h2, .upsells.products h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; }

/* Cart & checkout (gabarits classiques — utilises seulement si le site
   repasse un jour aux shortcodes [woocommerce_cart]/[woocommerce_checkout]
   plutot qu'aux blocs Panier/Commande ; voir plus bas pour les blocs). */
.woocommerce table.shop_table { width: 100%; border-collapse: collapse; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-soft); }
.woocommerce table.shop_table th { background: var(--mist); text-align: left; padding: 1rem; font-weight: 600; }
.woocommerce table.shop_table td { padding: 1rem; border-top: 1px solid var(--border-soft); }
.woocommerce td.product-name img { border-radius: 12px; width: 64px; }
.woocommerce .cart-collaterals .cart_totals { background: var(--panel-bg); border-radius: 24px; padding: 1.5rem; }
.woocommerce a.remove { color: #a3312c !important; border-radius: 9999px; }
.woocommerce input.qty { border-radius: 9999px; border: 1px solid var(--border-soft); padding: .6rem .9rem; width: 4rem; text-align: center; }
.woocommerce #coupon_code { border-radius: 9999px; border: 1px solid var(--border-soft); padding: .75rem 1.25rem; }
.woocommerce button[name="apply_coupon"], .woocommerce button[name="update_cart"] {
  border-radius: 9999px; background: #fff; border: 1px solid var(--border-soft); padding: .75rem 1.5rem; font-weight: 600;
}
.woocommerce a.checkout-button, .woocommerce #place_order {
  border-radius: 9999px; background: var(--forest); color: #fff !important; border: none;
  padding: 1rem 1.75rem; font-weight: 600; box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2); display: inline-flex; width: 100%; justify-content: center;
}
.woocommerce a.checkout-button:hover, .woocommerce #place_order:hover { background: var(--forest-deep); }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select {
  border-radius: 1rem; border: 1px solid var(--border-soft); padding: .85rem 1.1rem; background: #fff; width: 100%;
}
.woocommerce-checkout #payment { background: var(--panel-bg); border-radius: 24px; }
.woocommerce-checkout #payment div.payment_box { background: var(--mist); border-radius: 16px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
  border-radius: 16px; background: var(--mist); color: var(--forest); padding: 1rem 1.25rem; border: none; list-style: none;
}
.woocommerce-error { background: #fdecec; color: #a3312c; }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { display: none; }
.woocommerce a.button.wc-forward { border-radius: 9999px; background: var(--forest); color: #fff !important; padding: .6rem 1.2rem; }

/* WooCommerce Blocks (cart/checkout block editor pages) */
.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { max-width: 1120px; margin-inline: auto; }
.wc-block-components-button { border-radius: 9999px !important; }
.wc-block-cart-item__product-image img { border-radius: 12px; }

/* Star rating fill color */
.star-rating span::before { color: var(--star); }

.woo-empty { text-align: center; padding: 4rem 0; color: var(--muted); }
.woo-empty a.btn-primary { margin-top: 1.5rem; }

/* =====================================================================
   CART DRAWER
   ===================================================================== */
body.cart-drawer-locked { overflow: hidden; }

.cart-drawer-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(46, 27, 18, 0.45);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.cart-drawer-overlay.is-open { opacity: 1; visibility: visible; }

.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 95;
  width: min(420px, 100%); height: 100%;
  background: #fff; color: var(--ink);
  box-shadow: -30px 0 60px rgba(46, 27, 18, 0.22);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .35s ease;
}
.cart-drawer.is-open { transform: translateX(0); }

.cart-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem; border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
}
.cart-drawer-head strong { font-size: 1.1rem; }
.cart-drawer-close {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 9999px; border: none; background: var(--mist); color: var(--forest);
  cursor: pointer; transition: background-color .2s ease;
}
.cart-drawer-close:hover { background: var(--leaf-bright); }
.cart-drawer-close svg { width: 18px; height: 18px; }

.cart-drawer-content { display: flex; flex-direction: column; flex: 1; min-height: 0; }

.cart-drawer-items {
  list-style: none; margin: 0; padding: 1rem 1.5rem; overflow-y: auto; flex: 1;
  display: grid; gap: 1.25rem; align-content: start;
}
.cart-drawer-item { position: relative; display: flex; gap: 1rem; padding-right: 1.5rem; }
.cart-drawer-item-media { flex-shrink: 0; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--mist); }
.cart-drawer-item-media img { width: 100%; height: 100%; object-fit: cover; }
.cart-drawer-item-body { min-width: 0; }
.cart-drawer-item-title { font-weight: 600; font-size: .92rem; line-height: 1.35; margin: 0 0 .3rem; }
.cart-drawer-item-title a { color: var(--ink); }
.cart-drawer-item-meta { font-size: .85rem; color: var(--muted); margin: 0; }
.cart-drawer-item-remove {
  position: absolute; top: 0; right: 0; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: var(--mist);
  color: var(--muted); font-size: 1rem; line-height: 1; text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.cart-drawer-item-remove:hover { background: #fdecec; color: #a3312c; }

.cart-drawer-subtotal {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-soft);
  font-size: 1rem; flex-shrink: 0;
}
.cart-drawer-subtotal strong { color: var(--forest); font-size: 1.15rem; }

.cart-drawer-actions { display: grid; gap: .75rem; padding: 0 1.5rem 1.5rem; flex-shrink: 0; }
.cart-drawer-actions .btn { width: 100%; }
.cart-drawer-actions button.btn { cursor: pointer; }

.cart-drawer-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 2rem; text-align: center; color: var(--muted);
}
.cart-drawer-empty svg { width: 40px; height: 40px; color: var(--leaf); }
.cart-drawer-empty .btn { cursor: pointer; }

@media (max-width: 480px) { .cart-drawer { width: 100%; } }

/* =====================================================================
   BLOCS PANIER / COMMANDE WOOCOMMERCE (pages Panier et Commande modernes)
   Ces pages sont construites avec les blocs Gutenberg WooCommerce
   ([woocommerce/cart] et [woocommerce/checkout]), pas les shortcodes
   classiques : le rendu final (apres hydratation React) utilise ses
   propres classes wc-block-*, ciblees ici.
   ===================================================================== */

.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout { max-width: 1160px; margin-inline: auto; }

/* WooCommerce gere deja cette mise en page en flex avec des largeurs en
   pourcentage (main 65% / sidebar 35%) : on ne touche pas a "display" ni aux
   largeurs, sinon les deux entrent en conflit et la mise en page se retrouve
   ecrasee sur une petite largeur avec un grand vide a cote. On ajoute juste
   l'alignement du sticky et un peu d'air. */
.wc-block-components-sidebar-layout { align-items: flex-start; }
.wc-block-components-main { padding-right: 3rem !important; }
.wc-block-components-sidebar { padding-left: 0 !important; }
@media (min-width: 1024px) {
  .wc-block-components-sidebar { position: sticky; top: 6.5rem; }
}
@media (max-width: 767px) {
  .wc-block-components-sidebar-layout { flex-direction: column; }
  .wc-block-components-main, .wc-block-components-sidebar { width: 100% !important; padding: 0 !important; }
}

/* Un seul recap de commande a la fois : WooCommerce affiche soit le panneau
   lateral complet (ecran large, classe "is-large"), soit un tiroir repliable
   place en haut du formulaire (ecran etroit, classe "is-small") — jamais les
   deux. Sans cette regle les deux versions restent visibles en meme temps
   des que la mise en page passe en colonne unique ci-dessus. */
.wc-block-components-sidebar-layout.is-small .wc-block-checkout__sidebar { display: none; }

/* Boutons communs a tous les blocs (proceder au paiement, payer, coupon...) */
.wc-block-components-button.wp-element-button {
  border-radius: 9999px; font-weight: 600; font-size: .95rem;
  padding: 1rem 1.75rem; transition: background-color .2s ease, color .2s ease, transform .2s ease, border-color .2s ease;
}
.wc-block-components-button.wp-element-button.contained {
  background: var(--forest); color: #fff; border: none; box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2);
}
.wc-block-components-button.wp-element-button.contained:hover { background: var(--forest-deep); color: #fff; transform: translateY(-2px); }
.wc-block-components-button.wp-element-button.outlined {
  background: transparent; color: var(--forest); border: 1.5px solid var(--border-soft);
}
.wc-block-components-button.wp-element-button.outlined:hover { background: var(--mist); }
/* Ne pas transformer les petits boutons +/- de quantite en pilules pleines. */
.wc-block-components-quantity-selector__button.wc-block-components-button.wp-element-button {
  border-radius: 9999px; padding: 0; width: 2rem; height: 2rem; background: var(--mist); color: var(--forest); border: none; box-shadow: none;
}
.wc-block-components-quantity-selector__button.wc-block-components-button.wp-element-button:hover { background: var(--leaf-bright); transform: none; }

/* ---------- Panier ---------- */
.wc-block-cart-items { width: 100%; border-collapse: separate; border-spacing: 0; }
.wc-block-cart-items__header { border-bottom: 1px solid var(--border-soft); }
.wc-block-cart-items__header-total, .wc-block-cart-items__header-product { padding-bottom: 1rem; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; }
.wc-block-cart-items__row { border-bottom: 1px solid var(--border-soft); }
.wc-block-cart-item__image, .wc-block-cart-item__product, .wc-block-cart-item__total { padding: 1.5rem 0; vertical-align: top; }
.wc-block-cart-item__image img { border-radius: 16px; width: 84px; background: var(--mist); }
.wc-block-cart-item__product .wc-block-components-product-name { font-weight: 600; color: var(--ink); text-decoration: none; }
.wc-block-cart-item__total .wc-block-components-formatted-money-amount { font-weight: 700; color: var(--forest); }
.wc-block-cart-item__remove-link { color: var(--muted); font-size: .85rem; }
.wc-block-cart-item__remove-link:hover { color: #a3312c; }
.wc-block-components-quantity-selector {
  display: inline-flex; align-items: center; gap: .5rem;
  border-radius: 9999px; border: 1px solid var(--border-soft); padding: .3rem; background: #fff;
}
.wc-block-components-quantity-selector__input { width: 2.5rem; border: none; text-align: center; background: transparent; font-weight: 600; }

.wc-block-cart__totals-title { font-size: 1.35rem; font-weight: 600; margin-bottom: 1.25rem; }
.wc-block-components-totals-wrapper { border-top: 1px solid var(--border-soft); padding: 1rem 0; }
.wc-block-components-totals-item { display: flex; align-items: baseline; justify-content: space-between; padding: .35rem 0; }
.wc-block-components-totals-item__label { color: var(--muted); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.15rem; font-weight: 700; color: var(--forest); }
.wc-block-components-totals-coupon.wc-block-components-panel,
.wc-block-components-panel { border-top: 1px solid var(--border-soft); padding: 1rem 0; }
.wc-block-components-panel__button { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--forest); cursor: pointer; background: none; border: none; padding: 0; }
.wc-block-components-totals-coupon__form .wc-block-components-text-input input { border-radius: 9999px; }
.wc-block-cart__submit-container, .wc-block-cart__submit { margin-top: 1.5rem; }
.wc-block-cart__submit-button { width: 100%; }
.wc-block-cart-items, .wc-block-cart__sidebar {
  background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 28px; padding: 1.5rem 1.75rem;
}
.wc-block-cart__sidebar { align-self: start; }

/* ---------- Commande (checkout) : etapes numerotees, cartes elevees ----------
   Le numero de chaque etape est pose par JS (attribut data-step-number, voir
   assets/js/main.js) plutot qu'un compteur CSS : ce gabarit est un rendu
   React de WooCommerce qui (re)monte ses blocs de facon a casser les
   compteurs CSS (chaque etape repartait de 1). Le selecteur ne cible que les
   4 vraies etapes (coordonnees/livraison/mode de livraison/paiement) pour ne
   pas numeroter le recap de commande, qui reutilise la meme classe de titre
   mais n'est pas une etape du formulaire. */
.wc-block-components-checkout-step {
  position: relative;
  background: #fff; border: 1px solid var(--border-soft); border-radius: 28px;
  padding: 1.85rem 2rem 2.1rem; margin-bottom: 1.75rem;
  box-shadow: 0 18px 45px rgba(46, 27, 18, 0.06);
  transition: box-shadow .25s ease, border-color .25s ease;
}
.wc-block-components-checkout-step:focus-within,
.wc-block-components-checkout-step:hover { border-color: var(--leaf); box-shadow: 0 24px 60px rgba(138, 74, 42, 0.1); }

.wc-block-components-checkout-step__heading { margin-bottom: 1.5rem; }
.wc-block-components-checkout-step__heading-content { display: flex; align-items: center; }
.wc-block-components-checkout-step__title {
  font-size: 1.2rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; gap: 1rem;
}
.wc-block-checkout__contact-fields .wc-block-components-checkout-step__title::before,
.wc-block-checkout__shipping-fields .wc-block-components-checkout-step__title::before,
.wc-block-checkout__shipping-option .wc-block-components-checkout-step__title::before,
.wc-block-checkout__payment-method .wc-block-components-checkout-step__title::before {
  content: attr(data-step-number);
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2.25rem; height: 2.25rem; border-radius: 9999px;
  background: var(--leaf); color: var(--forest-deep);
  font-size: 1rem; font-weight: 700;
}
.wc-block-components-checkout-step__description { color: var(--muted); font-size: .9rem; margin-top: .35rem; }
.wc-block-components-checkout-step__content { padding-left: 3.25rem; }
@media (max-width: 480px) { .wc-block-components-checkout-step__content { padding-left: 0; } }

.wc-block-components-text-input { position: relative; margin-top: 1rem; }
.wc-block-components-text-input input {
  width: 100%; border-radius: 16px; border: 1px solid var(--border-soft);
  background: var(--mist); padding: 1.1rem 1.1rem .5rem; transition: border-color .2s ease, background-color .2s ease;
}
.wc-block-components-text-input input:focus { border-color: var(--leaf); background: #fff; outline: none; }
.wc-block-components-text-input label { color: var(--muted); }
.wc-blocks-components-select .wc-blocks-components-select__select {
  width: 100%; border-radius: 16px; border: 1px solid var(--border-soft); background: var(--mist); padding: 1.1rem 1.1rem .5rem;
}

.wc-block-components-address-card {
  border: 1px solid var(--border-soft); background: var(--mist); border-radius: 18px; padding: 1.1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.wc-block-components-address-card__edit { color: var(--forest); font-weight: 600; }

/* Le point radio de WooCommerce est positionne en absolute (left:16px) dans
   l'option : on garde la structure "display:block + padding-left" native et
   on n'habille que les couleurs/rayons, sinon le texte se retrouve sous le rond. */
.wc-block-components-radio-control__option {
  border: 1.5px solid var(--border-soft); border-radius: 16px; margin-bottom: .75rem;
  padding-left: 3rem;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wc-block-components-radio-control__input { left: 1.1rem; }
.wc-block-components-radio-control__input:checked { border-color: var(--forest); }
.wc-block-components-radio-control__option.wc-block-components-radio-control__option-checked {
  border-color: var(--leaf); background: var(--mist); box-shadow: inset 3px 0 0 var(--forest);
}
/* Methodes de paiement avec description repliable (ex: virement bancaire) :
   le wrapper accordeon porte le cadre + le fond "coche", pour eviter le
   double-encadrement si on le laissait aussi sur le <label> a l'interieur
   (qui, lui, porte deja ce style pour les lignes simples comme la livraison). */
.wc-block-components-radio-control-accordion-option {
  border: 1.5px solid var(--border-soft); border-radius: 16px; margin-bottom: .75rem;
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.wc-block-components-radio-control-accordion-option:has(.wc-block-components-radio-control__option-checked) {
  border-color: var(--leaf); background: var(--mist); box-shadow: inset 3px 0 0 var(--forest);
}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
  border: none; border-radius: 0; margin-bottom: 0; background: transparent; box-shadow: none;
}
.wc-block-components-radio-control-accordion-content {
  padding: 0 1.25rem 1.25rem 3rem; color: var(--muted); font-size: .92rem; line-height: 1.6;
}

.wc-block-components-checkbox { display: flex; align-items: center; gap: .6rem; }
.wc-block-components-checkbox__mark { border-radius: 6px; }

.wc-block-checkout__terms { margin-top: 1.5rem; font-size: .88rem; color: var(--muted); }

/* ---------- Resume de commande : traite comme un recu premium ---------- */
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar > * {
  background: transparent;
}
.wc-block-components-sidebar {
  background: var(--panel-bg); border: 1px solid var(--border-soft); border-radius: 28px;
  padding: 1.75rem; box-shadow: 0 24px 60px rgba(46, 27, 18, 0.08);
}
.wc-block-components-order-summary { padding-top: .5rem; }
.wc-block-components-checkout-order-summary__title {
  padding: 0 0 1.25rem; border-bottom: 1px solid var(--border-soft); margin-bottom: 1.25rem;
}
.wc-block-components-checkout-order-summary__title-text { font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.wc-block-components-order-summary-item__image {
  position: relative; flex-shrink: 0; width: 64px; height: 64px;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--border-soft); background: #fff;
}
.wc-block-components-order-summary-item__image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.wc-block-components-order-summary-item__description { font-weight: 600; color: var(--ink); }
.wc-block-components-order-summary-item__total-price { color: var(--forest); font-weight: 700; }
.wc-block-components-totals-wrapper { border-top: 1px dashed var(--border-soft); padding: 1rem 0; }
.wc-block-components-totals-footer-item {
  margin-top: .5rem; padding-top: 1.1rem !important; border-top: 1px solid var(--border-soft) !important;
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label { font-size: 1.05rem; color: var(--ink); }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 1.4rem; font-weight: 700; color: var(--forest); }
.wc-block-checkout__actions { margin-top: 2rem; }

.wc-block-components-checkout-place-order-button.wp-element-button {
  width: 100%; padding: 1.15rem 1.75rem; font-size: 1rem;
}

.wc-block-checkout__sidebar > * ,
.wc-block-cart__sidebar > * {
  background: transparent;
}
.wc-block-checkout__sidebar .wc-block-components-panel,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper { padding-left: 0; padding-right: 0; }

/* Meme recap, version "tiroir" affichee en colonne unique (voir la regle
   is-small plus haut qui masque .wc-block-checkout__sidebar) : ce bloc
   utilise un autre habillage que WooCommerce ne stylise pas du tout par
   defaut, d'ou un rendu a plat sans le traitement carte applique ci-dessus. */
.checkout-order-summary-block-fill-wrapper {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 28px;
  padding: 1.85rem 2rem 2.1rem; margin-bottom: 1.75rem;
  box-shadow: 0 18px 45px rgba(46, 27, 18, 0.06);
}
.checkout-order-summary-block-fill-wrapper .wc-block-components-panel,
.checkout-order-summary-block-fill-wrapper .wc-block-components-totals-wrapper {
  padding-left: 0; padding-right: 0; background: transparent;
}

.wc-block-components-notice-banner {
  border-radius: 16px; border: none; background: var(--mist); color: var(--forest); padding: 1rem 1.25rem;
}
.wc-block-components-notice-banner.is-error { background: #fdecec; color: #a3312c; }

/* =====================================================================
   PAGE DE CONFIRMATION DE COMMANDE (order-received, gabarit classique)
   Grand en-tete de succes centre, puis mise en page a deux colonnes type
   "recu professionnel" : details de commande a gauche, resume + adresse +
   prochaines etapes a droite (voir grid-column ci-dessous — l'ordre visuel
   ne depend pas de l'ordre du HTML sorti par WooCommerce).
   ===================================================================== */

/* Le h1 generique de page.php ("Commande recue") devient une simple amorce :
   le vrai temps fort est le bandeau centre juste en dessous. */
.woocommerce-order-received .page-title { text-align: center; font-size: 1.1rem; font-weight: 600; color: var(--muted); margin-bottom: .5rem; }

/* Message "commande recue" : grand en-tete centre avec badge check, que la
   commande soit affichee en entier (client identifie) ou que WooCommerce
   demande d'abord de verifier l'e-mail (client invite) — ce 2e cas n'est
   pas enveloppe dans .woocommerce-order, d'ou un selecteur non ancre sur
   ce parent pour couvrir les deux avec le meme rendu. */
.woocommerce-thankyou-order-received {
  display: block; grid-column: 1 / -1;
  max-width: 30rem; margin: 0 auto 3rem; text-align: center;
  background: transparent; color: var(--ink); border: none; padding: 0;
  font-size: 1.4rem; font-weight: 700; line-height: 1.4;
  list-style: none;
}
.woocommerce-thankyou-order-received::before {
  content: "";
  display: block; margin: 0 auto 1.25rem;
  width: 3.75rem; height: 3.75rem; border-radius: 9999px; background-color: var(--forest);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: 24px;
  box-shadow: 0 14px 34px rgba(138, 74, 42, 0.32);
}

/* Formulaire de verification d'e-mail (invite non identifie) : WooCommerce
   sort ce <form> nu, sans aucune classe de mise en page. */
.woocommerce-form.woocommerce-verify-email {
  max-width: 30rem; margin-inline: auto;
  border-radius: 34px; border: 1px solid var(--border-soft); background: var(--card-bg);
  padding: 2rem; box-shadow: 0 30px 90px rgba(46, 27, 18, 0.1);
}
.woocommerce-form.woocommerce-verify-email > p:first-of-type {
  margin: 0 0 1.5rem; color: var(--muted); line-height: 1.7;
}
.woocommerce-form.woocommerce-verify-email > p:first-of-type a { color: var(--forest); font-weight: 600; text-decoration: underline; }
.woocommerce-form.woocommerce-verify-email .form-row { margin: 0 0 1.25rem; }
.woocommerce-form.woocommerce-verify-email label { display: block; margin-bottom: .5rem; font-weight: 600; font-size: .9rem; color: var(--ink); }
.woocommerce-form.woocommerce-verify-email label .required { color: #a3312c; }
.woocommerce-form.woocommerce-verify-email input.input-text {
  width: 100%; border-radius: 1rem; border: 1px solid var(--border-soft); background: #fff;
  padding: 1rem 1.25rem; outline: none; font-size: 1rem; transition: border-color .2s ease;
}
.woocommerce-form.woocommerce-verify-email input.input-text:focus { border-color: var(--leaf); }
.woocommerce-form.woocommerce-verify-email button[name="verify"] {
  border-radius: 9999px; background: var(--forest); color: #fff; border: none;
  padding: 1rem 2rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2);
  transition: background-color .2s ease, transform .2s ease;
}
.woocommerce-form.woocommerce-verify-email button[name="verify"]:hover { background: var(--forest-deep); transform: translateY(-2px); }

/* Connexion / inscription (page Mon compte, invite non identifie) : meme
   traitement "carte" que le formulaire de verification d'e-mail ci-dessus,
   WooCommerce ne sortant la aussi que des <form> nus. */
.woocommerce-account .woocommerce > h2 { text-align: center; margin: 0 0 1.5rem; }
.u-columns#customer_login { display: grid; gap: 2rem; max-width: 30rem; margin-inline: auto; }
@media (min-width: 768px) { .u-columns#customer_login { max-width: 62rem; grid-template-columns: 1fr 1fr; align-items: start; } }
.u-columns#customer_login .woocommerce-form-login,
.u-columns#customer_login .woocommerce-form-register { max-width: none; margin-inline: 0; }

.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword {
  max-width: 30rem; margin-inline: auto;
  border-radius: 34px; border: 1px solid var(--border-soft); background: var(--card-bg);
  padding: 2rem; box-shadow: 0 30px 90px rgba(46, 27, 18, 0.1);
}
.woocommerce-form-login .form-row, .woocommerce-form-register .form-row, .woocommerce-ResetPassword .form-row { margin: 0 0 1.25rem; }
.woocommerce-form-login label, .woocommerce-form-register label, .woocommerce-ResetPassword label { display: block; margin-bottom: .5rem; font-weight: 600; font-size: .9rem; color: var(--ink); }
.woocommerce-form-login label .required, .woocommerce-form-register label .required, .woocommerce-ResetPassword label .required { color: #a3312c; }
.woocommerce-form-login input.input-text, .woocommerce-form-register input.input-text, .woocommerce-ResetPassword input.input-text {
  width: 100%; border-radius: 1rem; border: 1px solid var(--border-soft); background: #fff;
  padding: 1rem 1.25rem; outline: none; font-size: 1rem; transition: border-color .2s ease;
}
.woocommerce-form-login input.input-text:focus, .woocommerce-form-register input.input-text:focus, .woocommerce-ResetPassword input.input-text:focus { border-color: var(--leaf); }
.woocommerce-ResetPassword > p:first-of-type { margin: 0 0 1.5rem; color: var(--muted); line-height: 1.7; }
.woocommerce-ResetPassword .form-row-first, .woocommerce-ResetPassword .form-row-last { width: 100%; float: none; }
.woocommerce-ResetPassword button[type="submit"] {
  display: block; width: 100%; border-radius: 9999px; background: var(--forest); color: #fff; border: none;
  padding: 1rem 2rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2);
  transition: background-color .2s ease, transform .2s ease;
}
.woocommerce-ResetPassword button[type="submit"]:hover { background: var(--forest-deep); transform: translateY(-2px); }
/* Bouton "afficher le mot de passe" (icone oeil) injecte en JS par WooCommerce :
   sans le CSS natif de WooCommerce (desactive sur tout le site), il ne restait
   qu'un bouton vide sans icone ni position. */
.password-input { display: flex; flex-direction: column; justify-content: center; position: relative; }
.password-input input[type="password"] { padding-right: 2.75rem; }
.show-password-input {
  background: transparent; border: 0; cursor: pointer; margin: 0; padding: 0;
  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
}
.show-password-input::before {
  content: ""; display: block; width: 20px; height: 20px;
  background-repeat: no-repeat; background-size: cover;
  background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%237d6e5f"/%3E%3C/svg%3E');
}
.show-password-input.display-password::before {
  background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%237d6e5f"/%3E%3C/svg%3E');
}
.woocommerce-form-login .woocommerce-form-login__rememberme {
  display: flex; align-items: center; gap: .6rem; font-weight: 500; color: var(--muted); margin: 0 0 1.5rem;
}
.woocommerce-form-login .woocommerce-form__input-checkbox { width: 1.1rem; height: 1.1rem; accent-color: var(--forest); }
.woocommerce-form-login button[name="login"], .woocommerce-form-register button[type="submit"] {
  display: block; width: 100%; border-radius: 9999px; background: var(--forest); color: #fff; border: none;
  padding: 1rem 2rem; font-weight: 600; cursor: pointer;
  box-shadow: 0 18px 38px rgba(138, 74, 42, 0.2);
  transition: background-color .2s ease, transform .2s ease;
}
.woocommerce-form-login button[name="login"]:hover, .woocommerce-form-register button[type="submit"]:hover { background: var(--forest-deep); transform: translateY(-2px); }
.woocommerce-form-login .woocommerce-LostPassword { margin: 1.25rem 0 0; text-align: center; }
.woocommerce-form-login .woocommerce-LostPassword a, .woocommerce-form-register .woocommerce-privacy-policy-text a { color: var(--forest); font-weight: 600; text-decoration: underline; }

/* Recu complet : gabarit maison (voir woocommerce/checkout/thankyou.php dans
   le theme) qui reutilise les templates natifs de WooCommerce (tableau de
   commande, adresses) mais dans un ordre HTML choisi par nous — plus besoin
   de repositionner quoi que ce soit par CSS, la colonne principale et la
   colonne laterale suivent simplement l'ordre naturel du document. */
.woocommerce-order { max-width: 68rem; margin-inline: auto; }

.bc-confirm-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  .bc-confirm-grid { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
}
.bc-confirm-side { display: flex; flex-direction: column; gap: 1.5rem; }

.woocommerce-order-details {
  background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: 28px;
  padding: 1.75rem; box-shadow: 0 18px 45px rgba(46, 27, 18, 0.06);
}
/* Certaines installations WooCommerce (fonctionnalite "fulfillments") re-
   injectent automatiquement les adresses juste apres le tableau de commande,
   en plus de celles qu'on affiche deliberement dans la colonne laterale
   ci-dessous : on masque cette copie-la, jamais celle voulue (nichee dans
   .bc-order-card, en dehors de .bc-confirm-main). */
.bc-confirm-main .woocommerce-customer-details { display: none; }
.woocommerce-order-details__title, .woocommerce-column__title {
  font-size: 1.15rem; font-weight: 700; margin: 0 0 1.25rem; color: var(--ink);
}
.woocommerce-table--order-details {
  width: 100%; border-collapse: collapse; border: 1px solid var(--border-soft);
  border-radius: 16px; overflow: hidden; margin-bottom: 0; background: #fff;
}
.woocommerce-table--order-details thead th { background: var(--mist); text-align: left; padding: .85rem 1.1rem; font-weight: 600; font-size: .85rem; }
.woocommerce-table--order-details td { padding: .85rem 1.1rem; border-top: 1px solid var(--border-soft); font-size: .92rem; }
.woocommerce-table--order-details tfoot th, .woocommerce-table--order-details tfoot td { font-weight: 600; }
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td { color: var(--forest); font-size: 1.05rem; }

/* Photo produit ajoutee devant le nom (voir boischaleur_order_item_thumbnail). */
.bc-order-item-row { display: flex; align-items: center; gap: .85rem; }
.bc-order-item-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--mist); }
.bc-order-item-name { font-weight: 600; color: var(--ink); }

/* Colonne laterale : resume, adresses, prochaines etapes, actions — chacun
   son propre encart pour un rendu "cartes empilees" coherent. */
.bc-order-card {
  background: var(--panel-bg); border: 1px solid var(--border-soft); border-radius: 22px; padding: 1.5rem;
}
.bc-order-card h3 { font-size: 1rem; font-weight: 700; margin: 0 0 .9rem; color: var(--ink); }

.bc-order-summary-list { list-style: none; margin: 0; padding: 0; display: grid; }
.bc-order-summary-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .65rem 0; border-top: 1px solid var(--border-soft);
  font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted);
}
.bc-order-summary-list li:first-child { border-top: none; padding-top: 0; }
.bc-order-summary-list li strong {
  font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: normal; color: var(--ink); text-align: right;
}

/* Adresses (facturation/livraison) : template natif WooCommerce reutilise
   tel quel, juste force en une seule colonne (le 2 colonnes d'origine est
   prevu pour toute la largeur de page, pas pour une colonne laterale
   etroite) et integre au meme habillage carte que le reste de la colonne. */
.bc-confirm-side .woocommerce-customer-details {
  margin: 0; padding: 0; border: none; display: grid; grid-template-columns: 1fr; gap: 1.25rem;
}
.bc-confirm-side .woocommerce-customer-details address {
  background: #fff; border: 1px solid var(--border-soft); border-radius: 16px;
  padding: 1.1rem 1.25rem; font-style: normal; line-height: 1.7; color: var(--muted); font-size: .88rem;
}
.bc-confirm-side .woocommerce-column__title { font-size: .95rem; margin-bottom: .6rem; }

.bc-order-next-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.bc-order-next-steps li { display: flex; align-items: flex-start; gap: .75rem; font-size: .88rem; color: var(--muted); line-height: 1.5; }
.bc-order-next-steps li svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: .15rem; color: var(--forest); }

.bc-order-actions { display: grid; gap: .75rem; }
.bc-order-actions .btn { width: 100%; justify-content: center; }