/*
 Theme Name:   Divi Child
 Description:  Thème enfant pour la refonte Benoit-et-Moi
 Author:       Ballet et Cie
 Template:     Divi
 Version:      1.0.0
 Text Domain:  divi-child
*/

/* --- Vous pourrez ajouter votre CSS personnalisé ci-dessous --- */
/* Icône X (déjà donné, mais on garde pour cohérence) */
.et_monarch .et_social_icon_twitter:before,
.et_monarch .et_social_icon_twitter:after {
    content: "\e61b" !important;
    font-family: "Font Awesome 6 Brands" !important;
	/* C'est ici que Firefox bloquait : il faut forcer le poids "Normal" */
    font-weight: 400 !important; 
    
    /* On réinitialise les styles pour éviter les conflits */
    font-style: normal !important;
    font-variant: normal !important;
    line-height: 1 !important;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

/* Fond noir forcé sur le bouton Twitter/X - cible principale */
.et_monarch li.et_social_twitter,
.et_monarch .et_social_twitter,
.et_monarch .et_social_twitter i,
.et_monarch .et_social_networks li.et_social_twitter a {
    background-color: #000000 !important;
    background: #000000 !important; /* pour écraser d'éventuels gradients/inlines */
}

/* Au survol (hover) - reste noir */
.et_monarch li.et_social_twitter:hover,
.et_monarch .et_social_twitter:hover,
.et_monarch .et_social_twitter:hover i,
.et_monarch .et_social_networks li.et_social_twitter:hover a {
    background-color: #000000 !important;
    background: #000000 !important;
}

/* Icône en blanc pour bon contraste sur fond noir */
.et_monarch .et_social_twitter i,
.et_monarch .et_social_icon_twitter {
    color: #ffffff !important;
}
/* --- CORRECTIF SIDEBAR CHRONO --- */

/* On applique ce correctif uniquement sur ordinateur (écrans > 980px) */
@media only screen and (min-width: 981px) {
    
    /* 1. On transforme le conteneur global en "boîte flexible" */
    .page-template-chrono-php #content-area {
        display: flex !important;       /* Active le mode Flexbox */
        flex-direction: row !important; /* Force l'alignement en ligne (gauche vers droite) */
        flex-wrap: nowrap !important;   /* Interdit le retour à la ligne */
        align-items: flex-start;        /* Aligne tout en haut (très important pour éviter que la sidebar flotte au milieu) */
    }

    /* 2. On définit la largeur de la zone principale (gauche) */
    .page-template-chrono-php #left-area {
        width: 75% !important;          /* Prend 3/4 de la place */
        padding-right: 40px !important; /* Ajoute une marge de sécurité à droite */
        margin-right: 0 !important;     /* Nettoie les marges parasites */
        float: none !important;         /* Désactive les anciens "floats" de Divi */
    }

    /* 3. On définit la largeur de la barre latérale (droite) */
    .page-template-chrono-php #sidebar {
        width: 25% !important;          /* Prend le quart restant */
        padding-left: 0 !important;
        float: none !important;         /* Désactive les anciens "floats" */
        border-left: 1px solid #eee;    /* Optionnel : ajoute une fine ligne grise de séparation */
    }
}

/* --- Ajout des icônes dans les métadonnées du blog (Date et Catégorie) --- */

/* 1. Icône Horloge devant la date */
.et_pb_post .post-meta {
    /* Permet de positionner l'icône correctement */
    display: inline-block; 
}

.et_pb_post .post-meta::before {
    font-family: "ETmodules"; /* La police d'icônes de Divi */
    content: "\e06b";           /* Code de l'icône horloge */
    margin-right: 5px;        /* Espace entre l'icône et la date */
    font-size: 16px;          /* Ajustez la taille selon vos besoins */
    vertical-align: middle;   /* Aligne l'icône avec le texte */
    color: #5cb089;              /* Couleur de l'icône (gris standard, modifiable) */
}

/* 2. Icône Dossier/Valise devant la catégorie */
.et_pb_post .post-meta a {
    margin-left: 2px; /* Un petit espace si besoin */
}

