/* ============================================================
   CEWeb Blocks — Bloc FAQ
   [ceweb_faq] + widget Elementor « FAQ ».
   Couleurs : variables de palette du thème utilisées directement.
   Polices : Fraunces (titres, questions) + Inter (texte) — chargées par le thème.
   ============================================================ */

.cw-faq{
  /* Courbe partagée par l'ouverture des réponses et l'icône. */
  --cw-faq-ease: cubic-bezier(.22,.61,.36,1);
  /* Largeur de la liste : écrasée en style inline par l'attribut max_width. */
  --cw-faq-width: 880px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--theme-palette-color-6);
  text-align: center;
}
.cw-faq *{ box-sizing: border-box; }

/* --- Titre --- */
.cw-faq .cw-faq-title{
  /* !important : les règles de titre du thème sont plus spécifiques que les nôtres. */
  margin: 0 0 clamp(28px, 4vw, 56px) !important;
  font-family: Fraunces, Georgia, serif !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -.025em;
  color: var(--theme-palette-color-6) !important;
}
.cw-faq .cw-faq-accent{ font-style: italic; font-weight: inherit; }
.cw-faq .cw-faq-intro{
  max-width: 560px;
  margin: -24px auto clamp(28px, 4vw, 48px);
  font-size: 17px; line-height: 1.6;
  color: var(--theme-palette-color-7);
}

/* --- Liste --- */
.cw-faq .cw-faq-list{
  max-width: var(--cw-faq-width);
  margin: 0 auto; padding: 0;
  list-style: none; text-align: left;
  border-top: 1px solid var(--theme-palette-color-9);
}
.cw-faq .cw-faq-item{
  margin: 0;
  border-bottom: 1px solid var(--theme-palette-color-9);
}

/* --- Question --- */
.cw-faq .cw-faq-q{
  appearance: none;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; margin: 0;
  padding: clamp(22px, 2.4vw, 32px) 0;
  border: 0; background: none; box-shadow: none;
  text-align: left; text-transform: none; cursor: pointer;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(18px, 1.7vw, 24px); font-weight: 400; line-height: 1.3;
  letter-spacing: -.01em; color: var(--theme-palette-color-6);
  transition: padding-left .25s var(--cw-faq-ease);
}
.cw-faq .cw-faq-q:hover,
.cw-faq .cw-faq-q:focus-visible{ padding-left: 12px; }
.cw-faq .cw-faq-q:focus-visible{
  outline: 2px solid var(--theme-palette-color-1); outline-offset: 4px;
  border-radius: 4px;
}

/* Icône « + » dessinée en CSS : la rotation à 45° reste nette, contrairement
   à un caractère typographique dont le dessin dépend de la police. */
.cw-faq .cw-faq-toggle{
  position: relative; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--theme-palette-color-10);
  color: var(--theme-palette-color-6);
  transition: background-color .3s var(--cw-faq-ease),
              color .3s var(--cw-faq-ease),
              transform .3s var(--cw-faq-ease);
}
.cw-faq .cw-faq-toggle::before,
.cw-faq .cw-faq-toggle::after{
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 14px; height: 1.5px; border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.cw-faq .cw-faq-toggle::after{ transform: translate(-50%, -50%) rotate(90deg); }
.cw-faq .cw-faq-q[aria-expanded="true"] .cw-faq-toggle{
  background: var(--theme-palette-color-1);
  color: var(--theme-palette-color-11);
  transform: rotate(45deg);
}

/* --- Réponse ---
   Ouverture animée par grid-template-rows 0fr → 1fr : la hauteur réelle du
   contenu est calculée par la grille, donc aucune réponse n'est tronquée,
   contrairement à un max-height plafonné. Les navigateurs qui n'animent pas
   cette propriété ouvrent et ferment sans transition — le pli reste correct. */
.cw-faq .cw-faq-a{
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .4s var(--cw-faq-ease);
}
.cw-faq .cw-faq-item.is-open .cw-faq-a{ grid-template-rows: 1fr; }
/* min-height:0 : sans lui, la ligne de grille refuserait de descendre sous la
   hauteur naturelle du contenu et la réponse resterait dépliée. */
.cw-faq .cw-faq-a-clip{ overflow: hidden; min-height: 0; }
.cw-faq .cw-faq-a-body{
  max-width: 720px;
  padding: 0 0 clamp(22px, 2.4vw, 32px);
  color: var(--theme-palette-color-7);
  font-size: 16px; line-height: 1.7;
}
.cw-faq .cw-faq-a-body > :first-child{ margin-top: 0; }
.cw-faq .cw-faq-a-body > :last-child{ margin-bottom: 0; }
.cw-faq .cw-faq-a-body a{
  color: var(--theme-palette-color-1);
  text-decoration: underline; text-underline-offset: 3px;
}

/* --- Variante titre aligné à gauche --- */
.cw-faq--left{ text-align: left; }
.cw-faq--left .cw-faq-list{ margin-left: 0; }
.cw-faq--left .cw-faq-intro{ margin-left: 0; }

/* --- Responsive --- */
@media (max-width: 767px){
  .cw-faq .cw-faq-q{ gap: 16px; }
  .cw-faq .cw-faq-toggle{ width: 34px; height: 34px; border-radius: 10px; }
  .cw-faq .cw-faq-toggle::before,
  .cw-faq .cw-faq-toggle::after{ width: 12px; }
  /* Le décalage au survol n'a pas de sens au doigt, et vole de la place au texte. */
  .cw-faq .cw-faq-q:hover,
  .cw-faq .cw-faq-q:focus-visible{ padding-left: 0; }
}

@media (prefers-reduced-motion: reduce){
  .cw-faq .cw-faq-q,
  .cw-faq .cw-faq-toggle,
  .cw-faq .cw-faq-a{ transition: none; }
}