/* ==========================================================================
   TFBank — Rouge de la charte (#D71920) sur les interfaces du site
   Le header n'est pas concerné : il garde ses couleurs d'origine.
   Le logo n'est jamais modifié.
   ========================================================================== */

/* ── 0. Rouge TFBank (variables du thème et de Bootstrap) ───────────────── */
:root {
    --tf-brand-red: #D71920;
    --tf-brand-red-dark: #B2151B;    /* survol */
    --tf-brand-red-rgb: 215, 25, 32;
    --tf-red: var(--tf-brand-red);
    --tf-red-dark: var(--tf-brand-red-dark);
    --tf-red-light: #DF474D;
    --bs-danger: var(--tf-brand-red);
    --bs-danger-rgb: var(--tf-brand-red-rgb);
}

/* ── 1. Header : charte d'origine du thème, inchangée ──────────────────── */
/* Le header (barre du haut, menu, bouton client, panneau mobile) garde exactement
   ses couleurs d'origine : on lui rend les rouges du thème. */
#site-header,
#mobile-nav-panel {
    --tf-red: #D31018;
    --tf-red-dark: #B00E14;
    --tf-red-light: #E8333A;
    --bs-danger: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
}

/* Footer : fond blanc et ligne rouge TFBank pleine largeur en haut
   (remplace le filet gris d'origine) */
html body .site-footer {
    background: #FFFFFF;
    border-top: 3px solid #D71920;
}

/* Header : ligne rouge TFBank pleine largeur en haut, barre Noir encre en bas ;
   les deux suivent le header (sticky) au défilement */
#site-header {
    border-top: 3px solid #D71920;
    border-bottom: 4px solid #17191C;
}

/* Header : icône de recherche de la maquette (SVG dans header.php, à la place de
   bi-search). Loupe 22×22 au trait fin gris #7C7C7C ; au survol, la couleur du
   bouton (rouge du header), comme avant. */
.header-search-icon {
    display: block;
    color: #7C7C7C;
}
.header-search-btn:hover .header-search-icon {
    color: inherit;
}
/* Écart loupe → « Ouvrir un compte » de la maquette (16 px) ; le lien est masqué
   sous 1180px (style.css) */
@media (min-width: 1181px) {
    .header-search-btn {
        margin-right: 4px;
    }
}

/* ── 4. Rouges codés en dur dans le thème (style.css) → rouge TFBank ───── */
html body .btn-primary:hover       { box-shadow: 0 8px 24px rgba(var(--tf-brand-red-rgb), .4); }
html body .besoin-sticker          { box-shadow: 0 15px 40px rgba(var(--tf-brand-red-rgb), .35); }
html body .btn-besoin-cta:hover    { box-shadow: 0 15px 30px rgba(var(--tf-brand-red-rgb), .25); }

html body .wpcf7 .form-label .text-danger,
html body .wpcf7 label .text-danger,
html body .text-danger {
    color: var(--tf-brand-red) !important;
}
html body .wpcf7 .form-control:focus,
html body .wpcf7 input[type="text"]:focus,
html body .wpcf7 input[type="tel"]:focus,
html body .wpcf7 input[type="email"]:focus,
html body .wpcf7 input[type="date"]:focus,
html body .wpcf7 textarea:focus {
    border-color: var(--tf-brand-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--tf-brand-red-rgb), .10) !important;
}
html body .wpcf7 input.wpcf7-submit,
html body .btn-submit-rdv {
    background: var(--tf-brand-red) !important;
}
html body .wpcf7 input.wpcf7-submit:hover,
html body .btn-submit-rdv:hover {
    background: var(--tf-brand-red-dark) !important;
    box-shadow: 0 8px 20px rgba(var(--tf-brand-red-rgb), .25) !important;
}

/* ── 5. Couleurs du Customizer (functions.php) ──────────────────────────── */
html body .pret-section {
    --pret-title-red-color: var(--tf-brand-red);
    --pret-link-color: var(--tf-brand-red);
}
html body .agences-split { --agences-bg-color: var(--tf-brand-red); }
html body .besoin-item-icon i,
html body .besoin-item-icon img { color: var(--tf-brand-red) !important; }
html body .besoin-content .btn-besoin-cta { background: var(--tf-brand-red) !important; }

/* ── 6. Rouges codés en dur dans les templates de pages ─────────────────── */
html body .flexible-hero .title-accent     { background-color: var(--tf-brand-red); }
html body .split-title p span,
html body .split-title span                { color: var(--tf-brand-red) !important; }
html body .nav-tabs .nav-link.active       { color: var(--tf-brand-red) !important;
                                             border-bottom-color: var(--tf-brand-red) !important; }
