:root {
  --red: #1a3137;
  --accent-light: #354a4f;
  --blue-grey: #cddce4;
  --beige: #e7dcc3;
  --cream: #faf8f4;
  --cream-light: #fcfbf8;
  --ink: #2b2b28;
  --font-title: "Carter One", cursive;
  --font-body: "Nunito", sans-serif;
  /* Provisoire en attendant le fichier de la police "TrashHand" */
  --font-hand: "Caveat", cursive;
  --diagonal: clamp(36px, 5vw, 70px);
  --gutter: 1.5rem;
  --grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz4KICA8ZmlsdGVyIGlkPSduJz4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjcnIG51bU9jdGF2ZXM9JzMnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnIHJlc3VsdD0ndCcvPgogICAgPGZlQ29sb3JNYXRyaXggaW49J3QnIHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjA5IDAnLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsdGVyPSd1cmwoI24pJy8+Cjwvc3ZnPgo=");
  --grain-light: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz4KICA8ZmlsdGVyIGlkPSduJz4KICAgIDxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScwLjcnIG51bU9jdGF2ZXM9JzMnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnIHJlc3VsdD0ndCcvPgogICAgPGZlQ29sb3JNYXRyaXggaW49J3QnIHR5cGU9J21hdHJpeCcgdmFsdWVzPScwIDAgMCAwIDAgIDAgMCAwIDAgMCAgMCAwIDAgMCAwICAwIDAgMCAwLjA1IDAnLz4KICA8L2ZpbHRlcj4KICA8cmVjdCB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsdGVyPSd1cmwoI24pJy8+Cjwvc3ZnPgo=");
  --sky-top: #dde7ec;
  --sky-bottom: #c5d7e0;
  --sky-gradient: linear-gradient(180deg, var(--sky-top) 0%, var(--blue-grey) 45%, var(--sky-bottom) 100%);
  --cloud-a: radial-gradient(ellipse 56% 17% at 16% 42%, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0) 70%);
  --cloud-b: radial-gradient(ellipse 38% 15% at 70% 20%, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 70%);
  --cloud-c: radial-gradient(ellipse 34% 13% at 84% 60%, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 70%);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
}

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

/* ---------- Header / hero ---------- */

.hero {
  position: relative;
  /* Flat tone matching the very top of the intro section's gradient below:
     only a thin sliver of this ever shows (in the diagonal cut), so it
     just needs to match that seam exactly rather than carry its own
     gradient, which would visibly mismatch at the join. */
  background-color: var(--sky-top);
  background-image: var(--grain);
  background-repeat: repeat;
  background-size: 180px 180px;
}

.hero__img {
  width: 100%;
  /* height matches the photo's own 16:9 ratio whenever the viewport allows it,
     so the full photo stays visible top-to-bottom; only very short/wide
     windows fall back to the 100vh cap and crop the sides instead */
  height: clamp(260px, calc(100vw * 9 / 16), 100vh);
  object-fit: cover;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--diagonal)), 0 100%);
}

.hero__logo {
  position: absolute;
  top: calc(1.25rem + 0.5cm);
  right: var(--gutter);
  width: clamp(290px, 40.5vw, 495px);
  height: auto;
}

/* ---------- Intro section ---------- */

.intro {
  position: relative;
  z-index: 0;
  padding: 2.5rem var(--gutter) 5rem;
  /* Shows through the sliver the diagonal clip-path below leaves uncovered
     at the bottom-left — must match .commandes' own background exactly so
     that seam reads as one continuous surface. */
  background-color: var(--cream-light);
  background-image: var(--grain-light);
  background-repeat: repeat;
  background-size: 180px 180px;
}

.intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--blue-grey);
  /* Each layer below must have a matching entry in background-repeat/
     background-size at the same position — a custom property holding several
     comma-separated gradients still counts as several layers once expanded,
     so lengths must be counted after substitution, not before. */
  background-image: var(--grain), var(--cloud-a), var(--cloud-b), var(--cloud-c), var(--sky-gradient);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--diagonal)));
}

.intro__title,
.commandes h2,
.faq h2 {
  margin: 0 0 1.75rem;
  font-family: var(--font-title);
  font-weight: normal;
  font-size: clamp(2rem, 5.5vw, 2.3rem);
  color: var(--accent-light);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}

.intro__title {
  text-align: left;
  margin: 0;
}

.intro__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
}

.intro__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
}

.intro__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  width: 100%;
}

.card {
  width: 100%;
  max-width: 520px;
  background: var(--cream);
  padding: 1.5rem 1.75rem;
}

.card p {
  margin: 0 0 0.9rem;
  line-height: 1.5;
}

.card__strong {
  font-weight: 700;
}

.card p:last-child {
  margin-bottom: 0;
}

.locate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.locate__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.locate__label {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.33rem;
  line-height: 1.15;
  color: var(--accent-light);
  text-align: center;
  transition: transform 0.15s ease;
}

.locate__arrow {
  display: none;
  transition: transform 0.15s ease;
}

.locate__map {
  display: block;
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto;
  transition: transform 0.15s ease;
}

.locate__row:hover .locate__map {
  transform: translateY(-2px);
}

.locate__row:hover .locate__label,
.locate__row:hover .locate__arrow {
  transform: translateY(-4px) scale(1.05);
}

.locate__map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 6px solid var(--cream);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
}

.team {
  width: min(220px, 60vw);
  text-align: center;
}

.team__label {
  margin: 0.6rem 0 0;
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.15;
  color: var(--accent-light);
  white-space: nowrap;
}

.team__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--beige);
}

.team__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 78%;
  transform: scale(1.1);
}

/* ---------- Commandes section ---------- */

