La galaxie numérique de la Fédération Bohème

<div style="flex: 0 0 400px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transition: transform 0.3s ease;">
  <a href="https://administration.cassandra.center" target="_blank" style="text-decoration: none; color: inherit;">
    <div style="position: relative; height: 260px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <img src="https://administration.cassandra.center/favicon.ico" style="width: 100%; height: 100%; object-fit: cover;">
      <span style="position: absolute; top: 15px; right: 15px; background: white; color: #667eea; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold;">
ADMIN</span>
    </div>
    <div style="padding: 24px;">
      <h3 style="margin: 0 0 12px 0; font-size: 1.4rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
Cassandra Center</h3>
      <p style="margin: 0; color: #4a5568; line-height: 1.6;">
Plateforme d'administration et de gestion fédérale de la Communauté Bohème.</p>
</div>
  </a>
</div>

<div style="flex: 0 0 400px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transition: transform 0.3s ease;">
  <a href="https://www.maisonboheme.org" target="_blank" style="text-decoration: none; color: inherit;">
    <div style="position: relative; height: 260px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <img src="https://www.maisonboheme.org/favicon.ico" style="width: 100%; height: 100%; object-fit: cover;">
      <span style="position: absolute; top: 15px; right: 15px; background: white; color: #667eea; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold;">
CULTURE</span>
    </div>
    <div style="padding: 24px;">
      <h3 style="margin: 0 0 12px 0; font-size: 1.4rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
Maison Bohème</h3>
      <p style="margin: 0; color: #4a5568; line-height: 1.6;">
La vitrine culturelle et artistique du collectif.
Événements, projets, créations.</p>
    </div>
  </a>
</div>

<div style="flex: 0 0 400px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transition: transform 0.3s ease;">
  <a href="https://www.ciejayad.org" target="_blank" style="text-decoration: none; color: inherit;">
    <div style="position: relative; height: 260px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <img src="https://www.ciejayad.org/favicon.ico" style="width: 100%; height: 100%; object-fit: cover;">
      <span style="position: absolute; top: 15px; right: 15px; background: white; color: #667eea; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold;">
SCÈNE</span>
    </div>
    <div style="padding: 24px;">
      <h3 style="margin: 0 0 12px 0; font-size: 1.4rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
Compagnie Jayad</h3>
      <p style="margin: 0; color: #4a5568; line-height: 1.6;">
Compagnie indépendante mêlant danse, théâtre et performance.</p>
</div>
  </a>
</div>

<div style="flex: 0 0 400px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transition: transform 0.3s ease;">
  <a href="https://www.lakazapizza.fr" target="_blank" style="text-decoration: none; color: inherit;">
    <div style="position: relative; height: 260px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <img src="https://www.lakazapizza.fr/favicon.ico" style="width: 100%; height: 100%; object-fit: cover;">
      <span style="position: absolute; top: 15px; right: 15px; background: white; color: #667eea; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold;">
PARTENAIRE</span>
    </div>
    <div style="padding: 24px;">
      <h3 style="margin: 0 0 12px 0; font-size: 1.4rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
La Kaz'a Pizza</h3>
      <p style="margin: 0; color: #4a5568; line-height: 1.6;">
Partenaire engagé de la Fédération.
Saveurs, convivialité et solidarité.</p>
    </div>
  </a>
</div>

<div style="flex: 0 0 400px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3); transition: transform 0.3s ease;">
  <a href="https://mail.ovh.net/roundcube/" target="_blank" style="text-decoration: none; color: inherit;">
    <div style="position: relative; height: 260px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
      <img src="https://mail.ovh.net/favicon.ico" style="width: 100%; height: 100%; object-fit: cover;">
      <span style="position: absolute; top: 15px; right: 15px; background: white; color: #667eea; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: bold;">
MAIL</span>
    </div>
    <div style="padding: 24px;">
      <h3 style="margin: 0 0 12px 0; font-size: 1.4rem; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">
FédéMail</h3>
      <p style="margin: 0; color: #4a5568; line-height: 1.6;">
La boîte mail officielle des services fédéraux. Messagerie sécurisée.</p>
    </div>
  </a>
</div>