/* PROFILS UTILISATEURS — U */ 

/*** ÉVOLUTION JAUGE PROFIL ***/
.obvan1 {
	--step1: "l'obvantis s'efforce de vider totalement son esprit grâce à la méditation.";
	--step2: "capacité à détecter les tentatives d'intrusion dans l'esprit, l'obvantis apprend à repérer les attaques mentales et à ériger ses défenses en conséquence.";
	--step3: "iel ferme son esprit contre les intrusions mentales, cachant ses pensées et émotions, rendant son bouclier plus résistant aux attaques psychiques et aux sortilèges de manipulation.";
	--step4: "le bouclier se complexifie en labyrinthe impénétrable de pensées et d'idées. l'obvantis cloisonne également ses souvenirs sensibles, compartimente ses émotions envahissantes, érigeant des portes closes ou coffres, selon la façon dont iel le visualise.";
	--step5: "iel peut repousser les intrus, les perdre dans son monde mental ou lui opposer des défenses psychologiques (expl : monstres mentaux). la maîtrise est telle qu'il lui est possible de résister à l'imperium et au véritaserum, bien que non sans difficulté et impacts sur la psyché.";
}

.obvan2 {
	--step1: "modification d'un détail d'un souvenir spécifique.";
	--step2: 'remplacement du souvenir visé par un autre existant.';
	--step3: 'projection de pensées en vrac afin de noyer toute la toile de souvenirs liés.';
	--step4: "altération de souvenirs. la multiplication des changements menace toutefois ses propres certitudes, l'obvantis n'est plus certain·e de la réalité.";
	--step5: "modelage de l'esprit, des pensées et des souvenirs afin de transmettre de fausses vérités.";
}

.anim1 {
	--step1: "(étapes 1 à 5 du rituel) l'apprenti·e crée un lien stable avec son animal totem, éveille ses instincts et apprend à équilibrer forme humaine et essence animale.";
	--step2: "de terriblement douloureuse, la métamorphose devient indolore. elle n'est toutefois pas systématique : il arrive de ne pas parvenir à la déclencher ou de peiner à retrouver forme humaine.";
	--step3: "la mécanique est tout à fait maîtrisée, permettant des transformations complètes aisées.";
	--step4: "iel s'habitue progressivement aux sens de l'animal, à cette nouvelle forme, aux perceptions nouvelles du monde à travers cet autre regard. il est aussi temps d'apprendre à en évoquer des éléments sous sa forme humaine (transformation partielle).";
	--step5: "le contrôle est tel que la baguette n'est plus une nécessité pour les transformations. elles sont immédiates et peu coûteuses en énergie, de même que l'animorphe parvient sans peine à se servir sous forme humaine des caractéristiques de son animal totem.";
}

.anim2 {
	--step1: "(dès l'étape 4) la fusion des formes intensifie la connexion entre l'humain·e et l'animal, aide l'apprenti·e animorphe à mieux comprendre la nature, se faire accepter d'elle. iel ressent une différence dans l'attitude de la faune à son égard : un début de confiance.";
	--step2: "les hésitations se dissipent, la cohésion avec la faune se concrétise, la confiance et la compréhension sont indéniables. il arrive que l'espèce correspondant à l'animal totem de l'apprenti·e, en particulier, vienne à lui spontanément, comme s'iel était des leurs.";
	--step3: "au-delà de l'appartenance, c'est une véritable communication non verbale qui s'établit, d'abord avec l'espèce de l'animal totem puis avec d'autres créatures similaires. d'instinct l'apprenti·e comprend la gestuelle, les sons et les besoins, et parvient à se faire entendre d'eux en retour.";
	--step4: "la communication s'étend à de multiples espèces, en fonction des affinités et des rivalités intrinsèques à la nature. en parallèle, l'instinct et l'attention de l'animorphe s'aiguisent, lui permettant de déceler les dangers de la nature. parallèlement, iel court aussi le risque d'être rongé·e par le caractère primal de cet instinct naissant : iel développe des traits propres à son animal et doit apprendre à les dompter.";
	--step5: "l'instinct est fiable et les réflexes s'imposent telle une évidence, sans pour autant prendre le pas sur l'animorphe qui peut écouter ou faire taire à volonté cette nouvelle part d'iel.";
}

