/* ------------------------------------------------------------------------- */
/* Bulle de conversation : le lanceur et la fenetre                           */
/*                                                                            */
/* Habillage de la surcharge de mod_whatsapp_agent, au visuel du site : fond  */
/* sombre, cartes #1f1f1f, degrade signature, Josefin Sans et Fira Sans       */
/* Condensed, aucun arrondi sauf le portrait et la pilule de statut.          */
/*                                                                            */
/* Cette feuille remplace celles du module, style.min.css et animate.min.css, */
/* que la surcharge ne charge plus : elle repart de zero et ne corrige rien.  */
/* Les polices sont deja chargees par le gabarit, on ne les redeclare pas.    */
/*                                                                            */
/* Le module reste intact : sa mise a jour ne touche ni ce fichier ni la      */
/* surcharge qui l'appelle.                                                   */
/* ------------------------------------------------------------------------- */

.exo-chat-zone {
	--exo-corail: #f56d52;
	--exo-degrade: linear-gradient(135deg, #f56d52, #bb022e);
	--exo-carte: #1f1f1f;
	--exo-sombre: #161616;
	--exo-noir: #0d0d0d;
	--exo-champ: #121212;
	--exo-msg: #2a2a2a;
	--exo-texte: rgba(255, 255, 255, .86);
	--exo-doux: rgba(255, 255, 255, .62);

	position: fixed;
	left: 24px;
	bottom: 68px;
	z-index: 980;
	font-family: 'Fira Sans Condensed', 'Arial Narrow', Arial, sans-serif;
}

/* --- Le lanceur ----------------------------------------------------------- */

.exo-launch {
	display: flex;
	align-items: center;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
}

.exo-launch__carre {
	flex: none;
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	background: var(--exo-degrade);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .55);
}
.exo-launch__carre svg { width: 28px; height: 28px; }

/* L'etiquette se deplie a droite du carre. Elle est repliee par defaut : on
   anime la largeur maximale plutot que l'affichage, pour que le depli glisse
   au lieu d'apparaitre d'un coup. Bordure et padding suivent, sinon un trait
   d'un pixel reste visible a l'etat replie. */
.exo-launch__mot {
	display: flex; align-items: center;
	max-width: 0;
	height: 40px;
	padding: 3px 0 0;
	overflow: hidden;
	background: var(--exo-noir);
	border: 0 solid rgba(255, 255, 255, .10);
	font-family: 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700; font-style: italic;
	font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
	transition: max-width .25s ease, padding .25s ease;
}
.exo-launch:hover .exo-launch__mot,
.exo-launch:focus-visible .exo-launch__mot,
.exo-chat-zone.est-deplie .exo-launch__mot {
	max-width: 320px;
	padding: 3px 16px 0;
	border-width: 1px 1px 1px 0;
}

.exo-launch:focus-visible { outline: 2px solid var(--exo-corail); outline-offset: 3px; }

/* --- La fenetre ----------------------------------------------------------- */

.exo-chat {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 360px;
	background: var(--exo-carte);
	border: 1px solid rgba(255, 255, 255, .08);
	box-shadow: 0 8px 45px rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.exo-chat-zone.est-ouvert .exo-chat {
	opacity: 1;
	visibility: visible;
	transform: none;
}
/* Fenetre ouverte, le lanceur s'efface : la croix de l'en-tete referme, et
   deux boutons au meme endroit se marchaient dessus. */
.exo-chat-zone.est-ouvert .exo-launch { visibility: hidden; }

.exo-chat__filet { height: 3px; background: var(--exo-degrade); }

.exo-chat__head {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 18px 14px;
	background: var(--exo-sombre);
}
.exo-chat__portrait {
	flex: none;
	width: 52px; height: 52px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--exo-corail), 0 0 0 4px var(--exo-sombre);
}
.exo-chat__nom {
	font-family: 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700; font-style: italic;
	font-size: 17px; letter-spacing: 2px; text-transform: uppercase;
	color: #fff; line-height: 1;
}
.exo-chat__role { margin-top: 5px; font-size: 15px; font-weight: 300; color: var(--exo-doux); }

.exo-chat__fermer {
	margin-left: auto; align-self: flex-start;
	display: flex; align-items: center; justify-content: center;
	width: 28px; height: 28px;
	padding: 0; border: 0; border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, .55);
	font-size: 22px; line-height: 1;
	cursor: pointer;
}
.exo-chat__fermer:hover { color: #fff; }
.exo-chat__fermer:focus-visible { outline: 2px solid var(--exo-corail); outline-offset: 2px; }

/* La pilule de statut, seule rondeur avec le portrait. Le point passe du
   corail avec halo au gris sans halo des que la plage est depassee. */
.exo-chat__hd { background: var(--exo-sombre); }
.exo-chat__statut {
	display: inline-flex; align-items: center; gap: 7px;
	margin: 0 18px 14px;
	padding: 6px 11px 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	font-family: 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif;
	font-weight: 600; font-size: 10px;
	letter-spacing: 1.5px; text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
}
.exo-chat__point {
	flex: none;
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--exo-corail);
	box-shadow: 0 0 0 3px rgba(245, 109, 82, .18);
}
.exo-chat-zone.est-hors-horaires .exo-chat__point {
	background: rgba(255, 255, 255, .35);
	box-shadow: none;
}

