/**
 * Page « link in bio » : exoride.net/bio.
 *
 * Une page autonome, pensee pour le navigateur integre d'Instagram, ou
 * arrivent 99 % de ses visiteurs. Elle ne reprend pas socle.css : elle porte
 * ses propres tokens, identiques a ceux du site, pour rester sous les 10 Ko et
 * ne rien charger d'inutile. Colonne de 480 px centree, 16 px de marge sur
 * telephone.
 *
 * Elle est chargee par le seul gabarit exobio.php.
 */

.exo-bio {
	--bio-fond: #121212;
	--bio-carte: #1f1f1f;
	--bio-creux: #2a2a2a;
	--bio-texte: rgba(255, 255, 255, .86);
	--bio-meta: rgba(255, 255, 255, .62);
	--bio-faible: rgba(255, 255, 255, .42);
	--bio-trait: rgba(255, 255, 255, .08);
	--bio-corail: #f56d52;
	--bio-degrade: linear-gradient(135deg, #f56d52, #bb022e);
	--bio-titre: 'Josefin Sans', sans-serif;
	--bio-police: 'Fira Sans Condensed', sans-serif;

	position: relative; max-width: 480px; margin: 0 auto; padding: 28px 16px 40px;
	overflow: hidden;
	background: var(--bio-fond); color: var(--bio-texte);
	font: 17px/1.35 var(--bio-police);
	-webkit-font-smoothing: antialiased;
}

.exo-bio > * { position: relative; }
.exo-bio a { color: inherit; text-decoration: none; }

/* Le fond topographique du Valais, comme sur le reste du site. */
.exo-bio__topo {
	position: absolute; left: -40px; right: -40px; top: 0; height: 560px;
	opacity: .12; pointer-events: none;
}
.exo-bio__topo path { fill: none; stroke: #fff; stroke-width: 1; }

/* ---------- en tete ---------- */

.exo-bio__head { text-align: center; padding: 6px 0 18px; }
.exo-bio__logo { height: 38px; width: auto; display: block; margin: 0 auto 14px; }
.exo-bio__tag {
	font: italic 700 13px var(--bio-titre); text-transform: uppercase;
	letter-spacing: 3px; color: var(--bio-corail);
}
.exo-bio__intro { font-size: 15px; font-weight: 300; color: var(--bio-meta); margin-top: 8px; line-height: 1.4; }

.exo-bio__socials { display: flex; justify-content: center; gap: 10px; margin: 16px 0 6px; }
.exo-bio__socials a {
	width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
	background: var(--bio-carte); border: 1px solid var(--bio-trait);
}
.exo-bio__socials svg { width: 20px; height: 20px; fill: #fff; }
.exo-bio__socials a.est-contour svg { fill: none; stroke: #fff; stroke-width: 1.7; }

.exo-bio__avis {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin: 12px 0 22px; font-size: 14px; color: var(--bio-meta);
}
.exo-bio__etoiles { color: var(--bio-corail); letter-spacing: 2px; font-size: 15px; }
.exo-bio__avis b { font-weight: 600; color: #fff; }

/* ---------- titres de section ---------- */

.exo-bio__sec {
	display: flex; align-items: center; gap: 10px; margin: 22px 0 10px;
	font: 600 11.5px var(--bio-titre); text-transform: uppercase; letter-spacing: 2px;
	color: var(--bio-faible);
}
.exo-bio__sec::after { content: ''; flex: 1; height: 1px; background: var(--bio-trait); }

/* ---------- carte a la une ---------- */

.exo-bio__feat {
	display: block; background: var(--bio-carte); border: 1px solid var(--bio-trait);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35); margin-bottom: 10px;
}
.exo-bio__feat-filet { height: 3px; background: var(--bio-degrade); }
.exo-bio__feat img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.exo-bio__feat-corps { padding: 16px 16px 18px; }
.exo-bio__badge {
	display: inline-block; margin-bottom: 10px; padding: 5px 9px 3px;
	font: 600 10px var(--bio-titre); letter-spacing: 2px; text-transform: uppercase;
	color: #fff; background: var(--bio-degrade); border-radius: 999px;
}
.exo-bio__feat h2 {
	margin: 0; font: italic 700 17px/1.25 var(--bio-titre); text-transform: uppercase;
	letter-spacing: 1.5px; color: #fff;
}
.exo-bio__feat-fr { font-size: 15px; font-weight: 300; color: var(--bio-meta); margin-top: 6px; }
.exo-bio__feat-cta {
	display: flex; align-items: center; gap: 8px; margin-top: 12px;
	font: 700 11px var(--bio-titre); letter-spacing: 2px; text-transform: uppercase;
	color: var(--bio-corail);
}
.exo-bio__feat-cta svg { width: 14px; height: 14px; fill: none; stroke: var(--bio-corail); stroke-width: 2; }

/* ---------- prochains departs ---------- */

.exo-bio__ev {
	display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
	padding: 10px 14px 10px 10px;
	background: var(--bio-carte); border: 1px solid var(--bio-trait);
}
.exo-bio__ev-date { flex: none; width: 56px; text-align: center; background: var(--bio-creux); padding: 7px 0 5px; }
.exo-bio__ev-date b { display: block; font: 700 20px/1 var(--bio-titre); color: #fff; }
.exo-bio__ev-date span {
	display: block; margin-top: 3px; font: 600 9.5px var(--bio-titre);
	letter-spacing: 1.5px; text-transform: uppercase; color: var(--bio-corail);
}
.exo-bio__ev-txt { flex: 1; min-width: 0; }
.exo-bio__ev-txt b { display: block; font-weight: 600; font-size: 16px; line-height: 1.2; color: #fff; }
.exo-bio__ev-txt > span { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 300; color: var(--bio-meta); }
.exo-bio__pastille {
	flex: none; padding: 5px 8px 3px; border-radius: 999px;
	font: 600 9.5px var(--bio-titre); letter-spacing: 1.5px; text-transform: uppercase;
	background: rgba(255, 255, 255, .08); color: var(--bio-texte);
}
.exo-bio__pastille.est-chaude { background: var(--bio-degrade); color: #fff; }
.exo-bio__chev { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--bio-faible); stroke-width: 2; }

/* ---------- boutons de rubrique ---------- */

.exo-bio__btn {
	display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
	padding: 14px 14px 13px 16px;
	background: var(--bio-carte); border: 1px solid var(--bio-trait);
	border-left: 3px solid transparent;
}
.exo-bio__btn:active { border-left-color: var(--bio-corail); }
.exo-bio__btn-txt { flex: 1; min-width: 0; }
.exo-bio__btn-txt b {
	display: block; font: italic 700 13.5px/1.2 var(--bio-titre);
	text-transform: uppercase; letter-spacing: 1.5px; color: #fff;
}
.exo-bio__btn-txt > span { display: block; margin-top: 4px; font-size: 14.5px; font-weight: 300; color: var(--bio-meta); }
.exo-bio__btn > svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--bio-corail); stroke-width: 2; }

.exo-bio__btn.est-primaire { background: var(--bio-degrade); border-color: transparent; }
.exo-bio__btn.est-primaire .exo-bio__btn-txt b { color: #fff; }
.exo-bio__btn.est-primaire .exo-bio__btn-txt span { color: rgba(255, 255, 255, .85); }
.exo-bio__btn.est-primaire > svg { stroke: #fff; }

.exo-bio__btn-ic {
	flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .14);
}
.exo-bio__btn-ic svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 1.7; }

/* ---------- pied ---------- */

.exo-bio__foot { text-align: center; margin-top: 26px; font-size: 13px; font-weight: 300; color: var(--bio-faible); }
.exo-bio__foot > a { color: var(--bio-meta); border-bottom: 1px solid rgba(255, 255, 255, .18); padding-bottom: 1px; }
.exo-bio__langues {
	margin-top: 10px; font: 600 10.5px var(--bio-titre);
	letter-spacing: 2px; text-transform: uppercase;
}
.exo-bio__langues a { margin: 0 6px; color: var(--bio-faible); }
.exo-bio__langues a.est-active { color: #fff; }

/*
 * Zones tactiles d au moins 44 px, exigence du brief pour le pouce.
 *
 * Sans condition de pointeur : la regle etait sous « @media (pointer: coarse) »,
 * et le navigateur d essai se declare « fin », si bien qu elle ne s appliquait
 * pas et que la mesure passait a cote du defaut. Les quatre liens du pied
 * faisaient 17 et 27 px.
 */
.exo-bio__socials a { width: 44px; height: 44px; }
.exo-bio__foot > a { display: inline-block; padding: 13px 8px; }
.exo-bio__langues a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin: 0; }

/* Le convertisseur de devise enveloppe chaque montant dans un span, a
   l interieur de la ligne. Les deux regles ci-dessus visent le span DIRECT,
   sinon celui du montant passait en bloc et coupait la phrase en trois. Sans
   cela, « 45 CHF » se coupait en deux au bout d'une ligne. */
.exo-bio .exo-price { white-space: nowrap; }


/* ---------- ce que la page bio ne montre pas ---------- */
/*
 * Cette feuille n'est chargee que par le gabarit exobio.php : ces regles
 * n'atteignent donc aucune autre page du site, malgre leurs selecteurs
 * generaux.
 *
 * L'en-tete se rend sans condition dans le thème, il n'y a pas de reglage
 * pour l'eteindre. Le pied, lui, est retire par la configuration, dans le
 * gabarit : il n'est meme pas construit.
 */
.tm-header, .tm-header-mobile, .tm-toolbar, .tm-page > .uk-sticky-placeholder { display: none; }

/* La bulle de conversation appartient au site, pas a la page de bio : le
   contact s'y fait par le bouton WhatsApp, qui est deja la. */
.exo-chat-zone { display: none; }

/*
 * Les fenetres EngageBox qui s ouvrent seules sont exclues de cette page par
 * le mecanisme de l extension, une regle « Joomla\Menu / not_includes » sur
 * l element de menu de la page : voir exo/bio-engagebox.php. Il n y a donc
 * rien a masquer ici, et c est mieux ainsi - une regle CSS cacherait aussi
 * une boite qu on voudrait un jour y mettre exprès.
 */


/* ---------- ce que le theme charge et dont la page n a que faire ---------- */
/*
 * Deux fonds decoratifs du theme pesent 985 Ko a eux seuls, pour une page qui
 * ne les montre meme pas : un voile sur « html::after » (263 Ko) et un fond de
 * section (722 Ko). Cette feuille n etant chargee que par la page bio, ces
 * regles n atteignent aucune autre page.
 */
html::after { content: none; background-image: none; }
[class*="uk-section"], .tm-page, .tm-page-container { background-image: none; }

/*
 * Le releve topographique du Valais, 90 Ko, sert de fond decoratif a deux
 * elements de cette page : le corps de la bulle WhatsApp - masquee ici - et le
 * bandeau de consentement. Le navigateur telecharge le fond d'un pseudo
 * element meme masque : il faut donc neutraliser « background-image » et pas
 * seulement « content ».
 *
 * On ne touche QUE le fond : les pseudo elements restent en place, UIkit s'en
 * sert pour caler ses sections. Le bandeau perd son motif sur cette page,
 * volontairement - la page bio est sobre - et le garde partout ailleurs.
 */
.exo-chat__body::before,
.uk-section.uk-section-secondary::after { background-image: none; }