/* ══════════════════════════════════════════════════════════════
   LDNR — Accordéon générique, réutilisable dans Gutenberg
   ══════════════════════════════════════════════════════════════
   Reprend le style de .fiche-module (fiches/fiche.css) — même look,
   même animation — mais avec des classes génériques, sans dépendre
   du contexte "fiche formation". Utilisable via un bloc "HTML
   personnalisé" sur n'importe quelle page.

   Usage minimal (1 item) :
     <div class="ldnr-accordion">
       <div class="ldnr-accordion-item">
         <div class="ldnr-accordion-item__head">
           <span class="ldnr-accordion-item__num">01</span>
           <div class="ldnr-accordion-item__title">Titre</div>
           <span class="ldnr-accordion-item__meta">Info courte (optionnel)</span>
           <span class="ldnr-accordion-item__caret"></span>
         </div>
         <div class="ldnr-accordion-item__body">
           <div class="ldnr-accordion-item__content">
             Contenu libre (texte, listes, liens…)
           </div>
         </div>
       </div>
       <!-- répéter .ldnr-accordion-item pour chaque bloc -->
     </div>

   - Ajouter "is-open" sur un .ldnr-accordion-item pour qu'il soit
     ouvert par défaut au chargement.
   - accordion.js (chargé partout) gère le clic — aucune config JS
     à faire, ça fonctionne dès que le HTML est collé sur la page.
   - Couleur d'accent : suit --fiche-accent si présent (sur une fiche
     formation), sinon retombe sur --color-accent (partout ailleurs,
     ex. la page VAE).
   ══════════════════════════════════════════════════════════════ */

.ldnr-accordion {
  display: flex;
  flex-direction: column;
}

.ldnr-accordion-item {
  border-top: 1px solid var(--color-nav-border);
}
.ldnr-accordion-item:first-of-type {
  border-top: none;
}

.ldnr-accordion-item__head {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  padding: 1.125rem 0;
  cursor: pointer;
}

@media (max-width: 767px) {
  .ldnr-accordion-item__head {
    gap: 0.15rem;
    padding: 0.75rem 0;
  }
}

.ldnr-accordion-item__num {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  width: 3.5rem;
  flex-shrink: 0;
}

.ldnr-accordion-item__title {
  flex: 1;
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  /* Couleur accent (au lieu de --color-text) : suit --fiche-accent si
     présent (fiche formation), sinon l'accent global du thème. */
  color: var(--fiche-accent, var(--color-accent));
}

.ldnr-accordion-item__meta {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ── Caret ────────────────────────────────────────────────────
   La rotation vit sur ::before (la flèche elle-même), pas sur le
   cercle qui l'entoure — voir la note dans fiche.css : faire tourner
   le cercle parent décale le point d'ancrage visuel de la flèche
   (son propre translate de recentrage devient incohérent après
   180°). En tournant ::before directement (45deg → 225deg, même
   boîte), le repère reste correct tout au long de l'animation. */
.ldnr-accordion-item__caret {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  border: 1px solid var(--color-nav-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 0.3s, border-color 0.3s;
}
.ldnr-accordion-item__caret::before {
  content: '';
  display: block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s;
}
.ldnr-accordion-item.is-open .ldnr-accordion-item__caret {
  background: var(--fiche-accent, var(--color-accent));
  border-color: var(--fiche-accent, var(--color-accent));
}
.ldnr-accordion-item.is-open .ldnr-accordion-item__caret::before {
  transform: rotate(225deg) translate(-1px, -2px);
  border-color: var(--color-bg);
}

/* ── Corps — animation de hauteur fluide (grid-template-rows) ── */
.ldnr-accordion-item__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s, opacity 0.4s;
  opacity: 0;
  overflow: hidden;
}
.ldnr-accordion-item.is-open .ldnr-accordion-item__body {
  grid-template-rows: 1fr;
  opacity: 1;
  padding-bottom: 1.25rem;
}
.ldnr-accordion-item__content {
  min-height: 0;
  padding-top: 1.25rem;
  font-size: 0.90625rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.ldnr-accordion-item__content b,
.ldnr-accordion-item__content strong {
  color: var(--color-text);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .ldnr-accordion-item__caret::before,
  .ldnr-accordion-item__body { transition: none !important; }
}