/* Ajustements WordPress pour le template Digitos (le design d'origine n'est pas modifié). */

/* Charte Ionia Web : rouge et noir du logo (rouge #FE0034, noir bleuté #10121D) ; remplace l'orange #F2520D du template.
   --theme-color-dark (cartes posées sur les sections noires) reste un peu plus clair que le noir pour garder le relief. */
:root {
	--theme-color1: #FE0034;
	--theme-color1-rgb: 254, 0, 52;
	--theme-color2: #10121D;
	--theme-color2-rgb: 16, 18, 29;
	--theme-color-black: #10121D;
	--theme-color-black-rgb: 16, 18, 29;
	--theme-black: #10121D;
	--theme-color-dark: #181B2A;
	--headings-color: #10121D;
}

/* Défilement natif, simplement adouci (l'effet d'inertie GSAP ScrollSmoother du template est retiré). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* Les formes décoratives débordent sur les côtés : on coupe le débordement horizontal
   (sinon la page s'élargit sur mobile et le menu latéral s'ouvre hors écran). */
html, body { overflow-x: hidden; }
.page-wrapper { overflow-x: clip; }

/* Barre d'administration : WordPress décale déjà la page (marge sur <html>), seul l'en-tête collant
   (position: fixed) doit descendre sous la barre. Sur mobile, la barre défile avec la page. */
.admin-bar .sticky-header.fixed-header { top: 32px; }
@media screen and (max-width: 782px) {
	.admin-bar .sticky-header.fixed-header { top: 0; }
}

/* Logo : texte « Ionia Web » en attendant le vrai logo (iw_logo()). Une image choisie dans le Customizer garde
   l'encombrement du logo du template. */
.main-header .logo img,
.mobile-menu .nav-logo img,
.main-footer .logo img { width: 180px; height: auto; }
.sticky-header .logo img { width: auto; max-height: 42px; }
.iw-logo-text {
	display: inline-block;
	font-family: var(--heading-font-family);
	font-size: 30px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: #fff;
}
.iw-logo-text span { color: var(--theme-color1); }
.iw-logo-text--dark { color: var(--theme-color2); }
@media (max-width: 575.98px) { .iw-logo-text { font-size: 26px; } }

/* Élément de menu visible uniquement dans le menu mobile (classe CSS « iw-mobile-only » dans Apparence > Menus). */
.main-header .header-lower .navigation > li.iw-mobile-only,
.sticky-header .navigation > li.iw-mobile-only { display: none; }

/* Liens de la barre d'infos et du pied de page : couleur du texte d'origine. */
.header-style-two .header-upper .info a,
.footer-style-two .upper-box .info .content a { color: inherit; }
.footer-style-two .upper-box .info .content a { display: block; }

/* Champ piège anti-spam des formulaires. */
.iw-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Messages des formulaires. */
.iw-form-notice {
	margin: 0 0 24px;
	padding: 14px 20px;
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--headings-color);
	border: 1px solid;
}
.iw-form-notice.is-success { background: rgba(var(--iw-success), .1); border-color: rgba(var(--iw-success), .6); }
.iw-form-notice.is-error { background: rgba(var(--theme-color1-rgb), .08); border-color: var(--theme-color1); }
.contact-section-two .iw-form-notice,
.footer-style-two .iw-form-notice { color: #fff; }
.footer-style-two .iw-form-notice { margin: 14px 0 0; font-size: 14px; }

/* Formulaire de contact sur fond sombre : la liste déroulante native reprend le style des champs. */
.contact-section-two .form-clt select { width: 100%; }

/* Demande de devis : numéros d'étapes à la place des icônes, listes déroulantes alignées sur les champs. */
.iw-step-num { font-family: var(--heading-font-family); font-size: 20px; font-weight: 600; line-height: 1; color: #fff; }
.contact-details .form-select { background-position: right 20px center; }

/* Détail de service : points clés sur deux colonnes. */
.services-details__content .iw-feature-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 24px 0 0; }
@media (max-width: 575.98px) { .services-details__content .iw-feature-list { grid-template-columns: 1fr; } }
.services-details__content .feature-list img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; }

