/* ========================================
   Page FAQ
   ======================================== */
.section-intro_faq, .section-intro_faq_QR  {
width: 100%;
background-color: var(--color-creme);
padding: 100px 0 75px 0;
position: relative;
z-index: 500;    
}

.section-intro_faq_content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gutter);
  grid-column: 4 / 11;
}

.section-grid {
gap: 1.5rem;
}

.section-grid_valeurs {
display: grid;
column-gap: 0;
gap: 0 !important;
}

.faq-group, .section-projets-filters {
  display: grid;
  column-gap: var(--gutter);
  grid-column: 3 / 10;
}



  /* ========================================
   Filtres Projets
   ======================================== */
.filter-btn { font-size: 0.8rem; padding: 0.55rem 1.25rem; }
.section-projets-filters {
  background-color: var(--color-creme);
  position: relative;
  z-index: 501;
  padding: 60px 0 0;
}

.section-projets-filters a {
  text-decoration: none !important;
  color: var(--color-sapin);
}

.projets-filters {
  grid-column: 2 / -2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.filter-btn {
  font-family: "Parkinsans", sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: lowercase;
  color: var(--color-charbon);
  background: transparent;
  border: 1.5px solid var(--color-charbon-light-3);
  border-radius: 0 0 0 8px;
  padding: 0.45rem 1.1rem;
  cursor: pointer;
  transition:
    color 0.25s var(--ease-snappy),
    background-color 0.25s var(--ease-snappy),
    border-color 0.25s var(--ease-snappy),
    transform 0.2s var(--ease-snappy),
    box-shadow 0.25s var(--ease-snappy);
}

.filter-btn:hover {
  border-color: var(--color-sapin);
  color: var(--color-sapin);
  transform: translateY(-2px);
}

.faq-group { scroll-margin-top: 6rem; } /* ajuste à la hauteur de ton header */
.faq-item { scroll-margin-top: 6rem; }


/* Responsive filtres */
@media (max-width: 768px) {
  .section-projets-filters {
    padding: 40px 0 0;
  }

  .projets-filters {
    grid-column: 1 / -1;
    gap: 8px;
    padding: 0 var(--gutter);
    justify-content: center;
  }

  .filter-btn {
    font-size: 0.8rem;
    padding: 0.55rem 1.25rem;
  }
}

.faq-themes_wrapper {display: grid;
    column-gap: var(--gutter);
    grid-column: 3 / 10;
    gap: .5rem 1rem;
    padding: 0;
    list-style: none;
}
.faq-themes{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin:0 0 3rem;padding:0;list-style:none}
.faq-group{margin:0 0 3.5rem}
.faq-item{border-top:1px solid currentColor; interpolate-size: allow-keywords;}
.faq-item:last-child{border-bottom:1px solid currentColor}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font:inherit;font-weight:600}
.faq-item summary::after{content:"+";font-size:1.5em;line-height:1;transition:transform .2s; color: var(--color-corail);}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.faq-item::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .35s ease, content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content { block-size: auto; }
.faq-answer{padding:0 0 1.4rem;max-width:90ch}
.faq-answer p,.faq-answer ul{margin:0 0 .8rem}
.faq-answer ul{padding-left:1.2rem}
.faq-item summary h3 { transition: color .25s ease; }
.faq-item[open] summary h3 { color: var(--color-corail); transition: color .25s ease;}
@media (prefers-reduced-motion:reduce){.faq-item summary::after{transition:none}; .faq-item::details-content { transition: none; }}


/* ============================================================
   RESPONSIVE — Page FAQ
   ============================================================ */

/* ── Laptop 1024–1279px ── */

@media (max-width: 1279px) {
  .section-intro_faq_content    { grid-column: 3 / span 9; }
  .faq-group, .faq-themes_wrapper {grid-column: 3 / 10;}
}
/* ── Tablet 768–1023px ── */

@media (max-width: 1023px) {
  .section-intro_faq, .section-intro_faq_QR { padding: 75px 0 50px; }
  .section-intro_faq_content  { grid-column: 2 / span 10; }
  .faq-group, .faq-themes_wrapper {grid-column: 2 / 11;}
}
/* ── Mobile 480–767px ── */

@media (max-width: 767px) {
  .section-intro_faq, .section-intro_faq_QR  { padding: 50px 0 50px; }
  .section-intro_faq_content { grid-column: 2 / span 9; grid-template-columns: 1fr; }
  .faq-group, .faq-themes_wrapper  {grid-column: 2 / 12;}
}
/* ── Mobile XS < 480px ── */

@media (max-width: 479px) {
  .section-intro_faq, .section-intro_faq_QR  { grid-column: 2 / span 9; }
}