/* * BASE : Le conteneur principal (Desktop par défaut) */
    .g-dark-modal-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7); /* Voile sombre sur PC */
        z-index: 9999;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        font-family: 'Roboto', 'Inter', sans-serif;
    }

    .g-dark-modal-overlay.active {
        display: flex;
        opacity: 1;
    }

    /* * LA BOÎTE DE DIALOGUE (Thème sombre Material) */
    .g-dark-modal-content {
        background-color: #1c1f2e; /* 👈 Ton fond sombre */
        width: 100%;
        max-width: 400px;
        border-radius: 24px;
        padding: 32px 24px;
        /* En thème sombre, Google utilise peu d'ombres, mais on garde un léger relief */
        box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.4);
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        transform: scale(0.95);
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .g-dark-modal-overlay.active .g-dark-modal-content {
        transform: scale(1);
    }

    /* --- SECTION 1 : INFOS DE L'APPELANT --- */
    .g-dark-profile {
        text-align: center;
        width: 100%;
    }

    /* Avatar avec fond légèrement éclairci pour contraster avec le fond */
    .g-dark-avatar {
        width: 80px;
        height: 80px;
        background-color: rgba(255, 255, 255, 0.1); 
        color: #ffffff;
        border-radius: 50%;
        margin: 0 auto 24px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        position: relative;
    }

    /* Animation d'onde adaptée au fond sombre */
    .g-dark-avatar::after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        border: 2px solid rgba(51, 204, 204, 0.5); /* Ton turquoise en transparence */
        border-radius: 50%;
        animation: darkRipple 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
    }

    .g-dark-caller-name {
        font-size: 24px;
        color: #ffffff; /* Texte en blanc pur pour le titre */
        margin: 0 0 8px 0;
        font-weight: 500;
        letter-spacing: 0;
    }

    .g-dark-call-status {
        font-size: 14px;
        color: #9aa0a6; /* Gris clair typique de Google Dark Mode */
        margin: 0 0 32px 0;
    }

    /* --- SECTION 2 : CONTEXTE ANNONCE (Élévation) --- */
    .g-dark-ad-context {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding: 12px 16px;
        /* En Material Dark, on éclaircit le fond pour créer l'élévation */
        background-color: #2b2e40; 
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 12px;
        margin-bottom: 40px;
        box-sizing: border-box;
    }

    .g-dark-ad-thumbnail {
        width: 48px;
        height: 48px;
        border-radius: 8px;
        object-fit: cover;
        background-color: #44475a;
    }

    .g-dark-ad-info {
        flex: 1;
        overflow: hidden;
        text-align: left;
    }

    .g-dark-ad-title {
        font-size: 14px;
        color: #e8eaed; /* Blanc cassé pour la lisibilité prolongée */
        font-weight: 500;
        margin: 0 0 2px 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .g-dark-ad-price {
        font-size: 14px;
        color: #33CCCC; /* Ta couleur principale ressort parfaitement ici */
        font-weight: 500;
        margin: 0;
    }

    /* --- SECTION 3 : BOUTONS D'ACTION --- */
    .g-dark-actions {
        display: flex;
        gap: 48px;
        justify-content: center;
        width: 100%;
    }

    .g-btn-dark-round {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
        cursor: pointer;
        outline: none;
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        flex-direction: column;
        position: relative;
    }

    .g-btn-dark-round:active {
        transform: scale(0.92);
    }

    .g-dark-btn-label {
        position: absolute;
        bottom: -24px;
        font-size: 12px;
        color: #9aa0a6;
        font-weight: 500;
        white-space: nowrap;
    }

    .btn-dark-refuse {
        background-color: #ea4335; 
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(234, 67, 53, 0.3);
    }

    .btn-dark-accept {
        background-color: #33CCCC;
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(51, 204, 204, 0.3);
    }

    @keyframes darkRipple {
        0% { transform: scale(0.8); opacity: 1; }
        100% { transform: scale(1.6); opacity: 0; }
    }


    /* ==========================================
       RESPONSIVE MOBILE (Plein Écran #1c1f2e)
       ========================================== */
    @media (max-width: 600px) {
        .g-dark-modal-overlay {
            background-color: #1c1f2e; /* Fond plein écran 100% opaque */
            align-items: flex-start;
        }

        .g-dark-modal-content {
            box-shadow: none;
            border-radius: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            padding: 80px 24px 64px 24px;
            justify-content: space-between;
        }

        .g-dark-avatar { width: 100px; height: 100px; font-size: 48px; }
        .g-dark-caller-name { font-size: 28px; }
        .g-dark-actions { gap: 64px; margin-bottom: 24px; }
        .g-btn-dark-round { width: 72px; height: 72px; font-size: 32px; }
        
        .g-dark-ad-context {
            background-color: rgba(255, 255, 255, 0.03); /* Plus subtil sur grand écran */
            border: none;
        }
    }