.cst-cta-thumb::before {
    content: none;
}

.cst-cta-thumb::after {
    content: none;
}

/* Masquer les pseudo-éléments du compteur dans le menu mobile pour éviter la duplication */
.tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a::before,
.tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a::after {
    content: none !important;
    display: none !important;
}

/* Bouton "Nous contacter" du menu mobile en noir */
.tp-offcanvas-2-area .tp-offcanvas-menu .cst-btn {
    color: #000000 !important;
}

.tp-offcanvas-2-area .tp-offcanvas-menu .cst-btn span span.text-1,
.tp-offcanvas-2-area .tp-offcanvas-menu .cst-btn span span.text-2 {
    color: #000000 !important;
}

/* Simplifier le texte des liens du menu mobile - enlever counter et numérotation */
.tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul {
    counter-reset: none !important;
}

.tp-offcanvas-2-area .tp-offcanvas-menu > nav > ul > li > a {
    padding-left: 0 !important;
}

/* Restaure les styles pour les textes issus des éditeurs WYSIWYG */
.cst-wysiwyg-hero p {
    margin-bottom: 0;
    color: #ffffff;
}

.cst-wysiwyg-text p {
    color: inherit; /* Récupère la couleur grise de ta classe color-g */
    margin-bottom: 20px;
}

/* --------------------------------------------------------
   ÉCRASER LE PLUGIN : Style strict unifié
-------------------------------------------------------- */

/* 1. ÉTAT NORMAL */
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns .cf7mls_next.action-button,
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns .cf7mls_back.action-button,
body .wpcf7 form .fieldset-cf7mls .cf7mls_next.action-button,
body .wpcf7 form .fieldset-cf7mls .cf7mls_back.action-button,
body .wpcf7 form .tp-contact-form-btn input[type="submit"] {
    
    /* On force tes propriétés */
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: 6px !important;
    display: inline-block !important;
    padding: 17px 20px 13px !important;
    letter-spacing: -0.16px !important;
    backdrop-filter: blur(10px) !important;
    font-family: var(--tp-ff-inter, sans-serif) !important;
    color: var(--tp-common-black-7) !important;
    background-color: transparent !important;
    border: 1px solid var(--tp-common-black-7) !important;
    
    /* Nettoyage */
    min-width: auto !important;
    margin-right: 10px !important;
    float: none !important; 
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* 2. ÉTAT HOVER */
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns .cf7mls_next.action-button:hover,
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns .cf7mls_back.action-button:hover,
body .wpcf7 form .fieldset-cf7mls .cf7mls_next.action-button:hover,
body .wpcf7 form .fieldset-cf7mls .cf7mls_back.action-button:hover,
body .wpcf7 form .tp-contact-form-btn input[type="submit"]:hover {
    border-color: transparent !important;
    color: var(--tp-common-black-7) !important;
    background-color: var(--tp-theme-primary) !important;
    text-decoration: none !important;
}

/* 3. FOCUS */
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns .action-button:focus,
body .wpcf7 form .tp-contact-form-btn input[type="submit"]:focus {
    outline: none !important;
    text-decoration: none !important;
    color: inherit !important;
}

/* Alignement */
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns {
    display: flex !important;
    flex-wrap: wrap !important;
    clear: both !important;
}

/* ========================================================
   PARAGRAPHES - SECTION PROJETS (Fond sombre)
======================================================== */
/* On cible la section Projets via sa classe principale */
.cst-portfolio-ptb p {
    color: #ffffff !important; /* Force le texte en blanc sur le fond sombre */
    font-size: 18px !important; 
    margin-bottom: 10px !important; /* Écrase les 15px de base */
    
    /* On garde les valeurs de base de ton thème */
    font-family: var(--tp-ff-p, sans-serif);
    font-weight: 400;
    line-height: 26px;
}

/* ========================================================
   PARAGRAPHES - SECTION PRÉSENTATION (À propos)
======================================================== */
/* On cible la section Présentation via sa classe principale */
.cst-about-ptb .cst-wysiwyg-text p,
.cst-about-ptb p {
    color: #61616A !important; /* Ton gris spécifique */
    font-family: var(--tp-ff-inter, sans-serif) !important; /* Police Inter */
    font-size: 18px !important; 
    margin-bottom: 20px !important; /* Écrase les 15px de base pour aérer un peu plus */
    
    /* On garde les autres valeurs de base */
    font-weight: 400;
    line-height: 26px;
} 

/* ========================================================
   PROTECTION DU PARAGRAPHE - HERO BANNER
======================================================== */
.cst-hero-right .cst-wysiwyg-hero p {
    font-size: inherit !important; /* Récupère la taille fs-62 de la div parente */
    color: inherit !important;     /* Récupère la couleur color-white */
    line-height: inherit !important;
    font-weight: inherit !important;
    font-family: inherit !important;
    margin-bottom: 0 !important;   /* Enlève la marge parasite en bas */
}

/* ========================================================
   1. CASES À COCHER / BOUTONS RADIO (STYLE MODERNE)
======================================================== */
/* On cache l'input natif moche du navigateur */
.wpcf7-list-item input[type="radio"],
.wpcf7-list-item input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    z-index: -1 !important;
}