/* Contenu éditorial (pages classiques et articles). */
.iw-entry-content > * + * { margin-top: 1.2em; }
.iw-entry-content h1, .iw-entry-content h2, .iw-entry-content h3,
.iw-entry-content h4, .iw-entry-content h5, .iw-entry-content h6 { color: var(--headings-color); margin-top: 1.6em; }
.iw-entry-content a { color: var(--theme-color1); text-decoration: underline; }
.iw-entry-content ul, .iw-entry-content ol { padding-left: 1.4em; }
.iw-entry-content ul { list-style: disc; }
.iw-entry-content ol { list-style: decimal; }
.iw-entry-content img { max-width: 100%; height: auto; border-radius: 12px; }
.iw-entry-content blockquote { border-left: 3px solid var(--theme-color1); padding-left: 1.2em; color: var(--headings-color); font-size: 1.15em; }
.iw-entry-content .wp-block-button__link { background: var(--theme-color1); color: #fff; text-decoration: none; }

/* Images d'articles (vignettes de tailles variées). */
.blog-block .image-box .image img { width: 100%; aspect-ratio: 424 / 360; object-fit: cover; }
.blog-details__img img { width: 100%; height: auto; }
.sidebar__post-image img { width: 70px; height: 70px; object-fit: cover; }

/* Pagination du blog. */
.iw-pagination .nav-links { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.iw-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	width: 50px; height: 50px; border-radius: 50%;
	border: 1px solid rgba(var(--theme-color2-rgb), .15); color: var(--headings-color);
}
.iw-pagination .page-numbers.current,
.iw-pagination .page-numbers:hover { background: var(--theme-color1); border-color: var(--theme-color1); color: #fff; }

/* Commentaires WordPress dans le style du template. */
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea {
	width: 100%; padding: 16px 20px; margin-bottom: 20px; border-radius: 10px;
	background: var(--theme-color-gray); border: 1px solid transparent; color: var(--headings-color);
}
.comment-form label { display: block; margin-bottom: 8px; color: var(--headings-color); }
.comment-one .comment-reply-link { color: var(--theme-color1); }
.comment-one__image img { border-radius: 50%; }

/* Le titre du hero est un <h1> (une seule balise h1 par page) : mêmes marges que le <div> du template. */
.banner-section-two .banner-title { margin: 0; }

/* Animations d'apparition au défilement plus rapides (template : 1 s ; délais réduits dans inc/enqueue.php). */
.wow.animated { -webkit-animation-duration: .5s; animation-duration: .5s; }

/* En-tête : 7 entrées de menu et un bouton « Demander un devis » plus long que dans le template.
   On garde tout sur une ligne : pas de retour à la ligne, espacement réduit, téléphone masqué sur les petits écrans de bureau. */
@media (min-width: 1025px) {
	.main-header .header-lower .main-menu .navigation > li > a,
	.main-header .header-lower .right-box .header-phone_box .info,
	.main-header .header-lower .right-box .theme-btn { white-space: nowrap; }
	.main-header .header-lower .inner-container .right-box { gap: 24px; }
}
@media (min-width: 1025px) and (max-width: 1699.98px) {
	.header-style-one .header-lower .inner-container .main-menu .navigation > li,
	.header-style-two .header-lower .inner-container .main-menu .navigation > li { margin-right: 24px; }
}
@media (min-width: 1025px) and (max-width: 1399.98px) {
	.header-style-one .header-lower .inner-container .main-menu .navigation > li,
	.header-style-two .header-lower .inner-container .main-menu .navigation > li { margin-right: 18px; }
	.main-header .header-lower .inner-container .right-box .header-phone_box { display: none; }
}
@media (min-width: 1025px) {
	.main-header .header-lower .main-menu .navigation { display: flex; flex-wrap: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1699.98px) {
	.header-style-one .header-lower .inner-container .left-box,
	.header-style-two .header-lower .inner-container .left-box { gap: 60px; }
}

/* Section contact sur fond sombre : le formulaire reste entièrement dans le bloc noir
   (dans le template, la carte du formulaire dépasse sous le bloc). */
@media (min-width: 992px) {
	.contact-section-two { padding-bottom: 120px; }
	.contact-section-two .outer-box { padding-bottom: 120px; }
	.contact-section-two .form-column .inner-column .form-box .inner-box { margin-bottom: 0; }
}

/* Sections « encadrées » (bloc arrondi plein, sans marge extérieure) : dans le template elles ne se suivent jamais.
   Quand on les enchaîne (page Services, Devis), on remet l'espacement habituel de 120 px entre elles et avant le pied de page.
   La vidéo garde son chevauchement volontaire sous la section « méthode ». */
:is(.services-section, .services-section-two, .work-section-two, .faq-section-two, .contact-section-two, .contact-details) + :is(.services-section-two, .work-section-two, .faq-section-two, .contact-section-two) { margin-top: 120px; }
.contact-details + :is(.services-section-two, .work-section-two, .faq-section-two, .contact-section-two) { margin-top: 50px; }
:is(.services-section-two, .work-section-two, .faq-section-two) + .main-footer { margin-top: 120px; }
@media (max-width: 767.98px) {
	:is(.services-section, .services-section-two, .work-section-two, .faq-section-two, .contact-section-two) + :is(.services-section-two, .work-section-two, .faq-section-two, .contact-section-two) { margin-top: 80px; }
	.contact-details + :is(.services-section-two, .work-section-two, .faq-section-two, .contact-section-two) { margin-top: 10px; }
	:is(.services-section-two, .work-section-two, .faq-section-two) + .main-footer { margin-top: 80px; }
}

/* ==========================================================================
   Revue design & accessibilité (audit « impeccable », 10/10/2026)
   ========================================================================== */

/* Contraste : le gris de texte du template (#838383, 3,8:1 sur blanc) passe à 5,7:1 ; rouge éclairci sur fond noir. */
:root {
	--text-color: #666666;
	--iw-red-on-dark: #FF3358;
	--iw-success: 46, 160, 67;
}
.form-control::placeholder,
.contact-section-two .form-column .inner-column .form-box .inner-box .form-clt input::placeholder,
.contact-section-two .form-column .inner-column .form-box .inner-box .form-clt textarea::placeholder { color: #6b6b6b; }
.footer-style-two .subscribe-widget input::placeholder { color: #a3a3a3; }
.sec-title.light .sub-title,
.page-breadcrumb li a,
.main-header .header-lower .header-phone_box .info strong,
.faq-section-two .sub-title { color: var(--iw-red-on-dark); }

/* Focus clavier visible partout (le template supprime tous les contours). Blanc sur les surfaces sombres. */
:focus-visible { outline: 2px solid var(--theme-color1) !important; outline-offset: 3px; }
.main-header :focus-visible, .mobile-menu :focus-visible, .page-title :focus-visible, .banner-section-two :focus-visible,
.feature-section :focus-visible, .services-section-two :focus-visible, .video-section :focus-visible, .faq-section-two :focus-visible,
.contact-section-two .sec-title :focus-visible, .main-footer :focus-visible, .service-details-help :focus-visible,
.theme-btn:focus-visible { outline-color: #fff !important; }
.sticky-header :focus-visible { outline-color: var(--theme-color1) !important; }
.btn-style-one:focus-visible, .btn-style-three:focus-visible { box-shadow: 0 0 0 5px var(--theme-color1); }

/* Lien d'évitement. */
.iw-skip-link {
	position: fixed; top: 10px; left: 10px; z-index: 100000;
	padding: 12px 20px; border-radius: 8px;
	background: var(--theme-color1); color: #fff; font-weight: 600;
	transform: translateY(-150%); transition: transform .2s ease;
}
.iw-skip-link:focus { transform: none; color: #fff; }
main#contenu:focus { outline: none; }

/* Contenu animé à l'apparition : reste atteignable au clavier et par les lecteurs d'écran
   (WOW masque avec visibility:hidden ; on masque seulement visuellement). */
.wow[style*="visibility: hidden"] { visibility: visible !important; opacity: 0; }
.wow[style*="visibility: hidden"]:focus-within { opacity: 1; }

/* Sous-menu du menu principal ouvert au clavier. */
.main-menu .navigation > li.dropdown:focus-within > ul {
	visibility: visible; opacity: 1; top: 100%;
	-webkit-transform: none; transform: none;
}

/* Réalisations : titre et catégories visibles sans survol (écrans tactiles, clavier). */
.project-block-two .inner-block:focus-within .content { visibility: visible; opacity: 1; transform: none; }
.project-block-two .inner-block:focus-within:before { height: 47%; }
@media (hover: none) {
	.project-block-two .inner-block .content { visibility: visible; opacity: 1; transform: none; }
	.project-block-two .inner-block:before { height: 47%; }
}

/* Titres : retours à la ligne équilibrés (pas de mot orphelin). */
.sec-title .title, .banner-title, .page-title .title, .video-section .title, .h4.title, .help-title,
.blog-details__title, .iw-entry-content h2, .iw-entry-content h3 { text-wrap: balance; }

/* Boutons et numéros de téléphone sur une seule ligne. */
.theme-btn, .phone_box .info strong, .header-phone_box .info strong { white-space: nowrap; }
.service-details-help .help-contact a { font-size: clamp(22px, 2vw, 28px); white-space: nowrap; }

/* Cartes de services : icônes alignées sur la même hauteur, quelle que soit leur taille. */
.service-block .inner-block .content .icon { height: 56px; display: flex; align-items: flex-end; }
.service-block .inner-block .content .icon img { max-height: 56px; width: auto; }

/* Chiffres clés : libellés lisibles sur une ligne, colonnes égales. */
.funfact-block .text { letter-spacing: .02em; }

/* Section vidéo : dégradé sombre sous le titre blanc pour la lisibilité. */
.video-section .outer-box .bg-image:after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .55) 100%);
}
@media (max-width: 767.98px) {
	.video-section .outer-box .video-box { margin-bottom: 40px; }
}

/* Espacements : section collée sous le bandeau de titre (page Services) ; vide entre chiffres et témoignages. */
.page-title + .services-section { margin-top: 120px; }
.funfact-section-two + .testimonial-section-two { padding-top: 40px; }
@media (max-width: 767.98px) {
	.page-title + .services-section { margin-top: 80px; }
}

/* Détail de service : contenu avant la barre latérale sur mobile ; texte des questions dégagé de l'icône. */
@media (max-width: 991.98px) {
	.services-details .container > .row > div:first-child { order: 2; margin-top: 50px; }
}
.services-details .accordion-box .block .acc-btn { padding-right: 64px; }
.sidebar-service-list li a { background-color: var(--theme-color-gray); }

/* Fil d'Ariane : pas de séparateur orphelin. */
.page-breadcrumb li { white-space: nowrap; }

/* Coordonnées (Contact, Devis) : la valeur prime sur son libellé ; icônes arrondies comme le reste du site. */
.contact-details__info .text .h6 { color: var(--text-color); font-size: 14px; font-weight: 500; }
.contact-details__info .text a, .contact-details__info .text span { color: var(--headings-color); font-size: 17px; }
.contact-details__info .icon { border-radius: 12px; }

/* Formulaires Contact et Devis : libellés visibles, champs gris neutres comme les autres formulaires. */
.iw-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--headings-color); }
.iw-req { color: var(--theme-color1); }
.contact-details .form-control { background-color: #f3f3f3; border-color: #f3f3f3; color: var(--headings-color); }
.contact-details .form-control:focus { border-color: var(--theme-color1); box-shadow: none; }
textarea, .form-control { resize: vertical; }
textarea { overflow: auto; }

/* Pied de page : coordonnées toutes en blanc. */
.footer-style-two .upper-box .info .content a,
.footer-style-two .upper-box .info .content span { color: #fff; }

/* Carte : fond neutre pendant le chargement, teintes adoucies. */
.map-section { background: #eee; }
.map-section iframe { filter: grayscale(1) contrast(1.05); }

/* Article : titres de contenu à l'échelle de la page, date lisible, formulaire de commentaire stylé. */
.iw-entry-content h2 { font-size: 32px; margin: 1.6em 0 .6em; }
.iw-entry-content h3 { font-size: 24px; margin: 1.4em 0 .5em; }
.blog-details__date .month { font-size: 12px; }
.comment-form .comment-form-cookies-consent { display: flex; gap: 10px; align-items: flex-start; }
.comment-form .comment-form-cookies-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--theme-color1); }
.comment-form .comment-form-cookies-consent label { margin: 0; }
.comment-reply-title small { margin-left: 10px; font-size: 14px; }

/* En-tête collant : bouton « Demander un devis » (masqué sur mobile, comme dans l'en-tête principal). */
.sticky-header .inner-container { gap: 24px; }
@media (max-width: 1024px) { .sticky-header .iw-sticky-cta { display: none; } }

/* Cibles tactiles d'au moins 44 px sur mobile. */
@media (max-width: 767.98px) {
	.mobile-nav-toggler { padding: 12px 10px; margin: -12px -10px; box-sizing: content-box; }
	.footer-style-two .subscribe-widget .from-clt button { width: 44px; height: 44px; }
	.footer-style-two .user-links li a, .footer-style-two .footer-bottom .social-icon a,
	.footer-style-two .subscribe-widget .social-icon a { display: inline-flex; align-items: center; min-height: 44px; }
	.page-breadcrumb li a { display: inline-block; padding: 10px 0; }
	.btn-more { display: inline-flex; align-items: center; min-height: 44px; }
	.testi-two_button-prev, .testi-two_button-next { width: 44px; height: 44px; }
	.about-section-two .video-box { width: 44px; height: 44px; }
	.testimonial-section-two .outer-container { overflow: hidden; }
}

/* Mouvement réduit : pas d'animations décoratives en boucle ni d'apparitions. */
@media (prefers-reduced-motion: reduce) {
	.bounce-x, .animate-circle, .round-icon .icon img, .about-section-two .round-icon .icon img,
	.marquee-group, .service-block-two .icon img, .play-now .ripple, .play-now:before, .play-now:after { animation: none !important; }
	.wow { visibility: visible !important; opacity: 1 !important; animation: none !important; }
}

/* Texte courant sur les surfaces sombres : gris clair (le gris de texte foncé n'y est plus lisible). */
.feature-section .feature-block .text,
.services-section-two .sec-title-box .text,
.service-block-two .inner-block .text,
.faq-section-two .acc-content .text,
.footer-style-two .widget-content a { color: #a3a3a3; }
/* Méta-données du blog et lien rouge sur fond gris clair : contraste AA. */
.sidebar__post-content-meta, .blog-details__meta li a, .blog-details__meta li span { color: #5f5f5f; }
.work-section-two .bottom-box .btn-more, .work-section-two .bottom-box .btn-more span { color: #D6002C; }
@media (max-width: 767.98px) {
	.footer-style-two .subscribe-widget .from-clt button { width: 44px !important; height: 44px !important; }
	.testimonial-section-two .arrow-box .testi-two_button-prev,
	.testimonial-section-two .arrow-box .testi-two_button-next { width: 44px !important; height: 44px !important; }
}
/* Les boutons ne rétrécissent pas dans les rangées flexibles (sinon la pastille flèche est rognée). */
.theme-btn { flex-shrink: 0; }
/* Hero : le texte ne passe pas sous le badge tournant. */
@media (min-width: 1400px) {
	.banner-section-two .outer-box .outer-container .info-box .text { padding-right: 70px; }
}
/* Renforts de spécificité (les règles du template sont plus précises). */
.faq-section-two .accordion-box .acc-content .text,
.service-block-two .inner-block .content .text { color: #a3a3a3 !important; }
.sidebar .sidebar__post .sidebar__post-content-meta { color: #5f5f5f; }
.service-details-help .help-contact p { color: #fff; opacity: 1; }
.accordion-box .block .acc-btn { line-height: 1.4; }
/* Réalisations : légendes visibles en permanence sur tablette et mobile. */
@media (max-width: 991.98px) {
	.project-block-two .inner-block .content { visibility: visible; opacity: 1; transform: none; }
	.project-block-two .inner-block:before { height: 47%; }
}

/* ---------- Cartes de même hauteur dans une rangée, quelle que soit la longueur du texte ---------- */
/* Carrousels : les slides prennent la hauteur de la plus haute (Swiper leur donne height:100%). */
.service-two_swiper .swiper-slide,
.testimonial-section-two .swiper-slide { height: auto; display: flex; flex-direction: column; }
.service-block-two .inner-block,
.testimonial-block .inner-block { flex: 1 1 auto; display: flex; flex-direction: column; }
/* Le grand numéro reste collé en bas de la carte de service. */
.service-block-two .inner-block .number { margin-top: auto; }
/* Témoignages : l'auteur et la note restent alignés en bas. */
.testimonial-block .inner-block .info-box { margin-top: auto; }
/* Articles : même hauteur de cadre blanc, lien « Lire la suite » aligné en bas. */
.blog-block { display: flex; flex-direction: column; }
.blog-block .inner-block,
.blog-block .content-box,
.blog-block .content-box .inner-box { flex: 1 1 auto; display: flex; flex-direction: column; }
.blog-block .content-box .inner-box .btn-more { margin-top: auto; align-self: flex-start; }

/* « Pourquoi nous choisir » : les deux colonnes commencent à la même hauteur (icônes alignées). */
.why-choose-us-section-two .content-column .inner-column .info-box { align-items: stretch; }
.why-choose-us-section-two .content-column .inner-column .info-box .info { align-items: flex-start; }
/* Grille de services : cartes de même hauteur, photos alignées en bas. */
.services-section .service-block { display: flex; flex-direction: column; }
.services-section .service-block .inner-block { flex: 1 1 auto; display: flex; flex-direction: column; }
.services-section .service-block .inner-block .image { margin-top: auto; }
/* Carrousel de services (accueil) : vraies photos (Unsplash) dans une zone de hauteur fixe, arrondie,
   pour que les titres soient tous à la même hauteur. */
.service-block-two .inner-block { padding-top: 15px; }
.service-block-two .inner-block .icon { height: 280px; margin-bottom: 34px; border-radius: 20px; overflow: hidden; }
.service-block-two .inner-block .icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767.98px) {
	.service-block-two .inner-block .icon { height: 220px; }
}

/* En-tête collant : même règle que l'en-tête principal, tout sur une ligne (téléphone masqué entre 1025 et 1399 px). */
@media (min-width: 1025px) {
	.sticky-header .main-menu .navigation { display: flex; flex-wrap: nowrap; }
	.sticky-header .main-menu .navigation > li > a, .sticky-header .theme-btn { white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1399.98px) {
	.sticky-header .inner-container .header-phone_box { display: none !important; }
	.sticky-header .main-menu .navigation > li { margin-right: 18px; }
}
/* Photos du carrousel : pas de rotation à 360° du template ; léger zoom au survol et sur la carte active. */
.service-block-two .inner-block .icon img,
.service-block-two.swiper-slide-active .inner-block .icon img,
.service-block-two .inner-block:hover .icon img { -webkit-animation: none; animation: none; transition: transform .6s ease; }
.service-block-two .inner-block:hover .icon img { transform: scale(1.05); }

/* ---------- Contact Form 7 (inc/forms.php) ---------- */
.iw-cf7 .wpcf7-form-control-wrap { display: block; }
.iw-cf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 13px; color: var(--theme-color1); }
.iw-cf7 .wpcf7-spinner { display: none; }
.iw-cf7 form.submitting .wpcf7-submit { opacity: .6; pointer-events: none; }
.iw-cf7 form .wpcf7-response-output {
	margin: 0 0 24px;
	padding: 14px 20px;
	border-radius: 10px;
	border: 1px solid;
	font-size: 15px;
	line-height: 1.5;
	color: var(--headings-color);
}
.iw-cf7 form.sent .wpcf7-response-output { background: rgba(var(--iw-success), .1); border-color: rgba(var(--iw-success), .6); }
.iw-cf7 form.invalid .wpcf7-response-output,
.iw-cf7 form.unaccepted .wpcf7-response-output,
.iw-cf7 form.spam .wpcf7-response-output,
.iw-cf7 form.failed .wpcf7-response-output { background: rgba(var(--theme-color1-rgb), .08); border-color: var(--theme-color1); }
/* Sur fond sombre : texte blanc, rouge plus clair pour le contraste. */
.contact-section-two .iw-cf7 form .wpcf7-response-output,
.footer-style-two .iw-cf7 form .wpcf7-response-output { color: #fff; }
.contact-section-two .iw-cf7 .wpcf7-not-valid-tip,
.footer-style-two .iw-cf7 .wpcf7-not-valid-tip { color: var(--iw-red-on-dark); }
.footer-style-two .iw-cf7 form .wpcf7-response-output { margin: 14px 0 0; padding: 10px 14px; font-size: 14px; }
/* Newsletter : l'info-bulle d'erreur ne doit pas décaler le bouton placé dans le champ. */
.footer-style-two .iw-cf7 .from-clt { position: relative; }
.footer-style-two .iw-cf7 .from-clt .wpcf7-not-valid-tip { position: absolute; left: 0; top: 100%; }
/* Bandeau « Plus de 300 entreprises… » sans logos : seule la phrase reste, l'espace sous la ligne est réduit. */
.clients-section-two.iw-no-logos { padding-bottom: 100px; }
.clients-section-two.iw-no-logos .title-box { margin-bottom: 0; }
@media (max-width: 767.98px) { .clients-section-two.iw-no-logos { padding-bottom: 70px; } }
/* Cartes entièrement cliquables (assets/js/iw.js). */
.iw-card-link { cursor: pointer; }
/* Bouton WhatsApp (extension Joinchat) en bas à droite : le bouton « retour en haut » se place au-dessus, centré sur lui. */
.back-to-top-wrapper { right: 36px; }
.back-to-top-wrapper.back-to-top-btn-show { bottom: 108px; }
@media (max-width: 767.98px) {
	.back-to-top-wrapper { right: 26px; }
	.back-to-top-wrapper.back-to-top-btn-show { bottom: 92px; }
}
/* Icône du menu mobile (tiroir) : masquée sur ordinateur, où le menu complet est affiché ; visible à 1024 px et moins. */
@media (min-width: 1025px) {
	.main-header .header-lower .inner-container .right-box .mobile-nav-toggler { display: none; }
}
/* Hero : marque « iw » provisoire au centre du badge tournant (image @2x). */
.banner-section-two .outer-box .round-icon .icon-two img { width: 75px; height: auto; }
/* Pied de page : pastilles d'icônes visibles sur le fond noir bleuté. */
.footer-style-two .upper-box .info-box .info .icon { background-color: rgba(255, 255, 255, .06); }

/* ==========================================================================
   Revue design n°2 (impeccable critique + revue design, 10/10/2026)
   ========================================================================== */

/* Contraste du rouge du logo. #FE0034 reste la couleur de marque sur les grandes surfaces (courbe du hero, icônes,
   formes, accents). Les boutons, l'accordéon ouvert et les petits textes rouges sur fond clair utilisent une nuance
   à peine plus profonde du même rouge, #E2002F (4,7:1 avec du blanc, contre 4,0:1). Sur les fonds sombres, les petits
   textes rouges utilisent --iw-red-on-dark. */
:root { --iw-red-ink: #E2002F; }
.btn-style-one,
.btn-style-two,
.faq-section-two .outer-box .faq-column .inner-column .faq-box .inner-box .accordion-box .accordion.active-block .acc-btn,
.service-details-help { background-color: var(--iw-red-ink); }
.sec-title .sub-title,
.blog-block .content-box .inner-box .sub-title,
.clients-section-two .title-box .title span,
.funfact-section-two .title-box .title span,
.iw-req,
.iw-cf7 .wpcf7-not-valid-tip { color: var(--iw-red-ink); }
.services-section-two .sec-title .sub-title,
.faq-section-two .sec-title .sub-title,
.contact-section-two .sec-title .sub-title,
.video-section .sub-title,
.page-breadcrumb li a,
.header-style-one .header-lower .header-phone_box .info strong,
.header-style-two .header-lower .header-phone_box .info strong { color: var(--iw-red-on-dark); }

/* Encadré d'aide des pages service : aplat rouge (les formes en « soft-light » du template le teintaient en rose). */
.service-details-help .help-shape-1,
.service-details-help .help-shape-2 { display: none; }

/* Réalisations : titre et catégorie toujours visibles (avant : au survol seulement sur ordinateur). */
.project-block-two .inner-block .content { visibility: visible; opacity: 1; transform: none; }
.project-block-two .inner-block:before { height: 47%; }

/* Mobile : marges latérales de 16 px au lieu de 12 px. */
@media (max-width: 575.98px) {
	.auto-container { padding-left: 16px; padding-right: 16px; }
}

/* Fil d'Ariane : chevron centré sur le texte ; les éléments passent à la ligne entiers. */
.page-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.page-breadcrumb li { display: inline-flex; align-items: center; }
.page-breadcrumb li:after { top: 50%; transform: translateY(-50%); }

/* Page Contact : « Restons en contact » secondaire par rapport au formulaire. */
.contact-details .col-xl-5 .sec-title h2 { font-size: clamp(28px, 2.6vw, 36px); }

/* Longueur de ligne des textes d'introduction et des réponses de la FAQ (environ 65 à 75 caractères). */
.sec-title .text { max-width: 65ch; }
.text-center .sec-title .text, .sec-title.text-center .text, .sec-title.centered .text { margin-left: auto; margin-right: auto; }
.accordion-box .acc-content .text { max-width: 72ch; }

/* Pied de page : texte indicatif du champ newsletter lisible sur fond sombre. */
.footer-style-two .subscribe-widget input::placeholder { color: #a3a3a3; opacity: 1; }

/* Texte réservé aux lecteurs d'écran. */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Articles : mois sous le jour dans la pastille de date. */
.blog-block .image-box .date { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; height: 64px; }
.blog-block .image-box .date .iw-month { margin-top: 3px; font-size: 13px; font-weight: 500; color: var(--headings-color); }
/* Demande de devis : sur mobile, l'encadré « 3 étapes / gratuit et sans engagement » passe au-dessus du formulaire. */
@media (max-width: 991.98px) { .iw-quote .order-1 { margin-bottom: 40px; } }
/* Demande de devis : dans les étapes, le nom de l'étape domine, la précision vient en dessous. */
.iw-quote .iw-step-title { margin: 0 0 4px; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--headings-color); }
.iw-quote .iw-step-text { display: block; font-size: 16px; line-height: 1.6; color: var(--text-color); }
/* Contraste — reprises (les règles du template, plus précises, l'emportaient). */
.footer-style-two .footer-column .subscribe-widget .from-clt input::placeholder { color: #a3a3a3 !important; opacity: 1; }
.main-header .header-lower .right-box .header-phone_box .info strong { color: var(--iw-red-on-dark) !important; }
.main-header .header-lower .right-box .header-phone_box .info { color: #c4c6d0; }
.clients-section-two .title-box .title span,
.funfact-section-two .title-box .title span,
.sidebar-service-list li.current a,
.sidebar-service-list li a:hover { color: var(--iw-red-ink) !important; }
.btn-style-three { background-color: var(--iw-red-ink); }
.sec-title .text { max-width: 65ch !important; }
.accordion-box .acc-content .text { max-width: 72ch !important; }
/* Bandeaux de titre : voile plus dense (les nouvelles photos claires — bureau blanc, agenda — rendaient le titre peu lisible). */
.page-title:before { background-color: var(--theme-color2); opacity: .78; }
/* Réalisations : dégradé plus dense sous la légende (lisible même sur les photos claires). */
.project-block-two .inner-block:before { background: linear-gradient(180deg, rgba(16, 18, 29, 0) 30%, rgba(16, 18, 29, .55) 62%, var(--iw-red-ink) 100%); }
/* Barre latérale des pages service : les noms longs (« Design graphique & impression ») passent à la ligne sans passer sous la flèche. */
.sidebar-service-list li a { padding-right: 64px; line-height: 1.35; height: auto; min-height: 68px; }

/* ---------- Page d'une réalisation (single-iw_project.php) ---------- */
.iw-project .iw-project-image { border-radius: 20px; height: auto; margin-bottom: 30px; }
.iw-project .iw-project-lead { font-size: 20px; line-height: 1.6; color: var(--headings-color); margin-bottom: 10px; }
.iw-project .iw-entry-content h2 { font-size: 28px; margin: 36px 0 14px; }
.iw-project .iw-entry-content ul { padding-left: 0; list-style: none; }
.iw-project .iw-entry-content ul li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.iw-project .iw-entry-content ul li:before { content: "\f00c"; font-family: "Font Awesome 6 Pro"; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--iw-red-ink); }
.iw-project-info { background: var(--theme-color-gray); border-radius: 15px; padding: 34px 34px 30px; margin-bottom: 30px; }
.iw-project-info__title { margin-bottom: 18px; }
.iw-project-info dl { margin: 0; }
.iw-project-info dt { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--text-color); }
.iw-project-info dd { margin: 2px 0 16px; font-size: 18px; color: var(--headings-color); font-family: var(--heading-font-family); }
.iw-project-info dd:last-child { margin-bottom: 0; }
.iw-project-info dd a { color: var(--iw-red-ink); }
.iw-project-info__link { display: inline-flex; gap: 8px; align-items: center; margin-top: 18px; color: var(--iw-red-ink); font-weight: 500; }
.iw-project .service-details-help { margin-top: 0; }
.iw-project .service-details-help .theme-btn { background: #fff; color: var(--headings-color); margin-top: 22px; }
.iw-project .service-details-help .help-contact p { margin-bottom: 0; }
@media (max-width: 991.98px) { .iw-project .service-sidebar { margin-top: 50px; } }
.iw-project .iw-project-image { aspect-ratio: 16 / 10; object-fit: cover; }
/* Cartes des réalisations : format fixe quelle que soit la photo (portrait ; paysage pour la carte large). */
.project-block-two .inner-block .image img { aspect-ratio: 424 / 554; height: auto; min-height: 0; object-fit: cover; }
.project-block-two.col-xl-8 .inner-block .image img { aspect-ratio: 872 / 554; }

/* ---------- Portfolio : filtre et pagination (blocks/projects.php, AJAX dans iw.js) ---------- */
.iw-filter { margin-bottom: 50px; }
.iw-filter__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.iw-filter__btn {
	display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 22px;
	border: 1px solid rgba(var(--theme-color2-rgb), .14); border-radius: 50px; background: #fff;
	font-family: var(--heading-font-family); font-size: 16px; font-weight: 500; line-height: 1.2; color: var(--headings-color);
	white-space: nowrap; transition: background-color .25s, border-color .25s, color .25s;
}
.iw-filter__btn:hover { border-color: var(--iw-red-ink); color: var(--iw-red-ink); }
.iw-filter__btn.is-active { background: var(--theme-color2); border-color: var(--theme-color2); color: #fff; }
.iw-filter__count {
	display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px;
	border-radius: 13px; background: var(--theme-color-gray); font-size: 13px; color: var(--text-color);
}
.iw-filter__btn.is-active .iw-filter__count { background: var(--iw-red-ink); color: #fff; }
/* Mobile : une seule ligne qui défile horizontalement, sans barre visible. */
@media (max-width: 767.98px) {
	.iw-filter { margin: 0 -16px 36px; }
	.iw-filter__list { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 2px 16px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.iw-filter__list::-webkit-scrollbar { display: none; }
	.iw-filter__list li { scroll-snap-align: start; flex-shrink: 0; }
	.iw-filter__btn { min-height: 44px; padding: 8px 16px; font-size: 15px; }
}
.iw-projects__grid { transition: opacity .25s ease; }
.iw-projects.is-loading .iw-projects__grid { opacity: .35; pointer-events: none; }
.iw-projects__pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 20px; }
.iw-projects__pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; }
.iw-projects__pagination .page-numbers.current,
.iw-projects__pagination .page-numbers:hover { background: var(--iw-red-ink); border-color: var(--iw-red-ink); }