/*
Theme Name: Vauban Avocats 2026
Description: Child theme for Avada theme to Vauban Avocats
Author: ThemeFusion Custom BY RH Performances
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* Ciblage spécifique de votre icône de menu */
.awb-investment-menu {
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    width: auto !important; /* Permet à l'élément de s'élargir pour le texte */
}

/* Ajout du texte MENU après l'icône */
.awb-investment-menu::after {
    content: "MENU";
    margin-left: 10px;      /* Espace entre l'icône et le texte */
    font-family: 'Mulish'!important;   /* Utilise la police du site */
    font-weight: 700;       /* Gras */
    font-size: 10px;        /* Taille du texte */
    color: var(--awb-color6); /* Utilise la même couleur que votre icône */
    display: inline-block;
}

/* Changement de couleur au survol pour le texte aussi */
.awb-investment-menu:hover::after {
    color: var(--awb-color5); /* Utilise la couleur de survol définie dans Avada */
}

/* ==========================================================================
   Dropdown de navigation par catégorie — Blog Juridique
   Shortcode : [vauban_blog_dropdown]
   ========================================================================== */

.vauban-blog-categories-dropdown {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    height: auto;
    min-height: 52px;
    padding: 0 44px 0 20px;
    border: 1px solid #e0e0e0;
    border-radius: 0;             /* uniformisé : pas de border-radius */
    font-family: 'Mulish', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 52px;            /* aligne verticalement le texte sans tronquer les descenders */
    color: #1a1a1a;
    background-color: #ffffff;
    cursor: pointer;
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Icône chevron en SVG inline, teinte rouge Vauban */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf1e2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vauban-blog-categories-dropdown:hover {
    border-color: var(--awb-color6);
}

.vauban-blog-categories-dropdown:focus {
    outline: none;
    border-color: var(--awb-color6);
    box-shadow: 0 0 0 3px rgba(191, 30, 46, 0.15);
}

.vauban-blog-categories-dropdown option {
    padding: 8px;
    font-weight: normal;
    line-height: 1.5;             /* line-height normal pour les options dans la liste déroulée */
    color: #1a1a1a;
}

.vauban-blog-categories-dropdown option[disabled] {
    color: #999;
}

/* Responsive : pleine largeur sur mobile */
@media (max-width: 768px) {
    .vauban-blog-categories-dropdown {
        max-width: 100%;
        font-size: 15px;
        min-height: 48px;
        line-height: 48px;
        padding: 0 40px 0 16px;
    }
}

/* ==========================================================================
   Moteur de recherche — Uniformisation avec le dropdown catégories
   Pas de border-radius + hauteur cohérente
   ========================================================================== */

/* Wrapper du formulaire de recherche (Gutenberg / WordPress / Avada) */
.wp-block-search,
.wp-block-search__inside-wrapper,
.fusion-search-form,
.search-form,
form.search-form,
form.searchform {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Force le wrapper interne en flex avec center pour aligner input + bouton sur la même ligne médiane */
.wp-block-search__inside-wrapper,
.fusion-search-form-inner,
form.search-form,
form.searchform {
    display: flex !important;
    align-items: center !important;       /* center pour aligner sur le milieu vertical */
    gap: 0 !important;
}

/* Input de recherche — hauteur fixée à 52px, sans variation possible */
input[type="search"],
input.wp-block-search__input,
input.search-field,
input.fusion-search-form-content,
.search-form input[type="text"],
.fusion-search-form input[type="text"],
.fusion-search-form input[type="search"] {
    border-radius: 0 !important;
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    border: 1px solid #e0e0e0 !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: normal !important;       /* laisse le browser centrer naturellement */
    vertical-align: top !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

input[type="search"]::placeholder,
input.wp-block-search__input::placeholder,
input.search-field::placeholder {
    color: #999 !important;
    font-style: normal !important;
}

input[type="search"]:focus,
input.wp-block-search__input:focus,
input.search-field:focus {
    outline: none !important;
    border-color: var(--awb-color6) !important;
    box-shadow: 0 0 0 3px rgba(193, 2, 49, 0.15) !important;
}

/* Bouton submit de la recherche (loupe noire) — hauteur fixée à 52px IDENTIQUE à l'input */
button.wp-block-search__button,
.wp-block-search__button,
.search-submit,
input[type="submit"].search-submit,
button.fusion-search-form-submit,
.fusion-search-form button[type="submit"] {
    border-radius: 0 !important;
    box-sizing: border-box !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 20px !important;
    margin: 0 !important;
    background-color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    color: #ffffff !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    flex-shrink: 0 !important;
}

/* L'icône loupe à l'intérieur du bouton */
button.wp-block-search__button svg,
button.wp-block-search__button .wp-block-search__button-icon,
.fusion-search-form button svg,
.fusion-search-form button i {
    width: 20px !important;
    height: 20px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
    display: block !important;
}

/* ==========================================================================
   FIX UNIVERSEL — Force la hauteur sur N'IMPORTE QUEL bouton dans un form de recherche
   (filet de sécurité au cas où Avada utilise une classe spéciale)
   ========================================================================== */

/* Tous les forms avec attribut role="search" ou nom contenant "search" */
form[role="search"],
form[id*="search"],
form[class*="search"] {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}

/* Tout bouton à l'intérieur d'un form de recherche */
form[role="search"] button,
form[role="search"] input[type="submit"],
form[id*="search"] button,
form[id*="search"] input[type="submit"],
form[class*="search"] button,
form[class*="search"] input[type="submit"],
[class*="search-button"],
[class*="search__button"],
[class*="search-submit"],
.fusion-flex-search-form button,
.fusion-flex-search-form input[type="submit"] {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    box-sizing: border-box !important;
    align-self: stretch !important;
    padding: 0 20px !important;
    line-height: 1 !important;
    background-color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* Force l'icône à l'intérieur à la bonne taille */
form[role="search"] button svg,
form[role="search"] button i,
form[role="search"] button .icon,
form[class*="search"] button svg,
form[class*="search"] button i,
form[class*="search"] button .icon {
    width: 20px !important;
    height: 20px !important;
    fill: #ffffff !important;
    color: #ffffff !important;
    line-height: 1 !important;
    font-size: 18px !important;
}

/* Hover */
form[role="search"] button:hover,
form[role="search"] input[type="submit"]:hover,
form[class*="search"] button:hover {
    background-color: var(--awb-color6) !important;
    border-color: var(--awb-color6) !important;
}

/* Responsive */
@media (max-width: 768px) {
    form[role="search"] button,
    form[role="search"] input[type="submit"],
    form[class*="search"] button {
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 14px !important;
    }
}

/* ==========================================================================
   Newsletter Form (Gravity Forms Orbital) — Layout inline : email | button + opt-in en dessous
   Classe CSS à ajouter au form dans GF admin : "gform-newsletter-inline"
   GF Orbital met le bouton submit DANS .gform_fields comme un gfield normal,
   donc on peut utiliser grid sur .gform_fields directement (pas besoin de display:contents)
   ========================================================================== */

/* Le container des fields devient un grid 2 colonnes × 2 lignes */
form.gform-newsletter-inline .gform_fields,
.gform-newsletter-inline_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: 16px 12px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Reset les widths par défaut Gravity Forms (--width-half, etc.) sur ces fields */
form.gform-newsletter-inline .gfield,
.gform-newsletter-inline_wrapper .gfield {
    width: auto !important;
    max-width: 100% !important;
    grid-column: auto !important;
}

/* Email → colonne 1, ligne 1 */
form.gform-newsletter-inline .gfield--type-email,
form.gform-newsletter-inline .gfield--type-text,
.gform-newsletter-inline_wrapper .gfield--type-email,
.gform-newsletter-inline_wrapper .gfield--type-text {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
}

/* Checkbox / consent → pleine largeur, ligne 2 */
form.gform-newsletter-inline .gfield--type-checkbox,
form.gform-newsletter-inline .gfield--type-consent,
form.gform-newsletter-inline .gfield--type-choice,
.gform-newsletter-inline_wrapper .gfield--type-checkbox,
.gform-newsletter-inline_wrapper .gfield--type-consent,
.gform-newsletter-inline_wrapper .gfield--type-choice {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
}

/* Bouton submit → colonne 2, ligne 1, aligné au bas pour matcher l'input email */
form.gform-newsletter-inline .gfield--type-submit,
.gform-newsletter-inline_wrapper .gfield--type-submit {
    grid-column: 2 !important;
    grid-row: 1 !important;
    align-self: end !important;
    margin: 0 !important;
    min-width: 180px !important;
}

/* Le bouton lui-même prend toute la largeur de sa cellule */
form.gform-newsletter-inline .gfield--type-submit input[type="submit"],
.gform-newsletter-inline_wrapper .gfield--type-submit input[type="submit"] {
    width: 100% !important;
    margin: 0 !important;
    white-space: nowrap !important;
    background-color: #1a1a1a !important;
    border-color: #1a1a1a !important;
    color: #ffffff !important;
}

form.gform-newsletter-inline .gfield--type-submit input[type="submit"]:hover,
.gform-newsletter-inline_wrapper .gfield--type-submit input[type="submit"]:hover {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--awb-color6) !important;
}

/* On masque le footer Gravity (qui ne contient que des hidden inputs en Orbital) */
.gform-newsletter-inline_wrapper .gform-footer,
.gform-newsletter-inline_wrapper .gform_footer {
    display: none !important;
}

/* --- Override des variables CSS Gravity Forms pour fond rouge ---------- */
/* GF Orbital injecte des CSS vars sur #gform_wrapper_X[data-form-index="0"].gform-theme
   On match exactement la même spécificité ET on ajoute notre classe pour gagner */
html body .gform-newsletter-inline_wrapper[data-form-index].gform-theme,
html body .gform-newsletter-inline_wrapper {
    --gf-ctrl-label-color-primary: #ffffff !important;
    --gf-ctrl-label-color-secondary: #ffffff !important;
    --gf-color-out-ctrl-dark: #ffffff !important;
    --gf-color-out-ctrl-dark-lighter: rgba(255, 255, 255, 0.85) !important;
    --gf-color-out-ctrl-dark-darker: #ffffff !important;
    --gf-color-in-ctrl-dark: #ffffff !important;
    --gf-color-in-ctrl-dark-lighter: rgba(255, 255, 255, 0.85) !important;
    --gf-color-in-ctrl-contrast: #ffffff !important;
    --gf-ctrl-border-color: rgba(255, 255, 255, 0.6) !important;
}

/* --- Contraste pour fond rouge Vauban : labels et texte en blanc ----- */
/* On utilise html body + le wrapper pour atteindre la spécificité requise face à GF */
html body .gform-newsletter-inline_wrapper .gfield .gfield_label,
html body .gform-newsletter-inline_wrapper .gfield label,
html body .gform-newsletter-inline_wrapper .gfield legend,
html body .gform-newsletter-inline_wrapper .gfield .gform-field-label,
html body .gform-newsletter-inline_wrapper .gfield .gform-field-label--type-inline,
html body .gform-newsletter-inline_wrapper .gchoice label,
html body .gform-newsletter-inline_wrapper .gchoice .gform-field-label,
html body .gform-newsletter-inline_wrapper .gfield_consent_label,
html body .gform-newsletter-inline_wrapper .gfield_description {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Astérisque / texte (Nécessaire) en blanc semi-transparent */
html body .gform-newsletter-inline_wrapper .gfield_required,
html body .gform-newsletter-inline_wrapper .gfield_required_text,
html body .gform-newsletter-inline_wrapper span.gfield_required {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Liens dans les labels (CGU, conditions) en blanc souligné */
.gform-newsletter-inline_wrapper a,
.gform-newsletter-inline_wrapper label a {
    color: #ffffff !important;
    text-decoration: underline !important;
}

/* Input email : underline blanc, texte blanc */
.gform-newsletter-inline_wrapper input[type="email"],
.gform-newsletter-inline_wrapper input[type="text"] {
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
}

.gform-newsletter-inline_wrapper input[type="email"]::placeholder,
.gform-newsletter-inline_wrapper input[type="text"]::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.gform-newsletter-inline_wrapper input[type="email"]:focus,
.gform-newsletter-inline_wrapper input[type="text"]:focus {
    background-color: transparent !important;
    border-bottom-color: #ffffff !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   Custom checkbox visible sur fond rouge (case blanche, check rouge Vauban)
   On utilise html body + classes spécifiques pour battre les rules GF
   ========================================================================== */
html body .gform-newsletter-inline_wrapper .gfield--type-checkbox .gchoice,
html body .gform-newsletter-inline_wrapper .gfield--type-consent .gchoice,
html body .gform-newsletter-inline_wrapper .gfield_checkbox .gchoice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

/* Reset complet du rendu natif + custom design */
html body .gform-newsletter-inline_wrapper input[type="checkbox"],
html body .gform-newsletter-inline_wrapper input.gfield-choice-input[type="checkbox"],
html body .gform-newsletter-inline_wrapper .gchoice input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
    -o-appearance: none !important;
    appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #ffffff !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    vertical-align: top !important;
    box-shadow: none !important;
    color: transparent !important;          /* masque tout caractère natif */
}

/* IE / Edge legacy */
html body .gform-newsletter-inline_wrapper input[type="checkbox"]::-ms-check {
    display: none !important;
}

html body .gform-newsletter-inline_wrapper input[type="checkbox"]:checked,
html body .gform-newsletter-inline_wrapper input.gfield-choice-input[type="checkbox"]:checked {
    background-color: #ffffff !important;
    background-image: none !important;
    border-color: #ffffff !important;
}

/* Checkmark rouge Vauban quand cochée (notre seul check, le natif est supprimé) */
html body .gform-newsletter-inline_wrapper input[type="checkbox"]:checked::after,
html body .gform-newsletter-inline_wrapper input.gfield-choice-input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    left: 4px !important;
    top: 0px !important;
    width: 6px !important;
    height: 11px !important;
    border: solid #C10231 !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
    display: block !important;
    background: transparent !important;
}

html body .gform-newsletter-inline_wrapper input[type="checkbox"]:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5) !important;
    outline-offset: 2px !important;
}

/* Le label à côté de la checkbox : blanc, taille normale */
html body .gform-newsletter-inline_wrapper .gfield_checkbox label,
html body .gform-newsletter-inline_wrapper .gchoice label,
html body .gform-newsletter-inline_wrapper label.gform-field-label--type-inline {
    color: #ffffff !important;
    opacity: 1 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    cursor: pointer !important;
    margin: 0 !important;
}

/* Responsive : tout en colonne sur mobile */
@media (max-width: 768px) {
    form.gform-newsletter-inline .gform_fields,
    .gform-newsletter-inline_wrapper .gform_fields {
        grid-template-columns: 1fr !important;
    }
    form.gform-newsletter-inline .gfield--type-submit,
    .gform-newsletter-inline_wrapper .gfield--type-submit {
        grid-column: 1 !important;
        grid-row: 3 !important;
        align-self: stretch !important;
        min-width: 0 !important;
    }
}

button.wp-block-search__button:hover,
.search-submit:hover,
button.fusion-search-form-submit:hover {
    background-color: var(--awb-color6) !important;
    border-color: var(--awb-color6) !important;
}

/* Responsive : aligne sur mobile */
@media (max-width: 768px) {
    input[type="search"],
    input.wp-block-search__input,
    input.search-field {
        font-size: 15px !important;
        min-height: 48px !important;
        line-height: 48px !important;
        padding: 0 16px !important;
    }
    button.wp-block-search__button,
    .search-submit,
    button.fusion-search-form-submit {
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 14px !important;
    }
}

/* ==========================================================================
   Meta d'article (date + catégorie + temps de lecture) — Single Article
   Shortcode : [vauban_article_meta]
   ========================================================================== */

.vauban-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;     /* centre les éléments horizontalement */
    gap: 12px;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6a6a6a;
    line-height: 1.4;
    margin: 0;
    padding: 20px 0;             /* respiration verticale */
    text-align: center;
}

.vauban-article-meta .vauban-meta-date,
.vauban-article-meta .vauban-meta-category,
.vauban-article-meta .vauban-meta-reading-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.vauban-article-meta .vauban-meta-category a {
    color: var(--awb-color6);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.vauban-article-meta .vauban-meta-category a:hover {
    color: var(--awb-color5);
    text-decoration: underline;
}

.vauban-article-meta .vauban-meta-sep {
    color: #cccccc;
    font-weight: 700;
    user-select: none;
}

.vauban-article-meta .vauban-meta-icon {
    font-size: 16px;
    line-height: 1;
}

/* Responsive : empilage vertical sur mobile pour lisibilité */
@media (max-width: 600px) {
    .vauban-article-meta {
        font-size: 13px;
        gap: 8px;
    }
    .vauban-article-meta .vauban-meta-sep {
        display: none; /* On retire les séparateurs sur mobile */
    }
}

/* ==========================================================================
   Meta d'une Interview (Nom/prénom + Fonction/entreprise)
   Shortcode : [vauban_interview_meta]
   ========================================================================== */

.vauban-interview-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: 'Mulish', sans-serif;
    font-size: 15px;
    line-height: 1.4;
    color: #4a4a4a;
    margin: 0;
    padding: 16px 0;
    text-align: center;
}

.vauban-interview-meta .vauban-interview-name {
    color: var(--awb-color6);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.vauban-interview-meta .vauban-interview-sep {
    color: #cccccc;
    font-weight: 400;
    user-select: none;
}

.vauban-interview-meta .vauban-interview-role {
    color: #4a4a4a;
    font-weight: 500;
    font-style: italic;
}

@media (max-width: 600px) {
    .vauban-interview-meta {
        font-size: 14px;
        gap: 6px;
    }
    .vauban-interview-meta .vauban-interview-sep {
        display: none;
    }
}

/* ==========================================================================
   Filtre Interviews (Toutes / Clients / Collaborateurs)
   Shortcode : [vauban_interview_filter]
   ========================================================================== */

.vauban-interview-filter {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 auto 40px;
    padding: 0;
    max-width: 720px;
}

.vauban-interview-filter__btn {
    appearance: none;
    -webkit-appearance: none;
    padding: 10px 24px;
    background: #ffffff;
    border: 1.5px solid #e0e0e0;
    border-radius: 999px;
    font-family: 'Mulish', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #4a4a4a;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    line-height: 1.2;
    letter-spacing: 0.2px;
}

.vauban-interview-filter__btn:hover {
    border-color: var(--awb-color6);
    color: var(--awb-color6);
}

.vauban-interview-filter__btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(193, 2, 49, 0.15);
}

.vauban-interview-filter__btn.is-active {
    background-color: var(--awb-color6);
    border-color: var(--awb-color6);
    color: #ffffff;
}

.vauban-interview-filter__btn.is-active:hover {
    background-color: var(--awb-color5);  /* couleur hover Avada si dispo */
    border-color: var(--awb-color5);
    color: #ffffff;
}

/* État loading : feedback visuel pendant la navigation vers la nouvelle URL */
.vauban-interview-filter__btn.is-loading {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
    position: relative;
}

.vauban-interview-filter__btn.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 8px;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: vauban-spin 0.8s linear infinite;
}

