/*
================================================
  MONSIEUR SPOON - COULEURS THÉMATIQUES
================================================
  Fichier centralisé des couleurs principales
  Modifiez les valeurs ci-dessous pour changer le thème
================================================
*/

:root {
  /* === COULEURS PRINCIPALES === */

  /* Couleur primaire (Liens, accents) - TURQUOISE */
  --color-primary: #329B98;

  /* Couleur de fond beige/crème principal */
  --color-bg-cream: #FFFBE5;

  /* Couleur de fond gris clair */
  --color-bg-light-gray: #E8E8E8;


  /* === COULEURS D'ACCENT (Catégories) === */

  /* Or/Doré - Utilisé pour la catégorie Cuisine */
  --color-accent-gold: #ac9021;

  /* Orange vif - Couleur secondaire du site */
  --color-accent-orange: #FF4A16;

  /* Violet - Utilisé pour la catégorie Plonge */
  --color-accent-purple: #74245b;


  /* === COULEURS DE TEXTE === */

  /* Texte noir */
  --color-text-dark: #000;

  /* Texte jaune/highlight */
  --color-text-highlight: #ff0;


  /* === COULEURS DE BORDURE === */

  /* Bordure grise */
  --color-border-gray: silver;
}

/*
================================================
  STYLES PERSONNALISÉS SECTIONS
================================================
*/

/* Section turquoise avec les 4 icônes - background turquoise, texte et cercles blanc cassé */
section[bk="turquoise"] {
  background-color: #329B98 !important;
}

section[bk="turquoise"] .txt-icons-ch-is-ext {
  color: #92CAC8 !important;
}

section[bk="turquoise"] .icon-circle-mb2 {
  background-color: #92CAC8 !important;
}

/* Masques SVG dans section orange - couleur orange vif */
section[bk="orange"] .img-mask-wrap.is-green {
  color: #FF4A16 !important;
}

/* Texte blanc dans section orange is-02 */
section[bk="orange"].is-02 .txt-heading-fs3-mb2-is-norm,
section[bk="orange"].is-02 .txt-heading-fsp-mb2 {
  color: #FFFBE4 !important;
}

/* Marquee orange vif */
.marquee-wrap.is-orange {
  background-color: #FF4A16 !important;
}

/* Marquee turquoise */
.marquee-wrap.is-turquoise {
  background-color: #329B98 !important;
}

/* Bouton hover - couleur turquoise au lieu d'orange */
.btn-hovercolor {
  background-color: #329b98 !important;
}

/* Bouton style inversé (btn-style="2") - turquoise avec hover orange vif */
[btn-style="2"].button .btn-primarytxt {
  background-color: #329b98 !important;
  color: #FFFBE4 !important;
}

[btn-style="2"].button .btn-hovercolor {
  background-color: #FFFBE4 !important;
  color: #329b98 !important;
}

[btn-style="2"].button .fss {
  color: #FFFBE4 !important;
}

[btn-style="2"].button .btn-hovercolor .fss {
  color: #329b98 !important;
}

/* Signature - décalée légèrement à droite avec gestion responsive */
.sign-wrap {
  margin-top: 3rem !important;
  margin-left: 20% !important;
  width: fit-content !important;
}

.sign-wrap .sign-img {
  max-width: 400px !important;
  height: auto !important;
  width: 100% !important;
  display: block !important;
}

/* Responsive: Tablet et écrans moyens */
@media screen and (max-width: 991px) {
  .sign-wrap {
    max-width: 350px !important;
  }

  .sign-wrap .sign-img {
    max-width: 350px !important;
  }
}