html body .check-list li i,
html body .card-rich-content ul li i.bi-check2,
html body .card-rich-content ul li:before  { color: var(--tf-brand-red); }
html body .charte-section .charte-block-content ul li::before { color: var(--tf-brand-red); }
html body .btn-doc-submit                  { background-color: var(--tf-brand-red); }
html body .btn-doc-submit:hover            { background-color: var(--tf-brand-red-dark); }
html body .partner-block:hover             { border-color: var(--tf-brand-red); }
html body .engag-title-wrapper h2 span.text-danger,
html body .engag-title-wrapper h2 strong   { color: var(--tf-brand-red) !important; }
html body .offre-card:hover                { border-color: rgba(var(--tf-brand-red-rgb), .53); }
html body .swact-link-box:hover            { border-color: rgba(var(--tf-brand-red-rgb), .53) !important; }
html body .offdt-card-content ul li::before,
html body .conditions-content ul li::before,
html body .conditions-content sup          { color: var(--tf-brand-red); }

/* Formulaires : ouverture de compte, rendez-vous, contact */
html body .account-opening-section .form-control:focus,
html body .account-opening-section .form-select:focus,
html body .rdv-section .form-control:focus,
html body .rdv-section .form-select:focus,
html body .contact-section .form-control:focus,
html body .contact-section .form-select:focus { border-color: var(--tf-brand-red) !important; }
html body .account-opening-section .btn-submit-account,
html body .rdv-section .btn-submit-rdv,
html body .contact-section .btn-submit-contact { background-color: var(--tf-brand-red); }
html body .account-opening-section .btn-submit-account:hover,
html body .rdv-section .btn-submit-rdv:hover,
html body .contact-section .btn-submit-contact:hover { background-color: var(--tf-brand-red-dark); }
html body .rdv-section .nav-tabs .nav-link.active,
html body .contact-section .nav-tabs .nav-link.active {
    color: var(--tf-brand-red) !important;
    border-bottom-color: var(--tf-brand-red) !important;
}

/* Convertisseur de devises */
html body .conv-field                   { border-color: var(--tf-brand-red); }
html body .conv-field:focus-within      { border-color: var(--tf-brand-red);
                                          box-shadow: 0 0 0 3px rgba(var(--tf-brand-red-rgb), .13); }
html body .cur-chevron,
html body .cur-option.active            { color: var(--tf-brand-red); }
html body .swap-btn                     { border-color: var(--tf-brand-red); }

/* ── 6 bis. Titres des bandeaux : barre rouge SOUS le titre ─────────────── */
/* Remplace le trait vertical à gauche. Proportions de la maquette de référence
   (barre 57×5 px sous un titre d'environ 22 px), en em pour suivre la taille du titre. */
