html, body {
    margin: 0; padding: 0; height: 100%; overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.scene {
    width: 100%; height: 100%;
    background-image: url("parisrue.jpg");
    background-size: cover; background-position: center;
    position: relative; cursor: pointer;
}

.celebrite-container {
    position: absolute; top: 25px; left: 25px;
    background: rgba(0, 0, 0, 0.8); padding: 12px 20px;
    border-radius: 30px; color: #ffd700; font-weight: bold;
    display: flex; align-items: center; gap: 15px; z-index: 2000;
    border: 2px solid #ffd700;
}

.barre-fond { width: 180px; height: 12px; background-color: #333; border-radius: 10px; overflow: hidden; }
.barre-remplie { width: 0%; height: 100%; background: linear-gradient(90deg, #ffd700, #fff); transition: width 0.8s; }

.texte {
    position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
    width: 85%; text-align: center; color: white; font-size: 24px;
    background: rgba(0, 0, 0, 0.85); padding: 20px; border-radius: 15px; z-index: 10;
}

.vogue-text {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    font-family: "Didot", "Playfair Display", serif;
    font-size: 45px; letter-spacing: 8px; text-transform: uppercase;
    color: black; background: white; padding: 25px 50px;
    z-index: 10000; display: none; border: 2px solid black;
    box-shadow: 0 0 50px rgba(0,0,0,0.2);
}

.carnet-plein-ecran {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: url("carnet.jpg");
    background-size: cover;
    background-position: center;
    z-index: 5000;
}

.texte-manuscrit {
    position: absolute;
    top: 55%;        
    left: 5%;        
    width: 280px;
    font-family: 'Cursive', 'Brush Script MT', cursive;
    font-size: 28px;
    line-height: 1.5;
    color: #2c3e50;
    transform: rotate(-3deg);  
    white-space: pre-wrap;
    font-weight: bold;
}

.perso, .perso-gigi { position: absolute; bottom: 0; height: 85%; z-index: 5; }
.perso { right: 50px; }
.perso-gigi { left: 50px; }

.bulle {
    position: absolute; bottom: 72%; right: 180px;
    background-color: white; color: #222; padding: 25px;
    border-radius: 25px; font-weight: bold; font-size: 18px;
    display: none; z-index: 20; max-width: 300px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.bulle-haute { bottom: 85% !important; }
.bulle-gigi { right: auto !important; left: 180px !important; }

.bulle::after {
    content: ''; position: absolute; bottom: -15px; right: 40px;
    border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 15px solid white;
}

.iphone-miniature { position: absolute; bottom: 20px; right: 20px; width: 70px; cursor: pointer; z-index: 500; }
.iphone-miniature img { width: 100%; border-radius: 10px; }

.telephone-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); z-index: 10000;
    display: flex; justify-content: center; align-items: center;
}

.telephone-contenu {
    position: relative; width: 300px; height: 580px;
    background: #fff; border: 8px solid #333; border-radius: 40px; overflow: hidden;
}

.telephone-contenu img { width: 100%; height: 100%; object-fit: cover; }

.bouton-fermer {
    position: absolute; top: 15px; left: 15px;
    background: rgba(0,0,0,0.7); color: white; border: none;
    border-radius: 50%; width: 35px; height: 35px; cursor: pointer;
}

.input-nom-container, .choix-grid-container {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: white; padding: 30px; border-radius: 20px; text-align: center;
    z-index: 3000; border: 4px solid #ffd700;
}

.grille-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px; }
.carte-style img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; cursor: pointer; }

.bouton-beige {
    position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%);
    padding: 20px 40px; font-weight: bold; background: #f5f5dc;
    border: 3px solid #d2b48c; border-radius: 50px; cursor: pointer; z-index: 1000;
}

.flash-effet { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 5000; opacity: 0; pointer-events: none; }
.lancer-flash { animation: flashAnim 0.7s ease-out; }
@keyframes flashAnim { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }