/* ============================================================
   QUESTIONS FRÉQUENTES — onglets + accordéon
   ------------------------------------------------------------
   Portage vanilla du motif « faq-tabs » : des catégories en
   pastilles dont le fond remonte par le bas quand on les
   sélectionne, puis une liste de questions dépliables.

   Bloc « im-qr » (questions / réponses) : nom distinct de
   l'ancien « im-faq » de components.css pour éviter toute
   collision de cascade.
   ============================================================ */

.im-qr { position: relative; overflow: hidden; }

/* ---------------------------------------------- 1. En-tête */

.im-qr__tete {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* La lueur diffuse du modèle : un dégradé radial suffit,
   inutile de flouter une forme pleine (coûteux au repaint). */
.im-qr__halo {
  position: absolute;
  z-index: 0;
  /* La section est en `overflow: hidden` : on cale la lueur pour que
     le bord haut tombe pile sur la butée transparente du dégradé
     (centre à ~180px, rayon 250px, arrêt à 72 %), sinon la coupe
     laisse une arête franche. */
  top: -70px;
  left: 50%;
  width: min(620px, 120vw);
  height: 500px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(217, 139, 136, 0.16),
    rgba(217, 139, 136, 0.06) 45%,
    transparent 72%
  );
}

.im-qr__sur,
.im-qr__tete h2 { position: relative; z-index: 1; }

/* Dégradé sur le sur-titre. Les deux bornes restent des roses
   lisibles (5.9:1 et 7.4:1 sur le fond) : on garde l'effet du
   modèle sans faire disparaître la fin du mot. */
.im-qr__sur {
  margin-bottom: 14px;
  background: linear-gradient(100deg, var(--im-rose-ink), var(--im-rose));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.im-qr__tete h2 { margin: 0 0 clamp(30px, 4vw, 46px); }

/* ---------------------------------------------- 2. Onglets */

.im-qr__onglets {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(34px, 4.5vw, 56px);
}

.im-qr__onglet {
  position: relative;
  overflow: hidden;
  padding: 9px 16px;
  border: 1px solid var(--im-rule-2);
  border-radius: 8px;
  background: transparent;
  color: var(--im-fg-muted);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: color .5s var(--im-ease), border-color .5s var(--im-ease);
}

/* Sous `hover: hover` : sur tactile, `:hover` reste collé après le
   tap et un onglet non sélectionné gardait l'éclat du sélectionné. */
@media (hover: hover) {
  .im-qr__onglet:hover { color: var(--im-fg); }
}

/* Le fond qui remonte : l'équivalent CSS du y:100% → y:0%
   de framer-motion, avec la même courbe « backIn ». */
.im-qr__onglet::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(100deg, var(--im-rose-ink), var(--im-rose));
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(0.31, 0.01, 0.66, -0.59);
}

.im-qr__onglet span { position: relative; z-index: 1; }

.im-qr__onglet[aria-selected="true"] {
  border-color: var(--im-rose);
  color: var(--im-on-accent);
}
.im-qr__onglet[aria-selected="true"]::before { transform: translateY(0); }

.im-qr__onglet:focus-visible {
  outline: 2px solid var(--im-rose-ink);
  outline-offset: 3px;
}

/* ---------------------------------------------- 3. Panneaux */

.im-qr__panneaux {
  position: relative;
  z-index: 1;
  max-width: 780px;
  margin-inline: auto;
}

.im-qr__panneau { display: grid; gap: 12px; }
.im-qr__panneau[hidden] { display: none; }

/* Entrée / sortie enchaînées (équivalent d'AnimatePresence
   mode="wait" : l'ancien part avant que le nouveau n'arrive). */
.im-qr__panneau {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .34s var(--im-ease), transform .34s var(--im-ease);
}
.im-qr__panneau[data-etat="entree"],
.im-qr__panneau[data-etat="sortie"] {
  opacity: 0;
  transform: translateY(18px);
}
.im-qr__panneau[data-etat="sortie"] { transition-duration: .2s; }

/* ---------------------------------------------- 4. Question */

.im-qr__item {
  border: 1px solid var(--im-rule-2);
  border-radius: 14px;
  background: var(--im-bg-2);
  transition: background-color .3s var(--im-ease), border-color .3s var(--im-ease);
}
.im-qr__item[data-ouvert="true"] {
  background: var(--im-bg-3);
  border-color: var(--im-rule);
}

.im-qr__item h3 { margin: 0; font: inherit; }

.im-qr__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  padding: 17px 20px;
  border: 0;
  background: none;
  color: var(--im-fg-muted);
  font-family: var(--im-display);
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color .3s var(--im-ease);
}
.im-qr__item[data-ouvert="true"] .im-qr__q,
.im-qr__q:hover { color: var(--im-fg); }

.im-qr__q:focus-visible {
  outline: 2px solid var(--im-rose-ink);
  outline-offset: -2px;
  border-radius: 14px;
}

/* La croix qui pivote de 45° pour devenir un « moins ». */
.im-qr__plus {
  flex: none;
  width: 19px;
  height: 19px;
  transition: transform .22s var(--im-ease), color .3s var(--im-ease);
}
.im-qr__item[data-ouvert="true"] .im-qr__plus { transform: rotate(45deg); }

/* Dépliage sans mesure JS : 0fr → 1fr sur une piste de grille. */
.im-qr__r {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s var(--im-ease);
}
.im-qr__item[data-ouvert="true"] .im-qr__r { grid-template-rows: 1fr; }

.im-qr__r > div { overflow: hidden; }

.im-qr__r p {
  margin: 0;
  padding: 0 20px 18px;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--im-fg-muted);
}
.im-qr__r a { color: var(--im-rose-ink); }

/* La photo de l'équipement, dans la réponse dépliée.

   `max-width` en pixels et non en pourcentage : sur un grand écran,
   une photo pleine largeur de colonne écraserait le texte qu'elle
   illustre. Elle reste une pièce à conviction, pas une bannière. */
.im-qr__vue {
  margin: 0;
  padding: 0 20px 20px;
}
.im-qr__vue img {
  width: 100%;
  max-width: 340px;
  height: auto;
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-md);
}
.im-qr__vue figcaption {
  margin-top: 8px;
  max-width: 340px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--im-fg-muted);
}

@media (max-width: 560px) {
  .im-qr__onglets { gap: 8px; }
  .im-qr__onglet { padding: 8px 13px; font-size: 0.84rem; }
  .im-qr__q { padding: 15px 16px; font-size: 1.02rem; }
  .im-qr__r p { padding: 0 16px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .im-qr__onglet::before,
  .im-qr__panneau,
  .im-qr__plus,
  .im-qr__r { transition-duration: .01ms; }
}