/* On prépare le texte (label) pour accueillir la fausse case */
.wpcf7-list-item {
    display: inline-block !important;
    margin-right: 25px !important;
    margin-bottom: 10px !important;
}

.wpcf7-list-item-label {
    position: relative !important;
    padding-left: 28px !important;
    cursor: pointer !important;
    color: #61616A !important;
    font-size: 16px !important;
    font-family: var(--tp-ff-inter, sans-serif) !important;
    display: inline-block !important;
    line-height: 20px !important;
}

/* La fausse case vide (cercle pour radio, carré pour checkbox) */
.wpcf7-list-item-label::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #d1d5db !important; /* Bordure grise de la case */
    background-color: #fff !important;
    transition: all 0.2s ease !important;
    border-radius: 4px !important; /* Par défaut, carré pour checkbox */
}

/* Arrondi parfait pour les boutons Radio */
.wpcf7-radio .wpcf7-list-item-label::before {
    border-radius: 50% !important;
}

/* L'intérieur quand c'est coché (le fond devient de ta couleur principale) */
.wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
    background-color: var(--tp-theme-primary, #a1c346) !important;
    border-color: var(--tp-theme-primary, #a1c346) !important;
}

/* Le petit point blanc au milieu du bouton radio coché */
.wpcf7-radio .wpcf7-list-item-label::after {
    content: '' !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    width: 8px !important;
    height: 8px !important;
    background-color: #fff !important;
    border-radius: 50% !important;
    transform: translateY(-50%) scale(0) !important;
    transition: transform 0.2s ease !important;
}

/* Animation d'apparition du point */
.wpcf7-radio .wpcf7-list-item input:checked + .wpcf7-list-item-label::after {
    transform: translateY(-50%) scale(1) !important;
}

/* ========================================================
   2. CENTRER LES BOUTONS PRÉCÉDENT ET SUIVANT
======================================================== */
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns {
    display: flex !important;
    justify-content: center !important; /* C'est cette ligne qui centre le tout */
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-top: 10px !important;
}

/* On ajuste les marges pour qu'ils soient équilibrés au centre */
body .wpcf7 form .fieldset-cf7mls .cf7mls-btns input.action-button {
    margin: 15px 10px 0 10px !important; 
}

/* ========================================================
   3. RETIRER LA BORDURE DES MESSAGES D'ALERTE CF7
======================================================== */
.wpcf7 form .wpcf7-response-output {
    border: none !important; /* Retire la bordure native */
    background-color: #f5f6fa !important; /* Optionnel : léger fond gris clair pour structurer */
    border-radius: 6px !important;
    padding: 15px 20px !important;
    margin-top: 25px !important;
    font-family: var(--tp-ff-inter, sans-serif) !important;
    text-align: center !important;
}

/* ========================================================
   4. BOUTON "ENVOYER" EN TOUTE LARGEUR + COULEURS INVERSÉES
======================================================== */
body .wpcf7 form .tp-contact-form-btn input[type="submit"] {
    width: 100% !important; /* Prend toute la largeur */
    display: block !important;
    text-align: center !important;
    
    /* Swap des couleurs à l'état normal (Fond sombre, texte blanc) */
    background-color: var(--tp-common-black-7, #050312) !important; 
    color: #ffffff !important;
    border: 1px solid var(--tp-common-black-7, #050312) !important;
    
    padding: 20px !important; /* Un poil plus gros pour l'impact visuel */
}

/* Effet au survol du bouton "Envoyer" (Devient vert) */
body .wpcf7 form .tp-contact-form-btn input[type="submit"]:hover {
    background-color: var(--tp-theme-primary, #a1c346) !important;
    border-color: var(--tp-theme-primary, #a1c346) !important;
    color: var(--tp-common-black-7, #050312) !important;
}

/* Force la couleur noire pour les liens du menu mobile */
.tp-offcanvas-menu nav ul li a {
    color: #050312 !important; /* Utilise le noir de ton thème */
    font-family: var(--tp-ff-inter, sans-serif) !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Optionnel : Changement de couleur au survol pour plus de clarté */
.tp-offcanvas-menu nav ul li a:hover {
    color: var(--tp-theme-primary, #a1c346) !important; /* Devient vert au survol */
    padding-left: 5px; /* Petit effet de décalage sympa */
}

@media (max-width: 991px) {
    .cst-hero-thumb img {
        max-height: 250px !important;
    }
    .cst-feature-top {
        padding-top: 20px;
    }
    .cst-feature-item-content p {
        line-height: 1.3;
    }
    .cst-about-ptb .cst-wysiwyg-text p, .cst-about-ptb p, .cst-service-item-content p {
        font-size: 15px !important;
        line-height: 1.3;
    }
    .cst-portfolio-item-thumb img {
        max-height: 250px;
    }
}