.lg1 {
	--step1: 'transformation intensément douloureuse uniquement à la pleine lune, rage difficile voire impossible à canaliser, violence exacerbée, force incontrôlée.';
	--step2: 'transformation légèrement moins douloureuse (pleine lune), les émotions sont progressivement canalisées.';
	--step3: "maîtrise de la force qu'iels sont capables de moduler selon les besoins.";
	--step4: 'transformation totale en dehors des pleines lunes.';
	--step5: "capacité d'utiliser les sens lupins au quotidien sans prendre leur forme loup·ve.";
}

.lg2 {
	--step1: 'incapacité à distinguer ses émotions de celles plus brutes et impulsives du/de la loup·ve (territorial·e, possessif·ve, etc).';
	--step2: "commence à entendre la voix du/de la loup·ve, envahissante qu'iel soit en accord ou en désaccord avec l'humain·e.";
	--step3: "meilleures compréhension et cohésion avec son loup·ve (physique, mental et émotions), éveil de l'instinct.";
	--step4: "reprise du contrôle de l'humain·e sur le·a loup·ve.";
	--step5: "symbiose totale entre les deux parties, ne forment désormais plus qu'un.";
}

.daemonis1 {
	--step1: "sensation de vide et de manque constant, le·a daemonis est asservi·e par ses envies et refuse de l'admettre. ses réactions sont erratiques et excessives.";
	--step2: 'prise de conscience mais incapacité à gérer ses obsessions qui continuent de dominer ses pensées.';
	--step3: "élaboration de mécanismes d'adaptation, les obsessions sont toujours présentes mais iel en est moins esclave.";
	--step4: 'le contrôle se raffermit en dépit de rechutes.';
	--step5: 'la sensation de vide et de manque demeure présente mais assourdie, iel est plus stable dans ses relations et son quotidien.';
}

.daemonis2 {
	--step1: 'fait naître des mirages dans son environnement proche, brefs et non maîtrisés.';
	--step2: 'les mirages persistent, sont volontaires mais simples.';
	--step3: 'les illusions deviennent plus complexes, pleines de détails et de nuances.';
	--step4: 'réalistes et durables, elles gagnent en ampleur et occupent un espace plus vaste.';
	--step5: "élaboration d'illusions complexes presque indiscernables de la réalité.";
}

.vamp1 {
	--step1: 'rétraction des crocs, morsure sale et douloureuse, aucun contrôle.';
	--step2: "le contrôle de soi s'améliore, le·a vampire prend le temps de soigner les plaies à l'aide de son venin.";
	--step3: 'bien plus méthodique et maitrisé·e, le·a vampire parvient à susciter du plaisir.';
	--step4: "acquisition d'un sang-froid facilitant son évolution en communauté, iel peut même résister à l'attraction d'une plaie ouverte.";
	--step5: 'euphorisante et relaxante, la morsure devient addictive.';
}

.vamp2 {
	--step1: 'sensible aux battements de coeur et à la chaleur du sang, le·a vampire est confronté·e à de multiples possibilités et a du mal à se focaliser sur une proie unique.';
	--step2: 'iel se déplace telle une ombre, sa célérité le·a rend de plus en plus difficile à fuir.';
	--step3: 'parvient à se concentrer sur une cible spécifique et à pister sa trace presque sans faille.';
	--step4: 'parvient à débusquer même les proies les plus discrètes et silencieuses, il devient alors impossible de lui échapper. iel perçoit les subtilités (odeur, goût, délicatesse) du sang des autres comme une évidence, ce qui lui permet de choisir ses repas suivant ses préférences.';
	--step5: "perfectionnement des techniques de séduction pour attirer les proies volontaires : le·a vampire les entraîne dans une toile de fascination au point qu'iels réclament d'être mordu·e·s.";
}

