/* SPOON SECTION - Styles personnalisés pour Monsieur Spoon */

/* Logo M-Spoon au-dessus de SPOON */
.mspoon-logo-wrap {
  display: block;
  text-align: center;
  width: 100%;
}

/* Le wrapper du logo doit être en flex-direction column */
.if-its-good-wrap:has(.mspoon-logo-wrap) {
  display: block;
  text-align: center;
  margin-bottom: 1rem;
  overflow: visible;
  perspective: 1000px;
}

.mspoon-logo-svg {
  height: 18rem;
  width: auto;
  display: block !important;
  margin: 0 auto;
  fill: #ffa66c;
}

/* Réduire le padding de la section SPOON IS ALWAYS A GOOD IDEA */
section[bk="orange"] .section-pv18 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.mspoon-logo-svg path {
  fill: #ffa66c !important;
}

/* Responsive pour le logo M-Spoon */
@media (max-width: 991px) {
  .mspoon-logo-svg {
    height: 14rem;
  }

  section[bk="orange"] .section-pv18 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

@media (max-width: 767px) {
  .mspoon-logo-svg {
    height: 10rem;
  }

  section[bk="orange"] .section-pv18 {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

@media (max-width: 479px) {
  .mspoon-logo-svg {
    height: 8rem;
  }

  section[bk="orange"] .section-pv18 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

/* SPOON lettres - container */
.spoon-letters-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Chaque lettre SVG avec classe char pour animation */
.spoon-letter {
  display: inline-block;
  color: #ffa66c;
  margin-left: -2rem;
}

.spoon-letter:first-child {
  margin-left: 0;
}

.spoon-svg-letter {
  height: 12rem;
  width: auto;
  display: block;
}

/* Forcer la couleur crème 35% sur tous les éléments SVG */
.char.spoon-letter svg {
  fill: #ffa66c !important;
}

.char.spoon-letter svg path,
.char.spoon-letter svg polygon {
  fill: #ffa66c !important;
}

.spoon-letters-wrap .char svg path,
.spoon-letters-wrap .char svg polygon {
  fill: #ffa66c !important;
}

.if-its-txt.spoon-letters-wrap svg path,
.if-its-txt.spoon-letters-wrap svg polygon {
  fill: #ffa66c !important;
}

/* Ligne 2 : IS ALWAYS */
.is-always-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 1rem;
}

.is-text,
.is-text .line,
.is-text .char {
  font-family: 'Montagu Slab Bold', serif !important;
  font-weight: 600 !important;
  font-size: 5rem;
  color: #ffa66c;
  text-transform: uppercase;
}

.always-text,
.always-text .line,
.always-text .char {
  font-family: 'Montagu Slab Bold', serif !important;
  font-weight: 600 !important;
  font-size: 10rem;
  color: #ffa66c;
  text-transform: uppercase;
}

/* Réduire l'espace entre les lettres LWAYS (pas le premier A) */
.always-text .char:nth-child(n+2) {
  margin-left: -0.15em;
}

/* Ligne 3 : A GOOD IDEA! */
.good-idea-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5rem;
}

.good-idea-text,
.good-idea-text .line,
.good-idea-text .char {
  font-family: 'Eugene', sans-serif !important;
  font-weight: 600 !important;
  font-size: 10rem;
  color: #ffa66c;
  text-transform: uppercase;
}

.exclamation-text,
.exclamation-text .line,
.exclamation-text .char {
  font-family: 'Montagu Slab Bold', serif !important;
  font-weight: 600 !important;
  font-size: 10rem;
  color: #ffa66c;
}

/* Responsive */
@media (max-width: 991px) {
  .spoon-svg-letter {
    height: 9rem;
  }

  .spoon-letter {
    margin-left: -1.8rem;
  }

  .is-text,
  .is-text .line,
  .is-text .char {
    font-size: 3.75rem;
  }

  .always-text,
  .always-text .line,
  .always-text .char {
    font-size: 7.5rem;
  }

  .good-idea-text,
  .good-idea-text .line,
  .good-idea-text .char,
  .exclamation-text,
  .exclamation-text .line,
  .exclamation-text .char {
    font-size: 7.5rem;
  }
}

@media (max-width: 767px) {
  /* Réduire la taille pour que tout tienne sur une ligne */
  .spoon-svg-letter {
    height: 5rem;
  }

  .spoon-letter {
    margin-left: -1.2rem;
  }

  .is-text,
  .is-text .line,
  .is-text .char {
    font-size: 2.5rem;
  }

  .always-text,
  .always-text .line,
  .always-text .char {
    font-size: 5rem;
  }

  .good-idea-text,
  .good-idea-text .line,
  .good-idea-text .char,
  .exclamation-text,
  .exclamation-text .line,
  .exclamation-text .char {
    font-size: 5rem;
  }
}

@media (max-width: 479px) {
  /* Réduire encore plus pour petit mobile */
  .spoon-svg-letter {
    height: 4rem;
  }

  .spoon-letter {
    margin-left: -1rem;
  }

  .is-text,
  .is-text .line,
  .is-text .char {
    font-size: 1.875rem;
  }

  .always-text,
  .always-text .line,
  .always-text .char {
    font-size: 3.75rem;
  }

  .good-idea-text,
  .good-idea-text .line,
  .good-idea-text .char,
  .exclamation-text,
  .exclamation-text .line,
  .exclamation-text .char {
    font-size: 3.75rem;
  }

  .is-always-line,
  .good-idea-line {
    gap: 0.5rem;
  }
}