Button

// Titre : Boutons flottants de la carte (libellé masqué sous 900 px de large, comme dans cet aperçu)
import { useState } from 'react';

export default function Exemple() {
  const [flying, setFlying] = useState(false);
  return (
    // la carte : .map-actions se place en haut à gauche de son parent positionné
    <div style={{ position: 'relative', width: 420, height: 110, borderRadius: 12, background: 'var(--chip)' }}>
      <div className="map-actions">
        <button type="button" className={`map-fab${flying ? ' active' : ''}`} aria-pressed={flying} onClick={() => setFlying((f) => !f)} title={flying ? 'Mettre le survol en pause' : 'Survoler la trace en 3D'}>
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true">
            {flying ? <path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z" /> : <path d="M8 5.5v13l10.5-6.5z" />}
          </svg>
          <span className="map-fab-label">{flying ? 'Pause' : 'Survol'}</span>
        </button>
        <button type="button" className="map-fab" title="Voir toute la trace">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5" />
          </svg>
          <span className="map-fab-label">Vue d’ensemble</span>
        </button>
      </div>
    </div>
  );
}

// Titre : Boutons icône
export default function Exemple() {
  return (
    <>
      <button type="button" className="info-btn" aria-label="Comprendre les niveaux" title="Comprendre les niveaux">
        <svg viewBox="0 0 20 20" width="18" height="18" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
          <circle cx="10" cy="10" r="7.5" />
          <path d="M10 9v5" strokeLinecap="round" />
          <circle cx="10" cy="6.3" r="0.6" fill="currentColor" />
        </svg>
      </button>
      <button type="button" className="map-menu-close" aria-label="Fermer">
        <svg viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
          <path d="M5 5l10 10M15 5L5 15" />
        </svg>
      </button>
      <button type="button" className="tour-back" aria-label="Étape précédente" title="Étape précédente">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <path d="M19 12H5M11 6l-6 6 6 6" />
        </svg>
      </button>
    </>
  );
}

// Titre : Titre de section repliable
import { useState } from 'react';

export default function Exemple() {
  const [open, setOpen] = useState(true);
  return (
    <section className={`fold${open ? '' : ' closed'}`} style={{ width: 320 }}>
      <h3>
        <button type="button" className="fold-btn" aria-expanded={open} aria-controls="fold-demo" onClick={() => setOpen(!open)}>
          Points d’attention <span className="count">4</span>
          <svg className="fold-chevron" viewBox="0 0 20 20" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M5.5 8l4.5 4.5L14.5 8" />
          </svg>
        </button>
      </h3>
      <div id="fold-demo" hidden={!open}>
        <p className="muted small">Le contenu de la section.</p>
      </div>
    </section>
  );
}