.oracle1 {
	--step1: "les premières manifestations se font légères, pressentiments similaires à de la clairvoyance (exemple : impression de voir naître ou mourir des vérités dans le regard d'autrui, certitudes sans fondements, etc).";
	--step2: 'que le don se manifeste par contact, flashs en éveil ou rêves prémonitoires, il reste bref, évanescent et difficile à traduire, glissant trop aisément entre les doigts maladroits des oracles.';
	--step3: "la capacité d'interprétation s'améliore, l'oracle cerne plus aisément les futurs les plus probables parmi l'infinité des possibles.";
	--step4: "l'oracle ne se contente plus de seulement attendre que le futur ou le passé se présente aléatoirement : iel l'invoque par le biais de déclencheurs qui lui sont propres (sang, interrogation des astres, rayons de lumière éveillant des voix, tarot, etc).";
	--step5: "complétion, précision et clarté rendent les prédictions plus fiables. l'oracle peut se focaliser sur des thèmes précis, répondant plus spécifiquement aux interrogations de celleux qui le·a consultent. leur perception des détails et des besoins leur permettent de choisir avec minutie les informations qu'iels partagent.";
}
.oracle2 {
	--step1: "l'oracle perçoit comme des échos l'énergie que dégagent les matériaux, métaux, plantes, runes, alignement des planètes et autres éléments mystiques, bien qu'incapable d'expliquer ces intuitions encore en phase d'éveil.";
	--step2: "les intuitions se font plus fréquentes, plus tangibles — l'oracle commence à distinguer clairement les énergies spécifiques et leurs impacts.";
	--step3: "l'oracle apprend à canaliser ces énergies de manière consciente, les ajoutant à ses rituels qui s'en trouvent renforcés.";
	--step4: 'iel est désormais apte à influer sur ces énergies pour les purifier ou les corrompre.';
	--step5: "sa maîtrise lui rend accessible la création d'amulettes efficaces, mais aussi de charger des objets en énergie, ou encore de faire des âmes franchir le voile. iels prennent en charge les fléaux dont iels parviennent à tempérer la malédiction (souvent accompagné·e·s d'apprenti·e·s).";
}

.men1 {
	--step1: "le don se manifeste de façon aléatoire pendant l'enfance, iels entendent alors des murmures indistincts.";
	--step2: "les murmures intrusifs s'intensifient, se clarifient et forment des phrases distinctes, l'invasion n'en est que plus pénible plongeant progressivement le·a mentis dans un état de confusion entre les pensées et les dires d'autrui.";
	--step3: 'les murmures deviennent voix, leur provenance se fait plus claire permettant aux mentis de distinguer à qui elles appartiennent. iels parviennent également à dissocier les pensées des paroles.';
	--step4: "c'est volontairement désormais qu'iels partent en quête des pensées d'autrui. aptes à rechercher et sélectionner des informations spécifiques dans un nuage d'idées.";
	--step5: "possibilité de déceler des secrets qu'ils soient enfouis, inconscients, niés ou réprimés.";
}

.men2 {
	--step1: "le·a mentis est incapable de stopper le flux de pensées d'autrui, les intrusions sont constantes et les saturations fréquentes.";
	--step2: 'iels sont en mesure de réduire les sons étouffants de quelques personnes durant un court de laps de temps. les paroles deviennent alors des souffles fugaces, et les cris, de simple échos.';
	--step3: "capacité à atténuer l'entièreté des sons alentours, les pertes de contrôle sont pourtant fréquentes en fonction des émotions des mentis, brisant alors l'équilibre fragile de leur tranquillité.";
	--step4: "les émotions intempestives des mentis n'impactent plus leur aptitude à estomper les voix.";
	--step5: "comme un switch bienvenu, les voix s'éteignent ou reviennent à volonté. le contrôle offre aux mentis l'apaisement si longtemps recherché.";
}

.meta1 {
	--step1: "les changements sont aléatoires et surviennent dès la naissance. il est plus fréquent qu'ils touchent les cheveux et les yeux, ils peuvent être arbitraires ou en harmonie avec les émotions, qu'ils trahissent la majorité du temps. Parfois s'invitent des traits animaux, totalement inopinés.";
	--step2: "le·a métamorphe parvient à déclencher les transformations mais de façon brève et non systématique. elles ne sont pas tout à fait ciblées : il arrive que d'autres parties du corps se calquent sur elles de manière hasardeuse.";
	--step3: "iel peut à présent se focaliser sur plusieurs de ses traits, voire s'offrir un ravalement de façade cohérent (maîtrise des proportions). la durée est brève.";
	--step4: 'gestion délicate des détails (carnation, grains de beauté, …), transformation du corps tout entier sur la durée.';
	--step5: "la transformation animale est désormais accessible, les changements sont si pointus que le·a métamorphe parvient à adopter une consistance totalement différente (écailles, plumes, etc), bien qu'iel ne pourra jamais adopter entièrement l'apparence d'une créature.";
}
.meta2 {
	--step1: "l'allure, la démarche et la façon de se tenir sont les premières caractéristiques sur lesquelles se focaliser pour ne pas être démasqué·e en un instant.";
	--step2: "apprentissage des mimiques inhérentes à la personne imitée, sa voix, sa manière de s'exprimer. l'observation du caractère et des habitudes en est la clé.";
	--step3: "le·a métamorphe se sent plus à l'aise dans ses corps d'emprunt. iel gagne en assurance, accroissant la stabilité de ses transformations. c'est ce qui fait la différence entre les bon·ne·s métamorphes (apparence) et les expert·e·s (sosie associé à la psychologie).";
	--step4: "comme un·e acteur·ice débutant iel se perd dans ses rôles, à force d'apprendre l'autre iel ne sait plus qui iel est, peut peiner à retrouver ses traits d'origine ou sa véritable personnalité.";
	--step5: "acteur·ice chevronné·e iel établit une distinction ferme entre sa personne et celles imitées. passer d'un rôle à l'autre devient plus spontané et sa crédibilité à toute épreuve peut duper même les plus méfiant·e·s.";
}

