/* MissaMissa — site statique */

@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("../fonts/poppins-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #001542;
  --teal: #095454;
  --pink: #ff81d0;
  --white: #fff;

  --pad: 50px;
  --title-size: 120px;
  --space: 100px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--navy);
  color: var(--white);
  font-family: "Poppins", system-ui, sans-serif;
  line-height: 1.67;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, p { margin: 0; }

/* Bandeau couleur */
.color-band {
  height: 30px;
  background: url("../img/bande-couleur.jpg") center / 100% 100% no-repeat;
}

/* Titres géants */
.big-title {
  font-size: var(--title-size);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

/* Bouton Etsy */
.etsy-btn {
  display: block;
  width: 400px;
  max-width: 100%;
  border-radius: 999px;
  transition: transform .2s ease, filter .2s ease;
}
.etsy-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.etsy-btn:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; }
.etsy-btn--center { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero {
  display: flex;
  background: var(--navy);
}
.hero__text {
  position: relative;
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--pad) + 70px) var(--pad) calc(var(--pad) + 70px);
}
.hero__crown {
  position: absolute;
  top: 88px;
  left: 20px;
  width: 60px;
  transform: rotate(-30deg);
}
.hero__title {
  font-size: 80px;
  line-height: 1;
  font-weight: 700;
  overflow-wrap: break-word;
}
.hero__subtitle {
  margin-top: 20px;
  font-size: 40px;
  line-height: 1;
}
.hero .etsy-btn { margin-top: 70px; }

.hero__media {
  position: relative;
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__flag {
  position: absolute;
  top: 103px;
  right: 0;
  width: 100px;
  z-index: 2;
}

/* ---------- Carrousel ---------- */
.carousel {
  position: relative;
  overflow: hidden;
  padding-bottom: 32px; /* place pour les puces */
}
.carousel__track {
  display: flex;
  transition: transform .5s ease;
  will-change: transform;
  touch-action: pan-y;
}
.carousel__slide { flex: 0 0 100%; }
.carousel__slide img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.carousel__arrow {
  position: absolute;
  top: calc(50% - 16px);
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 60px;
  height: 90px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--white);
  cursor: pointer;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}
.carousel__arrow svg {
  width: 26px;
  height: 52px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }
.carousel__arrow:focus-visible { outline: 2px solid var(--pink); outline-offset: -6px; }

.carousel__dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
}
.carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #000;
  opacity: .2;
  cursor: pointer;
}
.carousel__dots button[aria-selected="true"] { opacity: 1; }

/* ---------- À propos ---------- */
.about {
  background: var(--teal);
  color: var(--pink);
}
.about__title { padding: var(--pad); }
.about__cols {
  display: flex;
  padding: 10px;
}
.about__text,
.about__photo {
  flex: 1 1 50%;
  padding: var(--pad);
}
.about__text { font-size: 24px; }
.about__text p + p { margin-top: 1.67em; }

/* ---------- Collections ---------- */
.collection {
  padding: calc(var(--pad) + var(--space)) var(--pad);
  color: var(--navy);
  text-align: center;
}
.collection .big-title { margin-bottom: var(--space); }
.collection__img { margin-inline: auto; }

.collection--bananes {
  background: url("../img/fond-motif.webp") top center / cover no-repeat;
}
.collection--cabas { background: var(--pink); }

/* ---------- Produits ---------- */
.products {
  padding: calc(var(--pad) + var(--space)) var(--pad) var(--space);
  background: var(--navy);
}
.products__img { margin: 0 auto 50px; }

/* ---------- Footer ---------- */
.footer {
  padding: 0 var(--pad) 20px;
  background: var(--navy);
}
.footer img { width: 300px; margin-inline: auto; }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  :root {
    --pad: 20px;
    --title-size: 60px;
    --space: 50px;
  }

  .hero { flex-direction: column; }
  .hero__text { padding: 60px var(--pad) 50px; }
  .hero__crown { top: 40px; left: 4px; width: 30px; }
  .hero__title { font-size: 40px; }
  .hero__subtitle { font-size: 24px; margin-top: 12px; }
  .hero .etsy-btn { margin-top: 50px; }
  .hero__flag { top: 12px; right: 12px; width: 60px; }

  .carousel__arrow { width: 44px; height: 64px; }
  .carousel__arrow svg { width: 16px; height: 32px; }

  .about__cols { flex-direction: column; padding: 0; }
  .about__text { font-size: 18px; }

  .collection .big-title { margin-bottom: var(--space); }
}

@media (max-width: 380px) {
  :root { --title-size: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track,
  .etsy-btn { transition: none; }
}