/* ============================================================================
   Cosmeek V2 — Foire aux questions (node 2868:12584)
   Cadre 1328 × 577, chapeau et corps séparés de 64. La mécanique d'accordéon
   est celle des cartes offre : mêmes classes, même script, seule l'apparence
   change. Rien n'est réécrit.
   ========================================================================= */

/* ── Accordéon, composant ──────────────────────────────────────────────
   Ces règles vivaient dans le bloc « offres », qui les a perdues en
   changeant de maquette. La FAQ en est le dernier usage : elles la
   suivent ici, ses propres surcharges restent plus bas. */
.acc-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

.acc {
  border-block-start: 1px solid var(--c-border);
  padding-block-start: var(--sp-12);
}

.acc__head {
  font: inherit;
}

.acc__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-16);
  inline-size: 100%;
  padding: 0;
  text-align: start;
}

/* La ligne d'en-tête ne fait que 14 px de haut dans la maquette. On étend la
   surface cliquable de 11 px de part et d'autre — 36 px au total — sans
   toucher au layout. Au-delà, les zones de deux accordéons voisins se
   chevaucheraient (38 px d'écart entre deux en-têtes fermés). */
.acc__trigger::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block: -11px;
}

.acc__trigger:focus-visible {
  outline: 2px solid var(--c-cream);
  outline-offset: 4px;
}

/* Boîte d'état à chasse fixe (50 px dans Figma) : le libellé permute
   par masque vertical, il ne change pas seulement de couleur.
   Sans JS, aucun basculement n'est possible : on n'affiche pas l'affordance. */
.acc__state {
  /* Même patron que le libellé de bouton : deux étages empilés en grille,
     masque dilaté pour l'ink, course supérieure à la hauteur du masque. */
  --state-bleed: 0.2em;
  --state-swap: calc(100% + 2 * var(--state-bleed) + 0.4em);

  display: none;
  flex: none;
  inline-size: 50px; /* chasse fixe relevée dans Figma */
  overflow: clip;
  text-align: end;
  padding-block: var(--state-bleed);
  margin-block: calc(-1 * var(--state-bleed));
}

.js .acc__state {
  display: grid;
}

/* Les transitions ne s'activent qu'une fois l'état initial posé (`data-ready`,
   mis par accordion.js après le premier rendu) : le panneau ouvert par défaut
   ne doit pas se déplier tout seul au chargement. */
.acc__state span {
  grid-area: 1 / 1;
}

.acc[data-ready] .acc__state span {
  transition: transform var(--d-acc) var(--e-inout);
}

/* Libellés en CSS : le texte ne figure pas dans le titre (H3) du HTML. */
.acc__state-open::before {
  content: "OUVRIR";
}

.acc__state-close::before {
  content: "FERMER";
}

.acc__state-open {
  color: var(--c-ink-inv-3);
  transform: translateY(0);
}

.acc__state-close {
  color: var(--c-ink-inv-2);
  transform: translateY(calc(-1 * var(--state-swap)));
}

.acc[data-open] .acc__state-open {
  transform: translateY(var(--state-swap));
}

.acc[data-open] .acc__state-close {
  transform: translateY(0);
}

/* État par défaut = état FINAL : sans JS, les quatre panneaux sont déployés
   et tout le contenu reste lisible. C'est le script qui referme. */
.acc__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.acc[data-ready] .acc__panel {
  transition: grid-template-rows var(--d-acc) var(--e-inout);
}

.js .acc__panel {
  grid-template-rows: 0fr;
}

.js .acc[data-open] .acc__panel {
  grid-template-rows: 1fr;
}

.acc__inner {
  min-block-size: 0;
  overflow: clip;
  color: var(--c-ink-inv-2);
}

.acc__inner > :first-child {
  margin-block-start: var(--sp-16); /* gap header/contenu du design */
}

.acc__inner ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.acc__inner li {
  padding-inline-start: var(--sp-14);
  position: relative;
}

.acc__inner li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.45em;
  inset-inline-start: 0;
  inline-size: 5px;
  block-size: 1px;
  background: currentcolor;
}

/* Contenu vide : on n'affiche pas un panneau fantôme. */
.acc__inner:empty {
  display: none;
}

/* ── Repli < 1024 : la carte passe en colonne ──────────────────────────── */
@container (max-width: 1023px) {
  .offer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-block-size: 0;
  }

  .offer__media {
    aspect-ratio: 16 / 10;
  }

  .offer__panel {
    padding: 0;
    gap: var(--sp-32);
  }

  .offer__head,
  .offer__details {
    gap: var(--sp-32);
  }
}

