/* ==========================================================================
   Page Contact : colonne de gauche (titre, étapes, citation), formulaire
   Ninja Forms n° 2 et bandeau de liens sous le formulaire.
   Chargé uniquement sur is_page( 'contact' ) : voir inc/tris/custom_enqueue.php.
   Couleurs : tokens --component-color-* de style.css (reliés aux réglages Enfold).
   Réutilise .tris-lead d'assets/css/enfold-child.css.
   ========================================================================== */

/* --------------------------------------------------- Titre + sur-titre */
.tris-contact-titre .av-subheading {
    text-transform: uppercase;
    letter-spacing: .14em;
    line-height: 1.4;
    margin-bottom: 16px;
}

/* Taille du h2 : règle commune à tout le site (enfold-child.css). */
.tris-contact-titre .av-special-heading-tag {
    line-height: 1.15;
}

/* --------------------------------------------------- Les 3 étapes */
/* Élément natif « Icon List ». Le glyphe de l'icône est masqué et remplacé
   par un compteur CSS : la numérotation se refait toute seule si le client
   ajoute ou supprime une étape dans l'ALB.
   La couleur de la pastille et celle du numéro restent pilotées depuis les
   réglages Avia de l'élément (couleur de fond / bordure / police de l'icône). */
.tris-etapes {
    margin-top: 32px;
}

.tris-etapes .avia-icon-list {
    counter-reset: tris-etape;
    margin: 0;
}

.tris-etapes .avia-icon-list li {
    counter-increment: tris-etape;
    margin-left: 0 !important;
    padding-bottom: 24px !important;
}

.tris-etapes .avia-icon-list li:last-child {
    padding-bottom: 0 !important;
}

/* Le trait vertical qui relie les items par défaut n'existe pas dans la maquette. */
.tris-etapes .iconlist-timeline {
    display: none !important;
}

.tris-etapes .iconlist_icon {
    line-height: 1.45em;
    border-radius: 50%;
    box-shadow: none !important;
    text-align: center;
}

#top .tris-etapes .av-iconlist-small .iconlist_icon {
    height: 3em;
    width: 3em;
    line-height: 1.45em;
    margin-right: 1em;
}

.tris-etapes .iconlist_icon .av-icon-char {
    display: none;
}

.tris-etapes .iconlist_icon::before {
    content: counter(tris-etape);
    font-size: 18px;
    font-weight: 600;
    line-height: 50px;
}

.tris-etapes .av_iconlist_title {
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 6px;
}

.tris-etapes .iconlist_content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
}

/* --------------------------------------------------- Citation (élément Promobox) */
.tris-citation-contact {
    margin-top: 34px;
}

.tris-citation-contact .avia-promocontent p {
    margin: 0;
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
}

/* --------------------------------------------------- Responsive */
@media only screen and (max-width:1024px) {
    .tris-citation-contact .avia-promocontent p {
        font-size: 16px;
    }
}

@media only screen and (max-width:767px) {
    .tris-contact-intro {
        margin-bottom: 32px !important;
    }
}


/* ==========================================================================
   NINJA FORMS (formulaire n° 2) — ne modifie pas l'ordre des champs.
   Le préfixe #top #nf-form-2-cont (2 ID) suffit à passer devant les styles de
   Ninja Forms et d'Enfold : !important n'est gardé que sur la grille (largeurs
   posées en style inline par Ninja Forms Layouts). Si le formulaire est recréé,
   son numéro change : adapter #nf-form-2-cont.
   ========================================================================== */

/* --------------------------------------------------- Conteneur */
#top #nf-form-2-cont {
    width: 100%;
    max-width: 100%;
}

#top .tris-contact-formulaire {
    box-shadow: 0 20px 90px -45px var(--component-color-primary);
}

#top #nf-form-2-cont .nf-form-content {
    width: 100%;
    padding: 0;
}

#top #nf-form-2-cont .nf-form-fields-required {
    margin: 0 0 18px 0;
    color: var(--component-color-text);
    line-height: 1.4;
    font-weight: 400;
}

#top #nf-form-2-cont .ninja-forms-req-symbol {
    color: var(--component-color-text);
}

/* --------------------------------------------------- Lignes / cellules */
#top #nf-form-2-cont .nf-row {
    width: 100% !important;
    margin: 0 !important;
}

#top #nf-form-2-cont .nf-cells {
    display: flex !important;
    width: 100% !important;
}

#top #nf-form-2-cont .nf-cell {
    box-sizing: border-box !important;
}

/* La cellule est en flex (style inline) : on force le contenu à prendre toute la largeur */
#top #nf-form-2-cont .nf-cell>nf-fields {
    display: block !important;
    flex: 1 1 100% !important;
    width: 100% !important;
}

/* --------------------------------------------------- Espacement entre les champs */
#top #nf-form-2-cont .nf-field-container {
    margin-bottom: 16px;
}

#top #nf-form-2-cont .nf-row:last-child .nf-field-container {
    margin-bottom: 0;
}

/* --------------------------------------------------- Labels */
#top #nf-form-2-cont .nf-field-label {
    display: block;
    margin: 0 0 7px 0;
    padding: 0;
}

#top #nf-form-2-cont .nf-field-label label {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--component-color-ink);
    line-height: 1.3;
    font-weight: 600;
}

/* --------------------------------------------------- Champs texte */
#top #nf-form-2-cont .nf-field-element input[type="text"],
#top #nf-form-2-cont .nf-field-element input[type="email"],
#top #nf-form-2-cont .nf-field-element input[type="tel"] {
    display: block;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--component-color-line);
    border-radius: 0;
    background: var(--component-color-bg);
    color: var(--component-color-ink);
    font-family: inherit;
    font-weight: 400;
    line-height: 38px;
    box-shadow: none;
    outline: none;
}

