/* Bouton rond (Figma « Bouton rond ») : Précédent / Suivant, 56 px desktop / 44 px mobile.
   Défaut : sans fond, filet carbone 1,5 px, icône 24 ; hover fond carbone, icône blanche ; focus anneau ; désactivé 40 %.
   Variante --red (La maison Brandt Energy V3) : fond blanc, filet rouge 1,5, hover fond rouge. Variante --muted (pagination) : filet brandt/line. */

.round-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-round-button); height: var(--size-round-button);
  border-radius: 50%;
  background: transparent; color: var(--brandt-carbon);
  box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-carbon);
  transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--duration-press) var(--ease);
}
.round-button:active { transform: scale(var(--press-scale)); }
.round-button svg { width: var(--size-icon-24); height: var(--size-icon-24); }
.round-button:hover { background: var(--brandt-carbon); color: var(--brandt-white); }
.round-button:focus-visible { box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-carbon), var(--focus-ring); }
.round-button[disabled], .round-button[aria-disabled="true"] { opacity: var(--disabled-opacity); pointer-events: none; }

.round-button--red { background: var(--brandt-white); color: var(--brandt-red); box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-red); }
.round-button--red:hover { background: var(--brandt-red); color: var(--brandt-white); }
.round-button--red:focus-visible { box-shadow: inset 0 0 0 var(--border-1-5) var(--brandt-red), var(--focus-ring); }

/* Variante carbone (pagination précédent / suivant) : cercle filet carbone 20 %, chevron 16 / 14 */
.round-button--muted { color: var(--brandt-carbon); box-shadow: inset 0 0 0 var(--border-1) var(--brandt-line); background: transparent; }
.round-button--muted:hover { background: var(--brandt-carbon); color: var(--brandt-white); }

.nav-arrows { display: flex; gap: var(--space-12); }