/*
Theme Name: OnePress SMS Reflex
Theme URI: https://smsreflex.com/
Description: Thème enfant de OnePress pour smsreflex.com (couleurs de marque, Time2chat, page contact reCAPTCHA v3, consentement et Analytics).
Author: SMS Reflex
Template: onepress
Version: 1.0.0
Requires at least: 5.0
Requires PHP: 7.4
Text Domain: onepress-smsreflex
*/

/*
 * Couleurs de marque SMS Reflex.
 * Reprend règle par règle les surcharges de l'ancien thème onepress_old,
 * qui remplaçaient le cyan OnePress (#03c4eb) du parent.
 */
:root {
	--smsreflex-darkblue: #002068;
	--smsreflex-yellow: #F5BC00;
	--smsreflex-text: #666666;  /* 5,7:1 sur blanc (le #777 du parent : 4,48:1, sous le seuil AA) */
	--smsreflex-muted: #767676; /* 4,5:1 sur blanc, pour les textes secondaires (#999/#aaa dans le parent) */
}

a {
	color: var(--smsreflex-darkblue);
}

a:hover {
	/* Le jaune sur fond blanc (1,7:1) rendait les liens illisibles au survol. */
	color: var(--smsreflex-darkblue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

input[type="reset"],
input[type="submit"],
.pirate-forms-submit-button,
.contact-form div.wpforms-container-full .wpforms-form .wpforms-submit {
	background: var(--smsreflex-darkblue);
}

input[type="reset"]:hover,
input[type="submit"]:hover,
.pirate-forms-submit-button:hover,
.contact-form div.wpforms-container-full .wpforms-form .wpforms-submit:hover {
	background: var(--smsreflex-yellow);
	color: var(--smsreflex-darkblue); /* blanc sur jaune : 1,6:1 */
	opacity: 1;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
	color: var(--smsreflex-darkblue);
}

/* En-tête et menu */
.header-social a {
	color: var(--smsreflex-darkblue);
}

.header-social a:hover {
	color: var(--smsreflex-yellow);
}

.onepress-menu a:hover,
.onepress-menu ul li a:hover,
.onepress-menu li.onepress-current-item > a,
.onepress-menu ul li.current-menu-item > a,
.onepress-menu > li a.menu-actived {
	color: var(--smsreflex-darkblue);
}

@media screen and (max-width: 1140px) {
	.onepress-menu.onepress-menu-mobile li.onepress-current-item > a {
		color: var(--smsreflex-darkblue);
	}
}

/* Pied de page */
.site-footer a {
	color: var(--smsreflex-darkblue);
}

.site-footer .footer-social a:hover,
.site-footer .btt a:hover {
	color: var(--smsreflex-yellow);
}

/* Contenu */
.highlight {
	color: var(--smsreflex-darkblue);
}

.entry-content blockquote {
	border-left: 3px solid var(--smsreflex-darkblue);
}

.nav-links a:hover,
.nav-links a.current,
.nav-links .page-numbers:hover,
.nav-links .page-numbers.current {
	background: var(--smsreflex-darkblue);
}

#comments .comment .comment-wrapper .comment-meta .comment-time:hover,
#comments .comment .comment-wrapper .comment-meta .comment-reply-link:hover,
#comments .comment .comment-wrapper .comment-meta .comment-edit-link:hover {
	color: var(--smsreflex-darkblue);
}

/* Boutons */
.btn-theme-primary {
	background: var(--smsreflex-darkblue);
}

.btn-theme-primary-outline {
	border-color: var(--smsreflex-darkblue);
	color: var(--smsreflex-darkblue);
}

.btn-theme-primary-outline:hover {
	background-color: var(--smsreflex-darkblue);
	border-color: var(--smsreflex-darkblue);
}

/* Barre latérale */
.sidebar .widget a:hover,
.sidebar .widget_calendar a {
	color: var(--smsreflex-darkblue);
}

/* Sections de la page d'accueil */
.icon-background-default {
	color: var(--smsreflex-darkblue);
}

.feature-item:hover .icon-background-default {
	color: var(--smsreflex-yellow);
}

.section-services .service-item .service-image i {
	color: var(--smsreflex-darkblue);
}

.section-services .service-item .service-image i:hover {
	color: var(--smsreflex-yellow);
}

.counter_item .counter__number {
	color: var(--smsreflex-darkblue);
	font-family: inherit; /* l'ancien thème neutralisait la police serif du parent */
}

.team-member .member-thumb .member-profile a:hover {
	color: var(--smsreflex-darkblue);
}

/* WooCommerce (hérité, sans effet si l'extension n'est pas active) */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce button.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--smsreflex-darkblue);
}

