:root {
  --plum: #2A0E2E;
  --cream: #FFF6E9;
  --bubblegum: #FF5C8A;
  --citron: #D4E157;
  --cocoa: #4A2E2A;
  --tangerine: #FF8A3D;
  --ombre: rgba(42, 14, 46, 0.18);
}


/* =========================
   BASE
   ========================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--cocoa);
  font-family: 'Nunito Sans', sans-serif;
  line-height: 1.5;
}

h1,
h2,
h3,
.logo,
.prix-vedette,
.bonbon-prix,
.prix-detail,
.prix-suggestion {
  font-family: 'Fredoka', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

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


/* =========================
   ENTÊTE
   ========================= */

#entete {
  background: var(--plum);
  color: var(--cream);
}

.entete-conteneur {
  display: flex;
  justify-content: space-between;
  align-items: center;

  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 2rem;
}

.logo {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.menu-principal ul {
  display: flex;
  gap: 2rem;
}

.menu-principal a {
  padding-bottom: 4px;

  border-bottom: 3px solid transparent;

  font-weight: 600;

  transition: border-color 0.2s ease;
}

.menu-principal a:hover {
  border-color: var(--bubblegum);
}

.lien-actif {
  border-color: var(--citron) !important;
}

.bordure-dentelle {
  height: 18px;

  background:
    radial-gradient(
      circle at 9px 0,
      var(--cream) 9px,
      transparent 9.5px
    ) 0 -9px / 18px 18px repeat-x,
    var(--plum);
}


/* =========================
   BOUTONS
   ========================= */

.bouton-principal {
  display: inline-block;

  padding: 0.9rem 2rem;

  border: none;
  border-radius: 999px;

  background: var(--plum);
  color: var(--cream);

  font-size: 1rem;
  font-weight: 600;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    background 0.2s ease;
}

.bouton-principal:hover {
  background: var(--bubblegum);
  color: var(--plum);

  transform: translateY(-2px);
}


/* =========================
   ACCUEIL - VEDETTE
   ========================= */

#vedette {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 3rem;
  align-items: center;

  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 2rem 3rem;
}

.oeil-vedette {
  display: inline-block;

  margin-bottom: 1rem;
  padding: 0.3rem 0.9rem;

  border-radius: 999px;

  background: var(--tangerine);
  color: var(--plum);

  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

#vedette h1 {
  margin: 0 0 1rem;

  color: var(--plum);

  font-size: 2.6rem;
  line-height: 1.15;
}

#vedette p {
  max-width: 42ch;

  margin: 0 0 1.5rem;

  font-size: 1.05rem;
}

.prix-vedette {
  margin-right: 1.5rem;

  color: var(--bubblegum);

  font-size: 1.4rem;
}

.carte-vedette-image {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 28px;

  background: linear-gradient(
    135deg,
    var(--tangerine),
    var(--bubblegum)
  );

  box-shadow: 0 20px 40px var(--ombre);

  font-size: 5rem;
}

.carte-vedette-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}


/* =========================
   ACCUEIL - VITRINE
   ========================= */

#vitrine-bonbons {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 2rem 5rem;
}

.titre-categorie {
  display: flex;
  align-items: center;
  gap: 0.7rem;

  margin: 3rem 0 1.5rem;

  font-size: 1.6rem;
}

.titre-categorie::before {
  display: inline-block;

  width: 14px;
  height: 14px;

  border-radius: 50%;

  content: "";
}

.categorie-sucres::before {
  background: var(--bubblegum);
}

.categorie-acidules::before {
  background: var(--citron);
}

.grille-bonbons {
  display: grid;

  grid-template-columns:
    repeat(auto-fill, minmax(230px, 1fr));

  gap: 2.5rem;
}


/* =========================
   CARTE BONBON
   ========================= */

.bonbon {
  position: relative;

  padding: 1.6rem 1.4rem;

  border-radius: 14px;

  background: #fff;

  box-shadow: 0 8px 20px var(--ombre);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.bonbon:hover {
  transform: translateY(-6px);

  box-shadow: 0 16px 30px var(--ombre);
}

.bonbon::before,
.bonbon::after {
  position: absolute;
  top: 0;

  width: 16px;
  height: 100%;

  content: "";
}

.bonbon::before {
  left: -8px;

  clip-path: polygon(
    0% 0%,
    100% 12.5%,
    0% 25%,
    100% 37.5%,
    0% 50%,
    100% 62.5%,
    0% 75%,
    100% 87.5%,
    0% 100%
  );
}

.bonbon::after {
  right: -8px;

  clip-path: polygon(
    100% 0%,
    0% 12.5%,
    100% 25%,
    0% 37.5%,
    100% 50%,
    0% 62.5%,
    100% 75%,
    0% 87.5%,
    100% 100%
  );
}

.bonbon-sucre::before,
.bonbon-sucre::after {
  background: var(--bubblegum);
}

.bonbon-acidule::before,
.bonbon-acidule::after {
  background: var(--citron);
}

.bonbon-image {
  display: flex;
  align-items: center;
  justify-content: center;

  aspect-ratio: 4 / 3;

  margin-bottom: 1rem;

  overflow: hidden;

  border-radius: 10px;

  background: var(--cream);

  font-size: 2.5rem;
}

.bonbon-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.bonbon-titre {
  margin: 0 0 0.4rem;

  color: var(--plum);

  font-size: 1.1rem;
}

.bonbon-description {
  min-height: 3.4em;

  margin: 0 0 0.9rem;

  font-size: 0.9rem;
}

.bonbon-prix {
  color: var(--bubblegum);

  font-size: 1.1rem;
}

.bonbon-acidule .bonbon-prix {
  color: #8A9C12;
}

.bonbon-pied {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-top: 0.9rem;
}

.bonbon-acheter {
  display: inline-block;

  padding: 0.5rem 1.1rem;

  border-radius: 999px;

  background: var(--plum);
  color: var(--cream);

  font-size: 0.85rem;
  font-weight: 600;

  transition:
    transform 0.15s ease,
    background 0.2s ease;
}

.bonbon-acheter:hover {
  background: var(--bubblegum);
  color: var(--plum);

  transform: translateY(-2px);
}


/* =========================
   FIL D'ARIANE
   ========================= */

.fil-ariane {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 2rem 0;

  color: var(--cocoa);

  font-size: 0.9rem;

  opacity: 0.8;
}

.fil-ariane a {
  color: var(--plum);

  font-weight: 700;

  text-decoration: underline;
}


/* =========================
   PAGE DÉTAIL BONBON
   ========================= */

#detail-bonbon {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3rem;

  align-items: center;

  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}

