/*
Theme Name: Comme un fils
Theme URI: https://www.commeunfils.com
Description: Thème enfant sur-mesure pour le projet "Comme un fils".
Author: La Ligne Web
Author URI: https://www.laligneweb.com
Template: twentytwentyfive
Version: 1.0.0
Text Domain: comme-un-fils
*/

/* Ajoutez votre CSS personnalisé ci-dessous (si nécessaire, car avec l'éditeur de site, la majorité du style se gère via l'éditeur ou theme.json) */

/* Empêcher le défilement horizontal (marge blanche à droite) sur mobile à cause des animations d'apparition (translateX) */
html,
body,
.wp-site-blocks {
    overflow-x: hidden !important;
    width: 100%;
}

/* Correction du bloc gap natif de WordPress qui ajoute une marge au dessus du footer */
.wp-site-blocks>header,
.wp-site-blocks>footer,
header.wp-block-template-part,
footer.wp-block-template-part {
    margin-block-start: 0 !important;
}

.container {
    max-width: 1200px !important;
    /* Limite la largeur maximale à 1200px par défaut */
    width: 100% !important;
    /* Prend toute la largeur disponible */
    padding-right: 1rem;
    /* Ajoute un espace intérieur à droite */
    padding-left: 1rem;
    /* Ajoute un espace intérieur à gauche */
    margin-right: auto !important;
    /* Centre horizontalement */
    margin-left: auto !important;
    /* Centre horizontalement */
    box-sizing: border-box;
    /* Inclut les bordures et padding dans la largeur */
}

@media (min-width: 1440px) {
    .container {
        max-width: 1400px !important;
        /* Augmente la largeur maximale */
    }
}

/* Adaptation pour très grands écrans (≥ 1920px) */
@media (min-width: 1920px) {
    .container {
        max-width: 1600px !important;
        /* Augmente encore la largeur maximale */
    }
}

/* Adaptation pour les écrans moyens */
@media (max-width: 768px) {
    .container {
        padding-right: 1.5rem;
        /* Réduction des marges pour petits écrans */
        padding-left: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding-right: 1.25rem;
        /* Réduction supplémentaire pour très petits écrans */
        padding-left: 1.25rem;
    }
}

.separateur {
    background-color: #EFBF04;
    color: #EFBF04;
    margin-top: 1.5rem;
    margin-bottom: 4rem;
    border-width: 2px;
    width: 60px;
    max-width: 60px;
}

/* --- STYLE DU FORMULAIRE FORMINATOR (CONTACT) --- */

/* Conteneur principal */
.forminator-ui.forminator-custom-form {
    background-color: #f9f6f0 !important;
    padding: 3.5rem 3rem !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

/* Labels des champs */
.forminator-ui .forminator-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #777777 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    margin-bottom: 0.6rem !important;
    display: block !important;
}

