/* =====================================================================================================
   Mode sombre (2026-11-01, demande du client) : <html data-theme="dark">, posé par le bouton .iw-theme-toggle
   de l'en-tête (choix mémorisé). Le mode clair est le design d'origine : ce fichier ne change rien sans
   data-theme="dark". Les sections déjà sombres (services, méthode, FAQ, contact, pied de page) restent telles
   quelles ; seules les surfaces claires passent en marine.
   ===================================================================================================== */

/* ---------- Bouton (les deux modes) ---------- */
.iw-theme-toggle {
	position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
	display: inline-grid; place-items: center; padding: 0; cursor: pointer;
	background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
	transition: background-color .3s ease, border-color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.iw-theme-toggle:hover { background: var(--theme-color1); border-color: var(--theme-color1); }
.iw-theme-toggle:active { transform: scale(.92); }
.iw-theme-toggle svg { grid-area: 1 / 1; transition: opacity .35s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.iw-theme-toggle__sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
.iw-theme-toggle__moon { opacity: 1; transform: none; }
html[data-theme="dark"] .iw-theme-toggle__sun { opacity: 1; transform: none; }
html[data-theme="dark"] .iw-theme-toggle__moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.main-header .header-lower .right-box { gap: 16px; }
.sticky-header .iw-theme-toggle { margin-right: 20px; }

/* Transition douce des couleurs, seulement pendant un changement de mode (pas au chargement). */
html.iw-theme-switching,
html.iw-theme-switching body,
html.iw-theme-switching main * { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }

/* ---------- Mode sombre ---------- */
html[data-theme="dark"] {
	color-scheme: dark;
	--body-bg: #0B0D15;
	--headings-color: #F1F2F6;
	--text-color: #A3A5B1;
	--iw-dark-surface: #151826;
	--iw-dark-surface-2: #1C1F2E;
	--iw-dark-line: #2A2E40;
}
html[data-theme="dark"] body { background-color: #0B0D15; color: #A3A5B1; }

/* Surfaces claires → marine (cartes, formulaires, bandeaux gris). */
html[data-theme="dark"] :is(
	.services-section .outer-box,
	.work-section-two .outer-box,
	.blog-block .content-box .inner-box,
	.contact-section-two .form-column .inner-column .form-box .inner-box,
	.funfact-box, .about-section-two .image-column .inner-column .funfact-box,
	.iw-filter__btn,
	.sidebar__category-list li a,
	.accordion-box .block,
	.service-sidebar .banner-widget
) { background-color: var(--iw-dark-surface) !important; border-color: var(--iw-dark-line) !important; }
html[data-theme="dark"] :is(.services-section, .work-section-two) .outer-box .bg-image { opacity: .06; }
html[data-theme="dark"] .service-block .inner-block:before { background-color: var(--iw-dark-surface); }
html[data-theme="dark"] .blog-block .image-box .date { background-color: var(--iw-dark-surface-2); }

/* Champs de formulaire. */
html[data-theme="dark"] :is(.wpcf7 input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .wpcf7 select, .wpcf7 textarea, .contact-details .form-control, .quote-form .form-control) {
	background-color: var(--iw-dark-surface-2) !important; border-color: var(--iw-dark-line) !important; color: #F1F2F6 !important;
}
html[data-theme="dark"] :is(.wpcf7 input, .wpcf7 textarea)::placeholder { color: #8A8D9C !important; }
html[data-theme="dark"] .wpcf7 select option { background: #151826; color: #F1F2F6; }
html[data-theme="dark"] :is(.form-clt label, .iw-label, .contact-details label, .wpcf7 label) { color: #F1F2F6 !important; }

/* Titres et textes posés sur ces surfaces. */
html[data-theme="dark"] :is(
	.service-block .inner-block .content .title, .service-block .inner-block .content .title a,
	.blog-block .content-box .inner-box .title, .blog-block .content-box .inner-box .title a,
	.blog-block .content-box .inner-box .btn-more,
	.accordion-box .block .acc-btn,
	.iw-filter__btn,
	.sidebar__category-list li a,
	.sidebar__post-content .h3 a,
	.iw-project-info dd, .iw-project-info dd a, .iw-project-info dt,
	.work-section-two .title, .work-section-two .title a
) { color: #F1F2F6 !important; }
html[data-theme="dark"] .iw-filter__btn.is-active { background-color: var(--theme-color1) !important; border-color: var(--theme-color1) !important; color: #fff !important; }
html[data-theme="dark"] .iw-filter__btn:hover { border-color: var(--theme-color1) !important; }
html[data-theme="dark"] .accordion-box .block .acc-btn.active { color: #fff !important; }

/* Petit texte rouge sur fond sombre : le rouge plus clair de la marque (contraste). */
html[data-theme="dark"] :is(.sec-title .sub-title, .blog-block .content-box .inner-box .sub-title, .phone_box .info strong, .title-box .title span, .btn-more span, .page-breadcrumb li a) { color: var(--iw-red-on-dark, #FF3358) !important; }

/* Encadrés des barres latérales (pages service, articles, réalisations), pastille « Plus de 300… », pagination. */
html[data-theme="dark"] :is(
	.title-box .h6.title,
	.service-sidebar-single ul li a, .service-sidebar ul li a,
	.sidebar__single, .sidebar__post, .sidebar__category,
	.iw-project-info,
	.nav-links .prev a, .nav-links .next a,
	.iw-filter__count
) { background-color: var(--iw-dark-surface) !important; border-color: var(--iw-dark-line) !important; color: #F1F2F6 !important; }
html[data-theme="dark"] :is(.service-sidebar-single ul li.current a, .service-sidebar ul li.current a) { background-color: var(--theme-color1) !important; color: #fff !important; }
html[data-theme="dark"] :is(.service-sidebar-single ul li a, .service-sidebar ul li a) span { color: inherit !important; }
html[data-theme="dark"] :is(.sidebar__title, .iw-project-info__title, .iw-project-info dt, .iw-project-info dd, .iw-project-info dd a, .sidebar__post-content .h3 a, .nav-links a) { color: #F1F2F6 !important; }
html[data-theme="dark"] .iw-project-info dt { color: #A3A5B1 !important; }
html[data-theme="dark"] .iw-filter__btn.is-active .iw-filter__count { background-color: #fff !important; color: var(--theme-color1) !important; }
html[data-theme="dark"] .service-details-help .theme-btn { background-color: #fff !important; color: var(--theme-color2) !important; }

/* Pastille « Développement et impression réunis » sous la méthode. */
html[data-theme="dark"] .work-section-two .outer-box .bottom-box .inner-box { background-color: var(--iw-dark-surface-2) !important; }
html[data-theme="dark"] .work-section-two .outer-box .bottom-box .inner-box .text { color: #F1F2F6 !important; }
html[data-theme="dark"] .work-section-two .bottom-box .btn-more, html[data-theme="dark"] .work-section-two .bottom-box .btn-more span { color: var(--iw-red-on-dark, #FF3358) !important; }

/* En-tête collant sur téléphone : le bouton passe avant l'icône du menu. */
@media (max-width: 1024px) {
	.sticky-header .inner-container { display: flex; align-items: center; }
	.sticky-header .iw-theme-toggle { order: 2; margin: 0 16px 0 auto; }
	.sticky-header .nav-outer .main-menu { display: none !important; }
	.sticky-header .mobile-nav-toggler { margin-left: 0 !important; }
	.sticky-header .nav-outer { order: 3; margin-left: 0 !important; flex: 0 0 auto !important; width: auto !important; }
}