/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/

/* =========================================================================
   Logo blanc dans l'off-canvas (menu coulissant)
   -------------------------------------------------------------------------
   À l'ouverture de l'off-canvas, Salient ajoute la classe .side-widget-open
   sur #header-outer. On masque alors le logo normal (noir) du header et on
   affiche la version blanche à la place.
   Le fichier doit être déposé ici : salient-child/images/ozego-logo-blanc.png
   (chemin relatif à ce style.css). Pour agrandir le logo, remplacer
   "contain" par "auto 100%".
   ========================================================================= */
#header-outer.side-widget-open #logo img {
	visibility: hidden !important;
}

#header-outer.side-widget-open #logo {
	background-image: url('/wp-content/uploads/2026/06/ozego_horizontal_03-1.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

/* =========================================================================
   Bouton flottant « Chat IA » (affiché sur tout le site)
   -------------------------------------------------------------------------
   Bouton fixé sur le bord droit, centré verticalement dans le viewport, qui
   amène à la section #chat-ia de la page d'accueil.
   - Au repos : l'icône carrée « IA / Assistant » (chat-ia-idle.svg).
   - Au survol : l'icône bascule sur la flèche (chat-ia-hover.svg) et le
     libellé « Posez vos questions… » se déploie à gauche.
   Le markup et l'IntersectionObserver sont dans functions.php : l'observer
   ajoute la classe .is-hidden au bouton uniquement quand la section #chat-ia
   entre dans le viewport (donc seulement sur l'accueil), pour le masquer dès
   qu'on regarde déjà le chat. Ailleurs, le bouton reste visible.
   ========================================================================= */
#chat-ia-fab {
	position: fixed;
	top: 50%;
	right: 0px;
	transform: translateY(-50%);
	z-index: 9999;
	display: flex;
	align-items: center;
	text-decoration: none;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease;
}

/* --- Libellé : masqué au repos, se déploie vers la gauche au survol --- */
#chat-ia-fab .chat-ia-fab__label {
	max-width: 0;
	margin-right: 0;
	padding: 14px 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	border-radius: 10px;
	background: #fff;
	color: #26474e;
	font-size: 15px;
	line-height: 1.2;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
	transition: max-width 0.35s ease, opacity 0.3s ease, padding 0.35s ease, margin-right 0.35s ease;
}

#chat-ia-fab:hover .chat-ia-fab__label,
#chat-ia-fab:focus-visible .chat-ia-fab__label {
	max-width: 340px;
	margin-right: 14px;
	padding: 31px;
	opacity: 1;
}

/* --- Icône : les deux états superposés, on les fait se fondre au survol --- */
#chat-ia-fab .chat-ia-fab__icon {
	position: relative;
	flex: 0 0 auto;
	width: 80px;
	height: 80px;
}

#chat-ia-fab .chat-ia-fab__icon img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity 0.25s ease;
}

#chat-ia-fab .chat-ia-fab__idle {
	opacity: 1;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

#chat-ia-fab .chat-ia-fab__hover {
	opacity: 0;
	filter: drop-shadow(2px 5px 5px rgba(0, 0, 0, 0.12));
}

#chat-ia-fab:hover .chat-ia-fab__idle,
#chat-ia-fab:focus-visible .chat-ia-fab__idle {
	opacity: 0;
}

#chat-ia-fab:hover .chat-ia-fab__hover,
#chat-ia-fab:focus-visible .chat-ia-fab__hover {
	opacity: 1;
}

/* État masqué : appliqué par l'IntersectionObserver quand #chat-ia est visible. */
#chat-ia-fab.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-50%) translateX(24px);
}

/* Sur mobile : pas de survol possible, on garde l'icône seule et plus petite. */
@media (max-width: 690px) {
	#chat-ia-fab {
		right: 0px;
	}

	#chat-ia-fab .chat-ia-fab__label {
		display: none;
	}

	#chat-ia-fab .chat-ia-fab__icon {
		width: 64px;
		height: 64px;
	}
}