@keyframes vauban-spin {
    to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 600px) {
    .vauban-interview-filter {
        gap: 8px;
        margin-bottom: 30px;
    }
    .vauban-interview-filter__btn {
        padding: 9px 18px;
        font-size: 13px;
    }
}

/* ==========================================================================
   Masque l'auteur + la date sur les cards d'Interviews uniquement
   (cible UNIQUEMENT les éléments auteur/date, PAS le wrapper meta complet
   qui contient aussi le bouton "Lire la suite" / "Read More")
   ========================================================================== */

.post-type-archive-interviews .vcard,
.post-type-archive-interviews .updated,
.post-type-archive-interviews .fusion-author,
.post-type-archive-interviews .fusion-date,
.post-type-archive-interviews .author.vcard,
.post-type-archive-interviews .entry-author,
.post-type-archive-interviews .entry-date,
.post-type-archive-interviews .post-date,
.post-type-archive-interviews .byline,
.tax-type .vcard,
.tax-type .updated,
.tax-type .fusion-author,
.tax-type .fusion-date,
.tax-type .author.vcard,
.tax-type .entry-author,
.tax-type .entry-date,
.tax-type .post-date,
.tax-type .byline {
    display: none !important;
}

/* Cible les "By" et "|" séparateurs textuels (Avada les met parfois en .fusion-inline-sep) */
.post-type-archive-interviews .fusion-meta-info .fusion-inline-sep,
.tax-type .fusion-meta-info .fusion-inline-sep {
    display: none !important;
}

