/* =====================================================================================================
   Mode clair « rouge et blanc » (2026-11-01, demande du client) : en mode clair, le logo, l'en-tête,
   l'en-tête collant et le hero passent sur fond blanc avec le rouge de la marque. Le mode sombre garde
   le design sombre d'origine. Toutes les règles sont limitées à html:not([data-theme="dark"]).
   ===================================================================================================== */

/* ---------- Logo : la bonne version selon le mode ---------- */
.iw-logo--for-dark { display: none !important; }
html[data-theme="dark"] .iw-logo--for-light { display: none !important; }
html[data-theme="dark"] .iw-logo--for-dark { display: inline-block !important; }

/* ---------- Barre d'infos : rouge, texte blanc ---------- */
html:not([data-theme="dark"]) .header-style-two .header-upper { background-color: var(--iw-red-ink, #E2002F); }
html:not([data-theme="dark"]) .header-style-two .header-upper .info,
html:not([data-theme="dark"]) .header-style-two .header-upper .info a,
html:not([data-theme="dark"]) .header-style-two .header-upper .info .icon { color: #fff !important; }

/* ---------- En-tête principal : blanc ---------- */
html:not([data-theme="dark"]) .header-style-two { border-bottom-color: rgba(16, 18, 29, .08); }
html:not([data-theme="dark"]) .header-style-two .header-lower { background-color: #fff; box-shadow: 0 10px 30px -18px rgba(16, 18, 29, .25); }
/* ≤1024px the header has 15px padding around .header-lower: paint the whole bar white. */
@media (max-width:1024px){html:not([data-theme="dark"]) .main-header.header-style-two { background-color: #fff; box-shadow: 0 10px 30px -18px rgba(16, 18, 29, .25); } html:not([data-theme="dark"]) .header-style-two .header-lower { box-shadow: none; }}
html:not([data-theme="dark"]) .header-style-two .header-lower .inner-container .main-menu .navigation > li > a { color: #10121D !important; }
html:not([data-theme="dark"]) .header-style-two .header-lower .inner-container .main-menu .navigation > li:hover > a,
html:not([data-theme="dark"]) .header-style-two .header-lower .inner-container .main-menu .navigation > li.current > a,
html:not([data-theme="dark"]) .header-style-two .header-lower .inner-container .main-menu .navigation > li.current-menu-item > a,
html:not([data-theme="dark"]) .header-style-two .header-lower .inner-container .main-menu .navigation > li.current-menu-ancestor > a { color: var(--iw-red-ink, #E2002F) !important; }
html:not([data-theme="dark"]) .main-header .header-lower .right-box .header-phone_box .icon { background-color: var(--iw-red-ink, #E2002F) !important; color: #fff !important; }
html:not([data-theme="dark"]) .main-header .header-lower .right-box .header-phone_box .icon i { color: #fff !important; }
html:not([data-theme="dark"]) .main-header .header-lower .right-box .header-phone_box .info { color: #5F6170 !important; }
html:not([data-theme="dark"]) .main-header .header-lower .right-box .header-phone_box .info strong { color: #10121D !important; }
html:not([data-theme="dark"]) .main-header .header-lower .right-box .header-phone_box:hover .info strong { color: var(--iw-red-ink, #E2002F) !important; }
html:not([data-theme="dark"]) .header-style-two .header-lower .inner-container .right-box .mobile-nav-toggler span { background-color: #10121D !important; }

/* Bouton clair / sombre sur fond blanc. */
html:not([data-theme="dark"]) :is(.main-header .header-lower, .sticky-header) .iw-theme-toggle { background: #F4F4F5; border-color: rgba(16, 18, 29, .12); color: #10121D; }
html:not([data-theme="dark"]) :is(.main-header .header-lower, .sticky-header) .iw-theme-toggle:hover { background: var(--iw-red-ink, #E2002F); border-color: var(--iw-red-ink, #E2002F); color: #fff; }

/* ---------- En-tête collant : blanc ---------- */
html:not([data-theme="dark"]) .sticky-header { background: #fff !important; box-shadow: 0 10px 30px -14px rgba(16, 18, 29, .25) !important; }
html:not([data-theme="dark"]) .sticky-header .main-menu .navigation > li > a { color: #10121D !important; }
html:not([data-theme="dark"]) .sticky-header .main-menu .navigation > li:hover > a,
html:not([data-theme="dark"]) .sticky-header .main-menu .navigation > li.current > a,
html:not([data-theme="dark"]) .sticky-header .main-menu .navigation > li.current-menu-item > a { color: var(--iw-red-ink, #E2002F) !important; }
html:not([data-theme="dark"]) .sticky-header .header-phone_box .info { color: #5F6170 !important; }
html:not([data-theme="dark"]) .sticky-header .header-phone_box .info strong { color: #10121D !important; }
html:not([data-theme="dark"]) .sticky-header .mobile-nav-toggler span { background-color: #10121D !important; }

/* ---------- Hero : blanc et rouge ---------- */
/* Photo claire (bureau blanc, images/resource/banner2-1-light.webp) à la place de la photo sombre du mode sombre. */
html:not([data-theme="dark"]) .banner-section-two .outer-box { background-color: transparent; }
html:not([data-theme="dark"]) .banner-section-two .outer-box .bg-image { background: #F3F3F5 url(../images/resource/banner2-1-light.webp) right center / cover no-repeat; }
html:not([data-theme="dark"]) .banner-section-two .outer-box .bg-image img { opacity: 0; }
html:not([data-theme="dark"]) .banner-section-two .outer-box::before { opacity: 0 !important; }
html:not([data-theme="dark"]) .banner-section-two .outer-box .bg-image::after {
	background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .9) 32%, rgba(255, 255, 255, .2) 52%, rgba(255, 255, 255, 0) 70%);
}
@media (max-width: 767.98px) {
	html:not([data-theme="dark"]) .banner-section-two .outer-box .bg-image { background-position: 72% center; }
	html:not([data-theme="dark"]) .banner-section-two .outer-box .bg-image::after { background: rgba(255, 255, 255, .86); }
	html:not([data-theme="dark"]) .banner-section-two .outer-box .outer-container .info-box .text { background: none; backdrop-filter: none; box-shadow: none; padding: 0; }
}
html:not([data-theme="dark"]) .banner-section-two .outer-box .outer-container .banner-content .inner-content .banner-title { color: #10121D; }
html:not([data-theme="dark"]) .banner-section-two .outer-box .outer-container .banner-content .inner-content .banner-title span.iw-hero-mask:first-child > span,
html:not([data-theme="dark"]) .banner-section-two .outer-box .outer-container .banner-content .inner-content .banner-title > span:first-child:not(.iw-hero-mask) { color: var(--iw-red-ink, #E2002F); }
html:not([data-theme="dark"]) .banner-section-two .sub-title { color: var(--iw-red-ink, #E2002F) !important; }
html:not([data-theme="dark"]) .banner-section-two .outer-box .outer-container .info-box .text { color: #2E3040; }
/* Le paragraphe du hero passe sur un panneau blanc translucide : il reste lisible au-dessus de la photo. */
html:not([data-theme="dark"]) .banner-section-two .outer-box .outer-container .info-box .text {
	background: rgba(255, 255, 255, .86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	border-radius: 16px; padding: 18px 22px; box-shadow: 0 12px 30px -18px rgba(16, 18, 29, .35);
}

/* =====================================================================================================
   Mode clair rouge et blanc, sur tout le site (2026-11-01) : les sections sombres du modèle deviennent
   claires (blanc / gris très clair) ou rouges (contact, bandeaux de titre). Mêmes portées que ci-dessus.
   ===================================================================================================== */
html:not([data-theme="dark"]) {
	--iw-l-grey: #F5F5F7;
	--iw-l-line: #E6E6EA;
	--iw-l-ink: #10121D;
	--iw-l-text: #4F5160;
	--iw-l-red: var(--iw-red-ink, #E2002F);
}

/* ---------- Sections sombres → claires ---------- */
html:not([data-theme="dark"]) .feature-section { background-color: #fff; }
html:not([data-theme="dark"]) :is(.services-section-two, .faq-section-two) .outer-box { background-color: var(--iw-l-grey) !important; }
html:not([data-theme="dark"]) :is(.feature-section, .services-section-two, .faq-section-two) .bg-image,
html:not([data-theme="dark"]) :is(.feature-section, .services-section-two, .faq-section-two) [class*="shape-"] { opacity: .06; }
html:not([data-theme="dark"]) :is(.feature-section, .services-section-two, .faq-section-two) :is(h1, h2, h3, h4, h5, h6, .title, .title a, .sec-title .title) { color: var(--iw-l-ink) !important; }
html:not([data-theme="dark"]) :is(.feature-section, .services-section-two, .faq-section-two) :is(p, .text, .sec-title .text) { color: var(--iw-l-text) !important; }
html:not([data-theme="dark"]) :is(.services-section-two, .faq-section-two) .sec-title .sub-title { color: var(--iw-l-red) !important; }

/* Cartes du carrousel des services : blanches. */
html:not([data-theme="dark"]) .service-block-two .inner-block { background-color: #fff !important; border-color: var(--iw-l-line) !important; box-shadow: 0 18px 40px -30px rgba(16, 18, 29, .35); }
html:not([data-theme="dark"]) .service-block-two .inner-block:hover { border-color: var(--iw-l-red) !important; }
html:not([data-theme="dark"]) .service-block-two .inner-block .number { background: linear-gradient(180deg, rgba(16, 18, 29, .14), rgba(16, 18, 29, .02)); -webkit-background-clip: text; background-clip: text; }

/* FAQ : questions blanches, la question ouverte en rouge. */
html:not([data-theme="dark"]) .faq-section-two .accordion-box .block { background-color: #fff !important; border: 1px solid var(--iw-l-line) !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .accordion .acc-btn { background-color: #fff !important; border-color: var(--iw-l-line) !important; color: var(--iw-l-ink) !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .accordion .acc-btn:before { background-color: var(--iw-l-line) !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .accordion .acc-btn span { color: var(--iw-l-red) !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .accordion.active-block .acc-btn { background-color: var(--iw-l-red) !important; border-color: var(--iw-l-red) !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .accordion.active-block .acc-btn span { color: #fff !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .accordion.active-block .acc-btn,
html:not([data-theme="dark"]) .faq-section-two .accordion-box .block .acc-btn.active { color: #fff !important; }
html:not([data-theme="dark"]) .faq-section-two .accordion-box .block .acc-content .content .text,
html:not([data-theme="dark"]) .faq-section-two .accordion-box .block .acc-content p { color: var(--iw-l-text) !important; }

/* ---------- Contact : bloc rouge, formulaire blanc ---------- */
html:not([data-theme="dark"]) .contact-section-two .outer-box { background-color: var(--iw-l-red) !important; }
html:not([data-theme="dark"]) .contact-section-two .outer-box .bg-image { opacity: .12; mix-blend-mode: multiply; }
html:not([data-theme="dark"]) .contact-section-two .sec-title :is(.title, .sub-title, .text) { color: #fff !important; }
html:not([data-theme="dark"]) .contact-section-two .sec-title .sub-title:before { background: #fff !important; }
html:not([data-theme="dark"]) .contact-section-two .theme-btn.btn-style-one { background-color: var(--iw-l-ink) !important; }

/* ---------- Bandeaux de titre des pages : voile rouge, titre blanc ---------- */
html:not([data-theme="dark"]) .page-title:before { background-color: var(--iw-l-red) !important; opacity: .86 !important; }
html:not([data-theme="dark"]) .page-title .page-breadcrumb li,
html:not([data-theme="dark"]) .page-title .page-breadcrumb li a,
html:not([data-theme="dark"]) .page-title .page-breadcrumb li:after { color: #fff !important; }
html:not([data-theme="dark"]) .page-title .page-breadcrumb li a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bandeau défilant (À propos) et rubans croisés (accueil) ---------- */
html:not([data-theme="dark"]) .iw-tapes .iw-tape--back { background: #fff; box-shadow: 0 0 0 1px var(--iw-l-line); }
html:not([data-theme="dark"]) .iw-tapes .iw-tape--back .text { -webkit-text-stroke-color: var(--iw-l-red); }

/* ---------- Petits blocs sombres ---------- */
html:not([data-theme="dark"]) .about-section .list-style-box,
html:not([data-theme="dark"]) .content-column .list-style-box { background-color: var(--iw-l-grey) !important; }
html:not([data-theme="dark"]) .list-style-box :is(li, li a, li span, .text) { color: var(--iw-l-ink) !important; }

/* ---------- Pied de page clair ---------- */
html:not([data-theme="dark"]) .footer-style-two { background-color: var(--iw-l-grey) !important; border-top: 4px solid var(--iw-l-red); }
html:not([data-theme="dark"]) .footer-style-two .bg-image { opacity: .05; }
html:not([data-theme="dark"]) .footer-style-two :is(h1, h2, h3, h4, h5, .widget-title, .title, strong) { color: var(--iw-l-ink) !important; }
html:not([data-theme="dark"]) .footer-style-two :is(p, li, a, span, .text, .copyright-text) { color: var(--iw-l-text) !important; }
html:not([data-theme="dark"]) .footer-style-two a:hover { color: var(--iw-l-red) !important; }
html:not([data-theme="dark"]) .footer-style-two .upper-box, html:not([data-theme="dark"]) .footer-style-two .footer-bottom { border-color: var(--iw-l-line) !important; }
html:not([data-theme="dark"]) .footer-style-two .icon, html:not([data-theme="dark"]) .footer-style-two .icon-box { background-color: #fff !important; }
html:not([data-theme="dark"]) .footer-style-two :is(input[type="email"], input[type="text"]) { background-color: #fff !important; border: 1px solid var(--iw-l-line) !important; color: var(--iw-l-ink) !important; }
html:not([data-theme="dark"]) .footer-style-two .social-icon a, html:not([data-theme="dark"]) .footer-style-two .from-clt a { background-color: #fff !important; border-color: var(--iw-l-line) !important; }