/* ==========================================================================
   Accessibilité, lisibilité et performance (audit du 21/09/2026)
   ========================================================================== */

/* Textes gris trop clairs du parent */
body,
button,
input,
select,
textarea,
.onepress-menu.onepress-menu-mobile a,
.sidebar .widget a,
.section-services .service-item .service-content p,
.section-inverse .pricing-table .pricing__item ul p,
.breadcrumbs a {
	color: var(--smsreflex-text);
}

.onepress-menu ul li a,
.onepress-menu.onepress-menu-mobile .nav-toggle-subarrow,
.section-title-area .section-subtitle,
.breadcrumbs,
.section-contact .address-contact span,
#comments .comment .comment-wrapper .comment-meta .comment-time {
	color: var(--smsreflex-muted);
}

/* Texte courant à 16 px sur mobile (12,25 px dans le parent). 16 px évite aussi le zoom iOS sur les champs. */
@media (max-width: 767px) {
	body,
	button,
	input,
	select,
	textarea {
		font-size: 16px;
	}
}

/* Focus clavier : le parent supprime tous les contours sans les remplacer. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.btn:focus-visible,
.onepress-menu a:focus-visible {
	outline: 2px solid var(--smsreflex-darkblue);
	outline-offset: 2px;
}

/* Sur fond sombre (hero, pied de page) : anneau jaune. */
.hero-slideshow-wrapper a:focus-visible,
.hero-content-style1 .btn:focus-visible,
.site-footer a:focus-visible {
	outline-color: var(--smsreflex-yellow);
}

/* Sous-menus : ouverts aussi au clavier, pas seulement au survol. */
.onepress-menu li:focus-within > ul {
	display: block;
	height: initial;
	overflow: initial;
	opacity: 1;
	z-index: 99;
}

/* Bouton Menu mobile : zone tactile de 44 × 44 px (35 px de large dans le parent). */
#nav-toggle {
	width: 44px;
	min-height: 44px;
}

#nav-toggle span {
	right: 10px;
}

/* Hero : le titre passe de h2 à h1 (section-parts/section-hero.php).
   Reprend à l'identique le style « .hero-content-style1 h2 » du parent. */
.hero-content-style1 h1.hero-large-text {
	color: #FFFFFF;
	font-size: 35px;
	letter-spacing: 2px;
	line-height: 1.3;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	font-weight: 800;
	text-transform: uppercase;
}

.hero-content-style1 h1.hero-large-text span {
	font-weight: inherit;
}

.hero-content-style1 h1.hero-large-text strong {
	font-weight: 900;
}

@media screen and (min-width: 720px) {
	.hero-content-style1 h1.hero-large-text {
		font-size: 60px;
		letter-spacing: 3px;
	}
}

@media screen and (min-width: 940px) {
	.hero-content-style1 h1.hero-large-text {
		font-size: 75px;
		letter-spacing: 4px;
	}
}

/* Hero : texte visible dès le premier rendu. Le parent le masquait jusqu'au
   chargement de toutes les images du diaporama, puis ajoutait 0,7 à 1 s d'animation. */
.hero-slideshow-wrapper .hero__content .hero-large-text,
.hero-slideshow-wrapper .hero__content .hero-small-text,
.hero-slideshow-wrapper .hero__content .btn,
.hero-slideshow-wrapper .hero__content .hcl2-content {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: none;
}

/* Mouvements réduits : pas d'animations d'apparition ni de défilement animé. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.wow,
	.animated {
		animation: none !important;
		visibility: visible !important;
	}
}

/* Hero en image fixe (remplace le diaporama) : l'image couvre la section, sous le voile sombre du parent. */
.hero-static__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* ==========================================================================
   En-tête : sélecteur de langue et menu mobile (inc/header.php)
   ========================================================================== */

/* Sélecteur de langue « FR | EN » */
.lang-switch {
	float: right;
	display: flex;
	align-items: center;
	height: 75px;
	margin-left: 12px;
	line-height: 1;
}