/* Si l'élément Post Cards moderne d'Avada est utilisé */
.post-type-archive-interviews [class*="post-card-author"],
.post-type-archive-interviews [class*="post-card-date"],
.tax-type [class*="post-card-author"],
.tax-type [class*="post-card-date"] {
    display: none !important;
}

/* Petit espacement supplémentaire après le titre (puisqu'on a retiré le meta) */
.post-type-archive-interviews .fusion-post-title,
.post-type-archive-interviews .entry-title,
.tax-type .fusion-post-title,
.tax-type .entry-title {
    margin-bottom: 16px !important;
}

/* ==========================================================================
   Retire le underline sur les titres des cards (blog + interviews)
   ========================================================================== */

.category .fusion-post-title,
.category .fusion-post-title a,
.category .entry-title,
.category .entry-title a,
.tax-category .fusion-post-title a,
.tax-type .fusion-post-title,
.tax-type .fusion-post-title a,
.tax-type .entry-title a,
.post-type-archive-interviews .fusion-post-title,
.post-type-archive-interviews .fusion-post-title a,
.post-type-archive-interviews .entry-title a,
.blog .fusion-post-title a,
.blog .entry-title a,
.fusion-blog-layout-grid .fusion-post-title a,
.fusion-blog-layout-grid .entry-title a,
.fusion-blog-shortcode .fusion-post-title a,
.fusion-blog-shortcode .entry-title a {
    text-decoration: none !important;
    border-bottom: none !important;
    background-image: none !important;
}