.sir1 {
	--step1: "switch de façon incontrôlée entre apparence aquatique et jambes en fonction de l'environnement (terre ou mer). changement systématique, inévitable et total au contact de l'eau, même de quelques gouttes.";
	--step2: 'les émotions fortes peuvent faire surgir des caractéristiques physiques telles que les écailles ou les branchies de manière intempestive.';
	--step3: "le besoin de s'hydrater régulièrement demeure vital, mais l'individu ressent de moins en moins l'obligation de s'immerger.";
	--step4: "transformation partielle ou totale au contact de l'eau, la sirène ou le triton peut contenir la propagation à quelques zones de son corps.";
	--step5: "totale maîtrise indépendante de l'environnement, possibilité de maintenir l'apparence humaine même immergé·e.";
}

.sir2 {
	--step1: 'cible unique et suggestions simples ; les succès sont rares, la cible entend mais peut rester imperméable ou céder, sans être privée de sa volonté.';
	--step2: "l'efficacité s'accroît, le succès est assuré sur une cible unique.";
	--step3: "suggestions de plus en plus complexes (influence forte sur des relations, des décisions, possibilité de semer la discorde ou d'encourager l'harmonie, variation des perceptions…).";
	--step4: "l'emprise s'étend progressivement à deux personnes, puis plus. le succès n'est pas garanti.";
	--step5: "totale maîtrise, capacité d'influencer les pensées et actions de plusieurs personnes simultanément.";
}

.nae1 {
	--step1: "profonde instabilité émotionnelle, à la moindre contrariété ou peine apparaissent des écailles, les traits s'allongent et la douceur naturelle se mue en laideur repoussante.";
	--step2: "meilleure maîtrise des émotions, possibilité d'atténuer ou d'estomper les changements dûs aux émotions négatives mais jamais d'y échapper tout à fait.";
	--step3: "la beauté devient surnaturelle, impliquant une attirance sur les personnes de la tranche d'âge des naelides ainsi qu'une fascination sur autrui de manière générale.";
	--step4: "le·a naelide peut parvenir à cerner les véritables désirs, les réelles envies de sa·on interlocuteur·ice, permettant de s'assurer de la sincérité de celleux qu'iel côtoie.";
	--step5: "capacité de stopper la fascination ou de l'intensifier.";
}

.nae2 {
	--step1: 'affinité avec UN élément. si présent alentours, il réagit aux émotions de manière incontrôlée, comme une simple réponse de la nature.';
	--step2: "influence sur l'élément si présent dans l'environnement, possibilité de lui donner des ordres simples.";
	--step3: "invocation de l'élément même lorsqu'il est absent du décor, la création est toutefois de petite ampleur (flammèches, gouttes d'eau, brise, donner forme à une petite parcelle de terre et l'animer ou faire trembler la terre sur une zone minime).";
	--step4: 'les invocations se renforcent, impactent à plus grande échelle, mais demeurent limitées dans le temps.';
	--step5: 'création et contrôle plus durables, sur de plus grandes surfaces (faire tempêter dans une zone donnée, créer des golems, provoquer des incendies, déclencher une tornade)';
}

.harp1 {
	--step1: 'affection réciproque pour les créatures volantes, compréhension mutuelle innée.';
	--step2: 'gestion des serres — rétractaction, extension.';
	--step3: 'communication avec certaines espèces volantes (affinités au cas par cas) et contrôle progressif des ailes — prendre conscience de ces muscles et ossements supplémentaires, les agiter, les rétracter..';
	--step4: 'apprentissage du vol sur de courtes distances et des durées brèves.';
	--step5: "capacité d'ordonner aux oiseaux, de les contrôler, et meilleure endurance en vol (durée/distance).";
}