.lang-switch__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid #DDE2EE;
	font-family: "Raleway", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: var(--smsreflex-darkblue);
	text-decoration: none;
	background: #FFFFFF;
}

.lang-switch__item:first-child {
	border-radius: 999px 0 0 999px;
}

.lang-switch__item:last-child {
	border-radius: 0 999px 999px 0;
	border-left: 0;
}

.lang-switch__item.is-current {
	background: var(--smsreflex-darkblue);
	border-color: var(--smsreflex-darkblue);
	color: #FFFFFF;
}

a.lang-switch__item:hover {
	background: #F3F5FA;
	text-decoration: none;
	color: var(--smsreflex-darkblue);
}

/* Bouton de menu : <button> natif, 44 × 44 px */
#nav-toggle {
	position: relative;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

@media screen and (max-width: 1140px) {
	.site-header .header-right-wrapper {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		height: 75px;
	}

	.lang-switch {
		order: 1;
		float: none;
		height: auto;
		margin-left: 0;
	}

	#nav-toggle {
		order: 2;
		float: none;
		display: block;
		width: 44px;
		height: 44px;
		min-height: 44px;
		margin-left: 0;
	}

	#nav-toggle span {
		right: 10px;
	}

	#nav-toggle:focus-visible {
		outline: 2px solid var(--smsreflex-darkblue);
		outline-offset: 2px;
	}

	.site-header .main-navigation {
		order: 3;
		flex: 0 0 0;
		width: 0;
	}

	/* Panneau du menu */
	.onepress-menu.onepress-menu-mobile {
		max-height: calc(100vh - 75px);
		max-height: calc(100dvh - 75px);
		overflow-y: auto !important;
		border-top: 1px solid #DDE2EE;
		border-bottom: 0;
		box-shadow: 0 16px 32px -16px rgba(0, 32, 104, 0.3);
		padding-bottom: 12px;
	}

	.onepress-menu.onepress-menu-mobile li {
		line-height: 1.3;
		border-top-color: #EEF1F6;
	}

	.onepress-menu.onepress-menu-mobile > li > a,
	.onepress-menu.onepress-menu-mobile ul li a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 12px 64px 12px 20px;
		font-size: 15px;
		letter-spacing: 0.04em;
		color: var(--smsreflex-darkblue);
		white-space: normal;
	}

	.onepress-menu.onepress-menu-mobile ul li a {
		padding-left: 36px;
		font-size: 14px;
		text-transform: none;
		letter-spacing: 0;
		color: #474E66;
	}

	.onepress-menu.onepress-menu-mobile .nav-toggle-subarrow {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 52px;
		padding: 0;
		border-left: 1px solid #EEF1F6;
		color: var(--smsreflex-darkblue);
		font-size: 20px;
	}

	.onepress-menu.onepress-menu-mobile .nav-toggle-dropdown > .nav-toggle-subarrow i {
		transform: rotate(180deg);
	}

	/* « Contact » : bouton jaune pleine largeur dans le panneau */
	.onepress-menu.onepress-menu-mobile > li.menu-cta {
		border-top: 0;
		padding: 12px 20px 4px;
	}

	.onepress-menu.onepress-menu-mobile > li.menu-cta > a {
		justify-content: center;
		min-height: 48px;
		padding: 12px 20px;
		border-radius: 8px;
		background: var(--smsreflex-yellow);
		color: var(--smsreflex-darkblue);
		font-weight: 800;
	}

	/* Page figée derrière le menu ouvert */
	body.smsreflex-menu-open {
		overflow: hidden;
	}
}

@media screen and (max-width: 400px) {
	.lang-switch__item {
		min-width: 36px;
		padding: 0 8px;
	}

	.site-header .site-branding img {
		max-width: 132px;
		height: auto;
	}
}

/* Hero de l'accueil : titre en phrase (au lieu de mots en capitales) */
.hero-content-style1 h1.hero-large-text {
	text-transform: none;
	letter-spacing: -0.01em;
	line-height: 1.12;
	max-width: 15em;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(2rem, 6.2vw, 4.25rem);
}

.hero-content-style1 h1.hero-large-text .js-rotating {
	padding: 0 0.12em;
}

@media screen and (min-width: 720px) {
	.hero-content-style1 h1.hero-large-text {
		font-size: clamp(2.75rem, 5.4vw, 4.25rem);
		letter-spacing: -0.01em;
	}
}