/*
Theme Name: Dial Prive Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Dialotel
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.5.1770734611
Updated: 2026-02-10 14:43:31

*/

/* --- Ordre des blocs dans la section commentaires --- */
#comments.comments-area {
    display: flex;
    flex-direction: column;
}

#comments .title-comments      { order: 1; }
#comments .comment-list        { order: 2; }
#comments .comments-pagination { order: 3; }
#comments #respond             { order: 4; }

/* Masquer la nav du thème parent */
#comments > nav.navigation {
    display: none;
}

/* --- Pagination des commentaires --- */
.comments-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 32px;
    margin-bottom: 32px;
}

.comments-pagination .page-numbers {
    color: #C69641;
    text-decoration: none;
    padding: 6px 12px;
    border: 1px solid #C69641;
    transition: background-color 0.2s, color 0.2s;
}

.comments-pagination .page-numbers:hover {
    background-color: #C69641;
    color: #000;
}

.comments-pagination .page-numbers.current {
    background-color: #C69641;
    color: #000;
    font-weight: bold;
}

/* --- Liens dans les commentaires en doré --- */
.comments-area a,
#comments a {
    color: #C69641 !important;
    text-decoration: none;
}

.comments-area a:hover,
#comments a:hover {
    color: #DAB26B !important;
    text-decoration: underline;
}

/* --- Bouton Répondre : texte blanc sur fond doré --- */
#comments a.comment-reply-link {
    color: #fff !important;
}

#comments a.comment-reply-link:hover {
    color: #fff !important;
    opacity: 0.85;
    text-decoration: none !important;
}

/* --- reCAPTCHA : espacement avant le bouton Soumettre --- */
.dp-recaptcha {
    margin-bottom: 16px;
}

/* --- Optimisation mobile --- */
@media (max-width: 767px) {

    /* Supprimer le symbole ↪ qui crée les croix sur les lignes verticales */
    #comments ol.comment-list .children:before,
    #comments ol.comment-list .children::before,
    #comments .comment-list .children:before,
    #comments .comment-list .children::before {
        content: '' !important;
        display: none !important;
    }

    /* Supprimer la marge gauche de la liste principale */
    #comments .comment-list {
        padding-inline-start: 0 !important;
        margin-inline-start: 0 !important;
    }

    /* Indentation réduite des réponses */
    #comments .children {
        padding-inline-start: 14px !important;
    }

    /* Sur mobile l'avatar est en float : on retire le padding-left prévu pour la position absolute */
    #comments .comment .comment-body,
    #comments .pingback .comment-body {
        padding-inline-start: 0 !important;
        padding-block-start: 12px !important;
        padding-block-end: 12px !important;
        box-sizing: border-box;
        max-width: 100%;
        overflow: hidden;
    }

    /* Avatar flottant avec espace */
    #comments .comment .avatar,
    #comments .pingback .avatar {
        width: 28px !important;
        height: 28px !important;
        margin-right: 8px !important;
        margin-bottom: 4px !important;
        float: left;
    }

    /* Empêcher le débordement à droite */
    #comments .comment-content,
    #comments .comment-content p {
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
        font-size: 13px;
        line-height: 1.5;
        margin: 0;
    }

    /* Nom + date en colonne */
    #comments .comment-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        margin-block-end: 5px;
    }

    /* Date sur une ligne, compacte */
    #comments .comment-metadata,
    #comments .comment-metadata a {
        font-size: 10px !important;
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Nom de l'auteur */
    #comments .comment-author .fn {
        font-size: 13px;
    }

    /* Lien Modifier discret */
    #comments .comment-edit-link {
        font-size: 10px;
    }

    /* Pagination mobile */
    .comments-pagination .page-numbers {
        padding: 5px 9px;
        font-size: 13px;
    }
}