/* ==========================================================================
   DOUBLE SPHÈRE EN CASTING COMPATIBLE SPIP 4.4 / PHP 8
   Version Finale unifiée : Mono-Sphère Forcée, Yoyo, Fade et Hover OK
   ========================================================================== */

/* Boîte noire de la scène 3D */
.conteneur-scene-3d {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
    margin: 30px auto !important;
    background: radial-gradient(circle at 50% 100%, #101010, #000000) !important;
    overflow: hidden !important;
    perspective: 2000px !important; /* Fixation en pixels pour stabiliser la finesse */
    --s: 2.5s;     /* Vitesse du cycle complet */
    --d: 40;       /* Facteur de delay d'origine de Josetxu */
    --c: #ff6600;  /* Couleur pivot originale de Josetxu */
}

/* Vos proportions de carrousel images d'origine */
.carrousel-dossier-wrapper {
	display: block !important; 
	width: 100% !important; 
	clear: both !important; 
	margin: 20px 0 !important;
	min-height: 540px !important; 
	max-height: 540px !important;
	background: #ffffff !important;
	overflow: hidden !important;
}

.carrousel-dossier .legende-photo {
	display: none !important;
}

/* Structure tridimensionnelle du globe principal */
.conteneur-scene-3d .sphere {
    width: 300px !important; 
    height: 300px !important;
    background: transparent !important;
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    animation: spin 5s linear 0s infinite !important;
}

/* ==========================================================================
   LA CLÉ ANTI-SEGMENTS : ISOLATION STRICTE SUR UN SEUL GLOBE HTML
   ========================================================================== */
.conteneur-scene-3d .sphere:nth-child(2) {
	display: none !important;
}

/* CORRECTION : Comportement de pause au survol calé sur la sphère active */
.conteneur-scene-3d .sphere:nth-child(1):hover { 
	animation-play-state: paused !important; 
}

/* Base de traitement des 21 disques (Onde montante, épaisseur fine de 1.5px) */
.conteneur-scene-3d .sphere div {
    --dv: calc(var(--s) / var(--d));
    --dl: calc(var(--dv) * -1);
    position: absolute !important;
    border-radius: 100% !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform-style: preserve-3d !important;
    -webkit-transform-style: preserve-3d !important;
    
    /* Lancement de l'onde montante d'origine */
    animation: shine var(--s) linear var(--dl) infinite !important;
}

/* LE RETOUR DU VRAI PSEUDO-ÉLÉMENT DU YOYO DE JOSETXU */
.conteneur-scene-3d .sphere div:before {
	content: "" !important;
	width: 100% !important;
	height: 100% !important;
	position: absolute !important;
	border-radius: 100% !important;
	
	/* Lancement de l'onde descendante synchronisée à l'opposé */
	animation: shine var(--s) linear calc(var(--dl) * -1) infinite !important;
}

/* CONFIGURATION GÉOMÉTRIQUE INDIVIDUELLE DES 21 DISQUES (Positions fixes préservées) */
.conteneur-scene-3d .sphere div:nth-child(1)  { transform: rotateX(90deg) translateZ(142px) !important;  width: 69px !important;   height: 69px !important;   --dl: calc(var(--dv) * -1) !important; }
.conteneur-scene-3d .sphere div:nth-child(2)  { transform: rotateX(90deg) translateZ(135px) !important;  width: 129px !important;  height: 129px !important;  --dl: calc(var(--dv) * -2) !important; }
.conteneur-scene-3d .sphere div:nth-child(3)  { transform: rotateX(90deg) translateZ(120px) !important;  width: 180px !important;  height: 180px !important;  --dl: calc(var(--dv) * -3) !important; }
.conteneur-scene-3d .sphere div:nth-child(4)  { transform: rotateX(90deg) translateZ(105px) !important;  width: 213px !important;  height: 213px !important;  --dl: calc(var(--dv) * -4) !important; }
.conteneur-scene-3d .sphere div:nth-child(5)  { transform: rotateX(90deg) translateZ(90px) !important;   width: 240px !important;  height: 240px !important;  --dl: calc(var(--dv) * -5) !important; }
.conteneur-scene-3d .sphere div:nth-child(6)  { transform: rotateX(90deg) translateZ(75px) !important;   width: 258px !important;  height: 258px !important;  --dl: calc(var(--dv) * -6) !important; }
.conteneur-scene-3d .sphere div:nth-child(7)  { transform: rotateX(90deg) translateZ(60px) !important;   width: 273px !important;  height: 273px !important;  --dl: calc(var(--dv) * -7) !important; }
.conteneur-scene-3d .sphere div:nth-child(8)  { transform: rotateX(90deg) translateZ(45px) !important;   width: 285px !important;  height: 285px !important;  --dl: calc(var(--dv) * -8) !important; }
.conteneur-scene-3d .sphere div:nth-child(9)  { transform: rotateX(90deg) translateZ(30px) !important;   width: 291px !important;  height: 291px !important;  --dl: calc(var(--dv) * -9) !important; }
.conteneur-scene-3d .sphere div:nth-child(10) { transform: rotateX(90deg) translateZ(15px) !important;   width: 297px !important;  height: 297px !important;  --dl: calc(var(--dv) * -10) !important; }
.conteneur-scene-3d .sphere div:nth-child(11) { transform: rotateX(90deg) translateZ(0px) !important;    width: 300px !important;  height: 300px !important;  --dl: calc(var(--dv) * -11) !important; }
.conteneur-scene-3d .sphere div:nth-child(12) { transform: rotateX(90deg) translateZ(-15px) !important;  width: 297px !important;  height: 297px !important;  --dl: calc(var(--dv) * -12) !important; }
.conteneur-scene-3d .sphere div:nth-child(13) { transform: rotateX(90deg) translateZ(-30px) !important;  width: 291px !important;  height: 291px !important;  --dl: calc(var(--dv) * -13) !important; }
.conteneur-scene-3d .sphere div:nth-child(14) { transform: rotateX(90deg) translateZ(-45px) !important;  width: 285px !important;  height: 285px !important;  --dl: calc(var(--dv) * -14) !important; }
.conteneur-scene-3d .sphere div:nth-child(15) { transform: rotateX(90deg) translateZ(-60px) !important;  width: 273px !important;  height: 273px !important;  --dl: calc(var(--dv) * -15) !important; }
.conteneur-scene-3d .sphere div:nth-child(16) { transform: rotateX(90deg) translateZ(-75px) !important;  width: 258px !important;  height: 258px !important;  --dl: calc(var(--dv) * -16) !important; }
.conteneur-scene-3d .sphere div:nth-child(17) { transform: rotateX(90deg) translateZ(-90px) !important;  width: 240px !important;  height: 240px !important;  --dl: calc(var(--dv) * -17) !important; }
.conteneur-scene-3d .sphere div:nth-child(18) { transform: rotateX(90deg) translateZ(-105px) !important; width: 213px !important;  height: 213px !important;  --dl: calc(var(--dv) * -18) !important; }
.conteneur-scene-3d .sphere div:nth-child(19) { transform: rotateX(90deg) translateZ(-120px) !important; width: 180px !important;  height: 180px !important;  --dl: calc(var(--dv) * -19) !important; }
.conteneur-scene-3d .sphere div:nth-child(20) { transform: rotateX(90deg) translateZ(-135px) !important; width: 129px !important;  height: 129px !important;  --dl: calc(var(--dv) * -20) !important; }
.conteneur-scene-3d .sphere div:nth-child(21) { transform: rotateX(90deg) translateZ(-142px) !important; width: 69px !important;   height: 69px !important;   --dl: calc(var(--dv) * -21) !important; }

/* Rotation globale de la scène d'origine */
@keyframes spin {
	0% { transform: rotateX(-210deg) rotateY(0deg) rotateZ(185deg); }
	100% { transform: rotateX(-210deg) rotateY(360deg) rotateZ(185deg); }
}

/* Moteur d'origine Josetxu */
@keyframes shine {
	0% {
		border: 1.5px solid var(--c);
		box-shadow: 0 0 4px 1px var(--c), 0 0 3px 1px var(--c) inset;
		filter: hue-rotate(0deg);
	}
	50%, 100% {
		border: 1.5px solid transparent; 
		box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent inset;
		filter: hue-rotate(540deg);
	}
}

/* Stylisation du lien textuel d'origine */
.conteneur-scene-3d a {
	position: absolute !important;
	bottom: 15px !important;
	padding: 1vmin !important;
	color: var(--c) !important;
	font-family: Arial, Helvetica, serif !important;
	text-decoration: none !important;
	font-size: 0.75em !important;
	z-index: 10 !important;
}
.conteneur-scene-3d a:before { content: "CHECK OUT MY " !important; color: #666 !important; }
.conteneur-scene-3d a:after { content: " COLLECTION" !important; color: #666 !important; }
.conteneur-scene-3d a:hover { color: #fff !important; }