/* On cible le premier lien dans les meta qui est généralement la catégorie */
.et_pb_post .post-meta a::before {
    font-family: "ETmodules";
    content: "\e085";         /* Code de l'icône dossier (folder) */
    margin-right: 4px;
    margin-left: 8px;         /* Espace pour séparer de la barre verticale | */
    font-size: 16px;
    vertical-align: middle;
    color: #5cb089;
    display: inline-block;
}

/* --- ICÔNES MÉTA (Version Theme Builder) --- */

/* 1. L'icône Horloge devant la date */
.et_pb_post_meta .published::before,
.et_pb_title_meta_container .published::before {
    content: "\e06b"; /* Code icône Horl */
    font-family: 'ETmodules';
    margin-right: 5px;
    color: #5cb089; /* Votre turquoise (optionnel) */
}

/* 2. L'icône Dossier devant la catégorie */
.et_pb_post_meta a[rel="category tag"]::before,
.et_pb_title_meta_container a[rel="category tag"]::before {
    content: "\e085"; /* Code icône Dossier */
    font-family: 'ETmodules';
    margin-right: 3px;
    margin-left: 10px; /* Espace après la date */
    color: #5cb089;
}
/* --- ICÔNE DEVANT LES MOTS-CLÉS --- */

/* --- CORRECTIF : ICÔNE MOTS-CLÉS ALIGNÉE --- */

/* On cible directement le paragraphe 'p' à l'intérieur du module */
.module-mots-cles p::before,
.module-mots-cles .et_pb_text_inner::before {
    content: "\e07c"; /* Icône Étiquette */
    font-family: 'ETmodules' !important;
    
    color: #5cb089; /* Turquoise */
    font-size: 18px;
    margin-right: 8px; /* Espace après l'icône */
    
    /* Alignement vertical parfait */
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 3px; /* Petit ajustement si l'icône est trop haute */
}

/* Sécurité : On s'assure qu'il n'y a pas deux icônes si Divi met un p ET un div */
.module-mots-cles p .et_pb_text_inner::before {
    display: none !important;
}
/* Style pour le titre du mois (Mise à jour : Gras) */
.chrono-mois-titre h4 {
    color: #5cb089; /* Votre turquoise */
    font-weight: bold !important; /* <-- C'est ici que ça se joue */
    font-family: 'Montserrat', sans-serif;
    
    border-bottom: 2px solid #5cb089;
    padding-bottom: 10px;
    margin-top: 30px;
}
/* --- NETTOYAGE ET HIERARCHIE COMMENTAIRES --- */

/* 1. On enlève les puces/numéros pour tout le monde (Parents et Enfants) */
.et_pb_comments_module .commentlist, 
.et_pb_comments_module .children,
.et_pb_comments_module .commentlist > li,
.et_pb_comments_module .children > li {
    list-style-type: none !important;
}

/* 2. On remet à zéro les marges de la liste principale uniquement */
.et_pb_comments_module .commentlist {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* 3. On CRÉE le décalage spécifique pour les "Enfants" (Réponses) */
.et_pb_comments_module .children {
    margin-left: 50px !important; /* C'est ici qu'on gère la profondeur du décalage */
    padding-left: 0 !important;
    
    /* Optionnel : Une petite barre verticale turquoise pour bien marquer la réponse */
    border-left: 2px solid #5cb089; 
}

/* 4. Ajustement pour Mobile (on réduit le décalage sur petit écran) */
@media (max-width: 767px) {
    .et_pb_comments_module .children {
        margin-left: 20px !important;
    }
}
/* --- BOUTON RÉPONDRE SOUS LE TEXTE --- */

.et_pb_comments_module .comment-reply-link {
    /* 1. On annule le positionnement flottant par défaut */
    position: static !important; 
    float: none !important;
    
    /* 2. On le force à se mettre sur une nouvelle ligne (bloc) */
    display: inline-block !important;
    
    /* 3. On ajoute de l'espace pour qu'il ne colle pas au texte */
    margin-top: 15px !important;
    margin-bottom: 10px !important;
    
    /* Optionnel : On peut le décaler un peu à droite si vous voulez */
    /* margin-left: 0px; */
}