/* Hover : pas de underline non plus, juste un changement de couleur subtil */
.category .fusion-post-title a:hover,
.category .entry-title a:hover,
.tax-type .fusion-post-title a:hover,
.tax-type .entry-title a:hover,
.post-type-archive-interviews .fusion-post-title a:hover,
.post-type-archive-interviews .entry-title a:hover,
.blog .fusion-post-title a:hover,
.blog .entry-title a:hover,
.fusion-blog-layout-grid .fusion-post-title a:hover,
.fusion-blog-layout-grid .entry-title a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    opacity: 0.85;
}

/* ==========================================================================
   Formulaires Gravity Forms — Design aligné sur le module natif Avada
   (inputs underlined, bouton noir, hover rouge Vauban)
   Cible les classes officielles Gravity Forms : .gform_wrapper, .gfield, .gform_button
   ========================================================================== */

/* --- Wrapper global du form ------------------------------------------ */

.gform_wrapper,
.gform_wrapper.gravity-theme,
.gform_wrapper.gform-theme--orbital,
.gform_wrapper.gform-theme--framework {
    font-family: 'Mulish', sans-serif;
    max-width: 100%;
    color: #1a1a1a;
}

.gform_wrapper form {
    margin: 0 !important;
}

/* Réinitialise le list-style et padding de la liste de champs */
.gform_wrapper .gform_fields,
.gform_wrapper ul.gform_fields {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* --- Fields wrapper -------------------------------------------------- */

.gform_wrapper .gfield {
    margin-bottom: 24px !important;
    padding: 0 !important;
    list-style: none !important;
    background: transparent !important;
}

.gform_wrapper .gfield:last-of-type {
    margin-bottom: 16px !important;
}

/* --- Labels : visibles mais discrets -------------------------------- */

.gform_wrapper .gfield_label,
.gform_wrapper label.gfield_label {
    display: block !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #6a6a6a !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0.2px !important;
    line-height: 1.4 !important;
}

/* Masque complètement le texte "(Nécessaire)" / "(Required)" */
.gform_wrapper .gfield_required_text,
.gform_wrapper .gfield_required > .gfield_required_text {
    display: none !important;
    visibility: hidden !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Garde uniquement l'astérisque (toutes versions de Gravity Forms) en rouge Vauban */
.gform_wrapper .gfield_required,
.gform_wrapper .gfield_required_asterisk {
    color: var(--awb-color6) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-left: 4px !important;
    background: transparent !important;
    border: none !important;
    text-transform: none !important;
    display: inline !important;
}

/* --- Inputs (text, email, tel, url, number, select, textarea) ------- */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="password"],
.gform_wrapper input[type="date"],
.gform_wrapper input[type="datetime-local"],
.gform_wrapper input[type="time"],
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper .ginput_container input,
.gform_wrapper .ginput_container select,
.gform_wrapper .ginput_container textarea {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 0 !important;
    border: none !important;
    border-bottom: 1px solid #d0d0d0 !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    transition: border-color 0.2s ease !important;
    line-height: 1.5 !important;
    outline: none !important;
    height: auto !important;
}

.gform_wrapper textarea {
    height: 64px !important;       /* override l'attribut rows du HTML */
    min-height: 56px !important;
    max-height: 180px !important;
    resize: vertical !important;
    padding: 8px 0 !important;
    line-height: 1.5 !important;
}

/* États focus / hover */
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    outline: none !important;
    border-bottom-color: var(--awb-color6) !important;
    border-bottom-width: 2px !important;
    box-shadow: none !important;
}

.gform_wrapper input:hover:not(:focus):not([type="submit"]):not([type="button"]),
.gform_wrapper textarea:hover:not(:focus),
.gform_wrapper select:hover:not(:focus) {
    border-bottom-color: #999 !important;
}

/* Placeholder style */
.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
    color: #aaaaaa !important;
    font-style: normal !important;
    opacity: 1 !important;
}

/* --- Select : chevron custom (au lieu du chevron natif moche) -------- */

.gform_wrapper select {
    padding-right: 30px !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    background-size: 16px !important;
    cursor: pointer !important;
}

/* --- Checkboxes & radios ------------------------------------------- */

.gform_wrapper input[type="checkbox"],
.gform_wrapper input[type="radio"] {
    width: auto !important;
    margin-right: 8px !important;
    accent-color: var(--awb-color6) !important;
    transform: scale(1.1);
}