.harp2 {
	--step1: "les spectres (qu'iels sont seul·e·s à percevoir) s'accrochent à elleux, rendant l'atmosphère glaciale et leur proximité inconfortable.";
	--step2: "hanté·e·s par des voix désincarnées et incompréhensibles, voire des cris, en se concentrant iels peuvent même sentir et voir leurs formes décharnées converger autour d'elleux.";
	--step3: 'parviennent à comprendre leurs murmures, mises en garde, cris et appels. peuvent leur parler en retour mais pas les apaiser, les émotions négatives des spectres tendent à déteindre sur elleux.';
	--step4: "peuvent les convaincre de les aider, atténuer l'atmosphère glaciale due à leur présence ou la projeter vers une cible.";
	--step5: "capacité de les calmer, voire de les libérer (nécessité de résoudre leurs tracas avant de les convaincre de s'en aller).";
}

.fae1 {
	--step1: "capacité à sentir et à influencer les flux de chance autour d'eux, ils peuvent alors provoquer involontairement de petites coïncidences favorables (trouver des objets perdus, éviter des accidents mineurs) ou défavorables (se taper le petit orteil dans un meuble).";
	--step2: "l'aptitude devient plus précise et plus fiable ainsi que volontaire.";
	--step3: 'altération fondamentale des probabilités, les évènements hautement improbables peuvent alors devenir beaucoup plus probables, ou vice versa.';
	--step4: "l'influence s'étend à plusieurs personnes avec une marge d'erreur.";
	--step5: "désormais capable d'influer sur les flux de chance ou de malchance d'un groupe de personnes.";
}

.fae2 {
	--step1: "intensification ou atténuation des émotions d'une personne se trouvant à proximité, l'espace de quelques secondes.";
	--step2: 'intensification ou atténuation volontaire mais aléatoire, toujours sur un  laps de temps et une distance plus larges.';
	--step3: "injection d'une émotion spécifique sur une durée brève.";
	--step4: "suppression d'une émotion spécifique sur une durée brève.";
	--step5: "manipulation des émotions à volonté, elles deviennent cependant terriblement drainantes au delà d'une heure.";
}

.branch {
	margin: 0 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 10%;
	position: relative;
	height: 4px;
	background-color: var(--co-2);
	border-radius: 50%;
	counter-reset: item;
}
.branch.\30 {
	counter-reset: item -1;
}
.step::before {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	display: block;
	width: 132px;
	padding: 5px;
	font-size: var(--little-size);
	line-height: var(--little-size);
	background-color: var(--base-1);
	border-radius: var(--radius);
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s;
	z-index: 1;
}
.step:hover::before {
	opacity: 1;
	visibility: visible;
}
.step.done {
	background-color: var(--co-1);
}
.step {
	position: relative;
	transition: all 0.3s;
	scrollbar-width: thin;
	scrollbar-color: var(--co-2) var(--neutralDarker);
	cursor: pointer;
	counter-increment: item;
	z-index: 1;
}
.step.HERE::before {
	bottom: 30px;
}
.step:not(.HERE) {
	width: 14px;
	height: 14px;
	border-radius: 50%;
}
.step.HERE::after {
	content: counter(item);
	display: flex;
	justify-content: center;
	align-items: center;
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	background: var(--co-1);
	width: 24px;
	height: 28px;
	color: white;
	font-size: var(--medium-size);
	font-family: var(--special-font);
}
.step:not(.done):not(.HERE) {
	background-color: var(--gray);
}
.step:nth-child(1):before {
	content: var(--step1);
}
.step:nth-child(2):before {
	content: var(--step2);
}
.step:nth-child(3):before {
	content: var(--step3);
}
.step:nth-child(4):before {
	content: var(--step4);
}
.step:nth-child(5):before {
	content: var(--step5);
}



/* RECOMPENSES --- */
/* Conteneur des récompenses */
#list_awards {
display: flex;
flex-wrap: wrap;
gap: 5px;
}

/* Récompense */
.award {
    width: 64px;
    min-height: 65px;
    height: auto;
    max-height: none;
    position: relative;
    background-image: var(--award-image);
    background-size: 65px 68px;
    background-position: center;
}

.award:hover .award_tooltiptext {
display: block;
}

.awards_block_simple_wrapper {
    height: 150px;
    margin-top: 30px;
}

