/**
 * Module 17 : Page FAQ
 * Thème Storefront Child - TAMISIER MACHINES AGRICOLES
 *
 * Accordéon natif (details / summary) : aucun JavaScript, accessible au clavier.
 */

/* ==========================================================================
   0. MISE EN PAGE
   ========================================================================== */

.tma-faq-page .site-main {
  max-width: 900px !important;
  padding: 0 1.5rem 4rem !important;
}

.tma-faq-page .entry-header {
  padding: 0.5rem 0 1.25rem !important;
  margin-bottom: 1.75rem !important;
  border-bottom: 1px solid var(--agri-border-subtle, #e2e8f0);
}

.tma-faq-intro {
  margin: 0 0 2.5rem;
  padding-left: 1.5rem;
  border-left: 4px solid var(--agri-green-primary, #215833);
}

.tma-faq-intro p {
  margin: 0 0 0.9rem !important;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--agri-anthracite-surface, #2b3230);
}

.tma-faq-intro p:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   1. GROUPES
   ========================================================================== */

.tma-faq-group {
  margin-bottom: 2.75rem;
}

.tma-faq-group:last-child {
  margin-bottom: 0;
}

.tma-faq-group-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--agri-anthracite-base, #1e2322) !important;
  margin: 0 0 1rem !important;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--agri-border-subtle, #e2e8f0);
}

.tma-faq-group-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  background-color: var(--agri-green-subtle, #edf7f0);
  color: var(--agri-green-primary, #215833);
}

/* ==========================================================================
   2. QUESTIONS (accordéon)
   ========================================================================== */

.tma-faq-item {
  margin: 0 0 0.6rem;
  background-color: var(--agri-white, #ffffff);
  border: 1px solid var(--agri-border-subtle, #e2e8f0);
  border-left: 3px solid var(--agri-border-subtle, #e2e8f0);
  border-radius: var(--agri-radius, 4px);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tma-faq-item:hover {
  border-color: var(--agri-green-light, #2e7a47);
}

.tma-faq-item[open] {
  border-left-color: var(--agri-green-primary, #215833);
  box-shadow: 0 8px 18px -14px rgba(15, 23, 42, 0.4);
}

.tma-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--agri-anthracite-base, #1e2322);
  list-style: none;
}

/* Neutralise le marqueur natif */
.tma-faq-question::-webkit-details-marker {
  display: none;
}

.tma-faq-question::marker {
  content: "";
}

/* Indicateur + / − */
.tma-faq-question::after {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-image: linear-gradient(var(--agri-green-primary, #215833), var(--agri-green-primary, #215833)),
                    linear-gradient(var(--agri-green-primary, #215833), var(--agri-green-primary, #215833));
  background-position: center center, center center;
  background-repeat: no-repeat;
  background-size: 100% 2px, 2px 100%;
  transition: transform 0.2s ease;
}

.tma-faq-item[open] .tma-faq-question::after {
  transform: rotate(45deg);
}

.tma-faq-question:hover {
  color: var(--agri-green-primary, #215833);
}

.tma-faq-answer {
  padding: 0 1.1rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--agri-anthracite-surface, #2b3230);
}

.tma-faq-answer p {
  margin: 0 !important;
}

/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */

@media (max-width: 640px) {
  .tma-faq-page .site-main {
    padding: 0 1rem 3rem !important;
  }

  .tma-faq-intro {
    padding-left: 1rem;
    margin-bottom: 2rem;
  }

  .tma-faq-intro p {
    font-size: 0.96rem;
  }

  .tma-faq-group-title {
    font-size: 1.12rem !important;
    gap: 0.55rem;
  }

  .tma-faq-group-icon {
    width: 32px;
    height: 32px;
  }

  .tma-faq-question {
    padding: 0.85rem 0.9rem;
    font-size: 0.9rem;
  }

  .tma-faq-answer {
    padding: 0 0.9rem 0.95rem;
    font-size: 0.88rem;
  }
}