@media (pointer: coarse) {
  .acc__trigger {
    min-block-size: 44px;
  }

  /* Dans la FAQ, la ligne porte déjà 24 px de respiration de chaque côté et sa
     zone sensible déborde de 24 px (voir plus bas) : forcer 44 px de haut
     ajoutait du vide sous la question, hors de l'axe du filet du dessus. */
  .faq .acc__trigger {
    min-block-size: 0;
  }

  /* L'en-tête gagne en hauteur : on réduit le padding pour préserver le
     rythme vertical de la pile d'accordéons. */
  .acc {
    padding-block-start: var(--sp-2);
  }
}


.faq__grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-64);
}

/* ── Chapeau ────────────────────────────────────────────────────────────
   Colonne d'étiquette de 320, puis le titre occupe le reste. */
.faq__head {
  display: flex;
  align-items: start;
  gap: var(--sp-16);
}

.faq__label {
  flex: none;
  inline-size: 320px;
}

.faq__title {
  flex: 1;
  margin: 0;
}

/* ── Corps ──────────────────────────────────────────────────────────────
   Carte de relance calée en bas, liste de questions à droite. */
.faq__body {
  display: flex;
  align-items: end;
  /* Calée au début, pas répartie : la liste est plafonnée à 992, et sur un
     écran plus large `space-between` la repoussait à droite, hors de l'axe du
     titre (carte 272 + gap 64 = colonne d'étiquette 320 + gap 16). */
  justify-content: flex-start;
  gap: var(--sp-64);
}

.faq__aside {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-40);
  inline-size: 272px;
  padding: var(--sp-32);
  border-radius: var(--r-lg);
  background: var(--c-brown-light);
  color: var(--c-cream);
}

.faq__pitch {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.faq__pitch p {
  margin: 0;
}

.faq__pitch p + p {
  color: var(--c-ink-inv-2);
}

.faq__cta {
  align-self: start; /* la ligne épouse son contenu, elle ne s'étire pas */
}

.faq__list {
  flex: 1;
  max-inline-size: 992px;
}

/* ── Variante d'accordéon ───────────────────────────────────────────────
   Les questions sont jointives et séparées par un filet : pas d'écart entre
   elles, une respiration de 24 à l'intérieur. Le filet supérieur est porté par
   chaque question, l'inférieur seulement par la dernière — c'est ce qui évite
   le doublon d'épaisseur entre deux voisines. */
.faq .acc-list {
  gap: 0;
}

.faq .acc {
  /* Filets en ombre interne et non en bordure : Figma dessine le trait à
     l'intérieur du cadre, une bordure CSS s'ajouterait à la hauteur et chaque
     question gagnerait 1 px — 6 sur la liste entière. */
  border: 0;
  box-shadow: inset 0 1px 0 var(--c-border);
  padding-block: var(--sp-24);
}

.faq .acc:last-child {
  box-shadow:
    inset 0 1px 0 var(--c-border),
    inset 0 -1px 0 var(--c-border);
}

.faq .acc__trigger {
  align-items: start;
  gap: var(--sp-24);
}

.faq .acc__trigger:focus-visible {
  outline-color: var(--c-brown);
}

/* La zone cliquable étendue des cartes offre n'a plus lieu d'être : ici la
   ligne fait déjà 21 de haut et les 24 de respiration sont dans le bouton. */
.faq .acc__trigger::after {
  inset-block: calc(-1 * var(--sp-24));
}

/* Pastille d'état pleine, contrairement aux cartes offre où l'état est un
   simple libellé aligné à droite. La course du masque doit franchir le
   rembourrage en plus de la hauteur de ligne, sinon le libellé sortant
   dépasserait sous la pastille. */
.faq .acc__state {
  --state-swap: calc(100% + 2 * var(--sp-6) + 0.4em);

  inline-size: auto;
  padding: var(--sp-6);
  margin-block: 0;
  background: var(--c-cream-deep);
  color: var(--c-ink-2);
  text-align: center;
  opacity: 0.8;
  transition: opacity var(--d-micro) var(--e-inout);
}

.faq .acc[data-open] .acc__state {
  opacity: 1;
}

.faq .acc__state-open,
.faq .acc__state-close {
  color: inherit;
}

.faq .acc__inner {
  color: var(--c-ink-2);
}

.faq .acc__inner > :first-child {
  margin-block-start: var(--sp-24);
  max-inline-size: min(656px, 100%);
}

/* ── Repli ──────────────────────────────────────────────────────────────
   Sous 1024, la colonne d'étiquette et la carte de relance passent au-dessus :
   à cette largeur, 272 + 992 côte à côte ne laissent plus rien au texte. */
@media (width < 1024px) {
  .faq__head,
  .faq__body {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-32);
  }

  .faq__label,
  .faq__aside {
    inline-size: auto;
  }

  .faq__aside {
    order: 1; /* la relance suit les questions, elle ne les précède pas */
    max-inline-size: 400px;
  }
}