/* Bloc description de la récompenses */
.award_tooltiptext {
z-index: 1;
width: max-content;
display: none;
position: absolute;
top: 70%;
left: -100%;
background-color: var(--neutralDarker);
padding: 5px;
border-radius: 5px;
text-align: center;
font-size: 11px;
}

/* titre de la récompenses*/
.award_tooltiptext_title {
font-family: var(--special-font);
font-size: var(--medium-size);
line-height: var(--medium-size);
color: var(--co-2);
}

/* BADGES DANS LE PROFIL */
/*Badges*/

.userCollection {
    position: absolute;
    z-index: 10;
    left: 25px;
    bottom: 15px;
}

.titre_choco {
	font-size: var(--xl-size);
	font-weight: 400;
	text-transform: uppercase;
	font-family: var(--special-font);
	line-height: 100%;
	grid-column: 1 / -1;
	color: var(--co-2);
	border-bottom: 1px solid;
}

.collec {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 60%;
	height: 60%;
	margin: auto;
	z-index: 2;
	overflow: auto;
	transition: 0.5s all;
	background: var(--white);
	padding: 20px;
	border-radius: var(--radius);
}

.collec.hidden {
	visibility: hidden;
	opacity: 0;
}

#badges-profil {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
	gap: var(--spacing);
}
#badges-profil img {
	width: 100%;
}
#badges-profil .badge,
.js-badges-profil .badge {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}
/*Badges obtenus*/
.nope {
	filter: grayscale(100%) !important;
}
.yes {
	filter: grayscale(0) !important;
}

prisma, .prisma {
    border-radius: 100%;
    background: radial-gradient(var(--co-2), var(--co-1));
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

/*** ------------------------------- ***/
/*** PAGE DE PROFIL ---------------- ***/


/* Bouton édition d'un champ de profil */
.ajax-profil_edit {
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0px;
}

/* Bouton validation des modifications */
.ajax-profil_valid {
  cursor: pointer;
  margin-left: 4px;
  vertical-align: middle;
}

/* pseudo profil  */

.page-title_profil {
    text-align: right;
    font-family: var(--special-font);
    font-size: var(--xxl-size);
    font-weight: 300;
    margin-bottom: -20px;
}

/* balise i & b profil  */

.profilaes i {color: var(--contrast);}
.profilaes strong { color: var(--co-1);}
.profile_rank strong, .page-title_profil strong {
    all: unset;
}

/* Container des onglets & icons  */

#pr_icon {
    position: absolute;
    left: 20px;
    bottom: 0;
}

#pr_icon .field_editable {
    padding-bottom: 60px;
}

#pr_icon .field_uneditable img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%;
    border: 10px solid var(--co-1);
}

#pr_icon label {
    display: none;
}

.profile_tabs {
    display: flex;
    gap: 10px;
    margin: 15px 0 25px;
    background: var(--neutral);
    border-radius: var(--radius);
    border: 1px solid var(--black);
    position: relative;
    padding: 20px 20px 20px 175px;
    justify-content: space-between;
  font-size: var(--little-size);
}

/* Onglet */
.profile_tabs .tab {
     border: solid 1px var(--black);
    text-decoration: none;
    color: var(--black);
    text-align: right;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 5px;
    background: linear-gradient(135deg, var(--neutralDark) 33%, var(--co-1), var(--co-2));
    background-size: 350% 120%;
    transition: .7s;
    background-position: 1% 0%;
    background-color: var(--co-1);
    padding: 5px;
    transition: all 0.3s ease;
      width: 100%;
    text-align: center;
}

/* Hover */
.profile_tabs .tab:hover {
    background-position: 99% 0%;
}

/* Onglet actif */
.profile_tabs .tab.active {
    background: var(--co-1);
    color: var(--black);
}

/* Contenu des onglets */
.tab_content {
    display: none;
    animation: fadeTab 0.3s ease;
  transition:.35s;
}

/* Contenu visible */
.tab_content.active {
    display: block;
}

/* Container en ligne + sujets/suivis/messages  */

.info_profil {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 8px 20px;
}

.info_profil_left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile_online {
    background: var(--co-gradient);
    color: white;
    text-transform: lowercase;
    padding: 4px 8px;
    border-radius: var(--radius);
    text-transform: uppercase; 
    font-size: var(--little-size);
}

.info_profil .profile_field {
    display: flex;
}

.pr_links {
    display: flex;
    gap: 8px;
}

.pr_links a {
  position: relative;
  background: var(--co-gradient);
  color: white;
  padding: 4px 8px;
  border-radius: var(--radius);
  text-transform: uppercase;
  font-size: var(--little-size);
  overflow: hidden;
  z-index: 1;
}

