*::before,
            *::after {
                  box-sizing: border-box
            }

            html:focus-within {
                  scroll-behavior: smooth
            }

            body {
                  margin: 0;
                  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
                  line-height: 1.6;
                  color: #141414;
                  background: #FFFFFF
            }

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

            a {
                  color: inherit
            }

            :root {
                  --bg: #ffffff;
                  --ink: #1a1a1a;
                  --muted: #6b7280;
                  --brand: #3C2F2F;
                  /* brun doux */
                  --accent: #547D57;
                  /* vert principal */
                  --paper: #F5F3EE;
                  /* beige clair */
                  --ring: #0f766e;
                  --container: 1120px;
                  --radius: 16px;
                  --shadow: 0 10px 30px rgba(0, 0, 0, .08);
            }

            /* ===== Accessibilité ===== */
            .skip-link {
                  position: absolute;
                  left: -9999px;
                  top: auto;
                  width: 1px;
                  height: 1px;
                  overflow: hidden
            }

            .skip-link:focus {
                  left: 1rem;
                  top: 1rem;
                  width: auto;
                  height: auto;
                  background: #fff;
                  color: #000;
                  padding: .5rem .75rem;
                  border: 2px solid #000;
                  border-radius: 8px
            }

            :focus-visible {
                  outline: 3px solid var(--ring);
                  outline-offset: 2px
            }

            /* ===== Layout ===== */
            .container {
                  max-width: var(--container);
                  margin-inline: auto;
                  padding: 0 1rem
            }

            header {
                  position: sticky;
                  top: 0;
                  background: color-mix(in lab, var(--paper) 85%, #fff 15%);
                  border-bottom: 1px solid #e5e7eb;
                  z-index: 10
            }

            .bar {
                  display: flex;
                  gap: 1rem;
                  align-items: center;
                  justify-content: space-between;
                  padding: .75rem 0
            }

            .brand {
                  font-weight: 700;
                  letter-spacing: .4px;
                  color: var(--brand)
            }

            nav ul {
                  display: flex;
                  flex-wrap: wrap;
                  gap: .5rem
            }

            nav a {
                  display: block;
                  padding: .5rem .75rem;
                  border-radius: 999px;
                  text-decoration: none
            }

            nav a:is(:hover, :focus-visible) {
                  background: var(--accent);
                  color: #fff
            }

            .hero {
                  background: linear-gradient(135deg, var(--paper), #fff);
                  border-bottom: 1px solid #eee
            }

            .hero-inner {
                  display: grid;
                  grid-template-columns: 1.1fr .9fr;
                  gap: 2rem;
                  align-items: center;
                  padding: 3rem 0
            }

            .hero h1 {
                  font-size: clamp(1.8rem, 2.5vw+1rem, 3rem);
                  line-height: 1.2;
                  margin: .2rem 0;
                  color: var(--brand)
            }

            .hero p {
                  color: var(--muted);
                  max-width: 60ch
            }

            .tag {
                  display: inline-block;
                  background: var(--accent);
                  color: #fff;
                  border-radius: 999px;
                  padding: .25rem .6rem;
                  font-size: .85rem
            }

            .hero-card {
                  background: var(--bg);
                  border-radius: var(--radius);
                  box-shadow: var(--shadow);
                  padding: 1rem
            }

            .hero-card figure {
                  background: #eee;
                  border-radius: 12px;
                  aspect-ratio: 4/3;
                  display: grid;
                  place-items: center;
                  color: #555
            }

            section {
                  padding: 3rem 0
            }

            section h2 {
                  font-size: clamp(1.4rem, 1.5vw+1rem, 2rem);
                  margin: 0 0 1rem;
                  color: var(--brand)
            }

            section p.lead {
                  color: var(--muted);
                  max-width: 70ch
            }

            /* ===== Boutique ===== */
            .grid {
                  display: grid;
                  grid-template-columns: repeat(12, 1fr);
                  gap: 1rem
            }

            .cards {
                  display: grid;
                  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                  gap: 1rem
            }

            .card {
                  border: 1px solid #e5e7eb;
                  border-radius: 14px;
                  overflow: hidden;
                  background: #fff;
                  display: flex;
                  flex-direction: column
            }

            .card figure {
                  background: #f3f4f6;
                  aspect-ratio: 4/3;
                  display: grid;
                  place-items: center;
                  font-size: .9rem;
                  color: #6b7280
            }

            .card .body {
                  padding: .9rem
            }

            .price {
                  font-weight: 700;
                  color: var(--accent)
            }

            .badge {
                  font-size: .75rem;
                  color: #fff;
                  background: var(--brand);
                  padding: .15rem .5rem;
                  border-radius: 999px
            }

            /* ===== À propos ===== */
            .about {
                  display: grid;
                  grid-template-columns: 1fr 1fr;
                  gap: 1.5rem
            }

            .about aside {
                  background: var(--paper);
                  border-radius: var(--radius);
                  padding: 1rem
            }

            /* ===== Contact ===== */
            form {
                  display: grid;
                  gap: .1rem;
                  max-width: 640px
            }

            label {
                  font-weight: 600
            }

            input,
            textarea,
            select {
                  width: 100%;
                  padding: .7rem .8rem;
                  border: 1px solid #d1d5db;
                  border-radius: 12px;
                  font: inherit;
                  background: #fff
            }

            textarea {
                  min-height: 120px
            }

            .hint {
                  font-size: .9rem;
                  color: var(--muted)
            }

            /* ===== FAQ ===== */
            details {
                  border: 1px solid #e5e7eb;
                  border-radius: 12px;
                  padding: .75rem 1rem;
                  background: #fff
            }

            details+details {
                  margin-top: .75rem
            }

            summary {
                  cursor: pointer;
                  font-weight: 600;
                  list-style: none
            }

            summary::-webkit-details-marker {
                  display: none
            }

            /* ===== Footer ===== */
            footer {
                  border-top: 1px solid #e5e7eb;
                  background: var(--paper);
                  padding: 1.25rem 0;
                  color: #374151
            }

            .foot {
                  display: flex;
                  flex-wrap: wrap;
                  gap: .75rem;
                  align-items: center;
                  justify-content: space-between
            }

            /* ===== Responsif ===== */
            @media (max-width: 900px) {
                  .hero-inner {
                        grid-template-columns: 1fr
                  }

                  .about {
                        grid-template-columns: 1fr
                  }
      }
      /* ===== Bouton panier ===== */
.btn-cart {
      width: 100%;
      margin-top: 0.75rem;
      padding: 0.7rem 1rem;
      background: var(--accent);
      color: #fff;
      border: none;
      border-radius: 12px;
      font-weight: 600;
      font-size: 0.95rem;
      cursor: pointer;
      transition: all 0.2s ease;
}

.btn-cart:hover {
      background: #466e49;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(84, 125, 87, 0.3);
}

.btn-cart:active {
      transform: translateY(0);
}
/* ===== Petit logo ===== */
.brand {
      display: block;
      text-decoration: none;
}

.logo {
      height: 75px;  
      width: auto;
      display: block;
}

.logo:hover {
      opacity: 0.8;
      transition: opacity 0.3s ease;
}