/* Inputs, Select (Select2) et Textarea - Bordures et styles communs */
.forminator-ui .forminator-input,
.forminator-ui .forminator-select,
.forminator-ui select,
.forminator-ui select.forminator-select,
.forminator-ui .forminator-select select,
.forminator-ui .forminator-textarea,
.forminator-ui .select2-container .select2-selection,
.forminator-ui .select2-container .select2-selection--single,
.forminator-ui .select2-container .select2-selection--multiple,
.forminator-ui .select2-selection {
    width: 100% !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    border: 1px solid #e2ded5 !important;
    border-radius: 0px !important; /* Bords carrés de la maquette */
    box-sizing: border-box !important;
    font-size: 0.95rem !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Hauteur pour les inputs et la liste déroulante */
.forminator-ui .forminator-input,
.forminator-ui select,
.forminator-ui select.forminator-select,
.forminator-ui .select2-container .select2-selection,
.forminator-ui .select2-container .select2-selection--single,
.forminator-ui .select2-container .select2-selection--multiple,
.forminator-ui .select2-selection {
    height: 48px !important;
    padding: 0 1rem !important;
}

/* S'assurer que le select (natif ou Forminator) a la bonne apparence et pas de bordure noire */
.forminator-ui select,
.forminator-ui select.forminator-select,
.forminator-ui .forminator-select select {
    border: 1px solid #e2ded5 !important;
    background-color: #ffffff !important;
    border-radius: 0px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.2rem center !important;
    background-size: 10px 6px !important;
    padding-right: 2.5rem !important;
}

/* S'assurer que le wrapper du select n'affiche pas de bordure double ou noire */
.forminator-ui .forminator-select {
    border: 1px solid #e2ded5 !important;
    border-radius: 0px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
}
.forminator-ui .forminator-select select {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
    height: 46px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Alignement vertical du texte dans la liste déroulante Select2 */
.forminator-ui .select2-container .select2-selection .select2-selection__rendered,
.forminator-ui .select2-selection .select2-selection__rendered {
    line-height: 46px !important;
    color: #333333 !important;
    padding-left: 0 !important;
    padding-right: 2rem !important;
}

/* Zone de message (Textarea) */
.forminator-ui .forminator-textarea {
    height: 150px !important;
    padding: 1rem !important;
    resize: none !important;
}

/* Placeholder */
.forminator-ui .forminator-input::placeholder,
.forminator-ui .forminator-textarea::placeholder {
    color: #b0ab9f !important;
    opacity: 1 !important;
}

/* États de Focus (sélection d'un champ) */
.forminator-ui .forminator-input:focus,
.forminator-ui select:focus,
.forminator-ui select.forminator-select:focus,
.forminator-ui .forminator-select select:focus,
.forminator-ui .forminator-textarea:focus,
.forminator-ui .select2-container.select2-container--open .select2-selection,
.forminator-ui .select2-container.select2-container--open .select2-selection--single,
.forminator-ui .select2-container.select2-container--open .select2-selection--multiple,
.forminator-ui .select2-container .select2-selection:focus {
    outline: none !important;
    border-color: #012e65 !important;
    box-shadow: 0 0 0 3px rgba(1, 46, 101, 0.08) !important;
}

/* Personnalisation de la flèche Select2 de Forminator */
.forminator-ui .select2-container .select2-selection .select2-selection__arrow,
.forminator-ui .select2-selection .select2-selection__arrow {
    height: 100% !important;
    width: 30px !important;
    top: 0 !important;
    right: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.forminator-ui .select2-container .select2-selection .select2-selection__arrow b,
.forminator-ui .select2-selection .select2-selection__arrow b {
    border: none !important;
    width: 10px !important;
    height: 6px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23333333' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    display: inline-block !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}

/* Alignement du bouton d'envoi à droite */
.forminator-ui .forminator-row-last {
    margin-top: 1.8rem !important;
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.forminator-ui .forminator-row-last .forminator-col,
.forminator-ui .forminator-row-last .forminator-col .forminator-field {
    display: flex !important;
    justify-content: flex-end !important;
    width: 100% !important;
}

.forminator-ui button.forminator-button-submit {
    background-color: #012e65 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 1rem 2.2rem !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
    border-radius: 0px !important;
    transition: background-color 0.2s ease, transform 0.1s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
    min-height: 48px !important;
    width: auto !important; /* Bouton ajusté à sa taille naturelle */
    margin: 0 0 0 auto !important; /* Pousse à droite en mode flex */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

.forminator-ui button.forminator-button-submit:hover {
    background-color: #082846 !important;
}

.forminator-ui button.forminator-button-submit:active {
    transform: translateY(1px) !important;
}

/* Responsive mobile */
@media (max-width: 768px) {
    .forminator-ui.forminator-custom-form {
        padding: 2.5rem 1.8rem !important;
    }

    .forminator-ui .forminator-row-last,
    .forminator-ui .forminator-row-last .forminator-col,
    .forminator-ui .forminator-row-last .forminator-col .forminator-field {
        justify-content: center !important;
    }

    .forminator-ui button.forminator-button-submit {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* Force absolute styling on the select/select2 elements to eliminate any residual black borders */
body .forminator-ui select,
body .forminator-ui select.forminator-select,
body .forminator-ui .forminator-select,
body .forminator-ui .select2-container,
body .forminator-ui .select2-container .select2-selection,
body .forminator-ui .select2-selection,
body .forminator-ui .select2-container--default .select2-selection--single,
body .forminator-ui .select2-container--default .select2-selection--multiple {
    border: 1px solid #e2ded5 !important;
    border-radius: 0px !important;
}

body .forminator-ui .select2-container.select2-container--open .select2-selection,
body .forminator-ui .select2-container .select2-selection:focus {
    border-color: #012e65 !important;
}

/* Styles pour les liens dans le bloc de coordonnées natif */
.contact-link {
    color: #ffffff !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.contact-link:hover {
    color: #e8b71d !important;
}

/* Alignement et hauteur identique des colonnes de la page de contact */
@media (min-width: 769px) {
    .page-id-25 .wp-block-columns {
        display: flex !important;
        align-items: stretch !important;
    }
    .page-id-25 .wp-block-column {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Supprimer l'espace généré par les paragraphes vides insérés par WordPress autour du shortcode */
    .page-id-25 .wp-block-column > p {
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
        font-size: 0 !important;
        display: none !important;
    }
    .page-id-25 .wp-block-column > .forminator-ui,
    .page-id-25 .wp-block-column > .wp-block-group {
        flex: 1 1 auto !important;
        height: 100% !important;
        margin: 0 !important;
    }
    .page-id-25 .forminator-ui.forminator-custom-form {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* --- STYLE DU MENU MOBILE (HAMBURGER MODAL) --- */

/* Conteneur principal du menu ouvert */
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #f7f4ed !important; /* Beige doux et chaleureux de la DA */
    color: #012e65 !important; /* Bleu marine élégant de la DA */
    padding: 3rem 2rem !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 100000 !important;
    transition: opacity 0.3s ease !important;
    animation: mobileMenuFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* S'assurer que le conteneur interne ne perturbe pas le positionnement de la croix */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    position: static !important; /* Permet à la croix de se caler par rapport au conteneur principal */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Liste des liens du menu mobile */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2rem !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Liens individuels */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    margin: 0 !important;
    text-align: center !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
    color: #012e65 !important;
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
    display: inline-block !important;
}

/* Effets de survol (hover / focus-visible) sur les liens mobiles */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
    color: #e8b71d !important; /* Jaune/Or de la DA */
    transform: scale(1.05) !important;
}

/* Bouton de fermeture (la croix "X") placé en haut à droite de l'écran */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: fixed !important;
    top: 2rem !important;
    right: 2rem !important;
    color: #012e65 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 100010 !important;
    margin: 0 !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    fill: #012e65 !important;
    stroke: #012e65 !important;
    width: 28px !important;
    height: 28px !important;
    transition: transform 0.2s ease, fill 0.2s ease !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover svg {
    transform: rotate(90deg) !important;
    fill: #e8b71d !important;
    stroke: #e8b71d !important;
}

@keyframes mobileMenuFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inversion des colonnes sur mobile pour avoir l'image au-dessus du texte */
@media (max-width: 781px) {
    .wp-block-columns.reverse-mobile {
        flex-direction: column-reverse !important;
    }
}