.commandes {
  padding: 3rem var(--gutter);
  text-align: center;
  background-color: var(--cream-light);
  background-image: var(--grain-light);
  background-repeat: repeat;
  background-size: 180px 180px;
}

.commandes h2 {
  text-align: center;
}

.produits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.75rem 1rem;
  max-width: 900px;
  margin: 2.5rem auto 0;
}

.produit {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.produit img {
  width: clamp(128px, 36vw, 192px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0 auto;
}

.produit h3 {
  font-family: var(--font-title);
  font-weight: normal;
  margin: 0.75rem 0 0.15rem;
  font-size: 1.2rem;
  color: var(--ink);
}

.produit .detail {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.87rem;
  color: #777;
}

.produit .prix {
  margin: 0;
  color: var(--red);
  font-weight: 700;
  font-size: 0.95rem;
}

.delivery-line {
  font-family: var(--font-title);
  font-weight: normal;
  font-size: 1.2rem;
  color: var(--ink);
}

.note-prix {
  max-width: 500px;
  margin: 1.5rem auto 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.note-prix a {
  color: var(--red);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.livraison {
  max-width: 500px;
  margin: 2rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.livraison p {
  margin: 0 0 0.4rem;
}

.livraison .cta {
  margin: 1.1rem 0 0;
  font-weight: 700;
}

.contact-boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.btn {
  display: inline-block;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  background: var(--accent-light);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

/* ---------- FAQ section ---------- */

.faq {
  padding: 3rem var(--gutter);
  text-align: center;
  background-color: var(--beige);
  background-image: var(--grain-light);
  background-repeat: repeat;
  background-size: 180px 180px;
}

.faq h2 {
  text-align: center;
}

.faq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.faq-tab {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 2px solid var(--accent-light);
  background: transparent;
  color: var(--accent-light);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.faq-tab:hover {
  transform: translateY(-2px);
}

.faq-tab.active {
  background: var(--accent-light);
  color: #fff;
}

.faq-panel {
  margin-top: 1.75rem;
}

.faq-list {
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

.faq-item {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
}

.faq-item:last-child {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  color: var(--red);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0.85rem 0 0;
  line-height: 1.5;
}

/* ---------- Footer ---------- */

.footer {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 1.25rem var(--gutter);
  font-size: 0.9rem;
}

.footer p {
  margin: 0;
}

/* ---------- Responsive ---------- */

@media (min-width: 1024px) {
  :root {
    --gutter: 16.6667vw;
  }
}

@media (min-width: 900px) {
  .intro__layout {
    align-items: flex-start;
    gap: 0;
  }

  .intro__top {
    position: relative;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    column-gap: 2.5rem;
    row-gap: 1.5rem;
    min-height: 140px;
  }

  .intro__title {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .locate {
    position: absolute;
    z-index: 5;
    top: 0;
    /* aligns the map circle's centre with the ~85% point of the card's
       width below it, minus the label width and the circle's own radius,
       so the circle overlaps forward over the card's top-right corner */
    left: calc(85% - 171px);
    align-items: flex-start;
  }

  .locate__row {
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
  }

  .locate__label {
    flex-shrink: 0;
    width: 8rem;
    text-align: right;
    /* scales from the map circle's centre (same point as the arrow's tip),
       not its own centre, so hover growth reads as radiating from the map */
    transform-origin: 198px 70px;
  }

  .locate__arrow {
    display: block;
    position: absolute;
    z-index: 2;
    width: 110px;
    height: auto;
    transform-origin: 102px 38px;
    left: 96px;
    top: 32px;
  }

  .locate__map {
    margin: 0;
  }

  .intro__bottom {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
    margin-top: -40px;
  }

  .team {
    flex: 0 0 auto;
    align-self: flex-start;
    width: 140px;
    text-align: left;
  }

  .team__label {
    text-align: left;
  }

  .card {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    max-width: none;
    align-self: flex-start;
  }

  .card::before {
    content: "";
    float: right;
    width: 200px;
    height: 48px;
    shape-outside: ellipse(100px 48px at 100px 0);
    shape-margin: 6px;
  }
}

/* Below the desktop breakpoint: the map and team photo sit side by side as
   a centred pair, with the card following underneath. .intro__top/.bottom
   are only ever plain flex wrappers for the desktop layout above, so here
   they're collapsed with display:contents and the four real pieces (title,
   locate, team, card) become direct grid items instead — no markup moved,
   nothing above 900px is touched by this block at all. */
@media (max-width: 899px) {
  .intro__top,
  .intro__bottom {
    display: contents;
  }

  .intro__layout {
    display: grid;
    /* Outer 1fr tracks are empty spacers: with title/card spanning all four
       columns (full width, as before) and team/loc sitting in the two auto
       (content-sized) middle columns, the spacers soak up the leftover space
       equally and push the photo+map pair together in the centre, instead of
       each one centering within its own half all the way out to the edges. */
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
      "title title title title"
      ".     team  loc   ."
      "card  card  card  card";
    justify-items: center;
    row-gap: 1.5rem;
    column-gap: 1rem;
  }

  .intro__title {
    grid-area: title;
  }

  .locate {
    grid-area: loc;
  }

  .team {
    grid-area: team;
    width: 120px;
  }

  .card {
    grid-area: card;
  }
}

@media (max-width: 640px) {
  .produits {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem 0.75rem;
  }
}

/* Below ~1000px the logo's foot creeps down past the tree line on the right
   side of the photo (the horizon there sits lower than under the big tree
   on the left) instead of staying in the sky. Shrinking it roughly in half
   here (and nudging it toward the top-right corner) keeps it clear of the
   horizon all the way down to small phones. */
@media (max-width: 690px) {
  .hero__logo {
    width: clamp(180px, 27vw, 250px);
    top: 1.25rem;
    right: 1.25rem;
  }
}