/* Container */
.faq {
  --faq-max-w: 1600px;
  --faq-radius: 4px;
  --faq-border: 1px solid #e6e6eb;
  --faq-bg: #E8E9ED;
  --faq-bg-alt: #fff;
  --faq-text: #0B0B0C;
  --faq-muted: #E10600;
  --faq-primary: #E10600; /* chevrons */
  --faq-shadow: 0 1px 2px rgba(0,0,0,.06);
  max-width: var(--faq-max-w);
/*  margin: 3rem auto;
  padding: clamp(.5rem, 2vw, 1rem);*/
  color: var(--faq-text);
}

.faq__title {
  text-align: left;
  /*font-size: clamp(1.6rem, 2.5vw, 2rem);*/
  margin: 0 0 1.25rem 0;
  color: var(--faq-bg);
}

/* Items */
.faq__item {
  background: var(--faq-bg);
  border: var(--faq-border);
  border-radius: var(--faq-radius);
  box-shadow: var(--faq-shadow);
  margin: .75rem 0;
  /* IMPORTANT: visible pour laisser l'anim de hauteur s'exprimer */
  overflow: visible;
}

/* Summary (bouton) */
.faq__summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.125rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  position: relative;
  font-weight: 600;
}

.faq__summary::-webkit-details-marker { display: none; }

.faq__summary span { line-height: 1.35; }

.faq__chevron {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform .25s ease;
  color: var(--faq-muted);
  stroke-width: 2; /* évite un micro-saut lié à l'épaisseur */
}

.faq__item[open] .faq__chevron {
  transform: rotate(180deg);
  color: var(--faq-primary);
}

.faq__summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--faq-primary) 60%, transparent);
  outline-offset: 3px;
  border-radius: calc(var(--faq-radius) - 2px);
}

/* Content */
.faq__content {
  padding: .75rem 1.125rem 1rem;
  border-top: var(--faq-border);
  background: var(--faq-bg-alt);
  color: var(--faq-text);
  /* Hauteur gérée par JS durant l’animation, fallback sans JS : auto */
}

/* Petites touches */
.faq__content p { margin: 0.5rem 0; }
.faq__content a { color: var(--faq-primary); text-decoration: underline; }

/* Dark mode auto */
@media (prefers-color-scheme: dark) {
  .faq {
    --faq-bg: #0f1116;
    --faq-bg-alt: #0a0c10;
    --faq-text: #e5e7eb;
    --faq-muted: #9ca3af;
    --faq-border: 1px solid #20222b;
    --faq-shadow: none;
  }
}

/* Réduit/annule les animations si l’utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  .faq__chevron { transition: none; }
}

/* ==========
   Progressive enhancement (uniquement si JS présent)
   ========== */

/* Fermé : on force la hauteur à 0, bordure transparente (épaisseur constante) */
.has-js details.faq__item:not([open]) .faq__content {
  height: 0;
  overflow: hidden;
  overflow-anchor: none;              /* évite le recadrage auto du scroll */
  border-top: 1px solid transparent;  /* même épaisseur => pas de shift */
}

/* Ouvert : on rend la hauteur auto et la bordure visible */
.has-js details.faq__item[open] .faq__content {
  height: auto;                       /* le JS enlève la height après anim */
  border-top: 1px solid #e6e6eb;
}

/* ==========
   Alignement à gauche dans GenerateBlocks
   ========== */
.faq {
  margin-left: 0;             /* colle à gauche */
  margin-right: auto;         /* pousse à droite si besoin */
  width: 100%;                /* remplit la colonne enfant GB */
  text-align: left;
}

/* Si le conteneur enfant GB est en grid, on force la cellule à gauche */
.gb-grid-column > .faq,
.gb-container > .faq,
.gb-inside-container > .faq {
  justify-self: start;
}

/* Si le parent est en flex et centre son contenu, on annule */
.gb-container .faq {
  align-self: stretch;        /* prend la largeur de la colonne */
}

/* Si tu utilises un bloc GB "Container" avec marges auto */
.faq.alignnone,
.faq.alignwide,
.faq.alignfull {
  margin-left: 0;
  margin-right: auto;
}