#top #nf-form-2-cont .textarea-wrap textarea {
    display: block;
    width: 100%;
    height: 105px;
    min-height: 105px;
    margin: 0;
    padding: 12px;
    box-sizing: border-box;
    border: 1px solid var(--component-color-line);
    border-radius: 0;
    background: var(--component-color-bg);
    color: var(--component-color-ink);
    font-family: inherit;
    line-height: 1.45;
    resize: none;
    box-shadow: none;
}

#top #nf-form-2-cont input::placeholder,
#top #nf-form-2-cont textarea::placeholder {
    color: var(--component-color-text-light);
    opacity: 1;
}

/* Focus visible (WCAG 2.4.7) : la bordure passe au vert du bouton et s'épaissit. */
#top #nf-form-2-cont .nf-field-element input:focus,
#top #nf-form-2-cont .nf-field-element textarea:focus {
    border-color: var(--component-color-primary);
    box-shadow: inset 0 0 0 1px var(--component-color-primary);
    outline: none;
}

/* --------------------------------------------------- Case à cocher — confidentialité */
/* Grille : case | label, puis description sous le label */
#top #nf-form-2-cont .checkbox-container .checkbox-wrap {
    display: grid;
    grid-template-columns: 16px 1fr;
    column-gap: 10px;
    row-gap: 6px;
    align-items: start;
}

#top #nf-form-2-cont .checkbox-container .nf-field-element {
    grid-column: 1;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding: 0;
}

#top #nf-form-2-cont .checkbox-container .nf-field-label {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    margin: 0;
    padding: 0;
}

#top #nf-form-2-cont .checkbox-container .nf-field-label label {
    line-height: 16px;
    cursor: pointer;
}

#top #nf-form-2-cont .checkbox-container .nf-field-description {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    margin: 0;
    padding: 0;
}

#top #nf-form-2-cont .checkbox-container .nf-field-description p {
    margin: 0;
    color: var(--component-color-text);
    line-height: 1.55;
}

/* La case elle-même */
#top #nf-form-2-cont .checkbox-container input[type="checkbox"] {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--component-color-primary);
    cursor: pointer;
}

/* Le message d'erreur s'aligne sous le texte, pas sous la case */
#top #nf-form-2-cont .checkbox-container .nf-error-wrap {
    padding-left: 26px;
}

/* Espace avant le bouton */
#top #nf-form-2-cont .checkbox-container {
    margin-bottom: 20px;
}

/* --------------------------------------------------- Bouton d'envoi */
#top #nf-form-2-cont .submit-container {
    margin-top: 0;
    margin-bottom: 0;
}

#top #nf-form-2-cont .submit-container .nf-field-element {
    width: 100%;
}

#top #nf-form-2-cont .submit-container input[type="submit"] {
    display: block;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 20px;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: var(--component-color-primary);
    color: var(--component-color-button-font);
    font-family: inherit;
    line-height: 38px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    box-shadow: none;
}

#top #nf-form-2-cont .submit-container input[type="submit"]:hover {
    background: color-mix(in srgb, var(--component-color-primary) 70%, var(--component-color-ink));
}

#top #nf-form-2-cont .submit-container input[type="submit"]:focus-visible {
    outline: 2px solid var(--component-color-primary);
    outline-offset: 2px;
}

/* Neutralise l'aspect des boutons Avia dans le formulaire */
#top #nf-form-2-cont .avia-button {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

@media only screen and (max-width: 767px) {
    #top #nf-form-2-cont .nf-cells {
        display: block !important;
    }

    #top #nf-form-2-cont .nf-cell {
        width: 100% !important;
    }
}


/* ==========================================================================
   Bandeau sous le formulaire (.tris-btn-form, rangée de boutons Avia)
   Le 1er « bouton » sert d'intitulé (non cliquable) ; les suivants sont les liens.
   !important nécessaires : les feuilles des boutons Avia sont chargées après.
   ========================================================================== */
#top .tris-btn-form {
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 24px;
    padding: 18px 24px !important;
    background: var(--component-color-tint);
    border-top: 1px solid var(--component-color-line);
}

#top .tris-btn-form a {
    background: transparent !important;
    text-align: left !important;
    border-bottom: none !important;
}

#top .tris-btn-form .avia-button {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    color: var(--component-color-primary) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

#top .tris-btn-form .avia-button:first-child {
    flex: 0 1 170px;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    pointer-events: none;
}

#top .tris-btn-form .avia-button:not(:first-child) {
    flex: none;
    white-space: nowrap;
}

#top .tris-btn-form .avia_button_icon {
    position: static !important;
    margin: 0 !important;
}

#top .tris-btn-form svg {
    width: 16px !important;
    height: 16px !important;
}

#top .tris-btn-form svg * {
    fill: none !important;
    stroke: var(--component-color-primary) !important;
    stroke-width: 1.75 !important;
}

@media only screen and (max-width: 1024px) {
    #top .tris-btn-form {
        gap: 18px;
        padding: 16px 20px !important;
    }

    #top .tris-btn-form .avia-button {
        font-size: 14px !important;
    }
}

@media only screen and (max-width: 767px) {
    #top .tris-btn-form {
        flex-wrap: wrap;
        gap: 12px 24px;
    }

    #top .tris-btn-form .avia-button:first-child {
        flex: 0 0 100%;
    }

    #top .tris-btn-form .avia-button:first-child br {
        display: none;
    }
}

@media only screen and (max-width: 400px) {
    #top .tris-btn-form {
        flex-direction: column;
        align-items: flex-start !important;
    }
}