/* ============================================================
   wabimiso.com — CSS custom (source unique = statique)
   Polish ciblé + fixes mobile. Chargé après Google Fonts.
   Ne modifie volontairement PAS la structure Divi.
   ============================================================ */

/* ---------- POLISH DESKTOP (léger) ---------- */

/* Transitions douces sur les boutons */
.et_pb_button {
  transition: background-color .25s ease, color .25s ease,
              border-color .25s ease, transform .15s ease !important;
}
.et_pb_button:hover { transform: translateY(-1px); }

/* Sur-titre (label intro) mieux différencié des titres */
p.intro-label {
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .85;
}

/* Liens de contenu : soulignement plus discret */
.et_pb_text_inner a { text-underline-offset: 2px; }


/* ---------- TABLETTE / MOBILE (<= 980px) ---------- */
@media (max-width: 980px) {

  /* Topbar marquee : empêche tout débordement horizontal */
  .topbar {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .topbar-track { white-space: nowrap; }
  .topbar-item, .topbar-sep {
    font-size: .72rem !important;
    letter-spacing: .04em;
  }

  /* Titre hero : ne plus tronquer, taille fluide */
  h1.et_pb_module_header {
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    font-size: clamp(2.1rem, 8.5vw, 3.2rem) !important;
    line-height: 1.1 !important;
  }
}


/* ---------- PETIT MOBILE (<= 480px) ---------- */
@media (max-width: 480px) {

  .topbar-item, .topbar-sep { font-size: .66rem !important; }

  h1.et_pb_module_header {
    font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
  }

  /* Texte d'intro plus aéré */
  p.intro-text { line-height: 1.55; }

  /* Bannière cookies : pleine largeur en bas, masque moins de contenu */
  .cky-consent-container {
    width: calc(100% - 20px) !important;
    max-width: 100% !important;
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
  }
  .cky-box-bottom-left { left: 10px !important; bottom: 10px !important; }
  .cky-btn-revisit-wrapper { transform: scale(.85); }
}


/* ============================================================
   COMPOSANTS ARTICLE — a-snippet / a-geo / a-recipe / a-faq / a-img
   Fix : ces classes sont utilisées dans les articles (blocs "guidelines v2")
   mais n'avaient jamais de règles CSS définies nulle part sur le site.
   Centralisées ici (chargé sur toutes les pages) pour éviter de dupliquer
   ce bloc dans chaque article individuellement.
   ============================================================ */

.a-snippet {
  margin: 40px 0;
  padding: 28px 32px;
  background: #F7F4EF !important;
  border: 1.5px solid #8C4A2F;
}
.a-snippet-label {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #B23A2B !important;
  font-weight: 500;
  margin-bottom: 10px;
}
.a-snippet p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #3a3530 !important;
}

.a-geo {
  margin-bottom: 40px;
  padding: 16px 20px;
  background: rgba(140,74,47,0.04);
  border-left: 1.5px solid rgba(140,74,47,0.25);
}
.a-geo p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  color: #7a7068 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  font-weight: 300 !important;
}

.a-recipe-header {
  margin: 32px 0 40px;
  border-top: 1.5px solid #8C4A2F;
  border-bottom: 0.5px solid rgba(140,74,47,0.18);
  padding: 20px 0;
}
.a-recipe-header-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #B23A2B !important;
  font-weight: 500;
  margin-bottom: 18px;
}
.a-recipe-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.a-recipe-stat {
  text-align: center;
  padding: 0 8px;
  border-right: 0.5px solid rgba(140,74,47,0.18);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.a-recipe-stat:last-child { border-right: none; }
.a-recipe-stat-label {
  order: 1;
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #7a7068 !important;
}
.a-recipe-stat-value {
  order: 2;
  font-family: 'Shippori Mincho', serif;
  font-size: 20px;
  color: #1F1F1F !important;
}
.a-recipe-stat-unit {
  order: 3;
  font-family: 'DM Sans', sans-serif;
  font-size: 10px;
  color: #7a7068 !important;
}

.a-steps {
  margin: 0 0 24px;
  padding-left: 22px;
}
.a-steps li {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.85;
  color: #3a3530 !important;
  font-weight: 300;
  margin-bottom: 18px;
  padding-left: 6px;
}

.a-faq {
  margin: 0 0 24px;
  border-top: 0.5px solid rgba(140,74,47,0.18);
}
.a-faq-item {
  border-bottom: 0.5px solid rgba(140,74,47,0.18);
}
.a-faq-q {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1F1F1F !important;
  padding: 16px 32px 16px 0;
  cursor: pointer;
  position: relative;
  line-height: 1.45;
  list-style: none;
  user-select: none;
}
.a-faq-q::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: #8C4A2F !important;
  font-weight: 300;
  transition: transform .2s;
}
.a-faq-item.open .a-faq-q::after { content: '\2014'; }
.a-faq-a {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #3a3530 !important;
  line-height: 1.75;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
}
.a-faq-item.open .a-faq-a { max-height: 800px; padding-bottom: 18px; }
.a-faq-a a { color: #8C4A2F !important; text-decoration: underline !important; }

.a-img { margin: 40px 0; width: 100%; }
.a-img img { width: 100%; height: auto; display: block; }
.a-img-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  color: #7a7068 !important;
  margin-top: 8px;
  letter-spacing: .04em;
  font-style: italic;
}

@media (max-width: 740px) {
  .a-recipe-stats { grid-template-columns: repeat(2, 1fr); gap: 22px 0; }
  .a-recipe-stat {
    border-right: none;
    padding-bottom: 16px;
    border-bottom: 0.5px solid rgba(140,74,47,0.18);
  }
  .a-recipe-stat:nth-last-child(-n+2) { border-bottom: none; }
  .a-snippet, .a-geo { padding: 20px !important; }
  .a-faq-q { font-size: 16px !important; padding: 16px 28px 16px 0 !important; }
  .a-faq-a { font-size: 15px !important; }
}

/* ============================================================
   FIL D'ARIANE — visible en haut du corps d'article
   Reprend le schema BreadcrumbList déjà présent en JSON-LD.
   ============================================================ */
.a-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: #7a7068 !important;
}
.a-breadcrumb a {
  color: #7a7068 !important;
  text-decoration: none !important;
  transition: color .2s;
}
.a-breadcrumb a:hover {
  color: #8C4A2F !important;
  text-decoration: underline !important;
}
.a-breadcrumb .a-breadcrumb-sep {
  color: rgba(140,74,47,0.35) !important;
}
.a-breadcrumb .a-breadcrumb-current {
  color: #3a3530 !important;
  font-weight: 500;
}

@media (max-width: 740px) {
  .a-breadcrumb {
    font-size: 11px !important;
    margin-bottom: 18px !important;
  }
  .a-breadcrumb .a-breadcrumb-current {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 55vw;
  }
}