/* ================================================================
   PROJET TOGGLE — bouton "see more / see less" d'un projet long
   ================================================================
   Principe validé avec Vincent : chaque projet montre son essentiel,
   le contenu complet (rails, galeries) ne se déplie qu'à la demande.
   Le fond/les couleurs s'adaptent à la section hôte via variables :
     --projet-toggle-fond, --projet-toggle-bord, --projet-toggle-texte
   ================================================================ */

.projet-toggle {
  display: flex;
  justify-content: center;
  padding: var(--espace-m) var(--padding-cote) var(--espace-l);
  background-color: var(--projet-toggle-fond, transparent);
}

.projet-toggle__bouton {
  appearance: none;
  background: none;
  border: 1px solid var(--projet-toggle-bord, var(--couleur-trait));
  border-radius: 999px;
  padding: 14px 28px;
  display: inline-flex;
  align-items: center;
  gap: 12px;

  font-family: var(--typo-corps);
  font-size: var(--taille-xs);
  font-variation-settings: 'wght' 500, 'wdth' 100;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--projet-toggle-texte, var(--couleur-texte));

  cursor: pointer;
  transition:
    color var(--duree-courte) var(--ease-doux),
    border-color var(--duree-courte) var(--ease-doux);
}

/* au survol : la couleur d'appoint de la campagne hôte (rouge Côte d'Or,
   rouge Coca, bleu glace Revenants… cf accents-par-campagne.css) */
.projet-toggle__bouton:hover {
  color: var(--accent-campagne, var(--couleur-accent));
  border-color: var(--accent-campagne, var(--couleur-accent));
}

.projet-toggle__bouton:focus-visible {
  outline: 2px solid var(--couleur-accent);
  outline-offset: 4px;
}

/* le chevron pivote quand le projet est déplié */
.projet-toggle__chevron {
  display: inline-block;
  transition: transform var(--duree-courte) var(--ease-doux);
}

.projet-toggle__bouton[aria-expanded="true"] .projet-toggle__chevron {
  transform: rotate(180deg);
}