/* ==========================================================================
   NOSTAL CARS PUB — assets/css/reassurance.css
   Styles partagés par les pages de réassurance : faq.php et avis-clients.php
   S'appuie sur les variables et composants définis dans style.css
   ========================================================================== */

/* ---- Pastilles de filtre (catégories FAQ / notes avis) — composant partagé ---- */
.rns-pills{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom: 2.6rem; }
.rns-pill{
  padding: .6rem 1.3rem; border-radius:24px; border: 1.5px solid var(--nc-gray-300);
  font-size: var(--nc-fs-sm); font-weight:700; color: var(--nc-gray-700);
  background:#fff; transition: all var(--nc-transition); cursor:pointer;
}
.rns-pill:hover{ border-color: var(--nc-blue); color: var(--nc-blue); }
.rns-pill.is-active{ background: var(--nc-blue); border-color: var(--nc-blue); color:#fff; }

/* ============================================================================
   FAQ.PHP — préfixe "faq-"
   ============================================================================ */

.faq-search{ max-width:620px; margin: 0 auto 2.6rem; position:relative; }
.faq-search i{ position:absolute; left:1.3rem; top:50%; transform:translateY(-50%); color: var(--nc-gray-500); }
.faq-search input{
  width:100%; padding: 1.05rem 1.4rem 1.05rem 3.2rem; border-radius: 30px;
  border: 1.5px solid var(--nc-gray-300); font-size: var(--nc-fs-md); box-shadow: var(--nc-shadow-sm);
}
.faq-search input:focus{ outline:none; border-color: var(--nc-blue); box-shadow: 0 0 0 4px var(--nc-blue-light); }

.faq-category{ margin-bottom: 3rem; }
.faq-category-title{ display:flex; align-items:center; gap:.8rem; margin-bottom:1.2rem; }
.faq-category-title i{ width:42px; height:42px; border-radius:10px; background: var(--nc-blue-light); color: var(--nc-blue); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
.faq-category-title h3{ margin-bottom:0; font-size: var(--nc-fs-lg); }

.faq-accordion-item{ border-bottom: 1px solid var(--nc-gray-300); }
.faq-accordion-item:first-child{ border-top: 1px solid var(--nc-gray-300); }
.faq-accordion-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  background:none; border:none; text-align:left; padding: 1.3rem .3rem;
  font-weight:700; font-size: var(--nc-fs-md); color: var(--nc-dark);
}
.faq-accordion-q i{ color: var(--nc-blue); transition: transform var(--nc-transition); flex-shrink:0; }
.faq-accordion-item.is-open .faq-accordion-q i{ transform: rotate(45deg); }
.faq-accordion-a{ max-height:0; overflow:hidden; transition: max-height .35s ease; }
.faq-accordion-item.is-open .faq-accordion-a{ max-height:400px; }
.faq-accordion-a p{ padding: 0 .3rem 1.4rem; margin:0; color: var(--nc-gray-700); }
.faq-accordion-item.is-hidden{ display:none; }

.faq-no-results{ text-align:center; padding: 3rem 1.5rem; }
.faq-no-results i{ font-size:2.4rem; color: var(--nc-gray-300); margin-bottom:1rem; display:block; }

/* ============================================================================
   AVIS-CLIENTS.PHP — préfixe "av-"
   ============================================================================ */

.av-summary{
  display:grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items:center;
  background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius-lg);
  padding: 2.4rem; margin-bottom: 2.8rem;
}
@media(max-width:767px){ .av-summary{ grid-template-columns:1fr; text-align:center; } }
.av-rating-big{ font-size: 4rem; font-weight:900; color: var(--nc-blue); line-height:1; }
.av-stars-row{ color: var(--nc-green); font-size:1.1rem; margin: .6rem 0; }
.av-summary-count{ font-size: var(--nc-fs-sm); color: var(--nc-gray-500); }

.av-bar-row{ display:flex; align-items:center; gap:.9rem; margin-bottom:.7rem; }
.av-bar-row span:first-child{ width:52px; font-size: var(--nc-fs-xs); font-weight:700; color: var(--nc-gray-700); flex-shrink:0; }
.av-bar-track{ flex:1; height:9px; background: var(--nc-gray-100); border-radius:5px; overflow:hidden; }
.av-bar-fill{ height:100%; background: var(--nc-green); border-radius:5px; }
.av-bar-row span:last-child{ width:42px; text-align:right; font-size: var(--nc-fs-xs); color: var(--nc-gray-500); flex-shrink:0; }

.av-review-card{ padding: 2rem; }
.av-review-card .av-meta{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom: .8rem; }
.av-review-card .av-vehicle-tag{
  display:inline-flex; align-items:center; gap:.4rem; background: var(--nc-blue-light); color: var(--nc-blue);
  font-size: var(--nc-fs-xs); font-weight:700; padding:.3rem .7rem; border-radius:20px; margin-top:.6rem;
}
.av-review-card .av-date{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }
.av-review-card.is-hidden{ display:none; }

.av-cta-card{
  background: linear-gradient(135deg, var(--nc-dark), var(--nc-dark-3)); color:#fff;
  border-radius: var(--nc-radius-lg); padding: 2.6rem; text-align:center;
}
.av-cta-card h3{ color:#fff; }
.av-cta-card p{ color: rgba(255,255,255,.6); }