.pr_links a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--co-1);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
}

.pr_links a:hover::after {
  opacity: 1;
}

/* container avatar + contenu onglets */
.grille_propro {
    display: grid;
    gap: 10px;
    grid-template-columns: 410px auto 20px;
  margin-bottom: 10px;
}

.profile_avatar {
    width: 400px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing);
    background: var(--co-gradient);
    border-radius: var(--radius);
    color: var(--white);
    font-weight: 100;
    font-size: var(--little-size);
}

.profile_avatar img {
    border: 15px solid var(--black);
    max-width: 300px !important;
    border-radius: var(--radius);
}

.profile_rank {
    background: var(--black);
    padding: 4px 8px;
    border-radius: var(--radius);
}

.profile_avatar .profile_field {
    justify-items: center;
    display: flex;
    gap: 8px;
    padding: 8px;
    font-weight: 500;
    text-transform: uppercase;
    flex-direction: row;
}

/*champ rps*/

#field_id-14 {
    padding: 0;
    margin: 0;
}

#field_id-14 label {
  display: none; }

#field_id-14 field {
    display: flex;
    gap: 4px;
}

#field_id-14 field::after {
    content: 'RPS';
}

/*champ cwtw*/

#pr_cwtw label {
    display: none;
}

#pr_cwtw field {
    text-transform: lowercase !important;
}
#pr_cwtw {
    background: var(--neutral);
    border-radius: var(--radius);
    color: var(--black);
    padding: 0 8px;
}

#pr_cwtw img {
    border: none !important;
}

/* champ partistaff label caché */
#field_id40 label { display: none; }

#field_id10 textarea {
    height: 213px;
    width: 100%;
}

/*contenu onglets*/
.user_profile {
  background: var(--neutral);
  border-radius: 5px;
  padding: var(--spacing);
  height: 650px; 
}

.profile_field {
}

.profile_field label,
.profile_field label>span {
color: var(--co-1);
    font-family: var(--font-2);
    font-style: italic;
    letter-spacing: 0.5px;
}

.profile_field field {
  position: relative;
}

.flex {
    display: flex;
  gap: 20px;
}

/*problème alignement aes sur bxd*/
table {
    text-align: unset !important;
  color: unset;
}

/*tous les onglets*/

#userInfos label::before {
    content: '\2727\00263E\00A0';
    color: var(--co-1);
}

/*basics*/

/*grille sur contenu basics et personnage */
#userInfos, #userRpg {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing);
}

/*SAUF aes, gameplay & champs personnage aes */

#field_id9, #field_id22, #field_id11, #field_id19, #field_id40, #field_id13, #field_id12, #field_id6, #field_id16, #field_id14, #field_id15, #field_id17, #field_id18, #field_id21 {
    grid-column: 1 / -1;
}

/*aes*/ 
#field_id9 label {
    display: none;
}

#field_id9 textarea {
    height: 313px;
    width: 100%;
}

/*gameplay*/ 
#field_id22 textarea {
    height: 113px;
    width: 100%;
}

/*rpgiste, avatar, credit, arrivee, messages, naaksha & 5 premiers champs onglet personnage  */

div#field_id1, div#field_id3, div#field_id4, div#field_id-4, div#field_id-6, div#field_id-13, div#field_id5, div#field_id7, div#field_id36, div#field_id2, div#field_id37 {
    display: flex;
    flex-direction: row;
    justify-content: center;
  gap: 5px;
  background: var(--white);
    border-radius: var(--radius);
    padding: 0 12px;
}

/*champ astro en full largeur*/
#field_id37 {
  grid-column: 1 / -1;
}

/*on retire les titres pour relations puis chrono*/
#field_id24 label, #field_id25 label, #field_id26 label, #field_id27 label, 
#field_id28 label, #field_id29 label, #field_id30 label, #field_id31 label, #field_id34 label
{ display:none; }

/*on met en full size le text area de relations et chrono */

#userInventory textarea, #userLiens textarea, #profil2 textarea, #userRpg textarea {
    width: 100%;
}

/* champs contact */

.contact_profil {
    display: flex;
    align-items: center;
    background: var(--co-gradient);
    border-radius: var(--radius);
  justify-content: center;
}

.profile_contact {
    display: flex;
    gap: 8px;
    flex-direction: column;
    align-items: center;
}

