/* =========================================================================
   La salle en volume. Plein écran, sur la nuit : on quitte l'outil de travail
   pour regarder le résultat, et le fond sombre met la salle en valeur comme
   une maquette posée sur une table.
   ========================================================================= */

body.v3d-ouverte { overflow: hidden; }

.vue-3d {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    background: var(--nuit);
    color: var(--text-nuit);
}
.vue-3d[hidden] { display: none; }

.v3d-barre {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 14px;
    background: var(--nuit-2);
    border-bottom: 1px solid var(--border-nuit);
    flex-shrink: 0;
}
.v3d-titre {
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -.02em;
}
.v3d-titre svg { color: var(--laiton); }
.v3d-aide {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    color: var(--text-nuit-light);
}
.v3d-fermer {
    margin-left: auto;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-nuit-2);
    background: transparent;
    color: var(--text-nuit);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.v3d-fermer:hover { border-color: #3A4152; }

.v3d-corps { flex: 1; min-height: 0; display: flex; position: relative; }

.v3d-scene {
    flex: 1;
    min-width: 0;
    position: relative;
    background: var(--nuit);
    touch-action: none;          /* l'orbite gère elle-même les gestes */
}
.v3d-scene canvas { display: block; width: 100%; height: 100%; }
/* ⚠ `display: grid` d'auteur bat l'attribut `hidden` du navigateur : sans
   cette ligne le message reste affiché par-dessus la salle une fois chargée. */
.v3d-chargement[hidden] { display: none; }
.v3d-chargement {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--text-nuit-light);
}

.v3d-panneau {
    width: 306px;
    flex: none;
    padding: 18px 16px 24px;
    background: var(--nuit-2);
    border-left: 1px solid var(--border-nuit);
    overflow-y: auto;
}
.v3d-lbl {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .19em;
    text-transform: uppercase;
    color: #6C7383;
    margin: 0 0 11px;
}
.v3d-lbl:not(:first-child) { margin-top: 26px; }

.v3d-champs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v3d-panneau label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-nuit-light);
}
.v3d-panneau label > span {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--nuit);
    border: 1px solid var(--border-nuit-2);
    border-radius: 10px;
    padding: 0 11px;
    height: 46px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-nuit-light);
}
.v3d-panneau input {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: 0;
    color: var(--text-nuit);
    font-family: var(--font-mono);
    font-size: 15px;
    padding: 0;
}
.v3d-panneau input:focus { outline: none; }
.v3d-echelle { margin-top: 0; }

/* ⚠ `.v3d-panneau label` (0,2,0) bat `.v3d-bascule` (0,1,0) : sans le
   préfixe, la case se retrouvait empilée au-dessus de son libellé, lui-même
   habillé comme un champ de saisie. */
.v3d-panneau .v3d-bascule {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 11px;
    min-height: 46px;
    padding: 0 13px;
    background: var(--nuit);
    border: 1px solid var(--border-nuit-2);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--text-nuit);
}
.v3d-panneau .v3d-bascule > span {
    display: inline; background: none; border: 0; padding: 0; height: auto;
    font-family: var(--font); font-size: 13.5px; color: var(--text-nuit); letter-spacing: 0;
}
.v3d-bascule input { width: 20px; height: 20px; flex: none; accent-color: #5FBF8F; }

#v3d-serveur-etat:empty { display: none; }

.v3d-note {
    font-size: 11.5px;
    line-height: 1.55;
    color: #6C7383;
    margin: 11px 0 0;
}
.v3d-note em { font-style: italic; color: var(--text-nuit-light); }

.v3d-ligne {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-nuit);
    font-size: 12.5px;
    color: var(--text-nuit-light);
}
.v3d-ligne b {
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* Trois états, trois couleurs — mesurées sur le fond du panneau (#141821) :
   menthe 6,4:1, laiton 10,6:1, corail clair 6,1:1. */
.e-bon { color: #6FCB9B; }
.e-attention { color: var(--laiton); }
.e-alerte { color: #F1917F; }
.e-neutre { color: var(--text-nuit); }

.v3d-mot {
    margin: 16px 0 0;
    padding: 12px 13px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.55;
    border: 1px solid var(--border-nuit-2);
    background: rgba(255, 255, 255, .03);
}
.v3d-mot.e-alerte { border-color: rgba(232, 96, 60, .4); background: rgba(232, 96, 60, .1); }

@media (max-width: 900px) {
    /* Au téléphone le volume passe devant : le panneau glisse sous la scène. */
    .v3d-corps { flex-direction: column; }
    .v3d-scene { flex: 1 1 55%; min-height: 46vh; }
    .v3d-panneau {
        width: 100%;
        flex: 0 0 auto;
        max-height: 46vh;
        border-left: 0;
        border-top: 1px solid var(--border-nuit);
    }
    .v3d-aide { display: none; }
}

/* La fiche de la table choisie, dans le panneau de la vue 3D. */
.v3d-table-nom {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: -.02em;
    color: var(--text-nuit);
    margin: 0 0 12px;
}
.v3d-lien {
    background: none;
    border: 0;
    padding: 0;
    color: var(--laiton);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Le mini-plan de la salle : vue de dessus, en mètres. */
.salle-toile {
    display: block;
    width: 100%;
    border: 1px solid var(--border-nuit-2);
    border-radius: 10px;
    background: var(--nuit);
    touch-action: none;      /* on dessine, on ne fait pas défiler */
    cursor: crosshair;
}

/* La mention d'aperçu : discrète à l'écran, lisible sur une photo. */
.v3d-marque {
    position: absolute;
    left: 14px; bottom: 12px;
    margin: 0;
    z-index: 3;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .05em;
    color: rgba(242, 193, 91, .62);
    pointer-events: none;
}
.v3d-marque[hidden] { display: none; }

/* L'aperçu payant : on voit sa salle tourner, on ne s'en sert pas. */
.vue-3d.v3d-apercu .v3d-scene { cursor: default; }
.vue-3d.v3d-apercu .v3d-aide { display: none; }
.vue-3d.v3d-apercu .v3d-marque { left: 50%; transform: translateX(-50%); bottom: 18px; font-size: 12px; }


/* ─────────────────────────────────────────────────────────────────────────
   L'offre par-dessus l'aperçu 3D.

   Centrée, la modale masque exactement ce qu'elle vend : le visiteur voit une
   boîte blanche sur du noir et ne comprend pas ce qu'il achète. Elle se range
   donc sur la droite, la salle continue de tourner à gauche (le recadrage se
   fait côté caméra, dans dimensionner()). Sous 1100 px, il n'y a plus de côté
   à dégager : l'offre se colle en bas et la salle remonte.
   ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 1100px) {
    #upgrade-modal.modal--cote {
        justify-content: flex-end;
        padding-right: 3vw;
    }
    #upgrade-modal.modal--cote .modal-content { margin: 0; }
}
@media (max-width: 1099px) {
    #upgrade-modal.modal--cote { align-items: flex-end; }
    #upgrade-modal.modal--cote .modal-content { margin-bottom: 0; }
}