/* Responsive: Mobile */
@media screen and (max-width: 767px) {
  .sign-wrap {
    max-width: 280px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sign-wrap .sign-img {
    max-width: 280px !important;
  }
}

/* Responsive: Petit mobile */
@media screen and (max-width: 479px) {
  .sign-wrap {
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .sign-wrap .sign-img {
    max-width: 200px !important;
  }
}

/* Texte animé "If it's good" - crème 35% opacité */
.if-its-txt {
  color: #ffa66c !important;
}

.if-its-txt .char {
  color: #ffa66c !important;
}

/* Image section orange - rectangle vertical qui couvre toute la hauteur */
section[bk="orange"].is-02 {
  max-height: none !important;
  overflow: visible !important;
}

section[bk="orange"].is-02 .section-pv4 {
  padding-top: 2rem !important;
  padding-bottom: 2rem !important;
}

section[bk="orange"].is-02 .split-grid-gd1-cd12 {
  min-height: auto !important;
  max-height: none !important;
  align-items: stretch !important;
  overflow: visible !important;
}

section[bk="orange"].is-02 .split-content-cd6 {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  padding-right: 3rem !important;
}

section[bk="orange"].is-02 .gd1-cd6 {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  overflow: visible !important;
}

section[bk="orange"].is-02 .square-img-wrap.cd5 {
  position: relative !important;
  width: calc(100% - 75px) !important;
  flex: 1 !important;
  min-height: 500px !important;
  padding-bottom: 0 !important;
  margin-left: 75px !important;
  margin-bottom: 2rem !important;
  overflow: visible !important;
  clip-path: none !important;
}

section[bk="orange"].is-02 .square-img-wrap .img-abs {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

@media screen and (max-width: 991px) {
  section[bk="orange"].is-02 .split-content-cd6 {
    align-items: center !important;
    padding-right: 0 !important;
  }

  section[bk="orange"].is-02 .gd1-cd6 {
    align-items: center !important;
  }

  section[bk="orange"].is-02 .square-img-wrap.cd5 {
    width: 100% !important;
    min-height: 0 !important;
    padding-bottom: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

@media screen and (max-width: 767px) {
  section[bk="orange"].is-02 .square-img-wrap.cd5 {
    width: 100% !important;
  }
}

/* Section lightblue - texte blanc aligné à droite, structure comme purple */
section[bk="lightblue"] {
  background-color: #FF4A16 !important;
}

section[bk="lightblue"] .txt-heading-fs3-mb2-is-norm,
section[bk="lightblue"] .txt-heading-fsp-mb2 {
  color: #FFFBE4 !important;
}

section[bk="lightblue"] .split-content-cd6.is-centered-txt-tac {
  text-align: right !important;
  align-items: flex-end !important;
  padding-right: 3rem !important;
}

section[bk="lightblue"] .global-padding {
  padding-left: 0 !important;
  padding-right: 2.5rem !important;
}

section[bk="lightblue"] .split-section-wrap-pv12 {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  padding-left: 3rem !important;
}

/* Image à gauche - pas de marge */
section[bk="lightblue"] .split-content-cd6.align-left-mobile {
  padding: 0 !important;
  margin: 0 !important;
}

section[bk="lightblue"] .split-img-wrap {
  padding: 0 !important;
  margin: 0 !important;
}

section[bk="lightblue"] .split-img {
  display: block !important;
}

/* Badge section lightblue - aligné à droite, plus visible */
section[bk="lightblue"] .badge-wrap {
  margin-top: 3rem !important;
  margin-left: -35% !important;
  text-align: left !important;
}

section[bk="lightblue"] .badge {
  transform: translate(12%, 10%) !important;
  background-color: #329B98 !important;
}

@media screen and (max-width: 991px) {
  section[bk="lightblue"] .split-grid-gd1-cd12 {
    row-gap: 3rem !important;
  }

  section[bk="lightblue"] .split-content-cd6.align-left-mobile {
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
  }

  section[bk="lightblue"] .split-img-wrap {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  section[bk="lightblue"] .split-img {
    width: 100% !important;
    height: auto !important;
  }

  section[bk="lightblue"] .split-section-wrap-pv12 {
    width: 100% !important;
    align-items: flex-end !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  section[bk="lightblue"] .badge-wrap {
    position: relative !important;
    width: auto !important;
    margin-top: 2.5rem !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  section[bk="lightblue"] .badge {
    transform: translate(8%, 8%) !important;
  }
}

@media screen and (max-width: 767px) {
  section[bk="lightblue"] .split-img-wrap {
    max-width: none !important;
  }

  section[bk="lightblue"] .split-section-wrap-pv12 {
    align-items: flex-end !important;
    padding-left: 0 !important;
  }

  section[bk="lightblue"] .badge {
    transform: translate(4%, 6%) !important;
  }
}

/*
================================================
  NOTES D'UTILISATION:
================================================

  1. Pour changer la couleur principale du site:
     Modifiez --color-primary (turquoise)

  2. Pour changer les couleurs d'accent:
     --color-accent-gold : Or/Doré (catégorie Cuisine)
     --color-accent-orange : Orange vif (secondaire)
     --color-accent-purple : Violet (catégorie Plonge)

  3. Pour changer le fond principal:
     Modifiez --color-bg-cream

  4. Après modification, rechargez la page pour voir les changements

================================================
*/

/* ================================================
   ALIAS CLASSES - Mapping nouvelles classes vers anciennes
   ================================================ */

/* Alias pour mspoon-logo vers diana-logo (CSS Webflow) */
.mspoon-logo {
  width: 100%;
  display: flex;
}

/* Alias pour mspoon-good vers diana-good (CSS Webflow) */
.mspoon-good {
  width: 45rem;
  margin-left: 2rem;
  overflow: visible;
}

@media screen and (max-width: 991px) {
  .mspoon-good {
    width: 40vw;
    margin-left: 1rem;
    display: flex;
  }
}

/* Alias pour mspoon-svg vers diana-svg (CSS Webflow) */
.mspoon-svg {
  overflow: visible;
}