/* --- Le corps ------------------------------------------------------------- */

/* Les courbes de niveau du site remplacent le griffonnage de WhatsApp. */
.exo-chat__body {
	position: relative;
	padding: 20px 18px 6px;
	min-height: 140px;
	overflow: hidden;
}
.exo-chat__body::before {
	content: "";
	position: absolute; inset: 0;
	background: url("../../../../images/exoride/topographic-valais-altitudes.svg") center / cover no-repeat;
	opacity: .12;
	pointer-events: none;
}

.exo-chat__msg {
	position: relative;
	max-width: 290px;
	padding: 12px 14px 10px;
	background: var(--exo-msg);
	font-size: 15.5px; line-height: 1.4;
	color: var(--exo-texte);
}
.exo-chat__qui {
	margin-bottom: 5px;
	font-family: 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700; font-size: 11px;
	letter-spacing: 2px; text-transform: uppercase;
	color: var(--exo-corail);
}

/* --- Le formulaire -------------------------------------------------------- */

.exo-chat__form {
	display: flex; flex-direction: column; gap: 10px;
	padding: 12px 18px 8px;
	margin: 0;
}
.exo-chat__champ {
	width: 100%;
	box-sizing: border-box;
	padding: 12px;
	background: var(--exo-champ);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 0;
	color: #fff;
	font-family: inherit;
	font-size: 15.5px; font-weight: 300;
	resize: vertical;
}
textarea.exo-chat__champ { min-height: 64px; }
.exo-chat__champ::placeholder { color: rgba(255, 255, 255, .4); opacity: 1; }
.exo-chat__champ:focus { border-color: var(--exo-corail); outline: none; }

.exo-chat__envoi {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%;
	padding: 14px 16px 12px;
	border: 0; border-radius: 0;
	background: var(--exo-degrade);
	color: #fff;
	font-family: 'Josefin Sans', 'Trebuchet MS', Arial, sans-serif;
	font-weight: 700; font-style: italic;
	font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
	cursor: pointer;
}
.exo-chat__envoi svg { flex: none; width: 16px; height: 16px; }
.exo-chat__envoi[disabled] { opacity: .6; cursor: default; }

.exo-chat__info {
	padding: 0 18px 16px;
	font-size: 12.5px; font-weight: 300;
	color: rgba(255, 255, 255, .4);
}

/* Le pot de miel : un champ que personne ne voit et qu'un robot remplit. Il
   reste dans le flux pour les outils qui ignorent display:none. */
.exo-chat__miel {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Le mot de confirmation ou d'echec, a la place du bouton. */
.exo-chat__reponse {
	margin: 0 18px 12px;
	padding: 14px 16px 12px;
	background: var(--exo-msg);
	font-size: 15px; line-height: 1.4;
	text-align: center;
	color: var(--exo-texte);
}
.exo-chat__reponse.est-echec { color: #fff; background: #5a1420; }

/* --- Les deux etats ------------------------------------------------------- */

/* Rien n'est bati en JavaScript : les deux jeux de textes sont rendus par PHP
   et le script ne fait que montrer l'un et cacher l'autre. */
.exo-chat-zone .exo-si-hors { display: none; }
.exo-chat-zone.est-hors-horaires .exo-si-hors { display: block; }
.exo-chat-zone.est-hors-horaires .exo-si-dedans { display: none; }

/* Dans le bouton, chaque libelle enveloppe une icone et un mot. On efface
   l'enveloppe de la mise en page, sans quoi le flex du bouton centrerait le
   bloc entier au lieu d'aligner l'icone et le mot cote a cote. */
.exo-chat__envoi .exo-si-dedans { display: contents; }
.exo-chat-zone .exo-chat__envoi .exo-si-hors { display: none; }
.exo-chat-zone.est-hors-horaires .exo-chat__envoi .exo-si-hors { display: contents; }
.exo-chat-zone.est-hors-horaires .exo-chat__envoi .exo-si-dedans { display: none; }

/* --- Entre 640 et 960 px -------------------------------------------------- */

@media (max-width: 959px) {
	.exo-chat-zone { left: 20px; bottom: 60px; }
}

/* --- Sous 640 px ---------------------------------------------------------- */

@media (max-width: 639px) {
	.exo-chat-zone { left: 16px; right: auto; bottom: 16px; }

	/* Le carre seul, sans etiquette. */
	.exo-launch__mot { display: none; }

	/* La fenetre prend toute la largeur et se colle en bas, sans bordure sur
	   les cotes : elle touche les deux bords de l'ecran. Elle defile si le
	   clavier mange la hauteur. */
	.exo-chat {
		position: fixed;
		left: 0; right: 0; bottom: 0;
		width: auto;
		max-height: 88vh;
		overflow-y: auto;
		border-left: 0; border-right: 0; border-bottom: 0;
	}
	.exo-chat__body { min-height: 110px; }
}

@media (prefers-reduced-motion: reduce) {
	.exo-chat,
	.exo-launch__mot { transition: none; }
}