/* ===== Reset minimal et variables ===== */
*,
*::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
}

.logo{
      height: 120px;
      width: 120px;
}

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: .8rem;
      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
}


/* ===== 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
}

#submit-btn{
      text-decoration: none ;
      border: 0 ;
      background: #547D57;
      color:#fff;
      padding:.8rem 1rem;
      border-radius:12px;
      font-weight:700;
      cursor: "pointer"
}

/* ===== 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
      }
}