.gform_wrapper .gfield_checkbox label,
.gform_wrapper .gfield_radio label,
.gform_wrapper .gchoice label {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4a4a4a !important;
    cursor: pointer !important;
    gap: 8px !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

.gform_wrapper .gfield_checkbox .gchoice,
.gform_wrapper .gfield_radio .gchoice {
    margin: 6px 0 !important;
}

/* --- Layout : grille 12 colonnes (système Bootstrap-like) ------------ */

.gform_wrapper .gform_fields {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: 24px 20px !important;
    width: 100% !important;
}

/* Par défaut, chaque champ prend toute la largeur */
.gform_wrapper .gfield {
    grid-column: span 12 !important;
}

/* Modificateurs de largeur Gravity Forms (toutes versions) */
.gform_wrapper .gfield--width-full {
    grid-column: span 12 !important;
}

.gform_wrapper .gfield--width-three-quarter,
.gform_wrapper .gf_left_three_fourth,
.gform_wrapper .gf_right_three_fourth {
    grid-column: span 9 !important;
}

.gform_wrapper .gfield--width-two-thirds,
.gform_wrapper .gf_left_two_thirds,
.gform_wrapper .gf_right_two_thirds {
    grid-column: span 8 !important;
}

.gform_wrapper .gfield--width-half,
.gform_wrapper .gf_left_half,
.gform_wrapper .gf_right_half {
    grid-column: span 6 !important;
}

.gform_wrapper .gfield--width-third,
.gform_wrapper .gf_left_third,
.gform_wrapper .gf_middle_third,
.gform_wrapper .gf_right_third {
    grid-column: span 4 !important;
}

.gform_wrapper .gfield--width-quarter {
    grid-column: span 3 !important;
}

/* Responsive : tout en 1 colonne sur mobile */
@media (max-width: 600px) {
    .gform_wrapper .gfield--width-half,
    .gform_wrapper .gfield--width-third,
    .gform_wrapper .gfield--width-quarter,
    .gform_wrapper .gfield--width-three-quarter,
    .gform_wrapper .gfield--width-two-thirds,
    .gform_wrapper .gf_left_half,
    .gform_wrapper .gf_right_half,
    .gform_wrapper .gf_left_third,
    .gform_wrapper .gf_middle_third,
    .gform_wrapper .gf_right_third {
        grid-column: span 12 !important;
    }
}

/* --- Bouton submit : noir Avada, hover rouge Vauban ------------------ */

.gform_wrapper .gform_footer,
.gform_wrapper .gform_page_footer {
    padding: 0 !important;
    margin-top: 24px !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper .gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper .gform-theme-button,
.gform_wrapper .gform_button.button {
    display: inline-block !important;
    width: 100% !important;
    padding: 16px 32px !important;
    background-color: #1a1a1a !important;
    background-image: none !important;
    border: 2px solid #1a1a1a !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease !important;
    box-shadow: none !important;
    line-height: 1.2 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    height: auto !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper .gform_button:hover,
.gform_wrapper button.gform_button:hover,
.gform_wrapper .gform-theme-button:hover {
    background-color: var(--awb-color6) !important;
    border-color: var(--awb-color6) !important;
    color: #ffffff !important;
}

.gform_wrapper input[type="submit"]:focus,
.gform_wrapper .gform_button:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(193, 2, 49, 0.2) !important;
}

/* --- Messages d'erreur --------------------------------------------- */

.gform_wrapper .gfield_error label,
.gform_wrapper .gfield_error .gfield_label {
    color: var(--awb-color6) !important;
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea,
.gform_wrapper .gfield_error select {
    border-bottom-color: var(--awb-color6) !important;
    border-bottom-width: 2px !important;
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message,
.gform_wrapper .gfield_description.validation_message {
    color: var(--awb-color6) !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 6px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Bannière d'erreurs en haut du form (résumé) */
.gform_wrapper .gform_validation_errors {
    border: 1px solid var(--awb-color6) !important;
    background-color: rgba(193, 2, 49, 0.05) !important;
    border-radius: 4px !important;
    padding: 16px 20px !important;
    margin-bottom: 20px !important;
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_submission_error {
    color: var(--awb-color6) !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* --- Message de confirmation après submit -------------------------- */

.gform_confirmation_message,
.gform_confirmation_wrapper {
    font-family: 'Mulish', sans-serif !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    padding: 20px 0 !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
}

/* --- Description / sous-texte des champs --------------------------- */

.gform_wrapper .gfield_description,
.gform_wrapper .ginput_counter {
    color: #888 !important;
    font-size: 12px !important;
    margin-top: 4px !important;
    font-family: 'Mulish', sans-serif !important;
}

/* --- Spinner / loading state --------------------------------------- */

.gform_wrapper .gform_ajax_spinner {
    margin-left: 12px !important;
}

/* --- Fix multi-select : largeur 100% + style underlined ------------- */

/* Le container du multi-select prend toute la largeur */
.gform_wrapper .ginput_container_multiselect,
.gform_wrapper [data-field-type="multi_choice"],
.gform_wrapper [data-field-type="multiselect"] {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* La zone cliquable visible (button/combobox) : style underlined comme les inputs */
.gform_wrapper [class*="multi"] button[type="button"]:not([class*="search-choice"]):not([class*="remove"]):not([class*="close"]),
.gform_wrapper [class*="multi"] [role="combobox"],
.gform_wrapper [class*="multi"] [role="button"]:not([class*="remove"]):not([class*="close"]),
.gform_wrapper .gform-field-multipleChoice > button,
.gform_wrapper .gform-field-multipleChoice > div > button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-radius: 0 !important;
    padding: 10px 22px 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    box-shadow: none !important;
    color: #1a1a1a !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    height: auto !important;
    min-height: 40px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
}

/* État focus du button : border rouge Vauban */
.gform_wrapper [class*="multi"] button[type="button"]:focus,
.gform_wrapper [class*="multi"] [role="combobox"]:focus {
    outline: none !important;
    border-bottom-color: var(--awb-color6) !important;
    border-bottom-width: 2px !important;
}

/* ==========================================================================
   Chosen library — restyle complet pour matcher le design Avada underlined
   ========================================================================== */

/* Container Chosen : reset son look "box" par défaut, applique underlined */
.gform_wrapper .chosen-container,
.gform_wrapper .chosen-container-multi,
.gform_wrapper .chosen-container-single {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
}

/* La "fake input" zone des choix : underlined, transparent */
.gform_wrapper .chosen-container .chosen-choices,
.gform_wrapper .chosen-container-multi .chosen-choices,
.gform_wrapper .chosen-container-single .chosen-single {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-bottom: 1px solid #d0d0d0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 0 6px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 40px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

/* État focus */
.gform_wrapper .chosen-container-active .chosen-choices,
.gform_wrapper .chosen-container-active .chosen-single,
.gform_wrapper .chosen-container.chosen-with-drop .chosen-choices,
.gform_wrapper .chosen-container.chosen-with-drop .chosen-single {
    border-bottom-color: var(--awb-color6) !important;
    border-bottom-width: 2px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* L'input de recherche dans Chosen : 100% de largeur, override le style inline JS */
.gform_wrapper .chosen-container .chosen-choices .search-field input.chosen-search-input,
.gform_wrapper .chosen-container input.chosen-search-input,
.gform_wrapper input.chosen-search-input,
.gform_wrapper input.chosen-search-input.default {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    color: #aaaaaa !important;
    font-family: 'Mulish', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    height: auto !important;
    outline: none !important;
    box-shadow: none !important;
}

/* La zone .search-field doit aussi prendre 100% pour que l'input puisse s'étirer */
.gform_wrapper .chosen-container .chosen-choices .search-field {
    width: 100% !important;
    flex: 1 1 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Si le placeholder est dans la classe "default", il est en italique par défaut → on l'enlève */
.gform_wrapper input.chosen-search-input.default {
    color: #aaaaaa !important;
    font-style: normal !important;
}

/* Les pills (.search-choice) : rouge Vauban, blanches à l'intérieur */
.gform_wrapper .chosen-container .chosen-choices .search-choice,
.gform_wrapper .chosen-choices .search-choice {
    background: var(--awb-color6) !important;
    background-color: var(--awb-color6) !important;
    background-image: none !important;
    border: 1px solid var(--awb-color6) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    padding: 4px 28px 4px 12px !important;
    margin: 2px 4px 2px 0 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    position: relative !important;
}

/* Texte de la pill */
.gform_wrapper .chosen-choices .search-choice span {
    color: #ffffff !important;
    background: transparent !important;
}

/* Bouton "x" pour retirer une sélection */
.gform_wrapper .chosen-choices .search-choice-close {
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
    opacity: 0.85 !important;
    border: none !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    position: absolute !important;
    margin: 0 !important;
    padding: 0 !important;
}

.gform_wrapper .chosen-choices .search-choice-close::before {
    content: '×' !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.gform_wrapper .chosen-choices .search-choice-close:hover {
    opacity: 1 !important;
}

/* Le dropdown panel (liste des options qui s'ouvre) */
.gform_wrapper .chosen-container .chosen-drop {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    margin-top: 4px !important;
}

.gform_wrapper .chosen-container .chosen-results li {
    padding: 10px 16px !important;
    font-size: 14px !important;
    font-family: 'Mulish', sans-serif !important;
    color: #1a1a1a !important;
}

.gform_wrapper .chosen-container .chosen-results li.highlighted {
    background: var(--awb-color6) !important;
    background-image: none !important;
    color: #ffffff !important;
}

.gform_wrapper .chosen-container .chosen-results li.result-selected {
    background: rgba(193, 2, 49, 0.1) !important;
    color: var(--awb-color6) !important;
    font-weight: 600 !important;
}

/* --- Pills / chips des choix sélectionnés : rouge Vauban ----------- */

/* Cible toutes les variantes de "tag"/"pill"/"chip" Gravity Forms et Chosen */
.gform_wrapper [class*="multi"] [aria-selected="true"],
.gform_wrapper [class*="multi"] [class*="selected"][class*="item"],
.gform_wrapper [class*="multi"] [class*="tag"],
.gform_wrapper [class*="multi"] [class*="pill"],
.gform_wrapper [class*="multi"] [class*="chip"],
.gform_wrapper [class*="multi"] [class*="badge"],
.gform_wrapper [class*="multi"] li[class*="search-choice"],
.gform_wrapper .chosen-choices .search-choice {
    background-color: var(--awb-color6) !important;
    background: var(--awb-color6) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid var(--awb-color6) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

/* Texte à l'intérieur de la pill */
.gform_wrapper [class*="multi"] [class*="tag"] span,
.gform_wrapper [class*="multi"] [class*="pill"] span,
.gform_wrapper [class*="multi"] [class*="chip"] span,
.gform_wrapper .chosen-choices .search-choice span {
    color: #ffffff !important;
    background: transparent !important;
}

/* Bouton "x" pour retirer la sélection */
.gform_wrapper [class*="multi"] [class*="tag"] button,
.gform_wrapper [class*="multi"] [class*="tag"] [class*="close"],
.gform_wrapper [class*="multi"] [class*="tag"] [class*="remove"],
.gform_wrapper [class*="multi"] [class*="pill"] button,
.gform_wrapper [class*="multi"] [class*="pill"] [class*="close"],
.gform_wrapper [class*="multi"] [class*="chip"] button,
.gform_wrapper .chosen-choices .search-choice-close {
    color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;
    opacity: 0.85 !important;
    border: none !important;
}

.gform_wrapper [class*="multi"] [class*="tag"] button:hover,
.gform_wrapper [class*="multi"] [class*="tag"] [class*="close"]:hover,
.gform_wrapper [class*="multi"] [class*="pill"] button:hover,
.gform_wrapper .chosen-choices .search-choice-close:hover {
    opacity: 1 !important;
    color: #ffffff !important;
}

/* --- Masque la flèche custom Gravity Forms (.select-arrow) -------- */

/* Gravity Forms (ou son plugin Chosen) injecte un <div class="select-arrow">
   pour décorer les selects multi-choix. Notre CSS dessine déjà un chevron
   dans le background du <select> lui-même, donc on neutralise ce div. */
.gform_wrapper .select-arrow,
.gform_wrapper div.select-arrow,
.gform_wrapper .ginput_container .select-arrow {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    left: auto !important;
    top: auto !important;
    position: static !important;
}

/* --- Responsive (bouton mobile) ----------------------------------- */

@media (max-width: 600px) {
    .gform_wrapper input[type="submit"],
    .gform_wrapper .gform_button {
        padding: 14px 24px !important;
        font-size: 13px !important;
    }
}

/* ==========================================================================
   FIX MOBILE — Chosen.js désactive son widget custom sur tactile et laisse
   le natif <select multiple> qui se rend en liste plate sans box.
   Ici on lui redonne un aspect propre.
   ========================================================================== */

@media (max-width: 768px) {
    /* Force le natif <select multiple> à avoir une apparence de champ propre */
    .gform_wrapper select[multiple],
    .gform_wrapper .chosen-container select[multiple] {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box !important;
        min-height: 180px !important;
        max-height: 250px !important;
        padding: 8px 10px !important;
        border: 1px solid #d0d0d0 !important;
        border-radius: 4px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #1a1a1a !important;
        font-family: 'Mulish', sans-serif !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        overflow-y: auto !important;
        -webkit-appearance: listbox !important;
        appearance: listbox !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Focus state : border rouge Vauban */
    .gform_wrapper select[multiple]:focus,
    .gform_wrapper select[multiple]:active {
        border-color: var(--awb-color6) !important;
        border-width: 2px !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(193, 2, 49, 0.1) !important;
    }

    /* Options à l'intérieur */
    .gform_wrapper select[multiple] option {
        padding: 10px 12px !important;
        font-size: 14px !important;
        font-family: 'Mulish', sans-serif !important;
        background: #ffffff !important;
        color: #1a1a1a !important;
        border: none !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    /* Option sélectionnée : rouge Vauban, texte blanc */
    .gform_wrapper select[multiple] option:checked,
    .gform_wrapper select[multiple] option[selected] {
        background: var(--awb-color6) !important;
        background-color: var(--awb-color6) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        /* Astuce pour forcer la couleur sur Safari iOS qui ignore parfois */
        -webkit-text-fill-color: #ffffff !important;
        background-image: linear-gradient(var(--awb-color6), var(--awb-color6)) !important;
    }

    /* Option hover (effet pas tactile mais utile sur tablette avec souris) */
    .gform_wrapper select[multiple] option:hover {
        background: rgba(193, 2, 49, 0.1) !important;
        color: var(--awb-color6) !important;
    }

    /* Aide visuelle : ajoute un petit texte d'aide sous le champ */
    .gform_wrapper select[multiple]::after {
        content: 'Touchez pour sélectionner plusieurs options';
        display: block;
        font-size: 12px;
        color: #888;
        margin-top: 6px;
        font-style: italic;
    }

    /* Cache complètement le widget Chosen sur mobile (il est cassé de toute façon) */
    .gform_wrapper .chosen-container.chosen-container-multi {
        display: none !important;
    }

    /* Force le <select> natif à être visible sur mobile (Chosen le cache normalement) */
    .gform_wrapper select.chosen-select[multiple],
    .gform_wrapper select[multiple].chosen-select {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
        width: 100% !important;
        clip: auto !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   Typographie des titres dans le contenu d'un article (Single Post)
   Ciblé pour ne pas affecter d'autres pages
   ========================================================================== */

/* Sélecteurs très larges avec !important pour surpasser la spécificité d'Avada.
   On exclut explicitement les zones du Page Title Bar et de la TOC pour ne pas les casser. */

body:is(.single-post, .single-interviews) .fusion-post-content h2,
body:is(.single-post, .single-interviews) .post-content h2,
body:is(.single-post, .single-interviews) .entry-content h2,
body:is(.single-post, .single-interviews) .fusion-text h2,
body:is(.single-post, .single-interviews) .fusion-builder-row .fusion-text h2,
body:is(.single-post, .single-interviews) .fusion-layout-column h2:not(.fusion-title-heading):not(.fusion-toc-title) {
    font-size: 38px !important;
    line-height: 1.25 !important;
    color: #C10231 !important;                    /* rouge Vauban — titres article */
    font-weight: 700 !important;
    margin-top: 40px !important;
    margin-bottom: 18px !important;
}

body:is(.single-post, .single-interviews) .fusion-post-content h3,
body:is(.single-post, .single-interviews) .post-content h3,
body:is(.single-post, .single-interviews) .entry-content h3,
body:is(.single-post, .single-interviews) .fusion-text h3,
body:is(.single-post, .single-interviews) .fusion-builder-row .fusion-text h3,
body:is(.single-post, .single-interviews) .fusion-layout-column h3:not(.fusion-title-heading) {
    font-size: 24px !important;
    line-height: 1.3 !important;
    color: #C10231 !important;                    /* rouge Vauban — titres article */
    font-weight: 700 !important;
    margin-top: 32px !important;
    margin-bottom: 14px !important;
}

body:is(.single-post, .single-interviews) .fusion-post-content h4,
body:is(.single-post, .single-interviews) .post-content h4,
body:is(.single-post, .single-interviews) .entry-content h4,
body:is(.single-post, .single-interviews) .fusion-text h4 {
    font-size: 18px !important;
    line-height: 1.4 !important;
    color: #C10231 !important;                    /* rouge Vauban — titres article */
    font-weight: 700 !important;
    margin-top: 24px !important;
    margin-bottom: 10px !important;
}

/* Responsive : un cran en dessous sur mobile */
@media (max-width: 768px) {
    body:is(.single-post, .single-interviews) .fusion-post-content h2,
    body:is(.single-post, .single-interviews) .post-content h2,
    body:is(.single-post, .single-interviews) .entry-content h2,
    body:is(.single-post, .single-interviews) .fusion-text h2 {
        font-size: 30px !important;
    }
    body:is(.single-post, .single-interviews) .fusion-post-content h3,
    body:is(.single-post, .single-interviews) .post-content h3,
    body:is(.single-post, .single-interviews) .entry-content h3,
    body:is(.single-post, .single-interviews) .fusion-text h3 {
        font-size: 21px !important;
    }
}

/* ==========================================================================
   Table des Matières — Toggle élégant (module natif Avada) - style BDM
   Comportement : fermée par défaut, header cliquable, chevron animé.
   Le JS du toggle est injecté via functions.php (vauban_toc_toggle_script).
   ========================================================================== */

/* Container principal */
:is(.single-post, .single-interviews) .awb-toc-el,
:is(.single-post, .single-interviews) .fusion-toc-wrapper,
:is(.single-post, .single-interviews) .fusion-toc,
:is(.single-post, .single-interviews) .fusion-toc-content,
:is(.single-post, .single-interviews) .awb-toc,
:is(.single-post, .single-interviews) [class*="fusion-toc"],
:is(.single-post, .single-interviews) [class*="awb-toc"] {
    border-radius: 4px;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-family: 'Mulish', sans-serif;
    overflow: hidden;
}

/* Neutralise le sous-conteneur Avada vide (la liste a été déplacée par le JS) */
:is(.single-post, .single-interviews) .vauban-toc-wrapper .awb-toc-el__content,
:is(.single-post, .single-interviews) .vauban-toc-wrapper .fusion-toc-content {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    display: none;       /* on le cache car vide après que le JS ait déplacé la liste */
}

/* Header cliquable (injecté en JS) */
:is(.single-post, .single-interviews) .vauban-toc-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    cursor: pointer;
    user-select: none;
    background: #ffffff !important;
    border: none !important;
    font: inherit;
    text-align: left;
    transition: background-color 0.2s ease;
}

:is(.single-post, .single-interviews) .vauban-toc-header:hover {
    background: #fafafa;
}

:is(.single-post, .single-interviews) .vauban-toc-header:focus {
    outline: 2px solid var(--awb-color6);
    outline-offset: -2px;
}

/* Label "Sommaire" avec icône */
:is(.single-post, .single-interviews) .vauban-toc-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--awb-color6);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

:is(.single-post, .single-interviews) .vauban-toc-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf1e2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='8' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='8' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='8' y1='18' x2='21' y2='18'%3e%3c/line%3e%3cline x1='3' y1='6' x2='3.01' y2='6'%3e%3c/line%3e%3cline x1='3' y1='12' x2='3.01' y2='12'%3e%3c/line%3e%3cline x1='3' y1='18' x2='3.01' y2='18'%3e%3c/line%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Chevron animé */
:is(.single-post, .single-interviews) .vauban-toc-chevron {
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bf1e2e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
}

:is(.single-post, .single-interviews) .vauban-toc-wrapper[data-toc-open="true"] .vauban-toc-chevron {
    transform: rotate(180deg);
}

/* Contenu (liste) - caché par défaut */
:is(.single-post, .single-interviews) .vauban-toc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
}

:is(.single-post, .single-interviews) .vauban-toc-wrapper[data-toc-open="true"] .vauban-toc-body {
    max-height: 1000px;        /* assez grand pour ne pas tronquer */
    padding: 14px 20px 16px 20px;
    border-top: 1px solid #f0f0f0;
}

/* ==========================================================================
   TOC - Force la couleur rouge Vauban sur les icônes/décorations
   (par défaut Avada met une icône fa-flag noire devant chaque item)
   ========================================================================== */

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor i,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item i,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor svg,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item svg,
:is(.single-post, .single-interviews) .vauban-toc-body .fas,
:is(.single-post, .single-interviews) .vauban-toc-body .fa,
:is(.single-post, .single-interviews) .vauban-toc-body .far,
:is(.single-post, .single-interviews) .vauban-toc-body .fab,
:is(.single-post, .single-interviews) .vauban-toc-body [class*="fa-"]:not(.vauban-toc-icon):not(.vauban-toc-chevron),
:is(.single-post, .single-interviews) .vauban-toc-body [class*="awb-icon"] {
    color: var(--awb-color6) !important;
    fill: var(--awb-color6) !important;
    stroke: var(--awb-color6) !important;
    background-color: transparent !important;
    border-color: var(--awb-color6) !important;
}

/* Si Avada utilise un pseudo-élément ::before pour l'icône */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item::before,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor::before {
    color: var(--awb-color6) !important;
    background-color: transparent !important;
}

/* ==========================================================================
   Liste de la TOC — Numérotation hiérarchique style BDM (1., 1.1, 1.1.a)
   Via CSS counters pour un contrôle total sur le format.
   ========================================================================== */

/* Reset des markers natifs des listes (sans toucher aux counters l1/l2/l3) */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list,
:is(.single-post, .single-interviews) .vauban-toc-body ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide les icônes fa-flag (et autres FA) d'Avada à l'intérieur de la TOC */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor i,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item i,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor svg,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item svg,
:is(.single-post, .single-interviews) .vauban-toc-body .fas,
:is(.single-post, .single-interviews) .vauban-toc-body .fa,
:is(.single-post, .single-interviews) .vauban-toc-body .far,
:is(.single-post, .single-interviews) .vauban-toc-body .fab,
:is(.single-post, .single-interviews) .vauban-toc-body [class*="fa-"]:not(.vauban-toc-icon):not(.vauban-toc-chevron) {
    display: none !important;
}

/* Avada injecte parfois l'icône via ::before/::after sur le <a> directement,
   ou via background-image. On neutralise tout ça pour ne laisser QUE notre numéro. */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor::before,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor::after,
:is(.single-post, .single-interviews) .vauban-toc-body a::before,
:is(.single-post, .single-interviews) .vauban-toc-body a::after,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item > a::before,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item > a::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    border: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Et neutralise les éventuels border-left / background-image sur le <a> lui-même */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor,
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item > a {
    background: transparent !important;
    background-image: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    text-indent: 0 !important;
}

/* Reset des counters au niveau du body de la TOC (point de départ global) */
:is(.single-post, .single-interviews) .vauban-toc-body {
    counter-reset: vauban-toc-l1 vauban-toc-l2 vauban-toc-l3;
}

/* ----- NIVEAU 1 (H2) → "1.", "2.", "3." ------------------------------------ */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--0 > .awb-toc-el__list-item {
    counter-increment: vauban-toc-l1;
    position: relative;
    margin: 0 0 8px !important;
    padding: 0 0 0 32px !important;
    line-height: 1.5;
    color: #2a2a2a;
    font-size: 13px;
    list-style: none !important;
    background: transparent !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--0 > .awb-toc-el__list-item::before {
    content: counter(vauban-toc-l1) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--awb-color6) !important;
    font-weight: 700;
    font-size: 13px;
    min-width: 26px;
    display: inline-block;
    background: transparent !important;
}

/* Réinitialise les sous-compteurs à chaque nouveau H2 */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--0 > .awb-toc-el__list-item {
    counter-reset: vauban-toc-l2 vauban-toc-l3;
}

/* ----- NIVEAU 2 (H3) → "1.1", "1.2", "3.1" -------------------------------- */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--1 {
    margin: 8px 0 0 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--1 > .awb-toc-el__list-item {
    counter-increment: vauban-toc-l2;
    counter-reset: vauban-toc-l3;
    position: relative;
    margin: 0 0 6px !important;
    padding: 0 0 0 44px !important;
    list-style: none !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--1 > .awb-toc-el__list-item::before {
    content: counter(vauban-toc-l1) "." counter(vauban-toc-l2);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--awb-color6) !important;
    font-weight: 700;
    font-size: 13px;
    min-width: 38px;
    display: inline-block;
    background: transparent !important;
}

/* ----- NIVEAU 3 (H4) → "1.1.a", "1.1.b", "3.1.a" -------------------------- */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--2 {
    margin: 6px 0 0 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--2 > .awb-toc-el__list-item {
    counter-increment: vauban-toc-l3;
    position: relative;
    margin: 0 0 4px !important;
    padding: 0 0 0 56px !important;
    list-style: none !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list--2 > .awb-toc-el__list-item::before {
    content: counter(vauban-toc-l1) "." counter(vauban-toc-l2) "." counter(vauban-toc-l3, lower-alpha);
    position: absolute;
    left: 0;
    top: 0;
    color: var(--awb-color6) !important;
    font-weight: 700;
    font-size: 13px;
    min-width: 50px;
    display: inline-block;
    background: transparent !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__list-item:last-child {
    margin-bottom: 0 !important;
}

/* Liens (classe réelle Avada : .awb-toc-el__item-anchor) — rouge Vauban + underline au hover */
:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor,
:is(.single-post, .single-interviews) .vauban-toc-body a {
    color: var(--awb-color6) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
    display: inline-block;
    background: transparent !important;
    line-height: 1.5;
    padding: 0 !important;
    border: none !important;
}

:is(.single-post, .single-interviews) .vauban-toc-body .awb-toc-el__item-anchor:hover,
:is(.single-post, .single-interviews) .vauban-toc-body a:hover {
    color: var(--awb-color6) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* Masquer le titre natif d'Avada (s'il y en a un) car on a notre header */
:is(.single-post, .single-interviews) .vauban-toc-wrapper > .fusion-toc-title,
:is(.single-post, .single-interviews) .vauban-toc-wrapper > .fusion-toc h3:first-child,
:is(.single-post, .single-interviews) .vauban-toc-wrapper > h3:first-of-type,
:is(.single-post, .single-interviews) .vauban-toc-wrapper [class*="title"]:not(.vauban-toc-label):not(.vauban-toc-header) {
    display: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    :is(.single-post, .single-interviews) .fusion-toc-wrapper,
    :is(.single-post, .single-interviews) .fusion-toc,
    :is(.single-post, .single-interviews) .fusion-toc-content,
    :is(.single-post, .single-interviews) .awb-toc,
    :is(.single-post, .single-interviews) [class*="fusion-toc"],
    :is(.single-post, .single-interviews) [class*="awb-toc"] {
        margin: 0 auto 24px;
    }
    :is(.single-post, .single-interviews) .vauban-toc-header {
        padding: 12px 16px;
    }
    :is(.single-post, .single-interviews) .vauban-toc-label {
        font-size: 12px;
    }
}
/* Souligner uniquement les liens cliquables du fil d'Ariane */
.fusion-breadcrumbs a {
    text-decoration: underline !important;
}

/* Étape 1 : Masquer le texte original en anglais */
#toc_Related_Posts {
    display: none;
}