.image-detail {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 24px;

  background: linear-gradient(
    135deg,
    var(--tangerine),
    var(--bubblegum)
  );

  box-shadow: 0 20px 40px var(--ombre);

  font-size: 6rem;
}

.image-detail img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.texte-detail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.puce-categorie {
  display: inline-block;

  margin-bottom: 1rem;
  padding: 0.35rem 1rem;

  border-radius: 999px;

  font-size: 0.85rem;
  font-weight: 700;
}

.puce-sucre {
  background: var(--bubblegum);
  color: #fff;
}

.puce-acidule {
  background: var(--citron);
  color: var(--plum);
}

.texte-detail h1 {
  margin: 0 0 1rem;

  color: var(--plum);

  font-size: 2.4rem;
  line-height: 1.15;
}

.description-longue {
  max-width: 55ch;

  margin: 0 0 1.5rem;

  font-size: 1.05rem;
  line-height: 1.7;
}

.prix-detail {
  display: block;

  margin-bottom: 1.5rem;

  color: var(--bubblegum);

  font-size: 1.8rem;
  font-weight: 700;
}

.bonbon-acidule-couleur {
  color: #8A9C12;
}


/* =========================
   SUGGESTIONS
   ========================= */

#suggestions {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
}

#suggestions h2 {
  margin: 0 0 1.5rem;

  color: var(--plum);

  font-size: 1.6rem;
}

.grille-suggestions {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 1.5rem;
}

.carte-suggestion {
  display: block;

  padding: 1.2rem;

  border-radius: 14px;

  background: #fff;

  box-shadow: 0 8px 20px var(--ombre);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.carte-suggestion:hover {
  transform: translateY(-5px);

  box-shadow: 0 14px 28px var(--ombre);
}

.suggestion-image {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;

  aspect-ratio: 4 / 3;

  margin-bottom: 1rem;

  overflow: hidden;

  border-radius: 10px;

  background: var(--cream);

  font-size: 2.5rem;
}

.suggestion-image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.carte-suggestion h3 {
  margin: 0 0 0.4rem;

  color: var(--plum);

  font-size: 1.05rem;
}

.prix-suggestion {
  color: var(--bubblegum);

  font-weight: 700;
}


/* =========================
   BONBON INTROUVABLE
   ========================= */

#bonbon-introuvable {
  max-width: 700px;

  margin: 4rem auto 6rem;

  padding: 3rem 2rem;

  border-radius: 20px;

  background: #fff;

  box-shadow: 0 10px 30px var(--ombre);

  text-align: center;
}

#bonbon-introuvable h1 {
  margin-top: 0;

  color: var(--plum);

  font-size: 2rem;
}

#bonbon-introuvable p {
  margin-bottom: 2rem;

  font-size: 1.05rem;
}


/* =========================
   PIED DE PAGE
   ========================= */

#pied-de-page {
  padding: 3rem 2rem 2rem;

  background: var(--plum);
  color: var(--cream);
}

.pied-conteneur {
  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 2rem;

  max-width: 1100px;
  margin: 0 auto;
}

.pied-conteneur h3 {
  margin: 0 0 0.6rem;

  font-size: 1.2rem;
}

.pied-conteneur p,
.pied-conteneur address {
  margin: 0.2rem 0;

  font-size: 0.9rem;
  font-style: normal;

  opacity: 0.85;
}

.copyright {
  max-width: 1100px;

  margin: 2rem auto 0;

  padding-top: 1.5rem;

  border-top:
    1px solid rgba(255, 255, 255, 0.15);

  font-size: 0.8rem;

  text-align: center;

  opacity: 0.7;
}


/* =========================
   ACCESSIBILITÉ
   ========================= */

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

@media (prefers-reduced-motion: reduce) {

  * {
    transition: none !important;
  }
}


/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 720px) {

  .entete-conteneur {
    flex-direction: column;

    gap: 1rem;
  }

  .menu-principal ul {
    gap: 1.2rem;
  }

  #vedette {
    grid-template-columns: 1fr;

    padding-top: 2.5rem;
  }

  #vedette h1 {
    font-size: 2rem;
  }

  #detail-bonbon {
    grid-template-columns: 1fr;

    gap: 2rem;

    padding-top: 2rem;
  }

  .texte-detail h1 {
    font-size: 2rem;
  }

  .grille-suggestions {
    grid-template-columns: 1fr;
  }
}