/* 
 * Styles par défaut pour Effect3D 
 * Extrait de la bibliothèque JS pour chargement externe
 */

/* Conteneur principal */
.effect3d { /* Note: Utilise .effect3d comme classe par défaut si non surchargé */
  position: relative;
  width: 350px; /* Taille par défaut, peut être surchargée */
  height: 500px; /* Taille par défaut, peut être surchargée */
  transform-style: preserve-3d;
  cursor: pointer;
  /* perspective est maintenant appliqué via JS sur le conteneur */
  z-index: 1; /* Assurer un contexte d'empilement */
}

/* Carte interne (qui tourne) */
.effect3d-card {
  position: absolute; /* Changé de relative à absolute */
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out; /* Rotation rapide */
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8);
  background: linear-gradient(45deg, #0f1b3a, #1a3a7a); /* Fond par défaut */
  transform-origin: center center;
  /* overflow: hidden; /* Ajouter si des éléments dépassent lors de la rotation */
}

/* Couches */
.effect3d-layer {
  position: absolute;
  inset: 0; /* Raccourci pour top, right, bottom, left = 0 */
  transform-style: preserve-3d;
  /* La transition est maintenant appliquée via JS pour correspondre aux options */
  /* transition: transform [duration]s [timing]; */
  border-radius: 20px; /* Hérite de la carte */
  backface-visibility: hidden; /* Cache l'arrière pendant la rotation */
  pointer-events: none; /* Les couches ne doivent pas intercepter la souris */
  overflow: hidden; /* Empêche le contenu de déborder de sa couche */
}

/* Instructions (optionnel) */
.effect3d-instructions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(10px); /* Légèrement devant */
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px; /* Réduit */
  font-weight: bold;
  letter-spacing: 2px;
  pointer-events: none;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  z-index: 20; /* Au-dessus des autres couches */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Pas besoin de classe .hidden, l'opacité est gérée par JS */

/* Z-index des couches (important pour la superposition) */
.effect3d-layer-0 { z-index: 1; }
.effect3d-layer-1 { z-index: 2; }
.effect3d-layer-2 { z-index: 3; }
.effect3d-layer-3 { z-index: 4; }
.effect3d-layer-4 { z-index: 5; }
/* Ajouter plus si nécessaire */

/* 
 * Styles spécifiques à l'exemple "espace" (Peuvent être retirés si non utilisés)
 * Il est préférable de les mettre dans le CSS de la page où l'effet est utilisé.
 * Laissés ici pour référence mais commentés par défaut.
 */

/*
.effect3d-texture {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255, 255, 255, 0.03)' fill-rule='evenodd'/%3E%3C/svg%3E");
  opacity: 0.5;
  border-radius: 20px;
}

.effect3d-bg-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at center, 
    rgba(100, 150, 255, 0.2) 0%, 
    rgba(100, 150, 255, 0) 70%
  );
  z-index: -1;
}

.effect3d-layer-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

.effect3d-title {
  font-size: 60px; // Réduit un peu
  font-weight: 900;
  line-height: 0.9;
  text-align: center;
  color: #fff;
  margin: 0;
  letter-spacing: -2px;
  text-shadow: 0 2px 10px rgba(0, 100, 255, 0.5);
}

.effect3d-subtitle {
  font-size: 14px; // Réduit un peu
  font-weight: 300;
  letter-spacing: 6px; // Réduit un peu
  color: #4d88ff;
  margin-top: 15px; // Réduit un peu
  text-transform: uppercase;
}

.effect3d-glass-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%; // Réduit
  background: rgba(25, 60, 130, 0.2);
  backdrop-filter: blur(4px) saturate(120%); // Ajout de saturate
  -webkit-backdrop-filter: blur(4px) saturate(120%);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 -10px 30px rgba(0, 40, 140, 0.2);
  border-radius: 0 0 20px 20px;
}

.effect3d-glass-info {
  position: absolute;
  bottom: 15px; // Remonté un peu
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 0 15px; // Réduit
  box-sizing: border-box;
}

.effect3d-info-box {
  display: flex;
  flex-direction: column;
  color: #fff;
  text-align: center;
}

.effect3d-info-label {
  font-size: 9px; // Réduit
  font-weight: 300;
  opacity: 0.7;
  letter-spacing: 1px;
  margin-bottom: 3px; // Réduit
  text-transform: uppercase;
}

.effect3d-info-value {
  font-size: 12px; // Réduit
  font-weight: 600;
  letter-spacing: 1px;
}

.effect3d-star {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(100, 180, 255, 0.8);
}

.effect3d-star-1 { width: 3px; height: 3px; top: 15%; right: 20%; }
.effect3d-star-2 { width: 5px; height: 5px; top: 35%; left: 15%; box-shadow: 0 0 15px 3px rgba(100, 200, 255, 0.9); animation: subtle-glow 2s infinite ease-in-out; }
.effect3d-star-3 { width: 2px; height: 2px; top: 25%; right: 40%; }

.effect3d-planet {
  position: absolute;
  width: 40px; height: 40px; border-radius: 50%; top: 20%; right: 15%;
  background: radial-gradient(circle at 30% 30%, #5d93ff 0%, #265ac2 80%);
  box-shadow: 0 0 15px rgba(80, 150, 255, 0.5); // Réduit
  animation: subtle-glow 4s infinite ease-in-out;
}

.effect3d-planet::after {
  content: ''; position: absolute; width: 50px; height: 10px; background: rgba(100, 150, 255, 0.2); border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(30deg);
}

.effect3d-orbital-ring {
  position: absolute; width: 70px; height: 15px; border-radius: 50%; top: 20%; right: 15%; border: 1px solid rgba(100, 150, 255, 0.2); transform: translateZ(5px) rotateX(75deg); box-shadow: 0 0 8px rgba(100, 180, 255, 0.2); // Réduit
}

.effect3d-satellite {
  position: absolute; width: 12px; height: 12px; border-radius: 50%; top: 15%; right: 28%; background: #a1a5b0; box-shadow: 0 0 8px rgba(255, 255, 255, 0.3); // Réduit
}

.effect3d-floating-element {
  position: absolute; width: 15px; height: 15px; border-radius: 3px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1);
}

.effect3d-top-left { top: -8px; left: -8px; transform: rotate(15deg); }
.effect3d-top-right { top: -8px; right: -8px; transform: rotate(-15deg); width: 20px; height: 20px; }
.effect3d-bottom-left { bottom: -8px; left: -8px; transform: rotate(-15deg); width: 12px; height: 12px; }
.effect3d-bottom-right { bottom: -8px; right: -8px; transform: rotate(15deg); }

@keyframes subtle-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(100, 180, 255, 0.7); }
  50% { box-shadow: 0 0 25px rgba(100, 180, 255, 0.9); }
}

.effect3d-card::before {
  content: ''; position: absolute; inset: -1px; background: linear-gradient(45deg, rgba(0, 30, 255, 0.3), rgba(0, 30, 255, 0), rgba(0, 30, 255, 0), rgba(0, 30, 255, 0.3)); border-radius: 21px; z-index: 0; opacity: 0.2;
}
*/