/* =================================================================
   06-5. PROJECT CANVAS (Smartphone Mockups)
   ================================================================= */

.phone-mockup {
    position: relative;
    width: 375px;
    height: 750px;
    max-width: 100%;
    background: #202020;
    padding: 10px;
    border-radius: 40px;
    box-shadow: 5px 7px 15px rgba(0,0,0,0.3);
    margin: 0 auto;
    z-index: 1;
    /* On laisse les événements passer à travers le cadre noir */
    pointer-events: none; 
}

.phone-screen {
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 32px;
    overflow: hidden;
    position: relative;
    /* On réactive les événements uniquement pour l'écran */
    pointer-events: auto; 
    z-index: 5;
}

.phone-screen iframe { 
   width: 100%; 
   height: 100%; 
   border: none; 
   display: block;
   background: #fff;
}

/* L'encoche (Notch) */
.phone-mockup::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #202020;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    z-index: 10;
    pointer-events: none; 
}

.mobile-showcase-section { 
   width: 100%; 
   margin-bottom: 80px;
}

.mobile-viewer-container {
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- VARIANTE INTERSTITIEL (Disney) --- */
.phone-mockup.interstitial {
    width: 320px !important;
    height: 568px !important;
    padding: 10px !important;
    border-radius: 20px !important; 
    background-color: #222;
}

.phone-mockup.interstitial::before { display: none; }
.phone-mockup.interstitial .phone-screen { border-radius: 10px !important; }

/* =================================================================
   RESPONSIVE : MOBILE (≤ 900px)
   ================================================================= */
@media (max-width: 900px) {
    .phone-mockup { 
        width: 320px;
        height: 600px; 
    }
}

/* ==========================================================
   DARK THEME (Repaint)
   ========================================================== */
html.dark-theme .phone-mockup,
html.dark-theme .phone-mockup::before { background: #464646; }
html.dark-theme .phone-mockup { box-shadow: 5px 10px 25px rgba(0, 0, 0, 0.5); }

/* --- TOOLBAR INSTRUCTIONS (Style Pilule identique à DxO) --- */
.viewer-toolbar {
    width: 100%;
    display: flex;
    justify-content: center; /* Centre horizontalement */
    align-items: center;
    margin: 40px 0 30px 0;
    padding: 0 15px;
    box-sizing: border-box;
}

.control-group-pill {
    background: #f4f4f4;
    padding: 9px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.pill-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    border-right: 1px solid #ddd;
    padding-right: 15px;
    user-select: none;
}

.instruction-content {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.instruction-content i {
    font-size: 16px;
    color: #ff8248;
}

.instruction-content .divider {
    color: #ddd;
}

/* --- DARK MODE REPAINT --- */
html.dark-theme .control-group-pill { 
    background: #1e1e1e; 
}
html.dark-theme .pill-label { 
    border-color: #333; 
    color: #555; 
}
html.dark-theme .instruction-content { 
    color: #aaa; 
}
html.dark-theme .instruction-content i { 
    color: #555; 
}

/* --- RESPONSIVE MOBILE --- */
@media (max-width: 900px) {
    .viewer-toolbar {
        margin-top: 20px;
    }
    
    .pill-label {
        display: none; /* Gain de place sur mobile */
    }

    /* On cache le clavier et le shift scroll sur mobile (non pertinent) */
    .instruction-content .divider,
    .instruction-content span:last-child,
    .instruction-content i:last-of-type {
        display: none;
    }
    
    .instruction-content {
        font-size: 12px;
    }
}