/* ================================================= */
/*      Feuille de style pour le module QRZ 3D       */
/*    (Version avec image de fond et superposition)  */
/* ================================================= */

/* --- Conteneur principal (ne change pas) --- */
.indicatif-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 20px 0;
    min-height: 200px;
}

/* --- Images latérales (votre version) --- */
.indicatif-side-image img {
	aspect-ratio: initial;
    height: auto;
    width: auto;
	max-height: 200px;
	max-width: 200px;
	aspect-ratio: initial;
    display: block;
	border-radius: 25px; 
    
    /* On peut aussi ajouter une petite ombre pour un effet de relief */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

/* 
   --- NOUVEAU : Le conteneur central qui gère la superposition --- 
*/
.center-stack {
    position: relative; /* Point de référence pour les éléments superposés */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* NOUVEAU : L'image de fond (la première de la galerie) */
.center-background-image {
    width: 80vw;
    max-width: 800px; /* Doit correspondre à la taille de la scène 3D */
    height: auto; /* La hauteur s'adapte */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    opacity: 0.8; /* Légère transparence pour ne pas être trop agressive */
}

/*
   NOUVEAU : On positionne la scène 3D en absolu pour la superposer
   par-dessus l'image de fond.
*/
.qrz-local-stage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage parfait */
    width: 90%; /* Prend 90% de la largeur de l'image de fond */
    height: 150px;
    perspective: 1200px;
}

/* --- Vos styles existants pour l'animation 3D (presque inchangés) --- */

/* 1. Animations */
@keyframes qrz-local-rotation-3d {
    from { transform: rotateX(0deg) rotateY(0deg); }
    to   { transform: rotateX(360deg) rotateY(360deg); }
}
@keyframes qrz-local-couleur-animee {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* 2. Structure 3D */
.qrz-local-layer {
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    animation: qrz-local-rotation-3d 12s infinite linear;
    position: relative;
}

/* 3. Couches de texte */
.qrz-local-layer span {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font: bold 10vmin/1 var(--font-title);
    pointer-events: none;
}

/* 4. Couches de PROFONDEUR */
.qrz-depth-layer {
    transform: translateZ(calc(var(--i) * -5px));
    color: #000;
    text-shadow: 10px 5px 10px rgba(0,0,0,1);
}

/* 5. Couche du DESSUS */
.qrz-top-layer {
    transform: translateZ(0px);
    background: linear-gradient(90deg, #ff8c00, #ff0080, #aa00ff, #00bfff, #00ff80, #aaff00, #ff8c00);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px rgba(255, 255, 0, 1);
    background-clip: text;
    color: transparent !important;
    animation: qrz-local-couleur-animee 6s linear infinite;
    background-size: 200% 100%;
}

/* 6. L'OMBRE */
.qrz-shadow {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at 50% 50%, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 50%);
    transform: rotateX(90deg) translateY(80px) translateZ(-80px);
}