/* ==========================================================================
   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;
}

/* Footer, charte (demande du 2026-11-02) : sous la ligne rouge, phrase « Une
   nouvelle dynamique pour vous accompagner » sous le logo (Customizer, Pied de
   page) et liens légaux du bas (Charte cookies, Données personnelles, Mentions
   légales, Conformité, Tarification) en Ardoise #59636E ; survol rouge inchangé. */
html body .site-footer .footer-tagline {
    margin: 14px 0 0;
    max-width: 260px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: #59636E;
}
html body .site-footer .footer-legal a {
    color: #59636E;
}
html body .site-footer .footer-legal a:hover,
html body .site-footer .footer-legal a:focus {
    color: var(--tf-red);
}
@media (max-width: 1024px) {
    /* logo centré sur tablette et mobile (footer.php) : phrase centrée dessous */
    html body .site-footer .footer-tagline {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
}

/* 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);
}

/* ── 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);
}
/* Le voile suit la largeur de l'écran : section « 6 quater bis », après l'interface Particulier */

/* ── 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'interface 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.page-template-template-particulier .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.page-template-template-particulier .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.page-template-template-particulier .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.page-template-template-particulier .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.page-template-template-particulier .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.page-template-template-particulier .hero-section .hero-content-acceuil .btn-primary {
    margin-top: 24px !important;
}

/* ── 6 quinquies bis. Bandeau Particulier : maquette « Dari Fi Tounes » (1280px) ──
   Pages du segment Particulier uniquement (ni le diaporama Particulier, ni Professionnel, ni
   Entreprise). Police de la maquette : Helvetica Bold / Regular (Nimbus Sans, celle du
   site). Tailles relevées sur la maquette (hauteur des capitales ; l'image est étirée
   d'environ 12 % en largeur, corrigé) et exprimées en pixels de maquette (--seg-u) :
   sur la maquette le bandeau fait 569px de haut ; ici --seg-u suit la hauteur du
   bandeau (section 6 ter), le texte garde donc les proportions de la maquette à
   toutes les largeurs d'écran (400px de bandeau minimum sur mobile), sans dépasser
   la taille de la maquette (au-delà de 1541px de large) : le texte et la marge du
   bloc (.hero-content, 5 % / 6 %) tiennent dans le bandeau sans l'agrandir. Couleurs
   mesurées : texte #121212, mention #3A3733, accent #007B83. */
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light {
    --part-text: #121212;
    --seg-u: calc(400px / 569);
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light {
    --seg-figure: calc(38 * var(--seg-u));
}
@media (min-width: 769px) {
    html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light { --seg-u: calc(500px / 569); }
}
@media (min-width: 1025px) {
    html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light { --seg-u: calc((24.23vw + 179.2px) / 569); }
}
@media (min-width: 1185px) {
    html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light { --seg-u: calc((26.42vw + 180.2px) / 569); }
}
@media (min-width: 1336px) {
    html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light { --seg-u: calc((22vw + 238.72px) / 569); }
}
@media (min-width: 1400px) {
    html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light { --seg-u: min(1px, calc((22vw + 229.92px) / 569)); }
}
/* téléphone en paysage : bandeau à la hauteur du texte, même échelle que sur mobile */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1180px) {
    html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light,
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light { --seg-u: calc(400px / 569); }
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-kicker {
    font-size: calc(19.2 * var(--seg-u));
    line-height: calc(23 * var(--seg-u));
    letter-spacing: .03em;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content h1.hero-title {
    font-size: calc(45.2 * var(--seg-u));
    line-height: calc(48 * var(--seg-u));
    letter-spacing: .04em;
    margin-bottom: calc(22 * var(--seg-u)) !important;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-kicker + h1.hero-title {
    margin-top: calc(10.4 * var(--seg-u)) !important;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-title::after {
    width: calc(144 * var(--seg-u));
    height: calc(10 * var(--seg-u));
    margin-top: calc(11.4 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content .hero-subtitle {
    margin-top: calc(20 * var(--seg-u)) !important;
    font-size: calc(25.3 * var(--seg-u));
    line-height: calc(34.3 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-content h1.hero-title + .hero-subtitle {
    margin-top: 0 !important;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-sub-line--figure {
    font-size: calc(23.3 * var(--seg-u));
    line-height: calc(47 * var(--seg-u));
    letter-spacing: .015em;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle > .hero-sub-line--figure:first-child {
    margin-top: calc(-5.3 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle .hero-figure {
    margin: 0 calc(9.4 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-points {
    margin-top: calc(5.2 * var(--seg-u));
    font-size: calc(19.2 * var(--seg-u));
    line-height: calc(37 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-point {
    padding-left: calc(26.5 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-point::before {
    top: calc(15 * var(--seg-u));
    width: calc(10.5 * var(--seg-u));
    height: calc(10.5 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-tagline {
    margin-top: calc(23.4 * var(--seg-u));
    font-size: max(9px, calc(11.3 * var(--seg-u)));
    line-height: calc(15 * var(--seg-u));
    color: #3A3733;
}
html body:has(#site-header .top-bar-left .menu.segment-particulier) .flexible-hero--light .hero-subtitle + .hero-tagline {
    margin-top: calc(52 * var(--seg-u));
}

/* ── 6 quinquies ter. Bandeau Professionnel : maquette « Crédit professionnel » (1280px) ──
   Pages du segment Professionnel uniquement, même méthode que Particulier (6 quinquies
   bis, échelle --seg-u commune) : capitales mesurées sur la maquette, étirée d'environ
   13 % en largeur (corrigé). Titre, sur-titre et points clés en bleu #0057B8 ; phrase
   d'accroche #121212 ; mention #3A3733. Le bouton ne change pas. */
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-kicker {
    font-size: calc(19.2 * var(--seg-u));
    line-height: calc(23 * var(--seg-u));
    letter-spacing: .03em;
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content h1.hero-title {
    font-size: calc(43.8 * var(--seg-u));
    line-height: calc(47 * var(--seg-u));
    letter-spacing: .04em;
    margin-bottom: calc(25 * var(--seg-u)) !important;
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-kicker + h1.hero-title {
    margin-top: calc(10.9 * var(--seg-u)) !important;
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-title::after {
    width: calc(144 * var(--seg-u));
    height: calc(10 * var(--seg-u));
    margin-top: calc(16 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content .hero-subtitle {
    margin-top: calc(20 * var(--seg-u)) !important;
    font-size: calc(26 * var(--seg-u));
    line-height: calc(34 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content h1.hero-title + .hero-subtitle {
    margin-top: 0 !important;
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-points {
    margin-top: calc(15 * var(--seg-u));
    font-size: calc(17.9 * var(--seg-u));
    line-height: calc(31 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-point {
    padding-left: calc(26.5 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-point::before {
    top: calc(11 * var(--seg-u));
    width: calc(10 * var(--seg-u));
    height: calc(10 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-tagline {
    margin-top: calc(14 * var(--seg-u));
    font-size: max(9px, calc(11.9 * var(--seg-u)));
    line-height: calc(15 * var(--seg-u));
    color: #3A3733;
}
html body:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-subtitle + .hero-tagline {
    margin-top: calc(52 * var(--seg-u));
}

/* ── 6 quinquies quater. Bandeau Entreprise : maquette « Financement Dailly » (1280px) ──
   Pages du segment Entreprise uniquement, même méthode et même échelle --seg-u que
   Particulier et Professionnel. Sur cette maquette le bandeau fait 559px de haut et
   l'image est étirée d'environ 25 % en largeur (corrigé) ; mesures ramenées à un
   bandeau de 569px. Sur-titre, titre et texte de la ligne chiffrée en bleu marine
   #142C45 (mesuré), chiffre clé en rouge, centré verticalement avec son texte ;
   phrase d'accroche #121212 ; mention #3A3733. Le bouton ne change pas. */
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light {
    --seg-accent: #142C45;
    --seg-figure: calc(55.8 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-kicker {
    font-size: calc(19.5 * var(--seg-u));
    line-height: calc(23 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content h1.hero-title {
    font-size: calc(47.4 * var(--seg-u));
    line-height: calc(50 * var(--seg-u));
    letter-spacing: -.01em;
    margin-bottom: calc(19.8 * var(--seg-u)) !important;
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-kicker + h1.hero-title {
    margin-top: calc(7 * var(--seg-u)) !important;
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-title::after {
    width: calc(135.5 * var(--seg-u));
    height: calc(11.2 * var(--seg-u));
    margin-top: calc(6.4 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content .hero-subtitle {
    margin-top: calc(20 * var(--seg-u)) !important;
    font-size: calc(23.7 * var(--seg-u));
    line-height: calc(32 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-content h1.hero-title + .hero-subtitle {
    margin-top: 0 !important;
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-sub-line--figure {
    font-size: calc(23.7 * var(--seg-u));
    line-height: calc(70.2 * var(--seg-u));
    letter-spacing: -.03em;
    color: var(--seg-accent);
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle .hero-figure {
    margin: 0 calc(38 * var(--seg-u)) 0 0;
    letter-spacing: 0;
    vertical-align: calc(-11.7 * var(--seg-u));
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-tagline {
    margin-top: calc(16 * var(--seg-u));
    font-size: max(9px, calc(11.9 * var(--seg-u)));
    line-height: calc(15 * var(--seg-u));
    color: #3A3733;
}
html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle + .hero-tagline {
    margin-top: calc(72.6 * var(--seg-u));
}
/* mention suivie du bouton (absent de la maquette) : espace réduit, pour que le texte
   et le bouton tiennent dans le bandeau sans l'agrandir (bandeau de hauteur fixe :
   ordinateur et tablette, hors téléphone en paysage) */
@media (min-width: 769px) and (min-height: 501px), (min-width: 769px) and (orientation: portrait), (min-width: 1181px) {
    html body:has(#site-header .top-bar-left .menu.segment-entreprise) .flexible-hero--light .hero-subtitle + .hero-tagline:has(+ .btn) {
        margin-top: calc(36 * var(--seg-u));
    }
}

/* Interface Particulier : 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.page-template-template-particulier .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.page-template-template-particulier .hero-section .hero-slide::before { content: ""; flex: none; width: 0; padding-top: 500px; }
}
@media (min-width: 1025px) { body.page-template-template-particulier .hero-section .hero-slide::before { padding-top: calc(24.23% + 179.2px); } }
@media (min-width: 1185px) { body.page-template-template-particulier .hero-section .hero-slide::before { padding-top: calc(26.42% + 180.2px); } }
@media (min-width: 1336px) { body.page-template-template-particulier .hero-section .hero-slide::before { padding-top: calc(22% + 238.72px); } }
@media (min-width: 1400px) { body.page-template-template-particulier .hero-section .hero-slide::before { padding-top: calc(22% + 229.92px); } }

/* ── 6 quater bis. Bandeaux clairs sur tablette et mobile = rendu de l'ordinateur ──
   Accueil et pages « alternating » : texte aligné à gauche (titre, barre rouge,
   sous-titre, points clés, bouton), photo éclaircie à gauche sous le texte et
   visible à droite, comme sur ordinateur, au lieu d'un texte centré sur une photo
   voilée à 88 %. Quand l'écran rétrécit, le texte occupe une plus grande part de
   la largeur : la partie claire du dégradé s'élargit d'autant (il restait des
   lignes posées sur la photo entre 769 et 1024px), la photo reste visible à
   droite. Au-dessus de 1180px, le dégradé de l'ordinateur ne change pas. */
@media (max-width: 1180px) {
    html body .flexible-hero--light .hero-overlay,
    body.page-template-template-particulier .hero-section .hero-bg::after {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .9) 42%, rgba(245, 245, 242, .3) 68%, rgba(245, 245, 242, 0) 92%);
    }
}
@media (max-width: 1024px) {
    html body .flexible-hero--light .hero-overlay,
    body.page-template-template-particulier .hero-section .hero-bg::after {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .92) 45%, rgba(245, 245, 242, .5) 72%, rgba(245, 245, 242, .12) 100%);
    }
}
@media (max-width: 768px) {
    html body .flexible-hero--light .hero-overlay,
    body.page-template-template-particulier .hero-section .hero-bg::after {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .92) 50%, rgba(245, 245, 242, .55) 80%, rgba(245, 245, 242, .2) 100%);
    }
}

/* ── 6 quater quinquies. Bandeau de la page Agences : photo éclaircie à gauche ──
   Même voile « Blanc minéral » que les bandeaux clairs (6 quater, et ses paliers
   tablette/mobile de 6 quater bis) à la place du voile sombre ; texte dans la
   couleur du segment (Particulier #007B83, Professionnel #0057B8, Entreprise
   #17324D) ; sous la barre rouge, sous-titre (Customizer, « Une Nouvelle
   dynamique pour vous accompagner ») en gras, texte foncé #121212 comme les
   sous-titres des autres bandeaux. Hauteur du bandeau inchangée (6 ter). */
html body .agences-hero {
    --agences-accent: #007B83;
}
body:has(#site-header .top-bar-left .menu.segment-professionnel) .agences-hero { --agences-accent: #0057B8; }
body:has(#site-header .top-bar-left .menu.segment-entreprise) .agences-hero { --agences-accent: #17324D; }
html body .agences-hero::before {
    background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .9) 38%, rgba(245, 245, 242, 0) 65%);
}
html body .agences-hero h1 {
    color: var(--agences-accent);
}
html body .agences-hero .hero-subtitle {
    margin: 20px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #121212;
}
/* Convertisseur et Compte chèque : même phrase sous le titre, en blanc sur la photo
   assombrie */
html body .converter-hero .hero-subtitle,
html body .cheque-hero .hero-subtitle {
    margin: 20px 0 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
}
@media (max-width: 1180px) {
    html body .agences-hero::before {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .9) 42%, rgba(245, 245, 242, .3) 68%, rgba(245, 245, 242, 0) 92%);
    }
}
@media (max-width: 1024px) {
    html body .agences-hero::before {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .92) 45%, rgba(245, 245, 242, .5) 72%, rgba(245, 245, 242, .12) 100%);
    }
}
@media (max-width: 768px) {
    html body .agences-hero::before {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .92) 50%, rgba(245, 245, 242, .55) 80%, rgba(245, 245, 242, .2) 100%);
    }
}

/* ── 6 quater quinquies bis. Agences et Convertisseur, pages de service ──────
   Demande du 2026-11-03 : comme Contactez-Nous, bandeau Ardoise (titre #59636E,
   barre sous le bandeau #59636E : 6 septies) et header de l'accueil
   (tfbank_is_service_page). Agences : seule la couleur du titre change (voile clair
   et sous-titre déjà en place). Convertisseur : voile clair « Blanc minéral »
   d'Agences (mêmes paliers) au lieu du voile sombre, titre Ardoise, sous-titre
   foncé #121212. Hauteur des bandeaux inchangée (6 ter). */
html body .agences-hero.agences-hero--ardoise {
    --agences-accent: #59636E;
}
html body .converter-hero.converter-hero--ardoise {
    position: relative;
}
html body .converter-hero.converter-hero--ardoise::before {
    content: "";
    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 .converter-hero.converter-hero--ardoise > .container {
    position: relative;
    z-index: 1;
}
html body .converter-hero.converter-hero--ardoise .hero-title {
    color: #59636E;
}
html body .converter-hero.converter-hero--ardoise .hero-subtitle {
    color: #121212;
}
@media (max-width: 1180px) {
    html body .converter-hero.converter-hero--ardoise::before {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .9) 42%, rgba(245, 245, 242, .3) 68%, rgba(245, 245, 242, 0) 92%);
    }
}
@media (max-width: 1024px) {
    html body .converter-hero.converter-hero--ardoise::before {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .92) 45%, rgba(245, 245, 242, .5) 72%, rgba(245, 245, 242, .12) 100%);
    }
}
@media (max-width: 768px) {
    html body .converter-hero.converter-hero--ardoise::before {
        background: linear-gradient(90deg, rgba(245, 245, 242, .97) 0%, rgba(245, 245, 242, .92) 50%, rgba(245, 245, 242, .55) 80%, rgba(245, 245, 242, .2) 100%);
    }
}

/* ── 6 quater sexies. Bandeau de la page Contactez-Nous (menu de l'accueil) ──
   Ses couleurs bleu-vert « Prise de rendez vous » ont été remplacées le 2026-11-02
   par l'Ardoise de la charte, comme les autres pages du menu de l'accueil (6 septies). */

/* ── 6 quater ter. Bandeau de l'accueil (maquette « Une Nouvelle Dynamique ») ──
   Uniquement l'accueil du site (body.home, interface à part). Maquette à taille
   réelle : sur-titre 18px, titre 40px/48px en deux lignes (la 2e, champ « suite en
   rouge », en rouge TFBank), barre 150×10px, texte 20px/24px, bouton 64px de haut
   (texte 20px, sans flèche). Fond crème #FDF5EB à gauche, fondu dans la photo vers la
   droite. Hauteur du bandeau inchangée (même taille que les autres bandeaux) ;
   tablette et mobile : responsive.css. */
html body.home .flexible-hero--light .hero-overlay {
    background: linear-gradient(90deg, #FDF5EB 0%, #FDF5EB 44%, rgba(253, 245, 235, 0) 68%);
}
html body.home .flexible-hero--light .hero-kicker {
    margin: 0 0 18px;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: #59636E;
}
html body.home .flexible-hero--light .hero-content h1.hero-title {
    margin: 0 !important;
    font-size: 40px;
    font-weight: 700;
    line-height: 48px;
    color: #59636E;
}
html body.home .flexible-hero--light .hero-title-accent {
    display: block;
    color: var(--tf-brand-red);
}
html body.home .flexible-hero--light .hero-title::after {
    width: 150px;
    height: 10px;
    margin-top: 11px;
}
html body.home .flexible-hero--light .hero-content .hero-subtitle {
    max-width: 540px;
    margin: 19px 0 0 !important;
    font-size: 20px;
    font-weight: 400;
    line-height: 24px;
    color: #797979;
    opacity: 1;
}
html body.home .flexible-hero--light .hero-content .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 64px;
    margin-top: 29px !important;
    padding: 6px 38px 0 39px !important;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

/* ── 6 ter. Bandeau des pages (Professionnel, Entreprise et toutes les pages
   « alternating ») = bandeau de l'interface Particulier ── */
/* Page Entreprise : slug « entreprise » en production, « entreprise-2 » en local.
   Les autres pages du template « alternating » reçoivent exactement les mêmes règles
   (même spécificité, donc même résultat en paysage et sur tablette). */
/* Même largeur (pleine page) et même hauteur que le bandeau de l'interface Particulier (.hero-section),
   dont la hauteur suit la largeur de l'écran. Valeurs mesurées sur ce bandeau :
   ≥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,
    html body.page-template-template-alternating .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,
    html body.page-template-template-alternating .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,
    html body.page-template-template-alternating .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,
    html body.page-template-template-alternating .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,
    html body.page-template-template-alternating .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,
    html body.page-template-template-alternating .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,
    html body.page-template-template-alternating .flexible-hero::before { padding-top: calc(22% + 229.92px); }
}

/* Bandeaux Agences, Convertisseur et Compte chèque (titre seul sur photo
   assombrie) : même hauteur que le bandeau de l'interface Particulier, par le même procédé ;
   ::after porte la hauteur (::before est déjà le voile sombre d'Agences) et le
   titre reste centré verticalement. Sous 768px : 400px (responsive.css). */
@media (min-width: 769px) {
    html body :is(.agences-hero, .converter-hero, .cheque-hero) {
        display: flex;
        align-items: center;
        height: auto;
    }
    html body :is(.agences-hero, .converter-hero, .cheque-hero)::after {
        content: "";
        flex: none;
        width: 0;
        padding-top: 500px;
    }
}
@media (min-width: 1025px) {
    html body :is(.agences-hero, .converter-hero, .cheque-hero)::after { padding-top: calc(24.23% + 179.2px); }
}
@media (min-width: 1185px) {
    html body :is(.agences-hero, .converter-hero, .cheque-hero)::after { padding-top: calc(26.42% + 180.2px); }
}
@media (min-width: 1336px) {
    html body :is(.agences-hero, .converter-hero, .cheque-hero)::after { padding-top: calc(22% + 238.72px); }
}
@media (min-width: 1400px) {
    html body :is(.agences-hero, .converter-hero, .cheque-hero)::after { 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'interface Particulier (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; }
body:has(#site-header .top-bar-left .menu.segment-particulier) .hero-bar { --hero-bar-accent: #007B83; }
/* Pages du menu de l'accueil (Investir en Tunisie, Historique, Rapport Annuel,
   Contactez-Nous) : couleur de la barre de l'accueil */
body:has(#site-header .top-bar-left .menu.segment-accueil.segment-particulier) .hero-bar { --hero-bar-accent: #59636E; }

/* ── 6 septies. Pages des liens légaux du pied de page ─────────────────────────
   Charte cookies, Données personnelles, Mentions légales, Conformité, Tarification
   (pages liées depuis le menu « Footer Liens légaux », classes ajoutées par
   template-alternating.php). Demande du 2026-11-02, charte : titre et barre sous le
   bandeau en Ardoise #59636E quel que soit le segment, et sous la barre rouge le
   sous-titre « Une nouvelle dynamique pour vous accompagner » (style des sous-titres
   des autres bandeaux : gras, texte foncé). Même bandeau Ardoise sur les pages du
   menu de l'accueil (Investir en Tunisie, Historique, Rapport Annuel,
   Contactez-Nous), demande du 2026-11-02 : classes --ardoise. */
html body:has(#site-header .top-bar-left .menu) .flexible-hero--light.flexible-hero--ardoise {
    --seg-accent: #59636E;
}
html body .flexible-hero--light.flexible-hero--ardoise .hero-content h1.hero-title {
    color: #59636E;
}
html body:has(#site-header .top-bar-left .menu) .hero-bar.hero-bar--ardoise { --hero-bar-accent: #59636E; }

/* Début du contenu des pages légales (demande du 2026-11-02) : le texte commence
   juste sous le bandeau, sans vide au-dessus. Première section : 36px en haut (le
   rythme des sections sur tablette et mobile, responsive.css) au lieu de 48 + 24px,
   et bloc d'en-tête vide masqué (Mentions légales : 48px de plus). Le bandeau, les
   autres sections et l'écart entre elles ne changent pas. */
html body main.flexible-page.flexible-page--legal > .hero-bar + section:not(.flexible-hero) {
    padding-top: 36px !important;
}
html body main.flexible-page.flexible-page--legal > .hero-bar + section:not(.flexible-hero) > .container {
    padding-top: 0 !important;
}
html body .flexible-page--legal > .hero-bar + section .header-block:not(:has(*)) {
    display: none;
}

/* Contenu des sections des pages légales aligné à gauche de la page (demande du
   2026-11-02), au lieu de colonnes centrées : titres et introductions à gauche,
   colonnes (largeur max. inchangée) collées au bord gauche du contenu, sur la marge
   de la page comme le titre du bandeau. Centrages saisis dans le contenu (style
   « text-align: center », « margin: 0 auto ») compris. Bandeau non concerné. */
html body .flexible-page--legal > section:not(.flexible-hero) .header-block {
    text-align: left !important;
}
html body .flexible-page--legal > section:not(.flexible-hero) :is(.charte-intro, .charte-blocks-wrapper, .documents-list-wrapper),
html body .flexible-page--legal > section:not(.flexible-hero) :is([style*="margin: 0 auto" i], [style*="margin:0 auto" i]) {
    margin-left: 0 !important;
    margin-right: auto !important;
}
html body .flexible-page--legal > section:not(.flexible-hero) :is([style*="text-align: center" i], [style*="text-align:center" i]) {
    text-align: left !important;
}

/* Blocs de contenu des pages légales sur toute la largeur du contenu de la page
   (demande du 2026-11-02), d'une marge de page à l'autre, au lieu des colonnes de
   800 à 1000px : introductions, blocs « Charte », listes de documents et colonnes
   saisies dans le contenu (style « max-width: 800px »). */
html body .flexible-page--legal > section:not(.flexible-hero) :is(.charte-intro, .charte-blocks-wrapper, .documents-list-wrapper),
html body .flexible-page--legal > section:not(.flexible-hero) div[style*="max-width" i]:not([style*="max-width: 100%" i]):not([style*="max-width:100%" i]) {
    max-width: none !important;
}

/* ── 7 bis. Coches « ✓ » → carrés rouges, tout le site ─────────────────────
   Charte (demande du 2026-11-02) : à la place de chaque coche, un carré rouge
   TFBank, et le texte d'un point revient à la ligne aligné sur le texte, pas sous
   le carré. Coches saisies dans le contenu : remplacées à l'affichage par
   tfbank_check_bullets() (functions.php), ligne .tf-check-row = carré + texte
   (.tf-check-text), aligné à gauche ; le carré est posé sur la ligne de base du
   texte, sa taille suit le texte (0,5em). Coches dessinées par les templates
   (icône Bootstrap bi-check2, pseudo-éléments « \f272 » des listes) : même carré. */
html body .tf-check {
    display: inline-block;
    flex: 0 0 auto;
    width: .5em;
    height: .5em;
    margin-right: .55em;
    background: var(--tf-brand-red);
}
html body .tf-check-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    text-align: left !important;
    list-style: none;
}
html body .tf-check-row > .tf-check {
    margin-right: .65em;
}
html body .tf-check-row > .tf-check-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left !important;
}
html body .tf-check-row > .tf-check-text * {
    text-align: left !important;
}
/* coche en position absolue dans un bloc déjà en retrait : carré à sa place */
html body .tf-check--abs {
    position: absolute;
    left: 0;
    top: calc(.5lh - .25em);
    margin: 0;
}
/* icône « coche » de Bootstrap (listes, tableaux comparatifs des templates) */
html body i.bi-check2,
html body i.bi-check,
html body i.bi-check-lg {
    font-size: inherit !important;
    line-height: inherit;
}
html body i.bi-check2::before,
html body i.bi-check::before,
html body i.bi-check-lg::before {
    content: "" !important;
    display: inline-block;
    width: .5em;
    height: .5em;
    vertical-align: baseline;
    background: var(--tf-brand-red);
}
/* listes à coches dessinées en CSS (blocs Offres, Conditions, Fonds de garantie,
   Charte, cartes) : même carré, centré sur la première ligne */
html body :is(.offdt-card-content, .conditions-content, .fonds-garantie-section .fonds-content, .charte-section .charte-block-content, .card-rich-content) ul li::before {
    content: "" !important;
    font-size: inherit !important;
    top: calc(.5lh - .25em) !important;
    width: .5em;
    height: .5em;
    background: var(--tf-brand-red);
}

/* ── 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 Particulier elle-même (template « Interface Particulier ») n'est
   pas concernée. Particulier #007B83 · Professionnel #0057B8 · Entreprise #17324D */

/* Particulier #007B83 */
body:not(.page-template-template-particulier):has(#site-header .top-bar-left .menu.segment-particulier) i.bi.text-danger:not([class*="bi-arrow"]),
body:not(.page-template-template-particulier):has(#site-header .top-bar-left .menu.segment-particulier) .currency-picker > i.bi.cur-chevron,
body.single-agence:not(.page-template-template-particulier):has(#site-header .top-bar-left .menu.segment-particulier) i.bi-geo-alt[style*="--tf-red"],
body.single-agence:not(.page-template-template-particulier):has(#site-header .top-bar-left .menu.segment-particulier) i.bi-telephone[style*="--tf-red"],
body.single-agence:not(.page-template-template-particulier):has(#site-header .top-bar-left .menu.segment-particulier) i.bi-envelope[style*="--tf-red"] {
    color: #007B83 !important;
}
body:not(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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(.page-template-template-particulier):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;
}

/* ── 11. Professionnel → Emprunter : titre du bandeau en noir ──────────────
   Uniquement le titre « Emprunter auprès de la TFBank » de cette page (même
   noir que le sous-titre), ciblée par son ID 688, identique en local et en
   recette (l'adresse diffère : /professionnel/emprunter/ en recette). Le
   surtitre, le trait rouge et les autres pages du segment gardent la couleur
   Professionnel. */
html body.page-id-688:has(#site-header .top-bar-left .menu.segment-professionnel) .flexible-hero--light .hero-content h1.hero-title {
    color: #121212;
}

/* ── 12. Solutions de transfert : bouton logo Tuni.Cash ────────────────────
   Sous la liste de présentation (tfbank_split_logo_button(), functions.php),
   aligné à gauche comme le titre et les carrés de la liste. Logo affiché à sa
   taille d'origine (149 × 74) pour rester net, réduit seulement sur petit
   écran ; proportions conservées. */
html body .split-section .tf-logo-btn {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    border: 1px solid #e3e8f0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
    transition: transform .2s ease, box-shadow .2s ease;
}
html body .split-section .tf-logo-btn img {
    display: block;
    width: 149px;
    max-width: 100%;
    height: auto;
}
html body .split-section .tf-logo-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
}
html body .split-section .tf-logo-btn:focus-visible {
    outline: 2px solid var(--tf-brand-red);
    outline-offset: 3px;
}
@media (max-width: 575.98px) {
    html body .split-section .tf-logo-btn img {
        width: 130px;
    }
}