/* Styles propres à la vitrine des composants (prototypes/composants.html).
   Aucune couleur en dur : jetons --cl-* seulement. */

.vitrine__intro h1 { margin-bottom: var(--cl-espace-3); }
.vitrine__intro p { margin-inline: auto; }
.vitrine__sommaire {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--cl-espace-1) var(--cl-espace-3);
  max-width: var(--cl-conteneur-etroit);
  margin: var(--cl-espace-4) auto 0;
  list-style: none;
  font-family: var(--cl-police-libelles);
  font-size: 1rem;
  text-align: left;
}
.vitrine__sommaire a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--cl-or-texte);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.vitrine__entete {
  --cl-anneau: var(--cl-focus);
  padding: var(--cl-espace-2) var(--cl-gouttiere);
  background: var(--cl-noir-profond);
  color: var(--cl-creme-texte);
  border-top: 1px solid var(--cl-or-30);
  border-bottom: 1px solid var(--cl-or-30);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  line-height: 1.5;
}
.vitrine__entete > div { max-width: var(--cl-conteneur); margin-inline: auto; }
.vitrine__entete p { max-width: none; }
.vitrine__ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cl-espace-1b) var(--cl-espace-3); }
.vitrine__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  background: var(--cl-or);
  color: var(--cl-noir);
  font-weight: 600;
}
.vitrine__classe {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 1rem;
  color: var(--cl-or-clair);
}
.vitrine__fonds { color: var(--cl-gris-pied); }
.vitrine__note { margin-top: var(--cl-espace-1); color: var(--cl-creme-texte); }
.vitrine__note a { color: var(--cl-or-clair); }

.vitrine__groupe { margin-top: var(--cl-espace-5); }
.vitrine__sous-titre {
  margin-bottom: var(--cl-espace-3);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-libelle);
  font-weight: 600;
  letter-spacing: var(--cl-interlettrage-libelle);
  text-transform: uppercase;
  color: var(--cl-surtitre);
  text-align: center;
}
.vitrine__rangee { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cl-espace-2); }
.vitrine__pile > * + * { margin-top: var(--cl-espace-4); }

/* Section 6 : variantes de titres en situation */
.vitrine__variante {
  margin: 0 0 var(--cl-espace-3);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  color: var(--cl-texte-secondaire);
}
.vitrine__variante::before { content: "Exemple\00A0: "; }
.vitrine__suite {
  margin-inline: auto;
  text-align: center;
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  color: var(--cl-texte-secondaire);
}
.vitrine__separation {
  margin: var(--cl-espace-5) 0;
  border: 0;
  border-top: 1px solid var(--cl-gris-clair);
}
.vitrine__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cl-espace-5);
  align-items: center;
}
.vitrine__duo .cl-titre-section { margin-bottom: var(--cl-espace-3); }
.vitrine__duo-image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.vitrine__action { margin-top: var(--cl-espace-3); }
@media (max-width: 767.98px) {
  .vitrine__duo { grid-template-columns: 1fr; gap: var(--cl-espace-4); }
}

/* Section 5 : boutons présentés en spécimens légendés */
.vitrine__boutons { padding-block: var(--cl-espace-5); }
.vitrine__panneaux { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.vitrine__panneau { padding: var(--cl-espace-5) var(--cl-espace-4); background: var(--cl-fond-section); }
.vitrine__panneau-titre {
  margin-bottom: var(--cl-espace-4);
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-libelle);
  letter-spacing: var(--cl-interlettrage-surtitre);
  text-transform: uppercase;
  color: var(--cl-surtitre);
}
.vitrine__specimens { display: grid; gap: var(--cl-espace-4); }
.vitrine__specimen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cl-espace-2) var(--cl-espace-3); }
.vitrine__legende {
  flex-basis: 100%;
  margin: 0;
  font-family: var(--cl-police-libelles);
  font-size: var(--cl-taille-note);
  color: var(--cl-texte-secondaire);
}
@media (max-width: 1023.98px) {
  .vitrine__panneaux { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .vitrine__panneau { padding: var(--cl-espace-4) var(--cl-espace-2b); }
  .vitrine__specimen .cl-btn:not(.cl-btn--lien) { width: 100%; }
}

/* Exemple cl-champ--cases (16 octobre 2026) : écart entre les cases et la zone de texte */
.vitrine__champ-suivant { margin-top: var(--cl-espace-3); }