/* ============================================================
   RÉALITÉ AUGMENTÉE (AR) - DESIGN FUTURISTE
   ============================================================ */



#screen-ar {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent !important;
    pointer-events: none;
    z-index: 1;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between;  Plus besoin avec le positionnement absolu/fixe */
    align-items: center;
    /* padding-top et padding-bottom gérés par les éléments enfants */
}

/* Conteneur de la scène AR */
#ar-scene-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

#ar-click-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;        /* Au-dessus du canvas (-1), sous l'UI (10+) */
    pointer-events: auto;
    background: transparent;
}

/* Vidéo de fond (Caméra) */
video {
    z-index: -2 !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Canevas A-Frame/MindAR */
.a-canvas {
    z-index: -1 !important; /* Juste au-dessus de la vidéo */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* ============================================================
   CADRE AR - 3-SLICE VERTICAL (haut fixe, milieu étirable, bas fixe)
   Image source : 1080x1920px → chaque tiers = 640px de hauteur
   ============================================================ */

.ar-frame-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    /* Pas d'object-fit ici, c'est géré par les enfants */
}

/* Hauteur fixe de chaque tiers : 1920 / 3 = 640px sur l'image source */
/* On l'affiche à la largeur 100% → la hauteur naturelle proportionnelle est : */
/* hauteur_affichée = (100vw / 1080) * 640 */
/* Mais on veut qu'elle soit FIXE visuellement → on utilise padding-top en % de la largeur */
/* 640/1080 = ~59.26% */

.ar-frame-top,
.ar-frame-bottom {
    width: 100%;
    /* Hauteur proportionnelle à la largeur pour conserver les proportions du tiers */
    padding-top: 59.26%; /* = 640/1080 * 100 */
    flex-shrink: 0;       /* Ne se compresse pas */
    background-image: url('/css/assets/images/fenetre ar/ici Ba.png');
    background-size: 100% 300%; /* L'image entière, étalée sur 3x la hauteur du conteneur */
    background-repeat: no-repeat;
}

.ar-frame-top {
    background-position: 0% 0%;   /* Tiers du HAUT */
}

.ar-frame-bottom {
    background-position: 0% 100%; /* Tiers du BAS */
}

.ar-frame-middle {
    flex: 1;                        /* Prend tout l'espace restant */
    width: 100%;
    background-image: url('/css/assets/images/fenetre ar/ici Ba.png');
    background-size: 100% 300%;    /* Même logique */
    background-repeat: no-repeat;
    background-position: 0% 50%;  /* Tiers du MILIEU */
}

/* ============================================================
   2. INSTRUCTIONS FUTURISTES (CENTRE)
   ============================================================ */
.ar-instructions-futur {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 5;
    pointer-events: none; /* Ne pas interagir avec les instructions */
}

.instruction-images {
    position: relative;
    width: 120px;
    height: 120px;
}

/* Les deux images empilées l'une sur l'autre */
.instruction-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    
}
.instruction-base {
    z-index: 1;
    backdrop-filter: blur(10px);
    border-radius: 60px;
    border: #ffffff3a 2px solid;
    opacity: 0.8;

}
.instruction-Pbase {
    z-index: 0;

}

/* Image du dessus qui tourne en sens anti-horaire, en continu */
.instruction-rotate {
    animation: spin-ccw 8s linear infinite;
    scale: 2;
}

@keyframes spin-ccw {
    from { transform: rotate(0deg); }
    to   { transform: rotate(-360deg); }
}

/* Texte supprimé visuellement */
.instruction-text {
    display: none;
}

/* ============================================================
   3. BOUTON "OUVRIR CHAT" FUTURISTE (FIXE, BAS CENTRE)
   ============================================================ */
#btn-ar-open-chat,
#btn-quit-ar {
    pointer-events: auto !important;
}
#btn-ar-open-chat {
    position: fixed;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%); 
    padding: 15px 35px;
    background: var(--Or-color); 
    border-radius: var(--border-radius);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    z-index: 15; 
    pointer-events: auto; 
    text-transform: uppercase; 
    letter-spacing: 1px;
    border: var(--Or-color) 2px solid; 
}

/* Effets au survol/clic */




/* (Optionnel) Affichage du mot à trous - Gardé de ton code */
#ar-word-display {
    position: fixed;
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    background: #f5decdb5;
    backdrop-filter: blur(10px);
    padding: 15px 30px;
    border-radius: 15px;
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 10px;
    color: var(--ar-primary-color);
    z-index: 20;
    backdrop-filter: blur(10px);
    /* border: 2px solid rgba(0, 255, 136, 0.3); */
    /* box-shadow: 0 5px 20px rgba(0, 255, 136, 0.3); */
}

#ar-word-display.hidden {
    display: none;
}

/* ============================================================
   4. AR Mdale vers chat 
   ============================================================ */

#ar-modal {
    display: none;   /* caché par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

#ar-modal.visible {
    display: flex;   /* affiché quand la classe .visible est présente */
}

.ar-modal-content {
    background: white;
    padding: 20px;
    border-radius: 12px;
    max-width: 80%;
    text-align: center;
}

.ar-modal-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 15px;
}