/* ============================================================
   ACCORDÉON — le repli d'un complément d'information
   NOUVEAU COMPOSANT (bloc 4 de l'É4, 07/08, maquettes Boutique).
   Verdict 6 du gate 1 du bloc 4 : « Bien choisir sa taille » en fiche produit.

   MOTIF : le fait vient du call de cadrage du 09/06 — sur des coupes cyclisme
   ajustées, la taille demandée n'est pas toujours la taille portée. Le conseil
   doit être À CÔTÉ des pastilles, pas dans une page d'aide ; mais déplié en
   permanence, il pousse le bouton d'achat sous la ligne de flottaison. D'où le
   repli.

   ZÉRO JAVASCRIPT, ET C'EST LE POINT : `<details>`/`<summary>` sont natifs —
   ils portent l'état ouvert/fermé, le clavier, le rôle et l'annonce vocale
   sans une ligne de script. Le registre n'ajoute que la peinture. Un accordéon
   maison en `<div aria-expanded>` demanderait du JS pour faire moins bien.

   Le chevron tourne à l'ouverture : sa rotation lit `--t-quick`, donc elle
   s'annule sous `prefers-reduced-motion` comme tout le reste du système.
   ============================================================ */

.lcdi-accordion {
  background: var(--surface-raised);
  border: 2px solid var(--border-soft);
  border-radius: var(--radius-m);
}

/* ============================================================
   LA PILE DE VOLETS — `.lcdi-volets` (bloc 5a, 10/08)
   La fiche produit n'ouvrait qu'un accordéon ; « Partenaires » en pose TROIS à
   la suite (« Points clés », « Networking organisé », « Bénéfices »). Sans
   conteneur, ils se touchaient : la gouttière d'un groupe de volets est un fait
   du composant, pas une marge à répéter dans chaque page.
   RELEVÉ LIVE (1440) : filet 2 px teinté d'accent au lieu du givre, et 16 px
   entre deux volets. Le filet teinté est la marque de l'accordéon SUR LE SITE
   (mesuré `2px rgb(104,161,176)`) ; il ne vaut que dans cette pile, la fiche
   produit garde le sien.
   ============================================================ */
.lcdi-volets {
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid-tight);
}
.lcdi-volets > .lcdi-accordion { border-color: var(--border-accent); }

.lcdi-accordion__resume {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: var(--weight-strong);
  color: var(--text-strong);
  cursor: pointer;
  /* Le marqueur natif (triangle du navigateur) sort : il n'appartient à aucune
     palette et sa taille ne suit pas l'échelle. Le chevron du système le
     remplace. Deux écritures, parce que WebKit garde son pseudo-élément. */
  list-style: none;
}
.lcdi-accordion__resume::-webkit-details-marker { display: none; }
.lcdi-accordion__resume:hover { color: var(--link); }
.lcdi-accordion__resume:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-s); }

.lcdi-accordion__chevron {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  color: var(--icon);
  fill: var(--icon);
  transition: transform var(--t-quick) var(--ease-brand);
}
.lcdi-accordion__chevron svg { width: 100%; height: 100%; fill: currentColor; display: block; }
.lcdi-accordion[open] .lcdi-accordion__chevron { transform: rotate(180deg); }

.lcdi-accordion__corps {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--text-body);
  font-size: var(--type-caption);
  line-height: var(--lh-body);
}
.lcdi-accordion__corps > *:first-child { margin-top: 0; }
.lcdi-accordion__corps > *:last-child { margin-bottom: 0; }
.lcdi-accordion__corps ul { margin: 0 0 var(--space-3); padding-left: 1.15rem; }
.lcdi-accordion__corps li { margin-bottom: var(--space-1); }
/* ============================================================
   LE VOLET QUI PORTE DE LA PROSE (bloc 5b, 13/08)
   Jusqu'ici un volet ne contenait qu'une LISTE À PUCES (« Points clés »,
   « Networking organisé » de la page Partenaires) : le corps n'avait donc
   besoin que du rythme d'une liste. La page Vélo replie derrière « Lire la
   suite » les quatre derniers paragraphes du texte GF Series, et la page
   Contact y pose les réponses de sa FAQ — deux corps de PARAGRAPHES.
   Sans cette règle, les marges de paragraphe viennent du socle d'éléments
   (`_base.css`), qui n'est volontairement pas transporté dans le child theme :
   les paragraphes se seraient collés les uns aux autres.
   ============================================================ */
.lcdi-accordion__corps p { margin: 0 0 var(--space-3); }
.lcdi-accordion__corps :is(h3, h4) {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--type-body);
  font-weight: var(--weight-strong);
  color: var(--text-strong);
}

/* --- Sur nuit : le panneau translucide du monde sombre ------------------- */
[data-theme="nuit"] .lcdi-accordion {
  background: var(--surface-night-raised);
  border-color: var(--border-night);
}