.profile_contact a {
    color: black;
}

.profile_contact #field_id:nth-child(2) {
   display: none;
}

/* multicomptes */

#field_id47 label {
    display: none;
}

#field_id47 textarea {
    width: 100%;
    height: 300px;
}

.multis_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(201px, 0.3fr));
	justify-content: center;
	gap: var(--spacing);
}
.multis_grid td {
	display: block;
	padding: 0;
}
.multi {
	display: block;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--white);
}
.multi tbody {
	display: flex;
	flex-direction: column;
}
.multi td {
	display: block;
}
.multi_img {
	position: relative;
	height: 110px;
}
.multi_img img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	mask: linear-gradient(to bottom, var(--co-1) 60%, transparent 100%);
}
.multi_infos {
	display: block;
	padding: 5px 10px 10px;
	font-size: var(--little-size);
}

/* bullet journal */

#bullet_journal {
    margin-top: 10px;
}

#bullet_journal label {
    display: none;
}

#field_id44 textarea, #field_id38 textarea, #field_id43 textarea, #field_id45 textarea, #field_id46 textarea {
    width: 100%;
    height: 400px;
}

.title_bujo {
    font-family: var(--special-font);
    font-size: var(--xxl-size);
    text-align: center;
    font-weight: 200;
    background: var(--co-gradient);
    border-radius: var(--radius);
    color: white;
    margin-top: 10px;
}

/* Petite animation */
@keyframes fadeTab {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.profile_infos {}

.profile_content {
}

.profile_admin {
  text-align: center;
  margin: 10px 0 0;
}

/* Bouton "suivre le membre" */
.followBtn {
  background: var(--neutral);
  border: 1px solid var(--neutralDark);
  border-radius: 5px;
  font-weight: 600;
  margin: 0;
  font-size: 14px;
}

.followBtn::before {
  top: 1px;
  position: relative;
  color: var(--accentClr);
  margin-right: 5px;
}

/*responsive profil*/

@media screen and (max-width: 1100px) {
  
  .grille_propro {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 10px;
    gap: 10px;
}

.profile_avatar {
    width: 100% !important;
    }
  
  .profile_contact { flex-direction: row !important; padding: 5px; }
  
  .profile_tabs { flex-direction: column !important; }
  
  #pr_icon {
    top: 30px;
}
  .userCollection {
    bottom: 57px !important;
}
  
}

@media screen and (max-width: 430px) {
  .pr_links {
    display: flex;
    gap: 8px;
    flex-direction: column;
    text-align: center;
}
	#userInfos, #userRpg {
    display: flex !important;
    flex-direction: column;
}
	.profile_avatar .profile_field {
    flex-direction: row !important;
}
	.profile_field {
    display: flex;
    flex-direction: column !important;
    align-items: center;
}
  }

/*** ------------------------------- ***/
/*** WOMBAT PROFILS EN POP UP ---- ***/

/* Fond atténué */
.wombat-overlay {
  position: fixed;
  z-index: 990;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: 0.2s opacity ease;
  background: var(--neutral);
}

/* effet de transition du fond atténué */
.wombat-overlay.open {
  opacity: 0.5;
  visibility: visible;
}

/* Fenêtre du popup */
.wombat-aside {
  position: fixed;
  inset: 0;
  margin: auto;
  z-index: 999;
  transition: 0.2s all ease;
  visibility: hidden;
  opacity: 0;
  width: 90%;
  max-width: 800px;
  box-shadow: var(--shadowBox);
  border-radius: 10px;
  height: max-content;
  transform: translateX(-20%);
}

/* effet de transition pour la fenêtre */
.wombat-aside.open {
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}

/*** ------------------------------- ***/
/*** PROFILS SIMPLIFIÉS DES TAGS ---- ***/

/* Supression de la flèche peu esthétique*/
.tooltipster-arrow {}

.tooltipster-default {}

.preview_content {
  display: flex;
}

.preview_avatar img {
  object-fit: cover;
  object-position: center;
  width: 70px;
  height: 70px;
  border-radius: 5px;
  margin-right: 10px;
}

.preview_infos {
  width: 100%;
  padding-top: 3px;
}

.preview_pseudo,
.preview_pseudo strong {
  font-size: var(--medium-size);
}

.preview_contacts {
  position: absolute;
  bottom: 8px;
  right: 10px;
  display: flex;
  align-items: center;
}

.preview_contacts a {
  margin-left: 5px;
}

.tooltipster-arrow {
  display: none;
}