html body .hero-title-only,
html body .agences-hero h1 span,
html body .converter-hero .hero-title {
    border-left: 0;
    padding-left: 0;
}
html body .converter-hero .title-accent {
    display: none;
}
html body .hero-title-only::after,
html body .agences-hero h1::after,
html body .converter-hero .hero-title::after {
    content: "";
    display: block;
    width: 2.6em;
    height: .22em;
    margin-top: .3em;
    background: var(--tf-brand-red);
}
/* Sur mobile, .hero-content centre le titre (style.css) : la barre suit */
@media (max-width: 768px) {
    html body .hero-content .hero-title-only::after {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── 6 quater. Bandeau clair des pages (template « alternating ») ─────────────
   Photo éclaircie à gauche (Blanc minéral), texte foncé, sur-titre, barre rouge
   sous le titre, points clés et phrase d'accroche (champs optionnels du bloc Hero).
   Le bouton garde son style. */
html body .flexible-hero--light .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .9) 38%, rgba(245, 245, 242, 0) 65%);
    pointer-events: none;
}
html body .flexible-hero--light > .container {
    position: relative;
    z-index: 1;
}
html body .flexible-hero--light .hero-kicker {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #474C50;
}
html body .flexible-hero--light .hero-content h1.hero-title {
    color: #5B6571;
}
html body .flexible-hero--light .hero-title::after {
    content: "";
    display: block;
    width: 2.6em;
    height: .22em;
    margin-top: .3em;
    background: var(--tf-brand-red);
}
html body .flexible-hero--light .hero-content .hero-subtitle {
    font-weight: 700;
    color: #17191C;
    opacity: 1;
}
html body .flexible-hero--light .hero-points {
    margin: 0 0 12px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.6;
    color: #595E67;
}
html body .flexible-hero--light .hero-tagline {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--tf-brand-red);
}
/* Mobile : le texte occupe toute la largeur, la photo est éclaircie partout */
@media (max-width: 768px) {
    html body .flexible-hero--light .hero-overlay {
        background: rgba(245, 245, 242, .88);
    }
    html body .flexible-hero--light .hero-title::after {
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── 6 quinquies. Bandeaux Particulier, Professionnel et Entreprise (maquettes
   « Dari Fi Tounes », « Crédit professionnel », « Financement Dailly ») ───────────
   Uniquement les pages des segments Particulier, Professionnel et Entreprise
   (classe segment-xxx du header) et le diaporama de l'accueil (Particulier).
   Échelle typographique mesurée sur les trois maquettes (hauteur des lettres ; les
   maquettes sont étirées horizontalement d'environ 17 %, les dimensions horizontales
   sont corrigées) et commune aux trois segments : sur-titre 14px, titre 33px/35px,
   sous-titre 18,5px/25px, texte de ligne chiffrée 17px, puces 13px/24px, mention 9px,
   barre 101×7px. Chiffres mis en avant : 27px (Particulier, Professionnel), 40px
   (Entreprise, chiffre clé). Seule la couleur change par segment (--seg-accent).
   Seul le style change : la position et l'alignement du bloc restent ceux d'avant
   (bloc centré verticalement). Champs : sous-titre (une ligne par ligne, chiffres
   « xx % » repérés), points clés (puces carrées rouges), phrase d'accroche (mention). */
body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
body.home .hero-section,
body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light {
    --part-text: #202225;
    --part-font: var(--tf-font);
    --seg-figure: 27px;
}
/* Couleur d'accent par segment ; texte des puces : corps de texte (Particulier,
   Entreprise), bleu (Professionnel, comme sa maquette) */
body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
body.home .hero-section {
    --seg-accent: #007B83;
    --seg-points: var(--part-text);
}
body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light {
    --seg-accent: #0057B8;
    --seg-points: #0057B8;
}
body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light {
    --seg-accent: #17324D;
    --seg-points: var(--part-text);
    --seg-figure: 40px;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-kicker,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-kicker,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-kicker {
    margin: 0;
    font-family: var(--part-font);
    font-size: 14px;
    font-weight: 700;
    line-height: 17px;
    letter-spacing: 0;
    color: var(--seg-accent);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content h1.hero-title,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content h1.hero-title,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content h1.hero-title,
html body.home .hero-section .hero-content-acceuil h1 {
    margin: 0 !important;
    font-family: var(--part-font);
    font-size: 33px;
    font-weight: 700;
    line-height: 35px;
    letter-spacing: 0;
    color: var(--seg-accent);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-kicker + h1.hero-title,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-kicker + h1.hero-title,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-kicker + h1.hero-title {
    margin-top: 3.5px !important;
}
/* le titre garde sa marge basse d'origine (16px, Bootstrap mb-3) : la position du
   bloc centré ne change pas ; le sous-titre la compense (16px − 1px = 15px) */
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content h1.hero-title,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content h1.hero-title,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content h1.hero-title {
    margin-bottom: 16px !important;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content h1.hero-title + .hero-subtitle,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content h1.hero-title + .hero-subtitle,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content h1.hero-title + .hero-subtitle {
    margin-top: -1px !important;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-title::after,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-title::after,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-title::after,
html body.home .hero-section .hero-content-acceuil h1::after {
    content: "";
    display: block;
    width: 101px;
    height: 7px;
    margin: 11px 0 0;
    background: var(--tf-brand-red);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content .hero-subtitle,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content .hero-subtitle,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content .hero-subtitle,
html body.home .hero-section .hero-content-acceuil p {
    margin: 15px 0 0 !important;
    font-family: var(--part-font);
    font-size: 18.5px;
    font-weight: 700;
    line-height: 25px;
    color: var(--part-text);
    opacity: 1;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle br,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-subtitle br,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle br {
    display: none;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-sub-line,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-sub-line,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-sub-line {
    display: block;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-sub-line--figure,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-sub-line--figure,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-sub-line--figure {
    font-size: 17px;
    line-height: 35px;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle .hero-figure,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-subtitle .hero-figure,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle .hero-figure {
    margin: 0 10px;
    font-size: var(--seg-figure);
    line-height: 1;
}
body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle .hero-figure--last,
body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-subtitle .hero-figure--last {
    color: var(--seg-accent);
}
/* sous-titre commençant par une ligne chiffrée : plus proche de la barre */
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle > .hero-sub-line--figure:first-child,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-subtitle > .hero-sub-line--figure:first-child,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle > .hero-sub-line--figure:first-child {
    margin-top: -6px;
}
/* Entreprise : chiffre clé en rouge, en début de ligne, espacé du texte qui suit */
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle .hero-figure {
    margin: 0 32px 0 0;
    color: var(--tf-brand-red);
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-sub-line--figure {
    line-height: 62px;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-points,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-points,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-points {
    margin: 8px 0 0;
    font-family: var(--part-font);
    font-size: 13px;
    font-weight: 700;
    line-height: 24px;
    color: var(--seg-points);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-points br,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-points br,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-points br {
    display: none;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-point,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-point,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-point {
    position: relative;
    display: block;
    padding-left: 19px;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-point::before,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-point::before,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-point::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 7px;
    height: 7px;
    background: var(--tf-brand-red);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-tagline,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-tagline,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-tagline {
    margin: 16px 0 0;
    font-family: var(--part-font);
    font-size: 9px;
    font-weight: 400;
    line-height: 12px;
    color: var(--part-text);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle + .hero-tagline,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-subtitle + .hero-tagline,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle + .hero-tagline {
    margin-top: 38px;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content .btn,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content .btn,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content .btn,
html body.home .hero-section .hero-content-acceuil .btn-primary {
    margin-top: 24px !important;
}

/* Accueil : photo éclaircie à gauche (Blanc minéral). La hauteur du diaporama reste
   exactement celle d'avant (mêmes valeurs mesurées que le bandeau Pro/Entreprise,
   section 6 ter) même si la taille du texte change ; le texte reste centré au même
   endroit. */
body.home .hero-section .hero-bg::after {
    background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .9) 38%, rgba(245, 245, 242, 0) 65%);
}
@media (min-width: 769px) {
    body.home .hero-section .hero-slide::before { content: ""; flex: none; width: 0; padding-top: 500px; }
}
@media (min-width: 1025px) { body.home .hero-section .hero-slide::before { padding-top: calc(24.23% + 179.2px); } }
@media (min-width: 1185px) { body.home .hero-section .hero-slide::before { padding-top: calc(26.42% + 180.2px); } }
@media (min-width: 1336px) { body.home .hero-section .hero-slide::before { padding-top: calc(22% + 238.72px); } }
@media (min-width: 1400px) { body.home .hero-section .hero-slide::before { padding-top: calc(22% + 229.92px); } }

/* Mobile : mêmes tailles ; photo éclaircie partout ; le texte des pages est centré
   (comme avant) : barre centrée, liste centrée en un seul bloc */
@media (max-width: 768px) {
    body.home .hero-section .hero-bg::after { background: rgba(245, 245, 242, .88); }
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-title::after,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-title::after,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-title::after { margin-left: auto; margin-right: auto; }
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-points,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-points,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-points { display: table; margin-left: auto; margin-right: auto; text-align: left; }
}

/* ── 6 ter. Bandeau des pages Professionnel et Entreprise = bandeau de l'accueil ── */
/* Page Entreprise : slug « entreprise » en production, « entreprise-2 » en local. */
/* Même largeur (pleine page) et même hauteur que le bandeau de l'accueil (.hero-section),
   dont la hauteur suit la largeur de l'écran. Valeurs mesurées sur l'accueil :
   ≥1400px 544px à 1440 / 635px à 1855 ; 769–1024px 500px. Sous 768px les deux font
   déjà 400px : rien ne change. La hauteur est portée par ::before (padding en % de
   la largeur du bandeau) ; le texte reste centré verticalement. */
@media (min-width: 769px) {
    html body.page-slug-professionnel .flexible-hero,
    html body.page-slug-entreprise-2 .flexible-hero,
    html body.page-slug-entreprise .flexible-hero {
        height: auto;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    /* le texte est centré : sa marge interne ne ferait que forcer une hauteur plus grande */
    html body.page-slug-professionnel .flexible-hero > .container,
    html body.page-slug-entreprise-2 .flexible-hero > .container,
    html body.page-slug-entreprise .flexible-hero > .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    html body.page-slug-professionnel .flexible-hero::before,
    html body.page-slug-entreprise-2 .flexible-hero::before,
    html body.page-slug-entreprise .flexible-hero::before {
        content: "";
        flex: none;
        width: 0;
        padding-top: 500px;
    }
}
@media (min-width: 1025px) {
    html body.page-slug-professionnel .flexible-hero::before,
    html body.page-slug-entreprise-2 .flexible-hero::before,
    html body.page-slug-entreprise .flexible-hero::before { padding-top: calc(24.23% + 179.2px); }
}
@media (min-width: 1185px) {
    html body.page-slug-professionnel .flexible-hero::before,
    html body.page-slug-entreprise-2 .flexible-hero::before,
    html body.page-slug-entreprise .flexible-hero::before { padding-top: calc(26.42% + 180.2px); }
}
@media (min-width: 1336px) {
    html body.page-slug-professionnel .flexible-hero::before,
    html body.page-slug-entreprise-2 .flexible-hero::before,
    html body.page-slug-entreprise .flexible-hero::before { padding-top: calc(22% + 238.72px); }
}
@media (min-width: 1400px) {
    html body.page-slug-professionnel .flexible-hero::before,
    html body.page-slug-entreprise-2 .flexible-hero::before,
    html body.page-slug-entreprise .flexible-hero::before { padding-top: calc(22% + 229.92px); }
}

/* ── 6 sexies. Barre sous l'image des bandeaux ───────────────────────────────
   Élément .hero-bar placé juste après la section du bandeau (accueil, templates
   « alternating », agences, compte chèque, convertisseur). Pleine largeur : carré
   rouge à gauche, puis couleur du segment (Particulier #007B83 · Professionnel
   #0057B8 · Entreprise #17324D). Maquette de l'accueil (1440px) : 22px de haut,
   carré 22×22 ; sous 1440px la barre suit la largeur de l'écran (10px minimum). */
.hero-bar {
    --hero-bar-size: clamp(10px, 1.5625vw, 22px);
    --hero-bar-accent: #007B83;
    height: var(--hero-bar-size);
    background: linear-gradient(90deg, var(--tf-brand-red) var(--hero-bar-size), var(--hero-bar-accent) var(--hero-bar-size));
}
body:has(#site-header .top-bar-left .menu.segment-professionnel) .hero-bar { --hero-bar-accent: #0057B8; }
body:has(#site-header .top-bar-left .menu.segment-entreprise) .hero-bar { --hero-bar-accent: #17324D; }

/* ── 7. Boutons Bootstrap « danger » utilisés comme boutons de marque ──── */
html body .btn-danger {
    --bs-btn-bg: var(--tf-brand-red);
    --bs-btn-border-color: var(--tf-brand-red);
    --bs-btn-hover-bg: var(--tf-brand-red-dark);
    --bs-btn-hover-border-color: var(--tf-brand-red-dark);
    --bs-btn-active-bg: var(--tf-brand-red-dark);
    --bs-btn-active-border-color: var(--tf-brand-red-dark);
    --bs-btn-disabled-bg: var(--tf-brand-red);
    --bs-btn-disabled-border-color: var(--tf-brand-red);
    --bs-btn-focus-shadow-rgb: var(--tf-brand-red-rgb);
}

/* ── 8. Rouges écrits directement dans le contenu (attributs style="") ──── */
/* Généré à partir des styles inline trouvés sur les 76 pages. */
html body [style*="background-color: #cc0000" i],
html body [style*="background-color: #d30000" i],
html body [style*="background-color: #d60000" i],
html body [style*="background-color: #e30613" i],
html body [style*="background:#d31018" i] {
    background-color: var(--tf-brand-red) !important;
}
html body [style*="color: #cc0000" i]:not([style*="background-color: #cc0000" i]),
html body [style*="color: #d30000" i]:not([style*="background-color: #d30000" i]),
html body [style*="color: #e30613" i]:not([style*="background-color: #e30613" i]),
html body [style*="color: red" i]:not([style*="background-color: red" i]),
html body [style*="color:#cc0000" i]:not([style*="background-color:#cc0000" i]),
html body [style*="color:#e30613" i]:not([style*="background-color:#e30613" i]) {
    color: var(--tf-brand-red) !important;
}

/* ── 8 bis. Polices écrites directement dans le contenu ou par une bibliothèque ──
   Le contenu des pages fixe parfois Arial, Montserrat, system-ui ou sans-serif
   (attributs style="") : ces textes prennent la police du site (Nimbus Sans).
   Les polices d'icônes ne sont pas concernées. La carte des agences (Leaflet)
   aussi ; ses boutons + et − gardent leur police. */
html body [style*="font-family" i]:not([style*="icons" i]),
html body .leaflet-container {
    font-family: var(--tf-font) !important;
}

/* ── 9. Icônes (images) : version au rouge TFBank #D71920 ──────────────── */
/* Les originaux utilisent #D01119 / #D60000 ; versions dans assets/images/charte/. */
html body img[src*="/uploads/2026/03/Clip-path-group-1.png"] { content: url("../images/charte/2026/03/Clip-path-group-1.png"); }
html body img[src*="/uploads/2026/03/Clip-path-group.png"] { content: url("../images/charte/2026/03/Clip-path-group.png"); }
html body img[src*="/uploads/2026/03/Frame-1.png"] { content: url("../images/charte/2026/03/Frame-1.png"); }
html body img[src*="/uploads/2026/03/Frame-4.png"] { content: url("../images/charte/2026/03/Frame-4.png"); }
html body img[src*="/uploads/2026/03/Frame-5-1.png"] { content: url("../images/charte/2026/03/Frame-5-1.png"); }
html body img[src*="/uploads/2026/03/Frame-5.png"] { content: url("../images/charte/2026/03/Frame-5.png"); }
html body img[src*="/uploads/2026/03/Frame-6.png"] { content: url("../images/charte/2026/03/Frame-6.png"); }
html body img[src*="/uploads/2026/03/iconsax-arrow-right-01.png"] { content: url("../images/charte/2026/03/iconsax-arrow-right-01.png"); }
html body img[src*="/uploads/2026/03/iconsax-calculator-1.png"] { content: url("../images/charte/2026/03/iconsax-calculator-1.png"); }
html body img[src*="/uploads/2026/03/iconsax-calculator.png"] { content: url("../images/charte/2026/03/iconsax-calculator.png"); }
html body img[src*="/uploads/2026/03/iconsax-enhance-user-ai.png"] { content: url("../images/charte/2026/03/iconsax-enhance-user-ai.png"); }
html body img[src*="/uploads/2026/03/iconsax-login-02.png"] { content: url("../images/charte/2026/03/iconsax-login-02.png"); }
html body img[src*="/uploads/2026/03/iconsax-monitor-mobile.png"] { content: url("../images/charte/2026/03/iconsax-monitor-mobile.png"); }
html body img[src*="/uploads/2026/03/iconsax-user-tick.png"] { content: url("../images/charte/2026/03/iconsax-user-tick.png"); }
html body img[src*="/uploads/2026/04/Clip-path-group-1.png"] { content: url("../images/charte/2026/04/Clip-path-group-1.png"); }
html body img[src*="/uploads/2026/04/Clip-path-group.png"] { content: url("../images/charte/2026/04/Clip-path-group.png"); }
html body img[src*="/uploads/2026/04/Frame-1.png"] { content: url("../images/charte/2026/04/Frame-1.png"); }
html body img[src*="/uploads/2026/04/Frame-4.png"] { content: url("../images/charte/2026/04/Frame-4.png"); }
html body img[src*="/uploads/2026/04/Frame-5.png"] { content: url("../images/charte/2026/04/Frame-5.png"); }
html body img[src*="/uploads/2026/04/Frame.png"] { content: url("../images/charte/2026/04/Frame.png"); }
html body img[src*="/uploads/2026/04/fi_1077971.png"] { content: url("../images/charte/2026/04/fi_1077971.png"); }
html body img[src*="/uploads/2026/04/fi_1786971.png"] { content: url("../images/charte/2026/04/fi_1786971.png"); }
html body img[src*="/uploads/2026/04/fi_563541.png"] { content: url("../images/charte/2026/04/fi_563541.png"); }
html body img[src*="/uploads/2026/04/iconsax-monitor-mobile.png"] { content: url("../images/charte/2026/04/iconsax-monitor-mobile.png"); }

/* ── 9 bis. Icônes rouges : couleur du segment de la page ────────────────
   Uniquement les icônes actuellement rouges (images d'icônes et icônes Bootstrap
   Icons listées ci-dessous). Les flèches restent au rouge TFBank, comme les textes,
   boutons, liens, fonds et bordures. Le segment vient de la classe segment-xxx du
   header. L'interface principale Particulier (page d'accueil, body.home) n'est pas
   concernée. Particulier #007B83 · Professionnel #0057B8 · Entreprise #17324D */

/* Particulier #007B83 */
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) i.bi.text-danger:not([class*="bi-arrow"]),
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) .currency-picker > i.bi.cur-chevron,
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) i.bi-geo-alt[style*="--tf-red"],
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) i.bi-telephone[style*="--tf-red"],
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) i.bi-envelope[style*="--tf-red"] {
    color: #007B83 !important;
}
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Clip-path-group-1.png"] { content: url("../images/icones-segments/particulier/2026/03/Clip-path-group-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Clip-path-group.png"] { content: url("../images/icones-segments/particulier/2026/03/Clip-path-group.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Frame-1.png"] { content: url("../images/icones-segments/particulier/2026/03/Frame-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Frame-4.png"] { content: url("../images/icones-segments/particulier/2026/03/Frame-4.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Frame-5-1.png"] { content: url("../images/icones-segments/particulier/2026/03/Frame-5-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Frame-5.png"] { content: url("../images/icones-segments/particulier/2026/03/Frame-5.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/Frame-6.png"] { content: url("../images/icones-segments/particulier/2026/03/Frame-6.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/iconsax-calculator-1.png"] { content: url("../images/icones-segments/particulier/2026/03/iconsax-calculator-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/iconsax-calculator.png"] { content: url("../images/icones-segments/particulier/2026/03/iconsax-calculator.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/iconsax-enhance-user-ai.png"] { content: url("../images/icones-segments/particulier/2026/03/iconsax-enhance-user-ai.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/iconsax-login-02.png"] { content: url("../images/icones-segments/particulier/2026/03/iconsax-login-02.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/iconsax-monitor-mobile.png"] { content: url("../images/icones-segments/particulier/2026/03/iconsax-monitor-mobile.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/03/iconsax-user-tick.png"] { content: url("../images/icones-segments/particulier/2026/03/iconsax-user-tick.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/Clip-path-group-1.png"] { content: url("../images/icones-segments/particulier/2026/04/Clip-path-group-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/Clip-path-group.png"] { content: url("../images/icones-segments/particulier/2026/04/Clip-path-group.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/Frame-1.png"] { content: url("../images/icones-segments/particulier/2026/04/Frame-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/Frame-4.png"] { content: url("../images/icones-segments/particulier/2026/04/Frame-4.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/Frame-5.png"] { content: url("../images/icones-segments/particulier/2026/04/Frame-5.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/Frame.png"] { content: url("../images/icones-segments/particulier/2026/04/Frame.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/fi_1077971.png"] { content: url("../images/icones-segments/particulier/2026/04/fi_1077971.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/fi_1786971.png"] { content: url("../images/icones-segments/particulier/2026/04/fi_1786971.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/fi_563541.png"] { content: url("../images/icones-segments/particulier/2026/04/fi_563541.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-particulier) img[src*="/uploads/2026/04/iconsax-monitor-mobile.png"] { content: url("../images/icones-segments/particulier/2026/04/iconsax-monitor-mobile.png"); }

/* Professionnel #0057B8 */
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) i.bi.text-danger:not([class*="bi-arrow"]),
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) .currency-picker > i.bi.cur-chevron,
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) i.bi-geo-alt[style*="--tf-red"],
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) i.bi-telephone[style*="--tf-red"],
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) i.bi-envelope[style*="--tf-red"] {
    color: #0057B8 !important;
}
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Clip-path-group-1.png"] { content: url("../images/icones-segments/professionnel/2026/03/Clip-path-group-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Clip-path-group.png"] { content: url("../images/icones-segments/professionnel/2026/03/Clip-path-group.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Frame-1.png"] { content: url("../images/icones-segments/professionnel/2026/03/Frame-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Frame-4.png"] { content: url("../images/icones-segments/professionnel/2026/03/Frame-4.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Frame-5-1.png"] { content: url("../images/icones-segments/professionnel/2026/03/Frame-5-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Frame-5.png"] { content: url("../images/icones-segments/professionnel/2026/03/Frame-5.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/Frame-6.png"] { content: url("../images/icones-segments/professionnel/2026/03/Frame-6.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/iconsax-calculator-1.png"] { content: url("../images/icones-segments/professionnel/2026/03/iconsax-calculator-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/iconsax-calculator.png"] { content: url("../images/icones-segments/professionnel/2026/03/iconsax-calculator.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/iconsax-enhance-user-ai.png"] { content: url("../images/icones-segments/professionnel/2026/03/iconsax-enhance-user-ai.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/iconsax-login-02.png"] { content: url("../images/icones-segments/professionnel/2026/03/iconsax-login-02.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/iconsax-monitor-mobile.png"] { content: url("../images/icones-segments/professionnel/2026/03/iconsax-monitor-mobile.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/03/iconsax-user-tick.png"] { content: url("../images/icones-segments/professionnel/2026/03/iconsax-user-tick.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/Clip-path-group-1.png"] { content: url("../images/icones-segments/professionnel/2026/04/Clip-path-group-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/Clip-path-group.png"] { content: url("../images/icones-segments/professionnel/2026/04/Clip-path-group.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/Frame-1.png"] { content: url("../images/icones-segments/professionnel/2026/04/Frame-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/Frame-4.png"] { content: url("../images/icones-segments/professionnel/2026/04/Frame-4.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/Frame-5.png"] { content: url("../images/icones-segments/professionnel/2026/04/Frame-5.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/Frame.png"] { content: url("../images/icones-segments/professionnel/2026/04/Frame.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/fi_1077971.png"] { content: url("../images/icones-segments/professionnel/2026/04/fi_1077971.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/fi_1786971.png"] { content: url("../images/icones-segments/professionnel/2026/04/fi_1786971.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/fi_563541.png"] { content: url("../images/icones-segments/professionnel/2026/04/fi_563541.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-professionnel) img[src*="/uploads/2026/04/iconsax-monitor-mobile.png"] { content: url("../images/icones-segments/professionnel/2026/04/iconsax-monitor-mobile.png"); }

/* Entreprise #17324D */
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) i.bi.text-danger:not([class*="bi-arrow"]),
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) .currency-picker > i.bi.cur-chevron,
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) i.bi-geo-alt[style*="--tf-red"],
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) i.bi-telephone[style*="--tf-red"],
body.single-agence:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) i.bi-envelope[style*="--tf-red"] {
    color: #17324D !important;
}
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Clip-path-group-1.png"] { content: url("../images/icones-segments/entreprise/2026/03/Clip-path-group-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Clip-path-group.png"] { content: url("../images/icones-segments/entreprise/2026/03/Clip-path-group.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Frame-1.png"] { content: url("../images/icones-segments/entreprise/2026/03/Frame-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Frame-4.png"] { content: url("../images/icones-segments/entreprise/2026/03/Frame-4.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Frame-5-1.png"] { content: url("../images/icones-segments/entreprise/2026/03/Frame-5-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Frame-5.png"] { content: url("../images/icones-segments/entreprise/2026/03/Frame-5.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/Frame-6.png"] { content: url("../images/icones-segments/entreprise/2026/03/Frame-6.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/iconsax-calculator-1.png"] { content: url("../images/icones-segments/entreprise/2026/03/iconsax-calculator-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/iconsax-calculator.png"] { content: url("../images/icones-segments/entreprise/2026/03/iconsax-calculator.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/iconsax-enhance-user-ai.png"] { content: url("../images/icones-segments/entreprise/2026/03/iconsax-enhance-user-ai.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/iconsax-login-02.png"] { content: url("../images/icones-segments/entreprise/2026/03/iconsax-login-02.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/iconsax-monitor-mobile.png"] { content: url("../images/icones-segments/entreprise/2026/03/iconsax-monitor-mobile.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/03/iconsax-user-tick.png"] { content: url("../images/icones-segments/entreprise/2026/03/iconsax-user-tick.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/Clip-path-group-1.png"] { content: url("../images/icones-segments/entreprise/2026/04/Clip-path-group-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/Clip-path-group.png"] { content: url("../images/icones-segments/entreprise/2026/04/Clip-path-group.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/Frame-1.png"] { content: url("../images/icones-segments/entreprise/2026/04/Frame-1.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/Frame-4.png"] { content: url("../images/icones-segments/entreprise/2026/04/Frame-4.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/Frame-5.png"] { content: url("../images/icones-segments/entreprise/2026/04/Frame-5.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/Frame.png"] { content: url("../images/icones-segments/entreprise/2026/04/Frame.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/fi_1077971.png"] { content: url("../images/icones-segments/entreprise/2026/04/fi_1077971.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/fi_1786971.png"] { content: url("../images/icones-segments/entreprise/2026/04/fi_1786971.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/fi_563541.png"] { content: url("../images/icones-segments/entreprise/2026/04/fi_563541.png"); }
body:not(.home):has(#site-header .top-bar-left .menu.segment-entreprise) img[src*="/uploads/2026/04/iconsax-monitor-mobile.png"] { content: url("../images/icones-segments/entreprise/2026/04/iconsax-monitor-mobile.png"); }

/* ── 9 ter. Cercles numérotés du bloc « Étapes » : Particulier #007B83 ─────
   Uniquement le fond des cercles (.step-number, bg-danger de Bootstrap) ; le
   chiffre reste blanc, les flèches et les textes ne changent pas. */
body:has(#site-header .top-bar-left .menu.segment-particulier) .steps-section .step-number.bg-danger {
    background-color: #007B83 !important;
}

/* ── 10. Messages d'erreur et validation des formulaires ────────────────── */
html body .wpcf7 .wpcf7-not-valid-tip,
html body .wpcf7-not-valid-tip { color: var(--tf-brand-red) !important; }
html body .use-floating-validation-tip .wpcf7-not-valid-tip { border-color: var(--tf-brand-red); }
html body .wpcf7 form.failed .wpcf7-response-output,
html body .wpcf7 form.aborted .wpcf7-response-output { border-color: var(--tf-brand-red); }
html body [style*="color:#d31018" i]:not([style*="background-color:#d31018" i]),
html body [style*="color: #d31018" i]:not([style*="background-color: #d31018" i]) {
    color: var(--tf-brand-red) !important;
}