:root {
	--couleurTexte : #000;
	--couleurTitresPapier: #5b4233;
	--couleurClairBois: #a5612e;
	--couleurBleuClair : #dbfffc;
	--brunClair: #bd967f;
	--brunMoyen: #9b4b31;
	--brunFonce : #634727;
	--bleuFonce: #00355d;
	--violetLienHover: #7649cb;
	--champsHtml: #5618c9;
	--rougeDoux : #cb2c2c;
	--framboise : #ef0058;
	--visualisation_pnj : #ffbd50;
	--visualisation_lieu : #4cff4c;
	--visualisation_quete : #b6b6ff;
	--visualisation_queteDepart : #7777f5;
	--visualisation_contexte : #a0e7ff;
	--visualisationTailleMarqueur : 15;
	--visualisationEtiquetteLien : rgba(255,255,255,0.8);
	--grisFonce : #575757;
	--hrose : 255, 0, 210;
	--hbleu : 0, 225, 255;
	--hjaune: 251, 255, 0;
	--hviolet: 195, 0, 255;
	--hvert : 0, 255, 21;
	--ombreTitresPapier : -1px -1px 1px #e6dbc1, 1px 1px 1px #fff2cc;
	
	--parquetSombre : url("/static/img/site/bg/bois/parquetVerticalSombre.webp");
	--parquetDecore : url("/static/img/site/bg/bois/parquetDecore.jpg");
	--boisBureau: url("/static/img/site/bg/bois/boisHorizontalMoyen.webp");
	--boisPorte: url("/static/img/site/bg/bois/boisHorizontalRouge.jpg");
	--boisHorizontalClair: url("/static/img/site/bg/bois/boisHorizontalSoft.jpg");
	--boisHorizontalBleute: url("/static/img/site/bg/bois/boisHorizontalBleute.jpg");
	--boisHorizontalBleuFonce : url("/static/img/site/bg/bois/boisHorizontalBleuFonce.jpg");
	--liege: url("/static/img/site/bg/bois/liegeClair.webp");
	--boisVerticalClair: url("/static/img/site/bg/bois/boisVerticalSoftless.jpg");
	--boisVerticalSombre: url("/static/img/site/bg/bois/boisVerticalSombre.jpg");
	--boisVerticalBrunMoyen: url("/static/img/site/bg/bois/boisVerticalBrunMoyen.jpg");
	--boisVerticalMoyenSombre: url("/static/img/site/bg/bois/boisVerticalMoyenSombre.jpg");	
	--boisHorizontalVert : url("/static/img/site/bg/bois/boisHorizontalVert.jpg");
	
	
	--cuir: url("/static/img/site/bg/cuir/cuirBrun.jpg");
	--cuirVert: url("/static/img/site/bg/cuir/cuirVert.jpg");
	--dragonsOr: url("/static/img/site/bg/divers/dragonsOr.webp");
	
	--ciel: url("/static/img/site/bg/divers/ciel.jpg");
	--ciel2: url("/static/img/site/bg/divers/ciel2.jpg");
	
	
	--papierTresClair : url("/static/img/site/bg/papier/feuilleTresClaire.jpg");
	--papierClair : url("/static/img/site/bg/papier/feuilleClaire.webp");
	--papier : url("/static/img/site/bg/papier/feuille.webp");
	--papierFonce : url("/static/img/site/bg/papier/feuilleFonce.jpg");
	--papierMoyen : url("/static/img/site/bg/papier/papierMoyen.webp");
	
	--fleursDoreesTransparent : url("/static/img/site/bg/divers/fleursDoreesTransparent.png");
	
	--vitrailTranslucide: url("/static/img/site/bg/verre/vitrailTranslucide.png");
	--vitrailBleu: url("/static/img/site/bg/verre/vitrailBleu.jpg");
	--verreTransparentMotifs: url("/static/img/site/bg/verre/verreTransparentMotifs.png");
	--verreTransparentFenetre: url("/static/img/site/bg/verre/verreTransparentFenetre.png");
	--verreTransparentTrefle: url("/static/img/site/bg/verre/verreTransparentTrefle.png");
	
	--paysageFenetre: url("/static/img/site/bg/paysage.jpg");
	--livres: url("/static/img/site/bg/divers/livres.jpg");
	
	--tapisBleu : url("/static/img/site/bg/tissu/veloursBleuMotifs.webp");
	--velours : url("/static/img/site/bg/tissu/veloursRouge.jpg");
	
	--metal : url("/static/img/site/bg/metal/metalSpirales.jpg");
	--metalRefletHMoyen : url("/static/img/site/bg/metal/metalBrosseRefletHorizontal4.jpg");
	--metalRefletHClair : url("/static/img/site/bg/metal/metalBrosseRefletHorizontal2.jpg");
	--metalEcailles : url("/static/img/site/bg/metal/ecailles_metal.jpg");
	
	--ecaillesSombres : url("/static/img/site/bg/divers/ecaillesSombres.webp");
	
	--granit : url("/static/img/site/bg/pierre/granitSombre.jpg");
	--mur : url("/static/img/site/bg/pierre/murSombre.jpg");
	--miniMur : url("/static/img/site/bg/pierre/miniMur.png");
	--murClair : url("/static/img/site/bg/pierre/murClair.jpg");
	
	--gemmeBleue : url("/static/img/site/elements/gemmeBleue.png");
	--gemmeViolette : url("/static/img/site/elements/gemmeViolette.png");
	--gemmeCyan : url("/static/img/site/elements/gemmeCyan.png");
	--gemmeRouge : url("/static/img/site/elements/gemmeRouge.png");
	--gemmeOrange : url("/static/img/site/elements/gemmeOrange.png");
	--gemmeVerte : url("/static/img/site/elements/gemmeVerte.png");
	--gemmeBlanche : url("/static/img/site/elements/gemmeBlanche.png");
	--gemmeNoire : url("/static/img/site/elements/gemmeNoire.png");
	--gemmeJaune : url("/static/img/site/elements/gemmeJaune.png");
	--gemmeGrise : url("/static/img/site/elements/gemmeGrise.png");
	
	--billeRouge : url("/static/img/site/elements/billeRouge.png");
	--billeVerte : url("/static/img/site/elements/billeVerte.png");
	--billeNoire : url("/static/img/site/elements/billeNoire.png");
	
	--vitreBg : linear-gradient(90deg, rgb(219 204 190 / 78%) 0%, rgb(255 255 255 / 48%) 49%, rgb(77 66 45 / 64%) 100%);
	
	--de : url("/static/img/site/elements/deBlanc.png");
	--runeDeOff : url("/static/img/site/elements/rune_deoff.png");
	--runeDeOn : url("/static/img/site/elements/rune_deon.png");
}

@font-face {
    font-family: 'Julee';
    src: url('/static/fonts/Julee-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Charm';
    src: url('/static/fonts/Charm-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Charm';
    src: url('/static/fonts/Charm-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Great Vibes';
    src: url('/static/fonts/GreatVibes-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


html, body {	
	font-size: 17px;
	font-family: 'Times New Roman';
	color: var(--couleurTexte);
	margin: 0;
	padding: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	background: silver;
}

* {
	box-sizing: border-box;
}

/* Majorité des navigateurs */
.combat, .pageCampagne, .sort {
  scrollbar-color: #a1794f #d3ba84;
}

.combat::-webkit-scrollbar-track, .pageCampagne::-webkit-scrollbar-track {
  background: #d3ba84;
}

.combat::-webkit-scrollbar-thumb, .pageCampagne::-webkit-scrollbar-thumb {
  background-color: #d3ba84;
  border-radius: 10px;
  border: 2px solid #a1794f;
}

/* Majorité des navigateurs */
.sort {
  scrollbar-color: #a1794f #d3ba8427;
}

.sort::-webkit-scrollbar-track {
  background: #d3ba8436;
}

.sort::-webkit-scrollbar-thumb {
  background-color: #d3ba842f;
  border-radius: 10px;
  border: 2px solid #a1794f;
}




.titreRelief {
	color: #fff;
    text-shadow: 1px -1px 1px #9b7a5c, -1px -1px #e6d8cb, 0 1px 1px #cdb9a6c2
}

a, .aLike {
	color: #fff;
	text-decoration: none;
}

a:hover, .aLike:hover {
	text-decoration: none;
	color: #cb4200;
}

.aLike {
	cursor: pointer;
}

h1 {
	font-size: 2em;
	margin: auto;
}

h2 {
	font-size: 1.5em;
	margin: 0.4em auto;
}

h1, h2 {
	text-align: center;
	font-family: "Charm", cursive;
	font-weight: 700;
	font-style: normal;
}

h3 {
	text-align: center;
	font-family: "Julee", cursive;
	font-weight: 600;
	font-style: normal;
	margin: 2em auto;
	font-size: 1.2em;
}

h4 {
	font-size: 1.1em;
}

h4.consigne {
	font-style: italic;
	color: #8d7e6a;
}

h5 {
	font-size: 1em;
}

p {
	margin: 0.8em auto;
}

input, select, textarea {
	outline: none;
}

select:focus, textarea:focus {
	outline: 1px ridge #e1e194;
}
textarea, .editeurAvance { resize: vertical; }

input, button, .submitLike {
	position: relative;
	/*top: -0.1em;*/
}

input[type="checkbox"]:checked, input[type="radio"]:checked, input[type="checkbox"]:checked:hover, input[type="radio"]:checked:hover {
  accent-color: #008575; /* couleur quand sélectionné */
}

/** Switch checkbox 
    <label class="switch" :for="'modeAvance_' + infos.id">
        <input type="checkbox" :id="'modeAvance_' + infos.id" v-model="modeAvance"> <span class="slider"></span>
        <span class="libelleSwitch">Mode avancé</span>
    </label>
**/
label.switch {
    display: inline-flex;
    align-items: center;
    gap: 8px; /* espace entre le switch et le texte */
    cursor: pointer;
}

label.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: relative;
    width: 32px;
    height: 18px;
    background-color: #ccc;
    border-radius: 18px;
    transition: .4s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    box-shadow: 1px 0 1px #0000008e;
    border-radius: 50%;
    transition: .4s;
}

input:checked + .slider {
    background-color: #008575;
}

input:checked + .slider:before {
    transform: translateX(14px);
}
.switch input:checked ~ .libelleSwitch {
    font-weight: bold;
}



.consigne.explication {
	font-weight: bold;
}

.explication, .alerte {
	font-style: italic;
	color: #7b6852;
}

.explication.fonce {
	color: #5d4122;
}

.alerte {
	border-color: red;
}

.contenuPortail .error {
	background: rgb(37 100 133 / 36%);
    border-radius: 10px;
}

table.surligne {
	border-collapse: collapse;
}

nav {
	margin: 0 auto 3em;
	display: flex;	
    flex-wrap: wrap;
	min-width: 80%;
}

nav a, nav > div {
	margin: auto;
    border-radius: 4px;
    padding: 12px;
    font-family: 'Julee', cursive;
    font-size: 1.4em;
    font-weight: bold;
	background: var(--boisHorizontalBleute);
	box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6), inset 0 2px 4px #ffe5c4, inset 0 -2px 4px #3b3126;
	border: 2px outset #d5b08d;
}

@media (hover: hover) and (pointer: fine) {
    nav a:hover {
        color: #264a71;
        text-shadow: 0 0.6px 1px #fff, 0 -0.4px 0px #fff;
        animation: deplacementReflet 0.1s linear forwards;
    }
}

/* On ne peut pas mettre overflow : hidden si on veut utiliser le display: sticky */
#page {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
	width: 100%;
    min-height: 100%;
	color: #000;
	/*overflow: hidden;*/
	position: relative;
}

#page.pageCampagne, #page.pageAccueil, #page.pageEnigme {
	overflow: hidden;
}

.contenant {
	flex: 1 0 auto;
    display: flex;
	justify-content: center;
	position: relative;
	flex-direction: column;
}

.noFlex .contenant {
	display: block;
}
.contenant form {
	margin: 1em auto;
}

ul.listeFlex li {
	display: flex; justify-content: space-between;
}

ul.listeFlex li .bi-circle-fill {
	font-size: 0.3em; margin-right: 1.2em;
}

button {
	background: rgba(255, 255, 255, 0.9);
    border: 1px silver solid;
    padding: 3px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}
button:not([disabled]):hover {
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2), inset 0 1px 6px rgb(115 156 159 / 60%)
}

button.supprimer {
	color: red !important; 
	font-weight: bold;
	cursor: pointer;
}

button.modifier {
	color: #0069a9 !important; 
	font-weight: bold;
	cursor: pointer;
}

button.modifier:hover {
	color: #9cdaff !important;
}

button:disabled {
	background: #d7d7d7;
    color: #918888;
	opacity: 0.8;
}

.htmlAutorise {
	color : var(--champsHtml) !important;
}

.majPremiereLettre {
	display: inline-block;
}
.majPremiereLettre::first-letter {
	text-transform: capitalize;
}

.msgGeneral {
	background: #fff;
	border: solid var(--rougeDoux);
	border-width: 4px 0;
	color: var(--framboise);
	font-weight: bold;
	text-align: center;
	padding: 10px 4px;
	margin-bottom: 1em;
}

#messageServeur {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	background: rgba(0,0,0,0.9);
	color: #fff;
	text-align: center;
	display: flex;
}
#messageServeur div {
	margin: auto;
}
#messageServeur a {
	color: var(--couleurBleuClair);
	font-weight: bold;
}
#messageServeur a:hover {
	color: var(--framboise);
}

#messageSite {
	position: fixed; 
	top: 50%; 
	left: 50%; 
	transform: translate(-50%, -50%); 
	background: #fff; 
	border: 2px solid var(--rougeDoux); 
	padding: 10px; 
	z-index: 100; 
	text-align: center;
	box-shadow: 0 4px 10px #0000008a;
}

.editeurHtml {
	background: rgba(255,255,255,0.8);
	font-size: 16px;
}

.premiereLettreMaj::first-letter {
	text-transform: capitalize;
}

ul.espacesPlus li {
	margin-bottom: 0.3em;
	padding: 2px 1px;
}
ul.espacesPlus li:hover {
	background: rgba(255,255,255,0.4);
}

ul.espacesPlus.ombre li:hover {
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

ul.espacesPlus li:hover {
	background: rgba(255,255,255,0.4);
}

/* Ancien site, voir si toujours utile */

input.theme {
	display: none;
}

label.theme {
	display: flex;
	align-items: center;
	margin-right: 4px;
}
label.theme.ib {
	display: inline-block;
}

label.theme.gris {
	color: silver;
}

input.theme + label.theme::before {
	font-family: "bootstrap-icons";
	display: inline-block;
	margin: 0 0.5em;
	text-align: center;
}

input[type="checkbox"].theme + label.theme::before {
	content: "\F584";
	color: gray;		
}

input[type="checkbox"]:checked.theme + label.theme::before {
	content: "\f26d";
	color: green;
}

input[type="checkbox"]:checked.theme + label.theme.gris::before {
	color: silver;
}

input[type="radio"].theme + label.theme::before {
	content: "\F28A";
	color: gray;		
}

input[type="radio"]:checked.theme + label.theme::before {
	content: "\F26B";
	color: green;
}

input[type="radio"]:checked.theme + label.theme.gris::before {
	color: silver;
}

button[type="submit"], .submitLike { 
    cursor: pointer;
    margin: 0 1px;
}

button[type="submit"]:disabled, .submitLike:disabled {
	background: silver;
	cursor: default;
}
.sousMain button.submitLike:disabled {
	background : #e1dcd8;
}

.boutonSimple {
	background: #fff;
    border: none;
    font-weight: bold;
    color: #553916;
    /*box-shadow: 0 1px 1px rgb(0 0 0 / 28%);*/
    border-radius: 4px;
    display: inline-block;
    margin: 0 2px;
    cursor: pointer;
}

button.boutonSimple[type="submit"], button.boutonSimple.neutre {
	background: none; 
	border: none;
	box-shadow: none;
	padding: 0;
	top: -0.04em;
	color: inherit;
	text-shadow: none;
	font-weight: normal;
}

input, select, textarea, .editeurAvance {
    background: #fefdfa;
}
input {
    padding-top: 2px;
}
input, select, textarea, .editeurAvanceModule {
	border-color: #f0e7de;
    border-style: ridge;
}

.formParchemin input, .formParchemin select, .formParchemin textarea, .formParchemin .editeurAvanceModule {
	border: 1px solid #dbd0ce;
}

select, textarea, .editeurAvanceModule {
	border-width: 2px;
}
.editeurAvanceModule textarea, .editeurAvance {
	border-width: 0;
}
.boutonsEditeur {
	border: 1px 0;
}

input[type="number"]:disabled {
	background: #d7d7d7;
    color: #fff;
}

input[type="url"] {
	width: 40em;
	max-width: 80%;
}

input.erreurExtensionFichier {
	border: 2px solid red;
}

#infosMenu {
	position: relative;
	cursor: help;
}

#menuSousInfos {
	display: none;
	position: absolute;
	width: 100%;
    left: 0;
	text-align: center;
	border-top: 2px solid #fff;
    margin-top: 4px;
}

#menuSousInfos a {
	font-size: 0.9em;
	display: block;
}

nav #infosMenu:hover #menuSousInfos, nav #infosMenu.actif #menuSousInfos {
	display: block;
}

footer {
	display: flex;
    flex-direction: column;
    justify-content: center;
	background-size: 200px;
	padding: 10px 20px;
}


#titreSite {
	display: flex;
	height: 150px;
}


.info {
	color: #b93c00;
}

.contenuLarge {
	max-width: 1300px;
}

.naturel {
	white-space: pre-line;
}
.editeurHtml {
	text-align: left;
}
.cm-content ::selection {
  background: #ffcc00;
  color: black;
}

textarea.immense, textarea.tresgrand, textarea.grand, textarea.moyen, .editeurHtml.immense, .editeurHtml.tresgrand, .editeurHtml.grand, .editeurHtml.moyen, .editeurAvanceModule {
	display: block;
	width: 50%;
	margin: 0 auto 1em;
}

.editeurAvanceModule {
    margin-top: 0.5em;
}

textarea, .editeurHtml {
	width: 40%;
}

.editeurHtml.immense, .editeurHtml.tresgrand, .editeurAvanceModule.immense, .editeurAvanceModule.tresgrand {
	width: 80%;
}

textarea.immense, .editeurHtml.immense, .editeurAvanceModule.immense .editeurAvance {
	min-height: 500px;
}

textarea.tresgrand, .editeurHtml.tresgrand, .editeurAvanceModule.tresgrand .editeurAvance {
	min-height: 300px;
}

textarea.grand, .editeurHtml.grand, .editeurAvanceModule.grand .editeurAvance {
	min-height: 150px;
}

textarea.moyen, .editeurHtml.moyen, .editeurAvanceModule.moyen .editeurAvance {
	min-height: 100px;
}

textarea.petit, .editeurHtml.petit, .editeurAvanceModule.petit .editeurAvance {
	min-height: 80px;
}

textarea.trespetit, .editeurAvanceModule.trespetit .editeurAvance {
	min-height: 50px;
}

textarea.minuscule, .editeurAvanceModule.minuscule .editeurAvance {
	min-height: 25px;
}

.editeurAvance {
    width: 100%;
    padding: 2px;
    max-height: 90vh;
    overflow-y: auto;
}

.editeurAvanceModule textarea {
    width: 100% !important;
    margin: 0 auto !important;
}

input[type="text"].moyen {
	width: 20em;
}


.ProseMirror {
	text-align: left;
}
.ProseMirror:focus {
  outline: none;
}
.ProseMirror .is-editor-empty::before {
    position: absolute;
    content: attr(data-placeholder);
    color: #adadad;
    pointer-events: none;
    height: 0;
}

.boutonsEditeur {
	display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff4a;
    padding: 4px 8px;
}

.boutonsEditeur .bActif {
	background: #7cffd6;
    border-color: #00c13f;
}

.boutonsBase button {
    margin-right: 4px;
}

.bGras button {
	font-weight: bold;
}
.bItalic button {
	font-style: italic;
}
.bSouligne button {
	text-decoration: underline;
}

p.autoParagraphe {
    margin: 0;
}

.editeurAvance, p.autoParagraphe {
    white-space: pre-line;
}

.txtaObligatoireInvisible {
    height: 1px !important;
    min-height: 0px !important;
    width: 1px !important;
    opacity: 0.1 !important;
    position: absolute;
}

.formParchemin {
	position: relative;
	background: var(--papierClair);
	padding: 10px;
	text-align: center;
	max-width: min(1200px, 100%);
	color: var(--brunFonce);
	box-shadow: -1px -1px 8px 1px rgba(0,0,0,0.8);
}

.formParchemin a, .formParchemin .aLike {
	color: var(--bleuFonce);
}

.formParchemin a:hover, .formParchemin .aLike:hover {
	color: var(--violetLienHover);
}


.formParchemin textarea {
	display: block;
	margin: 1em auto 2em;
}
.formParchemin textarea, .formParchemin .editeurAvanceModule {
	width: 80%;
}

.formParchemin label:not(.sansCss), form.formGeneral label:not(.sansCss), #compte label:not(.sansCss), .labelLike {
	display: block;
	margin: auto auto 0.2em;
	font-weight: bold;
	color: green;
}

.labelSecondaire {    
	display: block;
	font-weight: bold;
	color: var(--brunMoyen);
}

.chexboxes {
	display: inline-block;
	margin: 1em auto 2em;
	text-align: left;
}

.formParchemin .chexboxes label {
	display: inline-block;
	margin: auto;
	font-weight: bold;
	color: inherit;
}

.formParchemin p {
	margin: 0.5em 0 1em;
}

.formParchemin input[type="text"], .formGeneral input[type="text"], .formParchemin input[type="password"], .formParchemin input[type="email"], .formParchemin input[type="url"] {
	margin-bottom: 1em;
}

.formParchemin input[type="number"], .formGeneral input[type="number"] {
	width: 80px;
	margin-bottom: 1em;
}

.formParchemin table input[type="text"], .formParchemin table input[type="url"], .formParchemin table input[type="number"] {
	margin: auto;
}

.formParchemin select {
	min-width: 200px;
	margin-bottom: 1em;
}

.sectionGenerique {
	margin: auto; padding: 1em 2em 3em; 
	width: min(1400px, 99%); 
	max-width: 90%;
}

.flottant {
	position: sticky; 
	top: 0; /* flottant quand l'élément atteint le haut de la page*/
}

*:not(.invisible) .liensFlottants {
	margin-top: 0 !important;
	background: rgb(255 254 250);
	padding: 4px;
	box-shadow: 0 0 4px #000;
}

.sectionGenerique *:not(.invisible) .liensFlottants {
	margin-left: -2em;
	margin-right: -2em;
}

.champModifie {
	box-shadow: 0 0 4px 1px #60efc1bf;
	border-color: #60efc1 !important;
}
.force {color: red !important;}
.dex {color: #c17d00 !important;}
.const {color: black !important;}
.int {color: blue !important;}
.sag {color: #007037 !important;}
.cha {color: purple !important;}

.articlePartie {
	padding-bottom: 2em;
	border-bottom: 1px dotted #99928a;
}
.articlePartie:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.blocSepare {
	margin: 0 auto 2em;
    padding-bottom: 10px;
    border-bottom: 1px dotted;
    width: fit-content;
}
.blocSepare:last-child {
	border-bottom: none;
}

.adapteGauche {
	text-align:left;
	display:inline-block;
	margin:auto;
}

table.surligne tr:not(.noSurligne):hover {
	background: rgba(255,255,255, 0.8);
	box-shadow: 0 0 2px rgb(93 73 55 / 62%);
}

table.espaces td {
	padding: 6px 2px;
}

.stabilo {
	background: yellow;
}
.miniLabel {
	font-size: 0.2em;
	text-align: center;
	color: rgba(0,0,0,0.2);
	display: none;
	margin: auto;
}
.miniLabel:hover {
	display: inline-block;
}

.schemaBdd {
	overflow: auto;
}
.schemaBdd svg {
	width: 4000px !important;
}

.multiselect.listeSorts {
	width: auto;
	min-height: auto;
	display: inline-block;
    padding: 0 4px;
	background: rgba(255,255,255,0.8);
}

.multiselect.listeSorts.is-active {
	box-shadow: none;
}

.multiselect.listeSorts .multiselect-dropdown { 
	width: auto !important; 
	min-width: max-content !important;
	overflow-y: auto;
}

.multiselect.listeSorts .multiselect-option {
	line-height: normal;
}

.multiselect.listeSorts .multiselect-wrapper {
	min-height: auto;
	justify-content: space-between;
}

.multiselect.listeSorts .multiselect-caret {
	margin: 0 2px 0 10px;
}

body.mesure-select .multiselect.listeSorts .multiselect-dropdown { 
	/*padding: 0 !important; border: none !important; outline: none !important; */
	opacity: 0.01;
}

.flexSimple {
	display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
}

/* =========== Pages avec class mur ============ */

#page.mur {	
	background: var(--murClair);
}

#page.mur.connexion {	
	background: radial-gradient(circle, #0e3e681f 50%, #0f1629a3 80%), var(--mur);
}

.mur h1 {
	background: var(--boisHorizontalBleute);
	margin: 5px auto 2em;
	width: 50%;
	border-radius: 10px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 8px 6px 2px #ffe5c4, inset 0 -4px 6px #3b3126;
	border: 2px outset #d5b08d;
}
#page.mur.connexion nav a, #page.mur.connexion nav > div {	
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 3px 3px 1px #6aaec7, inset 0 -4px 6px #3b3126;
}
#page.mur.connexion h1 {
	font-size: 1.5em;
	border-color: #5e4ed3;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 6px 3px 2px #6aaec7, inset 0 -4px 6px #3b3126;
}

#page.mur.connexion h1, #page.mur.connexion nav a, #page.mur.connexion nav > div, #page.mur.connexion footer {
	background: var(--boisHorizontalBleuFonce);
}

.mur h1 a {
	background-image: var(--boisHorizontalClair);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	font-size: 2em;
	font-weight: bold;
	font-family: "Charm", cursive;
}

.mur h1 a:hover {
	background-image: var(--boisBureau);
}

.mur.connexion h1 a:hover {
	background-image: var(--boisHorizontalBleute);
}

@keyframes deplacementReflet {
  0% {
    background: linear-gradient(-60deg, #e6f1f1 6%, #afafaf 30%, #a7b0c5 50%, #e5dbdb 70%, #fff 80%, #e5e5e5 98%);
  }
  100% {
    background: linear-gradient(-60deg, #9b9ea5 10%, #d9d6dd 30%, #f2f9ff 50%, #ddd 70%, #ccc 90%, #fff 98%);
  }
}


.fenetre {	
	position: absolute;
	border: 20px solid brown;
	border-image-source: var(--boisBureau);
	border-image-slice: 30%;
	border-image-repeat: stretch;
	background: var(--verreTransparentFenetre), var(--paysageFenetre);
	background-size: 300px, auto 100%;
	margin-bottom: 4em;
	box-shadow: inset 0 0 10px 5px #000, 0 -1px 8px 2px rgb(125 118 118);
	color: #fff;
	width: 15%;
	min-width: 100px;
	top: 25px;
	height: calc(100% - 50px);
}

@media (max-width: 768px) {
  .fenetre {
    display: none;
  }
}

#page .fenetre:first-child {
	left: -10%;
	background-position: left bottom;
}

#page .fenetre:last-child {
	right: -10%;
	background-position: right bottom;	
}

.mur .fenetre {	
	border-image-source: var(--granit);
}
.fenetre::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: 0;
	width: 100%;
	height: 15px;
	background: var(--granit);
	box-shadow: 0px 2px 4px 1px #000;
}

.texteMur {
	position: relative;
	z-index: 2;
	background: var(--liege);
	background-size: 350px;
	width: 60%;
	margin: auto;
	padding: 20px;
	border: 25px solid brown;
	border-image-source: var(--boisHorizontalBleute);
	border-image-slice: 30%;
	border-image-repeat: stretch;
	box-shadow: inset 0 0 6px #000, -1px 4px 10px #000;
	min-height: 50%;
	text-align: center;
}

.texteMur:before, .texteMur:after {
	content: "";
	position: absolute;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--metal);
	background-size: 1050px;
    background-position: center;	
	top: -20px;
}

.texteMur:before {
	left: -20px;
	box-shadow: 0 0 2px #000, inset 1px 2px 2px #fff;
}

.texteMur:after {
	right: -20px;
	box-shadow: 0 0 2px #000, inset -1px 2px 2px #fff;
}

.texteMur a {
	color: #2e8ca3;
	display: inline-block;
	font-weight: bold;
}

.texteMur a:hover {
	color: #b50000;
}

.texteMur h2 {
	color: #b1997c;
    font-size: 1.8em;
    text-shadow: -1px 0 1px #fff, 1px -1px 1px #000;
}

.texteMur h3 {
	font-size: 1.5em;
	margin: 2em auto 1em;
}

.texteMur ul {
	display: inline-block;
	margin: auto;
}


.persosAccueil {
	display: flex;
    flex-wrap: wrap;
	text-align: center;
	justify-content: space-evenly;
}
.mur footer {
	margin-top: 40px;
	background: var(--boisHorizontalBleute);
	box-shadow: inset 0 2px 8px #fff, 0 1px 4px #000;
	border-bottom: 4px ridge var(--couleurBleuClair);
}

.persosAccueil > a {
	display: flex;
    position: relative;
    text-align: center;
    height: 200px;
    width: 160px;
    background: var(--papier);
    align-content: space-between;
    flex-wrap: wrap;
    justify-content: center;
	margin: 10px;
	margin-bottom: 1px;
	padding: 12px 6px 6px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.6);
	border: solid rgb(173 144 85 / 49%);
	border-width: 0 2px;
}

.imgPersoAccueil {
	height: 150px;
	overflow: hidden;
}

.persosAccueil img {
	display: block;
	max-height: 200px;
	max-width: 150px;
	filter: grayscale(0.5);
	transition: all linear 0.2s;
}

.persosAccueil > a:hover img {
	filter: grayscale(0);
}

@media (max-width: 768px) {
    .texteMur {
        border-width: 15px;
        width: calc(100% - 30px - 50px - 4px);
    }
    .texteMur:before, .texteMur:after {
        width: 12px;
        height: 12px;
        top: -12px;
    }
    .texteMur:before {
        left: -12px;
    }
    .texteMur:after {
        right: -12px;
    }

    .texteMur h2 {
        font-size: 1.5em;
    }

    .texteMur h3 {
        font-size: 1.3em;
    }

    .persosAccueil > a {
        display: block;
        height: auto;
        width: 80%;
    }

    .imgPersoAccueil {
        float: left;
        margin-right: 10px;
        height: 80px;
    }

    .persosAccueil img {
        max-height: 100px;
    }

    .persosAccueil > a > div:not(.imgPersoAccueil) {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
}

#mdpOublie {
	background: rgba(0,0,0,0.6);
	padding: 4em 0;
	text-align: center;
	display: inline-block;
	margin: auto;
	position: relative;
	perspective: 400px;
	color: var(--couleurBleuClair);
	border: 1px solid silver;
	box-shadow: 0 0 6px rgba(0,0,0,0.6);
	width: 800px;
}

#mdpOublie h2 {
	position: relative;
	z-index: 10;
	color: #fff;
	text-shadow: 0 0 2px blue;
	animation: halo 1s linear infinite alternate;
}
@keyframes halo {
  from {
    text-shadow: 0 0 8px green;
  }
  to {
    text-shadow: 0 0 16px var(--couleurBleuClair);
  }
}

#mdpOublie form {
	position: relative;
	z-index: 10;
}

#mdpOublie input {
	margin: 6px auto;
}

#mdpOublie button {
	margin: 1.5em auto -2em;
}

#coteGauche, #coteDroit {
	position: absolute;
    height: 75%;
    width: 200px;
    top: 12.5%;
    background: #10101066;
}

#coteGauche {
    /*left: calc(28% - 1em + 6px);*/
	left: 150px;
    transform: rotateY(-90deg) translateZ(150px);
}

#coteDroit {
    /*right: calc(28% - 1em + 6px); /* Si 388 */
	right: 150px;
    transform: rotateY(90deg) translateZ(150px);
}

#fond {
	position: absolute;
    background: #0000007d;
    top: 20%;
    bottom: 20%;
    left: calc(20% - 3px);
    right: calc(20% - 3px);
	box-shadow: inset 0 -4px 10px #000;
}

.password-input {
	display: flex;
}
.password-input input {
	flex-grow: 1;
}
.password-input button {
	margin-left: 10px;
}


@media (max-width: 768px) {
    .mur h1 {
        margin-bottom: 0.5em;
    }
    .mur nav {
        background: var(--boisHorizontalBleute);
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.6), inset 0 2px 4px #ffe5c4, inset 0 -2px 4px #3b3126;
        border: outset #d5b08d;
        border-width: 2px 0;
    }
}


/*======== portail ============*/

#togglePassword {
    margin-left: -20px;
    cursor: pointer;
	color: grey;
}

.contenantPortail {
	position: relative;
	width: 600px;
	height: 620px;
	margin: auto;
}

.portail {
	position: absolute;
	color: var(--couleurBleuClair);
	height: 580px;
	width: 540px;
	margin-top: 1em;
	display: flex;
	flex-direction: column;
    justify-content: center;
}

.portail .contenuPortail {
	position: relative;
	z-index: 10;
	text-align: center;
	height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.portail::before, .portail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  z-index: 2;
  box-shadow: 0 0 20px 20px #17778d;
}
.portail::before {
  width: 500px;
  height: 500px;
  background-color: #00000075;
  filter: blur(40px);
}
.portail::after {
  width: 350px;
  height: 350px;
  background-color: #040f1485;
  animation: circle-size 1.6s linear infinite alternate;
  filter: blur(4px);
}

.portail-shadow {
  width: 450px;
  height: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 100%;
  z-index: 1;
  box-shadow: 10px -55px 30px 15px #446ca9, 24px -10px 47px 10px #dfe6ff, -21px -25px 97px 10px #5acee3, 51px 5px 17px 10px #1b7d8f, 3px 2px 77px 10px #3bc981;
  animation: shadow-rotate 3s linear infinite;
  transform-origin: center;
}

@keyframes circle-size {
  from {
    width: 440px;
    height: 440px;
  }
  to {
    width: 500px;
    height: 500px;
  }
}
@keyframes shadow-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.portail input, .portail input:-webkit-autofill, .portail input:-webkit-autofill:hover, .portail input:-webkit-autofill:focus, .portail input:-webkit-autofill:active, .portail button, #mdpOublie button, #mdpOublie input {
	box-shadow: inset 0 0 50px 2px #000;
	color: var(--couleurBleuClair);
	border: 1px solid #197487;
	text-align: center;
	margin: 6px auto;
	padding: 3px 10px;
}

.portail input, .portail input:-webkit-autofill, .portail input:-webkit-autofill:hover, .portail input:-webkit-autofill:focus, .portail input:-webkit-autofill:active, #mdpOublie input {
	-webkit-text-fill-color: var(--couleurBleuClair);
}

.portail input[type="checkbox"] {
	box-shadow: none;
	background: var(--couleurBleuClair);
}

.portail input[type="email"], .portail button[type="submit"] {
	border-radius: 4px;
}

.portail input[type="password"] {
	border-radius: 4px 0 0 4px;
}
.portail button[type="button"] {
	border-radius: 0 4px 4px 0;
	cursor: pointer;
}
.portail button[type="submit"] {
	margin: 1em auto 2em;
}
.portail button:hover, #mdpOublie button:hover {
	background: #64d5e1;
}
.portail button[type="submit"]:hover, #mdpOublie button:hover {
	box-shadow: inset 0 0 50px 2px #000, 0 0 3px rgba(255,255,255,0.6);
}

.portail a:hover, #mdpOublie a:hover {
	color: #93fff6;
}



/* ============== pages avec class bibliotheque =========== */
#page.bibliotheque {
	background-image: var(--boisVerticalSombre);
}

#page.bibliotheque .contenant {
	background-image: var(--vitreBg), var(--verreTransparentTrefle), var(--livres);
    background-size: auto, 400px, auto;
    border: solid #452b26;
    border-width: 14px 10px;
	border-image-source: var(--boisPorte);
	border-image-slice: 30%;
	border-image-repeat: stretch;
    box-shadow: 0 -2px 4px #a57267, 0 2px 4px #000, inset 0 0 14px 4px #494038;
	padding: 2em;
	margin: 2em auto;
	width: calc(95% - 4em);
}

.sort {
	max-width: 1000px;
	background: var(--papier);
	margin: auto;
	position: relative;
	padding: 0;
	box-shadow: 0 2px 4px #000;
}

.sort h3 {
	padding: 0.6em 0;
	margin: 0.5em auto;
	font-size: 1.4em;
}

.sort .niveauSort {
	text-align: center;
	font-weight: bold;
}

.typeDegats {
	text-align: center;
	margin: 0.5em auto 1em;
}

.typeDegats .icone {
	display: inline-block;
	height: 20px;
	width: 20px;
	margin: 0 6px 0 10px;
	background-size: 20px;
}
.acide {
	background-image: var(--gemmeJaune);
}
.contondant {
	background-image: var(--gemmeGrise);
}
.feu {
	background-image: var(--gemmeRouge);
}
.sort .force {
	background-image: var(--gemmeOrange);
}
.foudre {
	background-image: var(--gemmeBleue);
}
.froid {
	background-image: var(--gemmeCyan);
}
.necro {
	background-image: var(--gemmeNoire);
}
.perforant {
	background-image: var(--gemmeGrise);
}
.poison {
	background-image: var(--gemmeVerte);
}
.psy {
	background-image: var(--gemmeViolette);
}
.radiant {
	background-image: var(--gemmeBlanche);
}
.tonnerre {
	background-image: var(--gemmeGrise);
}
.tranchant {
	background-image: var(--gemmeGrise);
}


.infosSort {
	padding: 0 2em 1em;
}

#page.bibliotheque .contenant .sort {
	margin: 1em auto auto;
}

#page.bibliotheque .contenant a {
	color : var(--bleuFonce);
}

#page.bibliotheque .contenant a:hover {
	color : var(--violetLienHover);
}

.listeSorts .gi {
	margin-right: 4px;
}

.gi-broadsword {
	color: #ef3900;
}

.gi-shining-sword {
	color: rgb(156 0 249);
}

.gi-shining-heart {
	color: rgb(0 151 48);
}

.gi-barbed-sun {
	color: rgb(122, 122, 122);
}


/* ============== pages avec class pageBureau =========== */	

#page.pageBureau {	
	background: var(--parquetSombre);
}

.pageBureau .contenant {
	display: block;
}


.mur .sectionsMenu li, ul.espaces li {
	margin-bottom: 0.2em;
}

.mur .sectionsMenu li::marker, ul.espaces li::marker, ul.espacesPlus li::marker {
	font-size: 1em;
}
.mur .sectionsMenu li .decale, ul.espaces li .decale, ul.espacesPlus li .decale {
	display: inline-block;
	padding-left: 1.2em;
}
/*
.contenu ul li {
	margin-bottom: 1em;
	list-style: inside;
}*/

.bandeau {
	font-weight: bold; 
	text-align: center; 
	margin-bottom: 1em;
	padding: 4px 0; 
}

.combatBiblio {
	background: #04782f; 
	box-shadow: inset -1px 1px 4px #6bff86, inset 1px -1px 2px #000; 
	text-shadow: 1px 1px 1px #053e1a; 
	color: #fff;
}

.menuForm {
	position: absolute;
	background: rgb(197 174 144 / 27%);
    border-radius: 4px;
    padding: 4px 10px;
    box-shadow: inset 0 -1px 8px rgb(143 128 105);
    border: 1px solid #fff;
	text-align: left;
	z-index: 10;
}

.menuForm.flottant {
	top: auto;
	margin: 0;
}

.menuForm.liensFlottants {
	position: sticky;
	top: 0;
	width: fit-content;
}

.menuForm.afficherLegende {	
	background: var(--papier);
    box-shadow: 0 -1px 8px rgb(143 128 105);
}

.menuForm a {
	display: block;
	margin-bottom: 4px;
}

.menuForm a span {
	color: var(--brunFonce);
	font-style: italic;
}

.menuForm a:hover span {
	color: #fff;
}

.menuForm span {
	display: none;
}

.menuForm.afficherLegende span {
	display: inline-block;
	margin-left: 4px;
}

.menuForm .menuLegend {
	text-align: center;
	margin-bottom: 8px;
	cursor: pointer;
}

.menuForm a .bi {
	text-shadow: -1px 1px 2px #00000099;
	margin: 6px 0;
}
.menuForm a:hover .bi {
	text-shadow: -1px 1px 2px #fff;
}


.perso h2 {
	color: green;
	text-align: center;
	margin-bottom: 0.5em;
}

.perso h2 a {
	color: #025789;
}
.perso h2 a:hover {
	color: #cb4200;
}
.perso h3 {
	text-align: left;
	font-weight: normal;
	margin-top: 1em;
}

.perso form {
	display: inline-block;
}

.perso input[type="number"] {
	width: 3em;
    border: 1px solid #c9b9aa;
}

.portrait {
	/*display: inline-block;*/
	max-width: 250px;
	max-height: 300px;
	overflow: hidden;
	float: left;
    margin-right: 2em;
	border: 1px solid #ab947f;
    box-shadow: 0 0 2px #827d6f;
    border-radius: 2px;
}
.portrait img {
	max-width: 250px;
}

.tousPersos .portrait {
	max-height: 250px;
}

.bi-heart-fill {
	color: #d30000;
}

table.important {
	text-align: center;
	font-size: 1.3em;
}

table.important th {
	color: green;
	padding: 0 20px;
}

ul {
	list-style-position: inside;
}

.infos {
	display: flex;
	flex-direction: row;
}

.competences, .infosPpales, .sectionOnOff.sousCible {
	background: #fefdfa;
    padding: 1em 0.5em ;
	border: 2px solid #e1d5ca;
	margin-top: 1em;
}

.infosPpales {
	margin: 0;
	padding: 0 0 1em 0;
}

.competences {
	display: inline-block;
	margin-right: 1em;
}

.competences li:last-child{
	margin-bottom: 0;
}
.competences li:first-letter {
	font-weight: bold;
}


.emplSort {
	display: inline-block;
	margin: 10px 20px 0 0;
}
.emplSort.avecBouton {
	margin-right: 4px;
}
.boutonCaseSort {
	margin-right: 20px;
}
.carreEmplSort {
	display: inline-block;
	margin-left: 10px;
	height: 10px;
	width: 10px;
	background: red;
}
.carreEmplSort:first-child {
	margin-left: 0;
}

.carreEmplSort.vert {
	background: green;
}


div.flexp.grand {
	margin: 1em auto 1.5em;
}

.flexp {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	white-space: normal;
}

.flexp p {
	margin: 0;
}

:not(textarea):not(.editeurAvanceModule).grand {
	font-size: 1.3em;
}

.flexp.grand strong {
	color: green;
}

.floattant{
	float: left;
}

form[name="compteur"] {
	margin-left: 12px;
}

.comptNb form[name="compteur"] {
	margin-left: 4px;
}

form[name="compteur"] input[type="number"] {
	border-radius: 4px;
	width: 4em;
}

/** =================== Page tous les personnages ============== **/

.tableauPersonnages {
	background: var(--liege);
	background-size: 350px;
    max-width: 1200px;
    margin: auto;
	border: 25px solid brown;
    border-image-source: var(--boisBureau);
    border-image-slice: 30%;
    border-image-repeat: stretch;
	padding: 20px;
	border-radius: 6px;
	box-shadow: 1px 4px 10px 2px rgba(0,0,0,0.6), inset 0 0 6px 1px #000;
}

.personnageResume {
	padding: 6px;
	margin-bottom: 1em;
	background: var(--papier);
	color: var(--couleurTitresPapier);
	box-shadow: 1px 2px 4px rgba(0,0,0,0.4);
}

.personnageResume a {
	color : var(--couleurClairBois);
}

.personnageResume a:hover {
	color : var(--bleuFonce);
}

/** Combat **/

.combat {
	background-image: var(--ecaillesSombres);
}

.combat nav a, .combat h1 a {
	background-image: linear-gradient(-60deg, rgb(119 60 46) 10%, rgb(211 119 119) 30%, rgb(115 67 67) 50%, rgb(173 97 97) 70%, rgb(151 82 82) 90%, rgb(235 99 99) 98%);
	border-color: #ab0000;
}

.combat h1 a {
	padding: 10px 2em;
    display: block;
    width: fit-content;
    text-align: center;
    margin: 10px auto 20px;
    border-radius: 6px;
	border: 2px outset #eb8a8a;
}

.combat nav a:hover, .combat h1 a:hover {
	color: #ab0000;
}

.combat nav a:hover {
	border-color: #eb8a8a;
}

.combat h1 a:hover {
	text-shadow: -1px 1px 2px #c1a9a9;
    color: #510000;
	border-color: #ed4444;
}

.combat footer {
	color: var(--couleurBleuClair);
	text-align: center;
}

.combat select {
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.6);
	color: var(--couleurTitresPapier);
	outline: none;
}

.combat #moduleDes select {
	background: rgba(255,255,255,0.8);
}

.centreCombat {
	background-image: var(--papierMoyen);
	width: 90%;
	margin: auto;
	padding: 10px 20px 30px 20px;
	border: 2px solid #8b6926;
	border-radius: 2px;
	box-shadow: 0 0 10px 4px #000, inset 0 0 6px 3px #8f6f32;
	color: var(--couleurTitresPapier);
}


.carteCombat {
	position: relative;
	overflow-x: auto;
	max-width: 100%;
	margin: auto;
	text-align: center;
	box-shadow: 0 0 8px 4px #fff1d5;
	border: 2px solid #8b6926;
	border-radius: 2px;
	width: fit-content;
}

.carteWrapper {
	position: relative;
	width: fit-content;  /* Ajuste la largeur au contenu (image) */
	height: fit-content;  /* Ajuste la hauteur au contenu (image) */
	margin: auto;
	transform-origin: top center;
}

.carte {
	display: block;
	width: auto;
	height: auto;
	position: relative;
}

.carteHalos {
    position: absolute; 
    top: 0; 
    left: 0;
    pointer-events: none;
}

.centreCombat button {
	cursor: pointer;
}

.centreCombat .explication {
	color: #896235;
}

.fonctionsCombat {
	display: flex; 
	align-items: center; 
	flex-direction: row; 
	max-width: 100%; 
	margin: auto;
	position: relative;
}

.iconesFonctions {
	font-size: 1.5em; 
	padding: 0 30px; 
	color: #7f4700;
}

.iconesFonctions span {
	display: inline-block;
	margin-right: 20px;
	cursor: pointer;
}

.iconesFonctions span:hover, .iconesFonctions span.actif, .iconesFonctions .boutonCombatMj.actif, .iconesFonctions .boutonCombatMj:hover {
	color: var(--rougeDoux);
	text-shadow: -1px 1px 1px #fff;
}

.iconesFonctions .boutonCombatMj {
	color: #a9004d;
}

.carteCombat .modules a {
	color: var(--violetLienHover);
}
.carteCombat .modules a:hover {
	color: var(--framboise);
}

#moduleDes {
	text-align: center;
}

.centreCombat .modules > div {
	position: absolute;
	z-index: 20;
	background: rgb(255 240 210 / 94%);
    top: 10px;
    left: 10px;
    max-width: 100%;
    overflow: auto;
    box-shadow: 0 2px 10px 4px rgba(0, 0, 0, 0.6);
    border-radius: 4px;
    padding: 8px;
	max-height: calc(99% - 26px);
}

#moduleEffets {
	z-index: 21;
}

.centreCombat .modules h3 {
	margin-top: 0.75em;
	margin-bottom: 1.5em;
}

.centreCombat .aa {
	display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.centreCombat .aa .miniAa {
	height: 40px;
    width: 40px;
    display: inline-flex;
    margin: 0 10px;
    overflow: hidden;
    opacity: 0.8;
    cursor: pointer;
    align-items: baseline;
}
.centreCombat .aa .miniAa:hover {
	opacity: 1;
}

.centreCombat .aa > .afficherCacher > .onoff {
    position: absolute;
    z-index: 10;
    right: 10px;
    max-width: 40%;
    max-height: 400px;
    overflow: auto;
    background: rgb(255 240 210 / 95%);
    padding: 6px;
    border-radius: 0 0 6px 10px;
    box-shadow: 0 4px 6px #000;
}
	

.centreCombat .aa img {
	max-width: 40px;
}

.centreCombat .aa a {
	color: var(--violetLienHover);
}

.centreCombat .aa a:hover {
	color: var(--framboise);
}

.brouillard {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
}

.persoCarte {
	position: absolute;
	width: 30px;
	height: 30px;
	background-color: blue;
	border-radius: 50%;
	transform: translate(-15px, -15px);
}

.persoCarte.actif {
	background: red;
}

#couleursPointeurs {
	text-align: center;
	margin-bottom: 2em;
}
.infoCouleurCarte {
	display: inline-block;
	margin: 0 10px;
	font-weight: bold;
}
#couleursPointeurs .legendeHalo {
	margin-right: 6px;
	box-shadow: -1px 1px 2px rgba(0, 0, 0, 0.4);
}

@keyframes haloAnimation {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.halo {
	position: absolute;
	pointer-events: none;
	transform-origin: center center;
	transform: translate(-50%, -50%);
	animation: haloAnimation 2s linear forwards;
	animation-fill-mode: both;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: rgba(var(--hrose), 0.9);
	border: 2px solid rgb(var(--hrose));
}

.legendeHalo {
	border-radius: 50%;
	width: 10px;
	height: 10px;
	display: inline-block;
}

.legendeZone {
    display: inline-block;
    width: 10px;
    height: 10px;
    position: relative;
    margin-left: 5px;
    box-shadow: -1px 1px 3px rgba(0,0,0,0.4);
}

.nomInit .legendeZone {
    margin-left: 0;
    margin-right: 6px;
}

.halo.rose, .legendeHalo.rose, .legendeZone.rose {
	background-color: rgba(var(--hrose), 0.9);
	border: 2px solid rgb(var(--hrose));
}

.halo.bleu, .legendeHalo.bleu, .legendeZone.bleu {
	background-color: rgba(var(--hbleu), 0.9);
	border: 2px solid rgb(var(--hbleu));
}

.halo.jaune, .legendeHalo.jaune, .legendeZone.jaune {
	background-color: rgba(var(--hjaune), 0.9);
	border: 2px solid rgb(var(--hjaune));
}

.halo.violet, .legendeHalo.violet, .legendeZone.violet {
	background-color: rgba(var(--hviolet), 0.9);
	border: 2px solid rgb(255,255,255,0.6);
}

.halo.vert, .legendeHalo.vert, .legendeZone.vert {
	background-color: rgba(var(--hvert), 0.9);
	border: 2px solid rgb(var(--hvert));
}

.halo.blanc, .legendeHalo.blanc, .legendeZone.blanc {
	background-color: rgba(255, 255, 255, 0.9);
	border: 2px solid rgb(255, 255, 255);
}

.halo.noir, .legendeHalo.noir, .legendeZone.noir {
	background-color: rgba(27, 27, 27, 0.9);
	border: 2px solid rgb(255, 255, 255);
}

.halo.mj, .legendeHalo.mj {
	background-color: rgba(255, 0, 0, 0.9);
	border: 2px solid rgb(255 201 201);
}

.halo.visiteur {
	background-color: rgba(158, 158, 158, 0.9);
}

.dernierJetDes {
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(0, -50%);
    padding: 6px;
    display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: -2px 2px 10px 4px #000;
	cursor: pointer;
}

.dernierJetDes .imageDernierJet {
	width: 40px; 
	height: 40px; 
	overflow: hidden; 
	display: inline-block; 
	margin-right: 6px; 
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.dernierJetDes .imageDernierJet img {
	max-height: 40px;
}

.joueurCouleur {
	color : rgb(0 82 189);
}
.allieCouleur {
	color : rgb(0 129 63);
}
.ennemiCouleur {
	color : rgb(237 9 9);
}

.joueur {
	width: 30px;
    height: 30px;
    background: rgb(9 100 237 / 63%);
    border: 2px #fff solid;
    box-shadow: -1px 1px 2px rgb(0 0 0 / 50%);
}

.joueur.miniature span {
	display: none;
}

.joueur.miniature.desCampagne {
	background-size: 100%;
	background-color: #fff;
	position: relative; 
	margin-right: 4px; 
	vertical-align: sub;
}

.allie {
	width: 25px;
    height: 25px;
    background: rgb(0 129 63 / 63%);
    border: 2px #fff solid;
    box-shadow: -1px 1px 2px rgb(0 0 0 / 50%);
	transform: rotate(45deg);
	-ms-transform: rotate(45deg); /* Internet Explorer */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari et Chrome */
    -o-transform: rotate(45deg); /* Opera */
}

.carteInitiative .allie {
	left: 10px;
    top: 10px;
}

.carteInitiative .familier {
	position: absolute;
    left: 4px;
    bottom: 16px;
    width: 30px;
    height: 30px;
    overflow: hidden;
    border: 1px solid #fff;
    box-shadow: 1px 1px 2px #00000050;
	display: flex;
    justify-content: center;
    align-items: center;
}

.carteInitiative .familier img {
	max-height: 30px;
}

.nomCache {
	color: #797979;
	font-style: italic;
}

.allie span {
	display: inline-block;
	transform: rotate(-45deg);
	-ms-transform: rotate(-45deg); /* Internet Explorer */
    -moz-transform: rotate(-45deg); /* Firefox */
    -webkit-transform: rotate(-45deg); /* Safari et Chrome */
    -o-transform: rotate(-45deg); /* Opera */
	position: relative;
    top: -3px;
    left: -1px;
}

.ennemi {
	width: 30px;
    height: 30px;
	border-radius: 50%;
    background: rgb(237 9 9 / 63%);
    border: 2px #fff solid;
    box-shadow: 1px 0px 2px rgb(0 0 0 / 50%);
}

.joueur.mort, .ennemi.mort, .allie.mort {
	background: rgb(0 0 0 / 63%);
}

.joueur, .ennemi, .allie {
    position: absolute;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	line-height: 30px;
	color: #fff;
	display: inline-block;	
	z-index: 2;
}

.joueur.grandesCases, .ennemi.grandesCases, .allie.grandesCases {
	font-size: 20px;
	line-height: 20px;
}

.joueur.enAttente, .ennemi.enAttente, .allie.enAttente {
	z-index: 1;
	border-color: rgba(255,255,255,0.6);
	opacity: 0.8;
}

.ennemi.partInvisible, .allie.partInvisible {
	opacity: 0.6;
}

.ennemi.enAttente {
	background: rgb(237 137 9 / 30%);
}
.allie.enAttente {
	background: rgb(36 159 69 / 30%);
}

.grilleCombat .joueur {
    top: 5px;
    left: 5px;
}

.grilleCombat .ennemi {
    top: 5px;
    left: 55px;
}

.pointTemp, .elem {
	width: 16px;
	height: 16px;
	border-radius : 50%;
	position: absolute;
	background: silver;
	border: 1px solid #fff;
	box-shadow: 0 0 2px rgb(84 77 71);
}

.objet {
	background: rgb(163 171 183);
}

.vegetal {
	background: rgb(0,128,0);
}

.animal {
	background: rgb(199 151 104);
}

.pnj {
	background: rgb(23,186,181);
}

.elem span {
	position: relative;
	z-index: 2;
    top: -25px;
    background: #fff;
    border: 1px solid #000;
    padding: 2px;
}

.spanElem2 {
	display: inline-block;
	border: 0 !important;
	padding: 0 !important;
}

.infosContextuellesCombat {
	text-align: center; 
	margin-bottom: 6px; 
	position: absolute; 
	z-index: 10; 
	background: rgba(0,0,0,0.8); 
	color: #c1b18f; 
	padding: 2px; 
	pointer-events: none; 
	font-style: italic;
}

/* Effets de zone sur une case */
.effetZone {
	position: absolute;
	width: 44px;
    height: 44px;
    border: 1px solid #fff;
	margin: -0.5px 0 0 -0.5px;
}

.effetZone .negatif {	
	position: absolute;
	width: 38px;
	height: 38px;
	margin: 1px 0 0 1px;
	border: 2px solid rgb(229 0 0 / 45%);
	box-shadow: 0 0 4px #000, inset 0 0 1px #fff;
	background: rgb(255 0 0 / 10%);
}

.effetZone .positif {
	position: absolute;
	border: 2px solid rgb(21 196 0 / 45%);
    box-shadow: 0 0 4px #fff, inset 0 0 1px #000;
	width: 29px;
    height: 29px;
    margin-left: 5px;
    margin-top: 5px;
	background: rgb(0 128 0 / 10%);
	border-radius: 50%;
}

.effetZone .forme {
	position: absolute;
	display: block;
	border: 1px solid;
	min-width: 4px;
	min-height: 4px;
}

.effetZone .positif .forme {
	border-color: rgb(21 196 0 / 45%);
	background: rgb(0 128 0 / 8%);
}

.effetZone .negatif .forme {
	border-color: rgb(229 0 0 / 45%);
	background: rgb(255 0 0 / 8%);
}

.effetZone .forme.rond {
	border-radius: 50%;
}



.tours {
	margin: 0 auto 2em;
	max-width: 100%;
	height: 290px;
	/*overflow-x: hidden;*/
	overflow-y: auto;
	box-shadow: inset 0 0 20px 2px #65410e80;
    border: 1px solid #855715;
	padding: 0 5px;
}

.tours.vivants {
	margin-bottom: 0.5em; /* la marge est incluse dans #couleursPointeurs
}

.scrollCombattants, #scrollCarte {
	/*overflow-x: hidden;
	overflow-y: auto;*/
	white-space: nowrap;
	/*margin-bottom: 6px;*/
}    

.scrollCombattants {
	display: flex;
}

.carteInitiative {
	position: relative;
	display: inline-block;
	height: 254px;
	width: 150px;
	background: #fff4df;
	margin: 10px 4px 0 0;
	border: solid #89827d;
	border-width: 2px 1px;
	display: flex;
    flex-direction: column;
}

.carteInitiative a {
	color: #550997;
}

.carteInitiative a:hover {
	color: #6d3cff;
}


.carteInitiative.actif, .tout.actif {
	border-color: #ed0000;
	border-bottom-color: #89827d;
    border-top-width: 5px;
	box-shadow: 0 -2px 4px #000;
}

.carteInitiative.fuite {
	opacity: 0.3;
}

.carteInitiative .joueur, .carteInitiative .ennemi {
    top: 2px;	
    left: 4px;	
}

.carteInitiative .ca {
	position: absolute;
    right: 5px;
    bottom: 5px;
    background: #8be0efb0;
	border-radius: 50%;
    width: 25px;
    height: 25px;
	border: 1px solid #fff;
	cursor: default;
}

.carteInitiative .ca span {
    color: #000000;
    left: 2px;
    font-size: 18px;
    font-weight: bold;
	position: relative;
    top: 2px;
    left: 0px;
}

.effetCarteInitiative {
	position: absolute;
    bottom: 14px;
    width: 100%;
    text-align: center;
    font-weight: bold;
	cursor: default;
}

.effetCarteInitiative span {
	width: 18px;
    height: 18px;
    display: inline-block;
    background-size: 100%;
    background-repeat: no-repeat;
}

.effetCarteInitiative .negatif {	
    background-image: var(--billeRouge);
	color: transparent;
	text-shadow: 0 0 1px #e7b446;
}

.effetCarteInitiative .positif {	
    background-image: var(--billeVerte);
	color: transparent;
	text-shadow: 0 0 1px #50e746;
}

.imageInit {
	position: relative;
	width: 146px;
	height: 170px;
	overflow: hidden;
	text-align: center;
	display: flex;
}

.infosCachees {
	position: absolute;
	text-align: center;
	overflow: hidden;
	height: 0;
	width: 150px;
	transition: all linear 0.2s;
}

.afficherInfos .infosCachees {
	height: 170px;
	background: rgba(0,0,0,0.8);
	color: #fff;
	font-size: 0.9em;
}

.infosCachees div {
	margin: 0;
	text-align: center;
}

.infosCachees div:first-child {
	margin: 10px 0 0 60px;
	text-align: left;
}

.imageInit img {
	max-width: 100%;
	margin: auto;
}

.imageCache img {
	filter: blur(2px);
}
.imageCache:hover img {
	filter: blur(0);
}

.mort .imageInit img {
	filter: grayscale(100%);
}

.nomInit {
	text-align: center;
    border: solid #89827d;
    border-width: 1px 0;
    padding: 2px;
    white-space: normal;
    border-bottom: 0;
}

.barreVie {
	width: 100%;
	position: absolute;
	bottom: 0;
	border-top: 1px solid #000;
	box-shadow: inset 0 2px 2px rgb(255 255 255 / 67%), inset 0 -2px 3px rgb(0 0 0 / 44%), 0 -1px 1px rgb(0 0 0 / 25%);
}
.barreVie.compteur {
	position: relative;
    width: 200px;
    display: inline-block;
	border-radius: 20px;
}

.barreVie, .barreVie div {
	height: 10px;
}
.barreVie.compteur div {
	border-radius: 30px;
}

.centreCombat .bv.vert {
	background: green;
	box-shadow: inset 1px 2px 2px rgb(174 255 201 / 67%), inset 1px -2px 3px rgb(4 38 0 / 44%);
}

.bv.jaune {
	background: #fbdc00;
	box-shadow: inset 1px 2px 2px rgb(255 217 174 / 67%), inset 1px -2px 3px rgb(38 23 0 / 44%);
}

.bv.orange {
	background: orange;
	box-shadow: inset 1px 2px 2px rgb(255 217 174 / 67%), inset 1px -2px 3px rgb(38 23 0 / 44%);
}

.bv.rouge {
	background: red;
	box-shadow: inset 1px 2px 2px rgb(255 174 174 / 67%), inset 1px -2px 3px rgb(38 0 0 / 44%);
}

.bv.gris {
	/*background: #d5d5d5;
	box-shadow: inset 0 2px 2px rgb(255 255 255 / 67%), inset 0 -2px 3px rgb(0 0 0 / 44%), 0 -1px 1px rgb(0 0 0 / 25%);*/
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><path d='M0 0 L20 20 M20 0 L0 20' stroke='%23999' stroke-width='1'/></svg>");
	background-repeat: repeat; 
	background-color: #c1c1c1;
    box-shadow: inset 0 2px 2px #ffffff, inset 0 -2px 5px #2f2f2f, inset 0 0 5px #457a8b;
}

.bTampon {
	position: absolute;
    background: #005aff;
    top: 0;
    right: 0;
    width: 0px;
    box-shadow: inset -1px 2px 2px rgb(156 220 255 / 67%), inset -1px -2px 3px rgb(0 13 38 / 44%);
}

.glowPion {
	box-shadow: 0 0 15px #fff, -1px 1px 6px #000;
}
.glowPion:after {
	display: block;
    position: absolute;
    top: -10px;
    right: -22px;
    content: "*";
    color: white;
    font-size: 2.2em;
	text-shadow: -1px 1px 2px #000;
}

.effetPositif {
	color: #0d930d;
}
.effetNegatif {
	color: red;
}

/*.carreChemin {
	position: absolute;
    width: 20px;
    height: 20px;
    background: rgba(204, 239, 255, 0.4);
    box-shadow: -1px 1px 2px #000, inset -1px 1px 1px #fff;
}*/

.moduleDes {
	display: inline-block;
	margin: auto;
	text-align: center;
}

.moduleDes .choixLanceur {
	display: inline-block; margin-right: 1em;
	cursor: pointer;
}

.moduleDes .choixLanceur img {
	max-height: 60px; border: 1px solid #fff;
	margin-right: 6px;
}
.moduleDes .choixLanceur.actif img {
	border-color: var(--rougeDoux);
}

.moduleDes .choixLanceur span {
	font-weight: bold;
}

.moduleDes .choixLanceur.actif span {
	text-decoration: underline;
	color: var(--rougeDoux);
}

.des {
	width: 50px;
	height: 50px;
	background: #e7e7e7;
	background-image: var(--boisVerticalClair);
	box-shadow:
    inset 0 3px white, 
    inset 0 -3px #ab8d75, 
	inset 3px 0 #b9aea5, 
	inset -3px 0 #cdb4a1, 
	1px 1px 2px #000,
	-1px 1px 2px rgba(0,0,0,0.5);
	border-radius: 10%;
	display: flex;
}
.des span {
	margin: auto;
	font-weight: bold;
	color: #724117;
	text-shadow: -1px 1px 1px #fff, 1px -1px 1px #3a230f;
	font-size: 1.3em;
	letter-spacing: 1px;
}

.logDes {
	text-align: left;
	max-height: 100px;
	overflow: auto;
}
.logDes p {
	margin: 0 auto 0.5em;
}

#infosSecretes.infosSAbs {
	position: fixed;
	top: 0;
	left: 0;
	width: 20%;
	z-index: 3;
}

#infosSecretes.infosSAbs > div {
	background: rgba(255,255,255,0.7);
}

.cadreFocusInfosSecretes {
	border-color: red !important;
	box-shadow: -1px 1px 8px #000;
	transition: all 0.5s;
}

#effetsPermanents, #effetsLances {
	background: rgba(255,255,255,0.6); 
	box-shadow: -1px 1px 3px rgba(0,0,0,0.6); 
	margin: 1em auto; 
	padding: 1em; 
	max-width: calc( 100% - 2em );
	max-height: 300px;
    overflow: auto;
}

#cLogsDes {
	max-height: 200px; 
	overflow: auto; 
	margin: auto; 
	max-width: 100%;
}

.voirDetailsPerso {
	position: absolute;
    right: 4px;
    top: 4px;
    font-size: 1.2em;
    text-shadow: -1px 1px 1px #0f3451, -1px -1px 1px #90ebffd9;
    color: #4bdedf69;
    background: #d0d3d28a;
    border: 1px solid #ffffff66;
    border-radius: 8px;
    padding: 2px;
    box-shadow: inset -1px 1px 3px #5d3b6987;
}
.voirDetailsPerso:hover {
	color: #4bdedf;
}

.voirDetailsPerso.actif {
	color: #fff;
}

.resumePersoCombat {
	position: fixed;
	top: 50%;
    left: 50%;
	z-index: 10;
	transform: translate(-50%, -50%);
	background: var(--papierClair);
	padding: 1em 2em;
	max-width: 90vh;
	max-height: 90vh;
	overflow: auto;
	box-shadow: 0 2px 8px 4px;
}

.resumePersoCombat h3 {
	margin: 0 auto 1em;
	color: green;
}

.resumePersoCombat a {
	color: var(--bleuFonce);
}
.resumePersoCombat a:hover {
	color: var(--framboise);
}

.objetAPlacer {
	width: 30px;
	height: 30px;
	display: inline-block;
	background-size: 30px auto; 
	background-repeat: no-repeat;
	background-position: center center;
	margin-right: 10px;
	border: 1px solid var(--framboise);
	cursor: pointer;
}

.objetAPlacer.eclairage {
	border-color: #68ceff;
	box-shadow: 0 0 1px #68ceff;
}

/*** Ambiances ***/
.motClef {
	display: inline-block;
    margin: 1px 2px;
    border: dotted 1px;
    padding: 0 4px;
    background: rgb(255 255 255 / 40%);
}

/*** Menus dynamiques ***/
.menu, .menuModule {
	display: flex;
	flex-wrap: wrap;
}
.menu span, .menuModule span {
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
	margin: auto;
	color: green;
	font-size: 1.1em;
	padding: 0 5px;
	text-align: center;
}
@media (max-width: 768px) {
	.menuModule {
		display: block;
	}
	.menuModule span {
		display: block;
	}
}
.bibliotheque .menu span {
	color: var(--bleuFonce);
}

.menu .actif, .menuModule .actif {
	color: red;
}

.centreCombat .menu .actif, .centreCombat .menuModule .actif {
	color: var(--rougeDoux);
}

.bibliotheque .menu .actif {
	color: var(--violetLienHover);
}

/*** Campagne ***/

.pageCampagne {
	background: var(--fleursDoreesTransparent), var(--boisVerticalBrunMoyen);
	background-size: 950px auto, auto;
}

.pageCampagne nav a, .pageCampagne footer, .pageCampagne header, .pageBureau nav a, .bibliotheque nav a, #page.pageEnigme nav a, .pageEnigme footer, .pageEnigme header h1 {
	background: var(--boisBureau);
	box-shadow: inset 2px 4px 2px #e1b5737d, inset -2px -4px 4px 2px #370000, 0 3px 3px #000;
	border: 2px outset #874d16;
}
.pageCampagne header h1 {
    margin: 20px auto;
}
.pageCampagne header h1 a, .pageEnigme header h1 a {
	color: #ffc170;
}
.pageCampagne header h1 a:hover, .bibliotheque nav a:hover, .pageEnigme header h1 a:hover {
	color: #fffae6;
}

.pageCampagne nav {
	margin-bottom: 1.5em;
}

.pageCampagne nav a:hover {
	color: #ffc170;
	box-shadow: inset 2px 4px 2px #2315007d, inset -2px -4px 4px 2px #7d4125, 0 3px 3px #a5451f;
    text-shadow: none;
    background: inherit;
    animation: none;
}

@media (hover: hover) and (pointer: fine) {
    .pageBureau nav a:hover, .bibliotheque nav a:hover, #page.pageEnigme nav a:hover {
        color: #dfca99;
        box-shadow: inset 2px 4px 2px #2315007d, inset -2px -4px 4px 2px #160700, 0 3px 3px #593e33;
        text-shadow: none;
        background: rgba(0, 0, 0, 0.5);
        animation: none;
        text-shadow: -1px 1px 8px #ff0076;
    }
}

.pageBureau h1, .pageCampagne h1, .bibliotheque h1 {
    margin-bottom: 1em;
}


@media (max-width: 768px) {
    .pageBureau h1, .pageCampagne h1, .bibliotheque h1 {
        margin-bottom: 0.5em;
    }
    .pageBureau nav, .pageCampagne nav, .bibliotheque nav {
        background: var(--boisBureau);
        box-shadow: inset 2px 4px 2px #e1b5737d, inset -2px -4px 4px 2px #370000, 0 3px 3px #000;
        border: outset #874d16;
        border-width: 2px 0;
    }

    .pageBureau nav a, .pageCampagne nav a, .bibliotheque nav a  {
        background: none;
        box-shadow: none;
        border: none;
    }
}


#page.pageEnigme nav a:hover {
	background: rgb(123 83 41 / 68%);
	box-shadow: inset 2px 4px 2px #2315007d, inset -2px -4px 4px 2px #45291c, 0 3px 3px #593e33;
}

.pageCampagne footer {
	margin-top: 2em;
	color: #ffc170;
}

.pageCampagne h2 {
	font-size: 2.5em;
    color: #ffd188;
    text-shadow: -3px 3px 4px #000, 1px -2px 1px #ffefd2;
    letter-spacing: 2px;
	margin-bottom: 2em;
}

.pageCampagne .fenetre {
	background: var(--vitrailTranslucide), var(--paysageFenetre);
	background-size: 250px auto, auto;
	box-shadow: inset 0 0 10px 5px #000, 0 -1px 8px 2px rgb(59 43 34);
	border-image-source: var(--boisVerticalMoyenSombre);
	top: 80px;
    height: 600px;
    max-height: 80%;
}

.pageCampagne .fenetre.un {
    left: -10%;
    background-position: left bottom;
}

.pageCampagne .fenetre::before {
	background: var(--boisVerticalMoyenSombre);
}

.centreCampagne {
    max-width: 80%;
    margin: auto;
    text-align: center;
	display: flex;
    height: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
}

.centreCampagne > div {
	max-width: calc(100% - 40px);
	z-index: 2;
	margin: auto;
}

#imagesGalerie .galerieCampagne {
	margin: 10px;
}

#imagesGalerie div:not(.images) .galerieCampagne {
	cursor: pointer;
}

.galerieCampagne, .pageCampagne #moduleDes {
	display: inline-flex;
    border: 10px solid brown;
    border-image-source: var(--boisBureau);
    border-image-slice: 30%;
    border-image-repeat: stretch;
    text-align: center;
    box-shadow: 0 2px 4px #000, inset 1px 2px 3px;
    background: var(--papierMoyen);
	padding: 4px;
}

.galerieCampagne.actif {
	border-image-source: var(--boisHorizontalBleuFonce);
}

.galerieCampagne img {
	max-height: 200px;
	max-width: 200px;
}

.complementGalerie h3 {
	margin-top: 1em;
	margin-bottom: 1.5em;
}

.complementGalerie {
	text-align: left;
	padding: 10px;
	background: var(--papier);
	box-shadow: 0 2px 4px #000;
	width: fit-content;
	max-width: min(1200px, 100%);
    margin: auto auto 1em;
}

.complementGalerie .imagesItemGalerie {
	text-align: center;
	display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
}

.complementGalerie .imagesItemGalerie div {
	cursor: pointer;
	display: inline-block;
	margin: 10px;
	max-width: min(250px, 100%);
}
.complementGalerie .imagesItemGalerie img {
	max-width: min(250px, 100%);
    max-height: 350px;
	box-shadow: 0 0 4px rgb(107 97 75 / 50%);
    background: rgb(231 223 206 / 20%)
}

.galerieCampagne.combatsAmbiances, .pageCampagne #moduleDes {
	width: 600px;
	margin: 3em auto;
	display: block;
}

.pageCampagne #moduleDes {
	width: auto;
	max-width: 80%;
}

.pageCampagne #moduleDes hr, .pageCampagne hr {
    border-width: 0 0 1px;
	border-bottom: 1px dotted #917048;
    background: none;
}

.galerieCampagne.resultatsDes {
	margin : 1em auto 2em;
	display: block;
	text-align: left;
	max-height: 400px;
	max-width: 1200px;
	padding: 10px 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.galerieCampagne.resultatsDes.contextes {
	max-height: 800px;
	overflow: auto;
}

.galerieCampagne.resultatsDes > div {
	padding: 0 20px;
	overflow: auto;
    max-height: 100%;
    height: 100%;
}
.galerieCampagne.resultatsDes > p {
	padding: 0 20px;
}

.galerieCampagne.resultatsDes.contextes > div {
	border-bottom: 1px dotted #917048;
	padding: 0 20px 20px 20px;
	margin-top: 1em;
	max-height: 350px;
}

.galerieCampagne.resultatsDes.contextes > div:last-child {
	border-bottom: none;
}

.galerieCampagne.resultatsDes.contextes h4 {
	text-align: center;
	font-weight: bold;
}

.blocContexte {
	border-bottom: 1px dotted #917048;
}

.blocContexte:last-child {
	border-bottom: none;
}

.galerieCampagne .groupeOptions {
	color : rgb(137, 80, 64);
}

.galerieCampagne .groupeOptions h5 {
	color: rgb(129 37 12);
	margin-bottom: 1em;
}

/***** Visualisation de la campagne via un schéma *********/

/* On rajoute la class pour passer en prio par rapport au style par défaut */
.schema .vue-flow {
    height: 600px;
	resize: vertical;
	max-height: 90vh;
    max-width: 90%;
    margin: 1em auto;
    border: 1px dotted #c3ab81;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px #fff;
	font-size: 12px;
}

.visualisationNoeud .imgNoeud {
	max-height: 40px;
	overflow: hidden;
}

.visualisationNoeud img {
	max-width: 40px;
}

.visualisationPnj, .visualisationLieu, .visualisationQuete, .visualisationContexte {
	padding: 3px 6px;
	border: 1px solid;
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.visualisationPnj {
	background: rgb(238, 231, 191);
	border-color: var(--visualisation_pnj);
}

.visualisationLieu {
	background: rgb(237 255 232);
	border-color: var(--visualisation_lieu);
	border-radius: 4px;
}

.visualisationQuete {
	background: rgb(251 251 255);
	border-color: var(--visualisation_quete);
	border-radius: 4px 0;
}

.visualisationContexte {
	background: rgb(244 251 255);
	border-color: var(--visualisation_contexte);
}

.visualisationCheminAnime path {
	stroke-width: 3;
}

.visualisationLienImportant .vue-flow__edge-text,
.visualisationLienMoyen .vue-flow__edge-text,
.visualisationLienFaible .vue-flow__edge-text {
  stroke: none;          /* empêche le stroke global d'affecter le texte */
}

.vue-flow__edges {
    z-index:9999!important
}


/**** Tableau organisationnel ****/
.tableauOrga {
	max-width: 90%;
	padding: 1em;
	background: var(--liege);
	border: 3px rgb(151, 126, 56) ridge;
	margin: auto;
	overflow: auto;
}

.tableauOrga button, .formParchemin .tableauOrga button.submitLike, .formParchemin .tableauOrga button[type="submit"] {
	background: #ffffffab;
    color: #002923;
    border: 1px solid #fff;
	box-shadow: -1px 1px 1px #00000026;
	font-size: 0.8em;
	opacity: 0.7;
}
.tableauOrga button:hover, .formParchemin .tableauOrga button.submitLike:hover, .formParchemin .tableauOrga button[type="submit"]:hover {
	opacity: 1;
}
.formParchemin .tableauOrga h2 button.submitLike {
	font-size: 0.6em;
}

.tableauOrga > .explication {
	font-weight: bold;
    font-size: 1.2em;
    text-shadow: -1px 1px 1px #fff;
    color: #794b00;
}

.tableauOrga .tableaux {
	display: flex;
	margin: 1em auto;
	justify-content: center;
}

.tableauOrga:not(.adaptatif) .tableaux {
	width: max-content;
}
.adaptatif.tableauOrga .tableaux {
	flex-wrap: wrap;
}

.tableauOrga .tableaux h2 p {
	margin-top: 0;
}

.tableauOrga .tableaux form {
	text-align: center;
	background: rgba(2552,255,255,0.6);
	border: 1px dotted #fff;
}

.listeOrga {
	padding: 6px 1em;
	margin: 1em;
	border-width: 3px 1px 2px;
	border-style: ridge dashed solid;
	box-shadow: 0 0 2px #fff, 0 2px 1px rgba(0,0,0,0.6);
	min-width: 250px;
	position: relative;
	border-radius: 0 0 8px 8px;
	background: #d9d9d9;
	border-color: silver;
	background: linear-gradient(180deg, rgb(196 225 206 / 63%) 0%, rgb(208 225 220 / 53%) 60%, rgba(66, 66, 66, 0.3) 100%);
}
.listeOrga.important {
	background: #8200006e;
	background: linear-gradient(180deg,rgba(130, 0, 0, 0.45) 0%, rgba(179, 83, 23, 0.53) 50%, rgba(235, 89, 40, 0.3) 100%);
	border-color: #ff3434;
	box-shadow: 0 0 2px #fff, 0 2px 1px rgba(87, 0, 0, 0.6), inset 0 0 6px #ffc5c5;
}
.listeOrga.important h2 {
	color: #fff;
	text-shadow: -1px 1px 1px #00000073;
}

.listeOrga.moyen {
	background: #98d5eddb;
	border-color: #61ffea;
	background: linear-gradient(180deg,rgba(30, 177, 214, 0.63) 0%, rgba(23, 179, 148, 0.53) 50%, rgba(48, 191, 72, 0.3) 100%);
}
.listeOrga.moyen h2 {
	color: #fdfeff;
	text-shadow: -1px 1px 1px #003d47f0;
}

.listeOrga.bas {
	background: linear-gradient(180deg, rgb(161 161 161 / 53%) 0%, rgb(77 77 77 / 43%) 50%, rgb(0 0 0 / 30%) 100%);
}

.listeOrga.bas.termine {
	background: linear-gradient(180deg, rgb(251 251 251 / 63%) 0%, rgb(77 77 77 / 53%) 50%, rgb(0 0 0 / 30%) 100%);
}

.listeOrga.termine {
	height: fit-content;
}

.listeOrga.bas.termine h2 {
	color: #007100;
    text-shadow: -1px 1px 1px #fafffd, 1px -1px 1px #ddffa7;
    letter-spacing: 2px;
}

.emplacementTaches {
	min-height: 50px;
}

.listeOrga.vide .emplacementTaches {
	border: 1px dashed #fff;
	margin-bottom: 1em;
}
.listeOrga.vide.deplacementActif .emplacementTaches {
	min-height: 150px;
}

.carteTableauOrga {
	border: 1px solid #fff;
	padding: 4px;
	width: 250px;
	overflow: auto;
	margin: 1em 0;
	border-radius: 6px;
	background: rgba(255,255,255,0.7);
	position: relative;
	cursor: default;
}
.modifiable .carteTableauOrga {
	cursor: pointer;
}

.carteTableauOrga:hover {
	box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.carteTableauOrga .cible {
	position: absolute;
	left: 4px;
	top: 4px;
	font-size: 0.8em;
	opacity: 0.7;
}

.carteTableauOrga h3 {
	font-size: 1.1em;
}

.carteTableauOrga .explication {
	margin-bottom: 1.5em;
}

.carteTableauOrga button.submitLike {
	position: absolute;
	right: 2px;
	top: 2px;
}
.listeOrga h2 button {
	position: absolute;
	right: 4px;
	top: 4px;
}

.boutonsTache {
	margin-top: 1em;
	padding-top: 6px;
	border-top: 1px dotted silver;
}

.tableauOrgaSupprCateg {
	margin-top: 2em;
}
.tableauOrgaSupprCateg i {
	font-size: 1.2em;
}

.carteTableauOrga h3 span {	
	display: inline-block;
	margin-right: 8px;
    font-size: 0.9em;
	font-style: normal;
    font-weight: normal;
}
.carteTableauOrga h3 span .bi-star-fill, .listeOrga .bi-check {
	color: rgb(11 255 11);
}
.carteTableauOrga h3 span .bi-arrow-up {
	color: rgb(35, 146, 197);
}
.carteTableauOrga h3 span .bi-gear {
	color: rgb(128, 94, 0);
}
.carteTableauOrga h3 span .bi-bug {
	color: rgb(221, 117, 31);
}
.carteTableauOrga h3 span .bi-clipboard-data {
	color: rgb(102 0 191);
}

.carteTableauOrga h3 span .bi-star-fill {
	text-shadow: -1px 1px 1px rgba(0,0,0,0.6), 1px -1px 1px rgb(193, 255, 193);
}

/* Dans inventaire perso */
#equipementDetail .galerieCampagne {
	text-align: center;
	background: rgba(255,255,255,0.6);
	padding: 0;
	border-width: 2px;
	margin-right: 10px;
	box-shadow: -1px 1px 4px #59524a;
}

.portraitsPersos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.portraitsPersos a {
	display: block;
	margin : 0 6px;
	border: 2px solid #81402b;
	box-shadow: -1px -1px 4px rgb(51 16 5);
	background: var(--boisVerticalMoyenSombre);
	height: 110px;
	width: 80px;
	overflow: hidden;
}

.portraitsPersos img {
	max-width: 88px;
}

.groupeOptions .options input[type="radio"] {
	display: none;
}

.groupeOptions .options span {
	margin: 0 15px;
}

.groupeOptions .options span:not(.actif) label {
	cursor: pointer;
}

.groupeOptions .options .actif {
	font-weight: bold;
	color : rgb(129 37 12);
	border-bottom: 1px solid #fff;
}

.groupeOptions .boutons {
	margin-top: 2em;
}


#tableauBlancModule {
	display: block;
	width: 850px;
}

#tableauBlanc {
	border: 1px solid #895040;
	background: rgba(255,255,255,0.2);
	margin: 10px;
	overflow: auto;
}

#tableauBlancModule .groupeOptions span {
	display: inline-block;
	margin-right: 10px;
}

#tableauBlancModule .groupeOptions span:last-child {
	margin-right: 0px;
}
	

.cheminee {	
	background: var(--mur);
    width: fit-content;
    padding: 40px 80px;
	margin: 0 auto -2em;
	box-shadow: inset 0 2px 6px 8px #adadadad, inset 0 -2px 18px 4px #000;
	position: relative;
	text-align: center;
    z-index: 10;
}

.cheminee .de {
	background: var(--de);
    background-size: 30px 30px;
    height: 30px;
    width: 30px;
    position: absolute;
    top: -28px;
    left: 10px;
	display: none;
}

/*.runeDe {
	background: var(--runeDeOn);
    background-size: 50px 50px;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 90px;
    left: 20px;
	cursor: pointer;
	border: 1px solid #6fc39787;
    border-radius: 50%;
    box-shadow: 0 0 6px #c17457, inset 0 0 3px #21ffc2;
}

.runeDe:hover, .runeDe.actif {
	background-image: var(--runeDeOff);
	border: 1px solid #ff8888;
    border-radius: 50%;
    box-shadow: 0 0 6px #c17457, inset 0 0 3px #ff2121;
}*/

/* Paramètres icone */

.runeDe, .runeAvancements, .runeContextes, .runeRegles {
    height: 50px;
    width: 50px;
    position: absolute;
    top: 90px;
    left: 20px;
	cursor: pointer;
    box-shadow: 0 0 6px #c17457;
    --opa1Rune: 0.7;
    --opa2Rune: 0.5;
    --opa3Rune: 0.3;
}

.runeDe {
	--couleur1Rune: #ffa000;
    --couleur2Rune: #17ff0f14;
    --couleur3Rune: #574f03;
}	

.runeAvancements {
	left: auto;
    right: 20px;
	top: 300px;
	--couleur1RuneAv: #ffa000;
    --couleur2RuneAv: #17ff0f14;
    --couleur3RuneAv: #574f03;
}	

.runeContextes {
	left: auto;
    right: 20px;
	--couleur1RuneCx: #ffa000;
    --couleur2RuneCx: #17ff0f14;
    --couleur3RuneCx: #574f03;
}	

.runeRegles {
    top: 300px;
	--couleur1RuneR: #ffa000;
    --couleur2RuneR: #17ff0f14;
    --couleur3RuneR: #574f03;
}

.runeContextes svg {
    margin-top: 4px;
}

.cls-1, .cls-2 {
	stroke-linecap: round;
}

.cls-1, .cls-3, .cls-4 {
	stroke-width: 8px;
	fill: none;
}

.cls-1, .cls-3 {
	stroke-width: 4px;
}

.cls-2 {
	fill: none;
	stroke-width: 8px;
}

.runeAvancements .cls-2 {
	stroke-width: 4px;
}

.cls-4 {
	stroke-width: 6px;
}

.cls-5 {
	fill: #ff6262;
    stroke-width: 12px;
}
.runeContextes .cls-5 {
    stroke-width: 4px;
}
.runeContextes .cls-2 {
	stroke-width: 2px;
}

[class^="cls-"] {
	transition: all linear 0.3s;
	stroke: #00ff9e;	
	stroke-miterlimit: 10;
	filter: drop-shadow(5px 5px 5px #cf0000);
}

.runeDe [class^="cls-"] {
    fill: url(#rune-gradient);
}

.runeAvancements [class^="cls-"] {
    fill: url(#runeav-gradient);
}

.runeContextes [class^="cls-"] {
    fill: url(#runecx-gradient);
}

.runeDe .cls-6 {
	display: none;	
}

/*.runeRegles #Calque_5 {
	display: none;
}*/

.runeDe:hover, .runeDe.actif {
	background: none;
	--couleur1Rune: #ff0000;
    --couleur2Rune: #712035;
    --couleur3Rune: #8f8100a3;
}
.runeRegles:hover, .runeRegles.actif {
	background: none;
	--couleur1Rune: #ff0000;
    --couleur2Rune: #712035;
    --couleur3Rune: #8f8100a3;
}
.runeAvancements:hover, .runeAvancements.actif {
	--couleur1RuneAv: #ff0000;
    --couleur2RuneAv: #712035;
    --couleur3RuneAv: #8f8100a3;
}
.runeContextes:hover, .runeContextes.actif {
	--couleur1RuneCx: #ff0000;
    --couleur2RuneCx: #712035;
    --couleur3RuneCx: #8f8100a3;
}


.runeDe:hover [class^="cls-"], .runeDe.actif [class^="cls-"], .runeAvancements:hover [class^="cls-"], .runeAvancements.actif [class^="cls-"], .runeContextes:hover [class^="cls-"], .runeContextes.actif [class^="cls-"], .runeRegles:hover [class^="cls-"], .runeRegles.actif [class^="cls-"] {
    stroke: #ffdd83;
}

.cheminee .dateActuelle {
	margin: -20px 0 20px;
    color: #f7e2cf;
    font-weight: bold;
    letter-spacing: 2px;
	font-family: "Charm", cursive;
    font-size: 1.4em;
	text-shadow: 2px -2px 0px #212121;
}
.cheminee .dateActuelle:hover {
	color: #fff;
}

.chemineeInterieur {
	position: relative;
	z-index: 5;
	height: 300px;
    width: 500px;
	background: rgb(0 0 0 / 78%);
    box-shadow: inset 2px 2px 10px 20px #000;
	overflow: hidden;
}

.chemineeInterieur:after {
	width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    background: linear-gradient(0deg, rgb(45 11 0 / 61%) 0%, rgba(42, 42, 73, 0) 35%, rgb(159 71 0 / 16%) 100%);
    box-shadow: inset 0 -8px 6px #120000;
}

.feuCamp {
	position: absolute;
    bottom: -40px;
    left: 100px;
}
.buche {
	background: var(--boisBureau);
	width: 300px;
	height: 50px;
	border-radius: 10px;
	box-shadow: inset 0 0 10px #cf9b8b, inset 2px 4px 2px #e1b573, inset -2px -4px 4px 6px #370000, 0 3px 10px #000;
	position: absolute;
    bottom: 40px;
	z-index: 0;
}

.buche.ro1 {
	transform: rotate(8deg);
	position: absolute;
	z-index: 2;
}

.buche.ro2 {
	transform: rotate(-10deg);
	position: absolute;
	z-index: 3;
}

.flammes {
	position: absolute;
	bottom: 200px;
	z-index: 3;
	transform: translateX(-50%) rotate(2deg);
	/*animation: pulse 3s infinite ease-in-out;*/
}

.flammes.fl2 {
	bottom: 210px;
	left: 260px;
	z-index : -1;
	animation: pulseMiroir 3s infinite ease-in-out;
}

.flamme {
    width: 60px;
    height: 150px;
    background: radial-gradient(ellipse at center,
        rgb(50, 150, 255, 0.5) 0%, /* Bleu brillant au centre */
        rgb(50, 200, 100, 0.6) 20%, /* Vert lumineux vers le bas */
        rgb(255, 200, 50, 0.7) 40%, /* Transition vers orange doux */
        rgb(216, 86, 0, 0.9) 70%, /* Orange intense au centre */
        rgba(255, 0, 0, 0.8) 90%); /* Rouge diffus vers l'extérieur */
    clip-path: polygon(
        50% 0%, 65% 10%, 75% 20%, 85% 40%, 90% 65%, 90% 85%, 85% 100%, 
        50% 100%, 15% 100%, 10% 85%, 10% 65%, 20% 40%, 30% 20%, 35% 10%
    );
    opacity: 0.9;
    filter: blur(2px);
    will-change: clip-path, filter;
    transform-origin: bottom center;
    animation: flicker 1.8s infinite ease-in-out, morph 3s infinite ease-in-out;
    position: absolute;
}


.flamme:nth-child(1) {
	top: 50px;
}

.flamme:nth-child(2) {
	top: 20px;
	left: 40px;
}

.flamme:nth-child(3) {
	left: 100px;
}

.flammes:not(.fl2) .flamme:nth-child(3) {
	transform-origin: bottom center; /* Point de pivot ajusté */
	animation: rotateFlame 5s infinite ease-in-out;	
}

.flammes.fl2 .flamme:nth-child(3) {
	top: 30px;
	left: 120px;
}

/* Animation pour un effet de balancement */
@keyframes rotateFlame {
	0%, 100% {
		transform: rotate(2deg);
	}
	50% {
		transform: rotate(5deg);
	}
}


/* Cœur incandescent */
.flamme::after {
  content: "";
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 90%;
  background: radial-gradient(circle,
				rgba(255,255,200,1) 0%,
				rgba(255,150,50,0.7) 70%,
				rgba(255,0,0,0.2) 90%);
  clip-path: inherit;
  opacity: 0.7;
  animation: innerFlicker 1.8s infinite ease-in-out;
}

@keyframes pulse {
  0%   { transform: translateX(-50%) rotate(2deg) scaleX(1); }
  50%  { transform: translateX(-50%) rotate(2deg) scaleX(1.2); }
  100% { transform: translateX(-50%) rotate(2deg) scaleX(1); }
}

@keyframes pulseMiroir {
  0%   { transform: translateX(-50%) rotate(2deg) scaleX(-1); }
  50%  { transform: translateX(-50%) rotate(2deg) scaleX(-1.2); }
  100% { transform: translateX(-50%) rotate(2deg) scaleX(-1); }
}



/* Animation de vacillement (translation verticale et rotation) */
@keyframes flicker {
  0% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
  25% { transform: translateY(-8px) rotate(-1deg); opacity: 0.95; }
  50% { transform: translateY(-12px) rotate(1deg); opacity: 0.85; }
  75% { transform: translateY(-6px) rotate(-0.5deg); opacity: 0.92; }
  100% { transform: translateY(0) rotate(0deg); opacity: 0.9; }
}

/* Animation de morphing pour déformer la forme et modifier le flou */
@keyframes morph {
  0% {
	clip-path: polygon(
	  50% 0%, 65% 10%, 75% 20%, 85% 40%, 90% 65%, 90% 85%, 85% 100%, 
	  50% 100%, 15% 100%, 10% 85%, 10% 65%, 20% 40%, 30% 20%, 35% 10%
	);
	filter: blur(2px);
  }
  25% {
	clip-path: polygon(
	  50% 0%, 67% 12%, 77% 22%, 87% 42%, 92% 67%, 88% 87%, 83% 100%, 
	  50% 100%, 17% 100%, 8% 87%, 12% 65%, 18% 42%, 28% 22%, 33% 12%
	);
	filter: blur(4px);
  }
  50% {
	clip-path: polygon(
	  50% 0%, 63% 8%, 73% 18%, 83% 38%, 88% 63%, 88% 83%, 83% 98%, 
	  50% 100%, 17% 98%, 12% 83%, 12% 63%, 22% 38%, 32% 18%, 42% 8%
	);
	filter: blur(3px);
  }
  75% {
	clip-path: polygon(
	  50% 0%, 66% 11%, 76% 21%, 86% 41%, 91% 66%, 89% 86%, 84% 100%, 
	  50% 100%, 16% 100%, 11% 86%, 11% 66%, 21% 41%, 31% 21%, 36% 11%
	);
	filter: blur(4px);
  }
  100% {
	clip-path: polygon(
	  50% 0%, 65% 10%, 75% 20%, 85% 40%, 90% 65%, 90% 85%, 85% 100%, 
	  50% 100%, 15% 100%, 10% 85%, 10% 65%, 20% 40%, 30% 20%, 35% 10%
	);
	filter: blur(2px);
  }
}

/* Animation du cœur incandescent */
@keyframes innerFlicker {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

.groupeBraises {
	position: absolute;
    bottom: 20px;
    left: 50px;
}

.groupeBraises.gb2 {
	left: 150px;
}


.braises {
  position: absolute;
  bottom: 120px; /* Position de départ près du sommet de la flamme */
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, 
			  rgba(255,200,50,1) 0%, 
			  rgba(255,100,0,1) 70%, 
			  rgba(255,0,0,0) 90%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: emberFly 3s infinite;
}
@keyframes emberFly {
  0% {
	transform: translate(0, 0) scale(1);
	opacity: 1;
	filter: blur(0px);
  }
  50% {
	transform: translate(-10px, -50px) scale(1.2);
	opacity: 0.8;
	filter: blur(1px);
  }
  100% {
	transform: translate(10px, -100px) scale(0.8);
	opacity: 0;
	filter: blur(2px);
  }
}


/*** Ambiances ***/

.pageAmbiance {
	background: var(--ciel2);
	background-size: auto 100%;
    background-position: center center;
	background: radial-gradient(circle, rgb(34 15 0 / 27%) 0%, rgb(227 165 124 / 22%) 0%, rgb(34 15 0 / 34%) 100%), url(/static/img/site/bg/papier/papierBleuVertMotifs.png) /*url("/static/img/site/bg/bois/gravureBoisMotifs.png")url("/static/img/site/bg/papier/papierChambre.jpg")*/;
	background-size: auto, 600px;
	--boisHorizontalBrunClair : url("/static/img/site/bg/bois/boisHorizontalBrunClair.jpg");
	--boisHorizontalVertFonce : url("/static/img/site/bg/bois/boisHorizontalVertFonce.jpg");
	--boisHorizontalBrunFonce : url("/static/img/site/bg/bois/boisHorizontalBrunFonce.jpg");
}

.momentJournee {
	content : "";
	width: 100%;
	position: absolute;
	top: -10em;
	bottom: -10em;
	left: 0;
	pointer-events: none;
	z-index: 1;
}
.momentJournee.nuit {
	background: radial-gradient(circle, rgb(0 0 0 / 47%) 0%, rgb(0 0 0 / 49%) 50%);
}
.momentJournee.soleil {
	background: radial-gradient(circle, rgb(255 223 169 / 15%) 0%, rgb(255 245 222 / 9%) 50%);
}
.momentJournee.soirMatin {
	background: radial-gradient(circle, rgb(129 28 15 / 28%) 0%, rgb(79 22 0 / 9%) 50%);
}

.pageAmbiance footer {
	text-align: center;
}

.ambiance {
	text-align: center;
	margin: auto;
    /*background: url("/static/img/site/bg/bois/gravureBoisMotifs.png");*/
    background: var(--boisHorizontalBrunFonce);
	padding: 4em 3em;
	padding-top: calc(4em - 8px);
	padding-bottom: 120px;
	box-shadow: 0 0 10px #045d58, inset 0 0 10px 1px #83574e;
	position: relative;
	width: fit-content;
	max-width: 80%;
	min-width: 400px;
}

.ambiance.sansImage {
	padding-bottom: 2em;
}

.ambiance:not(.sansImage):after, .ambiance:not(.sansImage):before {
	content: "";
    display: block;
    position: absolute;
    background: var(--boisHorizontalBrunFonce);
    z-index: 9;
	transition: all linear 0.2s;
}

.ambiance.nuit:after, .ambiance.nuit:before {
	background: radial-gradient(circle, rgb(0 0 0 / 47%) 0%, rgb(0 0 0 / 49%) 50%), var(--boisHorizontalBrunFonce);
}

.ambiance:not(.sansImage):after {
    height: calc(100% - 3.5em - 120px);
    width: 1.5em;
    left: calc(50% - 1em);
    top: 3.5em;
	box-shadow: 0 0 6px #000;
}

.ambiance:not(.sansImage).ouverte:after {
	height: 0;
}

.ambiance:not(.sansImage):before {
    width: calc(100% - 6em);
    height: 1.5em;
    top: calc(50% - 1em);
    left: 3em;
	box-shadow: 0 0 6px #000;
}

.ambiance.ouverte:before {
	width: 0;
}

.fenetreAmbiance {
	/*background: url("/static/img/site/bg/divers/ciel2.jpg");	*/
	box-shadow: inset 0 0 10px #000, 0 0 6px #000;
}

.ambiance.sansImage .fenetreAmbiance {
	box-shadow: none;
}

.fenetreAmbiance h2 {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	color: #f3dfae;
}

.fenetreAmbiance .imgAmbiance {
	font-size: 0px;
    box-shadow: inset 0 -10px 10px 2px #00000096;
    border-radius: 2px;
	background-position: center;
    background-size: cover;
}

.afficheAmbiance {
	background: var(--papierMoyen);
    margin: 2em auto;
    padding: 20px;
    box-shadow: 0 3px 10px 2px #000000a8;
    min-width: 50%;
    max-width: 90%;
	font-style: italic;
}

.afficheAmbiance div:nth-child(2) {
	border-top: 2px dotted #f5e1b4;
    margin-top: 2em;
    padding-top: 1em;
}
	

.ambiance img {
	max-width: 100%;
	max-height: 80vh;
	position: relative;
    opacity: 0;
}

.ambiance .playlist {
	position: absolute;
    bottom: 8px;
	left: 0;
	width: 100%;
}

.ambiance.sansImage .playlist {
	position: relative;
	bottom: auto;
    left: auto;
}

.cerclePl {
    height: fit-content;
    width: fit-content;
    border-radius: 50px 6px 6px 50px;
    box-shadow: -1px 2px 6px #000, inset 0 0 6px green;
	background: var(--boisHorizontalVert);
	display: flex;
	color: #ffe5a8;
	margin: auto;
	padding: 2px 10px 2px 2px;
}
.ambiance .cerclePl {
	box-shadow: -1px 2px 6px #492207, inset 2px 0 6px 3px #001c00
}

.cerclePl .explication {
	color: #e5be62;
}

.cerclePl .barreVie {
	position: relative;
	border-radius: 10px;
	display: inline-block;
	width: 300px;
	cursor: pointer;
}
.cerclePl .bv {
	background: #2ce7679c;
    border-radius: 10px 0 0 10px;
	box-shadow: inset 0 2px 2px rgb(112 255 215), inset 0 -2px 3px rgb(0 16 4 / 44%), 0 -1px 1px rgb(30 167 134 / 81%);
}

.cerclePl .bi:not(.bi-volume-down-fill) {
	cursor: pointer;
}

.progressionPl {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: #ddd;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: background 0.3s;
	--couleur1progression : #1cc11c8c;
	--couleur2progression : #d9d90021;
	margin-right: 20px;
	box-shadow: inset 0 0 4px #0f3511, 2px 0 8px #5ab95ae8;
	cursor: pointer;
}

.sansAmbiance {
	color: #fffbe6;
    text-shadow: 0 0 10px #000, 0 0 6px #000;
    font-size: 2em;
}

.ambiance .formParchemin {
	background: linear-gradient(90deg, rgba(34,15,0,0.2) 0%, rgba(34,15,0,0.2) 0%, rgba(227,165,124,0.2) 50%, rgba(34,15,0,0.2) 100%), var(--papierClair);
	border-radius: 2px;
}

.choixAmbiance {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.choixAmbiance > div {
	padding: 10px;
    text-align: center;
    border: 1px solid #fff;
    margin: 10px;
    background: rgb(255 255 255 / 38%);
	cursor: pointer;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.choixAmbiance > div.actif {
	border: 2px solid var(--rougeDoux);
	box-shadow: 0 2px 4px #000;
}

.choixAmbiance > div:hover {
	border-color: var(--rougeDoux);
}

.choixAmbiance > div img {
	display: block;
	margin: 0 auto 10px;
}


.etiquette {
	display: inline-block;
	margin-right: 6px;
	margin-bottom: 3px;
	background: rgba(255,255,255,0.6);
	border: dotted 1px #000;
	padding: 0 4px;
}
.etiquette:last-child {
	margin: 0;
}

.etiquette.active {
	border-color: green;
	background: rgb(0 253 0 / 60%);
}


/* Calendrier */

.bureau.bastion.calendrier {
	padding-top: 3em;
}

.calendrier h2 {
	color: var(--brunClair);
	margin-top: 0;
    margin-bottom: 1em;
}

.calendrier .legende {
	margin: 1em auto;
	color: #f1d8c9;
}

.bastion.calendrier .plan {
	color: var(--bleuFonce);
	background-image: var(--papier);
}

.bastion.calendrier .plan .explication {
	color: #396383;
}

.calendrier .plan .afficherCacher {
	margin: 2em auto;
}

.calendrier .plan .afficherCacher .bi {
	display: inline-block;
	margin: 0 6px;
}

.calendrier .legende .explication {
	margin-bottom: 2em;
}

.calendrier .dates {
	display: inline-block;
	margin: auto;
}

.calendrier .detailsJoueur {
	display: block;
	margin-top: 1em;
}

.calendrier .detailJoueur {
	display: block;
}

.calendrier .bi-calendar-check {
	color: #6bdf6b;
}

.calendrier .plan .bi-calendar-check {
	color: #11a51e;
}

.calendrier .bi-calendar-week {
	color: #81e7ff;
}

.calendrier .plan .bi-calendar-week {
	color: #008aab;
}

.calendrier .bi-calendar-x {
	color: #ff4848;
}

.calendrier .plan .bi-calendar-x {
	color: var(--framboise);
}

.calendrier .bi-hourglass-split {
	color: #ffc966;
}

.calendrier .plan .bi-hourglass-split {
	color: #c96800;
}

#formEventCalendrier {
	display: inline-block;
	background: var(--papier);
	box-shadow: 0 2px 4px #000;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

#formEventCalendrier form {
	background: none;
	margin: 0;
	padding: 10px;
	color: var(--brunMoyen);
}


/* BASTION et plans */

.bastion {
	text-align: center;
}

.bastion .sousMain {
	min-width: 60%;
	max-width: 90%;
}

.bastion .sousMain, .bastion .sousMain .explication {
	color: var(--brunClair);
}

.bastion .sousMain > p {
	font-family: "Charm", cursive;
    font-size: 1.3em;
}

.descriptionBastion {
	color: #fff;
	padding: 10px;
	text-align: left;
	font-style: italic;
}
.descriptionBastion p {
	margin: auto;
}

.bastion .parametres .actif {
	border-color: red;
}

.bastion .planLimites {
	max-width: 99%;
	overflow: auto;
	margin: auto;
}

.bastion .plan {
	border: 1px solid #ccc;
	background-image: var(--papierMoyen);
	margin: auto;
}

.sousMain .piecesListe li div button.submitLike:first-child {
	margin-left: 30px;
}

.bastion .presentation img {
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	max-width: 400px;
	box-shadow: 0 0 2px #fff;
    border: 3px solid #572f19c2;
}

.bastion .presentation:after {
	content: "";
	display: block;
	clear: both;
}

.bastion .presentation, .bastion form, .bastion ul.espacesPlus li:hover, .piecesListe li.selected {
	background: rgb(237 152 108 / 21%);
	border-radius: 4px;
}

.bastion .presentation {
	padding : 10px;
}

.bastion form {
	margin: 1em auto;
	display: inline-block;
	padding: 10px;
	color: #fff;
}
.bastion form p {
	margin-bottom: 1em;
}

.bastion .submitLike:hover {
	color: #fff;
}

.bastion textarea {
	display: block;
	width: 90%;
	min-width: 500px;
}

.bastion input[type="range"] {
	accent-color: #ffeacf;
	margin: 0 10px;
}

.bastion .flex {
	display: flex;
    justify-content: center;
}

.piecesListe ul {
	text-align: left;
    display: inline-block;
	margin: 0 auto 1em;
	padding: 0;
}

.piecesListe li:hover, .piecesListe li.selected {
	color : #fff;
}
.piecesListe li.selected {
	font-weight: bold;
}

.infosPiece {
	position: fixed;
	top: 50%;
    right: 10%;
    transform: translate(0%, -50%);
	z-index: 10;
	max-height: 80%;
	overflow: auto;
	background: rgb(255 245 240 / 95%);
	padding: 10px;
	box-shadow: 0 0 6px #000;
}

.infosPiece h4 {
	color: var(--brunMoyen);
}

.infosPiece img {
	max-height: 90%;
}

.infosPiece .naturel {
	color: #95643f;
}

.pnjBastion {
	display: flex;
	margin: 1em auto;
}

.pnjBastion .explication {
	color: #9d6643 !important;
}

.pnjBastion > div {
	display: inline-block;
	margin: 0 10px;
	border: 3px solid #3b1700;
	background: #e5d5b4;
	color: #57341e;
	box-shadow: 0 -1px 2px #a97859, 0 1px 2px #230d00;
	cursor: pointer;
}

.pnjBastion > div.actif {
	border-color: var(--rougeDoux);
}

.pnjBastion > div div:first-child {
	max-height: 200px;
	overflow: hidden;
}

.pnjBastion > div div:last-child {
	padding: 6px;
	font-weight: bold;
}

.pnjBastion img {
	max-width: 160px;
}


/* ANCIEN SITE */
#campagne hr {
	border-color: #ebebeb;
    border-style: solid;
	margin-bottom: 1em;
}
#infosCampagne h3 {
	font-size: 1.3em;
}
#infosCampagne .naturel {
	margin: 1em 0 3em;
}

.nomCombat.okJoueurs {
	font-weight: bold;
}

/*** MJ ***/

ul .allieAnta {
	display: inline-block;
}
.allieAnta:first-letter {
	font-weight: bold;
	color: #db5700;
}
.allieAnta.estAllie:first-letter {
	color: #00a0c0;
}

.echelleDifficulte {
	background: #00ab0e;
	background: linear-gradient(90deg,rgba(0, 171, 14, 1) 0%, rgba(121, 181, 21, 1) 17%, rgba(253, 193, 29, 1) 36%, rgba(252, 69, 69, 1) 78%, rgba(117, 5, 5, 1) 100%);
	width: 60%;
	margin: auto;
	height: 20px;
	border-radius: 2px;
	position: relative;
	cursor: pointer;
	border: 1px solid #ffffff;
    box-shadow: 0 1px 2px rgb(0 0 0 / 24%);
}
.echelleDifficulte span {
	width: 8px;
	margin-left: -4px;
	height: 100%;
	position: absolute;
	border-radius: 2px;
	background: rgb(0 0 0 / 64%);
    border: solid #fff;
    border-width: 0 1px;
}

.choixCarte {
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.choixCarte > div {
	border: 2px solid #fff;
	display: inline-block;
	cursor: pointer;
	margin: 6px;
	text-align: center;
	padding: 4px;
	background: rgba(255, 255, 255, 0.5);
}

.choixCarte.sansPointer > div {
	cursor: default;
}

.choixCarte .choisie {
	border-color: red;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}

.choixCarte .imageCarte {
	width: 150px;
	height: 50px;
	overflow: hidden;
	margin: auto;
}

.choixCarte img {
	max-width: 150px;
	display: block;
}

.choixCarte button {
	display: inline-block;
	margin: 4px;
}

/** Module image **/
#moduleImages {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 30;
	background: rgba(255,255,255,0.95);
	max-width: min(600px, 50vh);
	padding: 6px;
	border-radius: 6px 0 0 6px;
	max-height: 70vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	text-align: center;
}

#entete {
  flex: 0 0 auto;
}

#moduleImages #images {
	flex: 1 1 auto;
	overflow-y: auto;
	margin-bottom: 1em;
}
#moduleImages .choixCarte > div:not(.choisie) {
	border-color: #a9a08c24;
}

#tableaux {
	flex: 0 0 auto;
	max-height: 200px;
	overflow: auto;
	padding-top: 10px;
	border-top: 1px dotted silver;
}

#moduleImages #images .choixCarte .imageCarte {
	display: block;
    width: auto;
	height: auto;
}

/*input.focusImage[type="url"], #champDemo {
	border-color: #bf37b9;
}*/
#champDemo {
	width: 4em;
}

.bi-pinterest {
	cursor: pointer;
	display: inline-block;
	margin-left: 4px;
	color: #7b3a3a78;
}
.bi-pinterest:hover {
	color: var(--framboise);
}

/*** Compte ***/
.comptePersos li {
    padding: 8px 0 4px;
	margin-bottom: 1em;
}
.comptePersos li:hover {
	background: rgb(255 255 255 / 80%);
}
.compteCampagne {
	margin: 0.5em 0 0 1.4em;
}


.onglets {
	margin-top: 3em;
	display: flex;
	justify-content: space-evenly;
}

.onglet {
	display: inline-block;
	padding: 12px;
	border-radius: 10px;
	background: rgba(241, 232, 222,0.6);
	margin-bottom: 3em;
	text-align: center;
    font-weight: bold;
	cursor: pointer;
	color: #332210;
	border-width: 1px 0;
    border-color: #d2c7bb;
    border-style: solid;
	box-shadow: inset 0 2px 2px #fff, 0 0 2px #d0c5b9;
}
.onglet:not(.inactif):hover {
	background: #fff;
}

.onglet.actif {
	color: #008282;
}

.onglet.inactif {
	color: grey;
	cursor: default;
	background: rgb(236 236 236 / 60%);
}

td.noRightB {
	border-right: 0;
}
td.noLeftB {
	border-left: 0;
}

.construction form {
	padding: 0;
	margin: 0;
}

.explicationSeule.mini {
	font-size: 0.8em;
}	

.explicationSeule.mini2 {
	font-size: 0.75em;
}

.cCache a {
	color: #7b6852;
}
.cCache a:hover {
	color: #cb4200;
}


.msgAlerte {
	background: #ffdcdc;
	margin: 8px auto;
	border: solid 2px red;
	border-radius: 2px;
	padding: 6px;
}

.msgAlerte button {
	margin: 6px;
}

.afficherCacher .consigne, .fermerTout {
	cursor: pointer;
}

.fermerTout {
	font-weight: bold;
}

.invisible {display: none !important;}
.translucide {opacity: 0.5;}
.translucidePlus {opacity: 0.2;}
.cache {visibility: hidden !important;}


/*** NEW **/

#page.bureau {
	background: var(--parquetSombre);
	background-size: 1200px;
	background-position: center center;
}

.closeB {
	position: absolute;
    right: 4px;
    top: 4px;
    color: #9d3b14;
	cursor: pointer;
	font-size: 20px;
}
.closeB:hover {
	color: #c93232;
}

.lettresCreuses.grandes {
	font-size: 1.5em;
}

.lettresCreuses.tresgrandes {
	font-size: 2em;
}

.naturel {
	white-space: pre-line;
}

.explication {
	font-style: italic;
}

.explication.neutre {
	font-weight : normal;
}

.explication .noExplication {
	font-style : normal;
	color: var(--couleurTexte);
}

.vert {
	color: green;
}

#goTop {
	position: fixed;
    left: 8px;
    bottom: 50%;
    color: #f4c3ff;
    cursor: pointer;
    background: var(--gemmeRouge);
    background-size: 100%;
    padding: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    box-shadow: 0 0 6px #000, inset 0 0 2px #cb5555;
    text-align: center;
    z-index: 20;
}
#goTop:hover {
	background-image: var(--gemmeViolette);
}

.bureau {
	background-image: var(--boisBureau);
    background-position: left top;
	padding: 2em 0;
	box-shadow: inset 0 10px 20px rgb(199 89 50 / 56%), inset 0 -10px 10px rgb(213 137 110 / 28%), 0 0 10px 14px #000;
	margin: 1em auto 2em;
	border: solid rgb(79 30 14 / 48%);
    border-width: 10px 0;
	position: relative;
}

.bandeau.persoCampagne {
	/*position: absolute;
    width: 100%;*/
    text-align: center;
    font-family: "Great Vibes", cursive;
    font-size: 2em;
    color: #8d5328;
    text-shadow: -1px 1px 1px #310e03, 1px -1px 1px #e9af9c;
    letter-spacing: 3px;
    /*top: calc(1em - 6px);*/
}

.bandeau.persoCampagne div {
	display: inline-block;
	border: groove #854d23;
	border-width: 0 3px;
	padding: 6px 2em;
	border-radius: 10px;
	background: rgb(173 106 83 / 16%);
}	

#gererFavoriPerso {
	cursor: pointer;
	position: absolute; right: 10px; color: #d30000;
}

/*#gererFavoriPerso bi {
}*/


#menuListes, .sousMain {
	position: relative;
	max-width: 1200px;
}

.sousMain {
	margin: 0 auto 2em;
	padding: 20px;
	background: var(--cuir);
	border: 4px solid rgba(0,0,0,0.4);
	box-shadow: 0 0 4px 5px rgb(145 80 58 / 46%), inset 0 0 2px rgba(0, 0, 0, 0.4);
	border-radius: 2px;
}

.sousMain form:not(.formParchemin) select {
	border: none;
    background: #4a2a15;
    color: #fff3eb;
	outline: none;
	font-size: 0.95em;
}

.sousMain form:not(.formParchemin) button, .sousMain button.submitLike, .formParchemin button[type="submit"], .formParchemin button.submitLike, .centreCombat button, .pageCampagne #moduleDes .submitLike, .groupeOptions .submitLike, button.submitGenerique  {
	background: #bd967f94;
    border: ridge var(--brunClair);
    border-width: 0 2px;
    border-radius: 4px;
    color: #fff;
    padding: 2px 8px;
    margin-left: 10px;
	font-size: 0.82em;
	box-shadow: none;
}
.formParchemin button[type="submit"], .sousMain button.submitLike, .formParchemin button.submitLike, .centreCombat button[type="submit"], .centreCombat button.submitLike, .pageCampagne #moduleDes .submitLike, .groupeOptions .submitLike, button.submitGenerique {
	background: #ddccc294;
    border-color: #d9af96;
	color: #4d2815;
}
.sousMain button.submitLike {
	background: #ffe9d2cc;
}

.centreCombat button[type="submit"] {
    background: #cfb8aa;
}

.formParchemin button[type="submit"]:disabled, .formParchemin button.submitLike:disabled, .centreCombat button.submitLike:disabled, .pageCampagne #moduleDes .submitLike:disabled, button.submitGenerique:disabled, .sousMain form:not(.formParchemin) button:disabled {
	opacity: 0.8;
	background: #d7d7d7 !important;
	border-color: silver !important;
	color: #898989 !important;
}

.sousMain form:not(.formParchemin) button:disabled {
	background: #876451 !important;
	border-color: #6d2d03 !important;
	color: #aba4a2 !important;
}

.sousMain button.submitLike:disabled {
	opacity: 0.8;
	border-color: silver !important;
	color: #898989 !important;	
}

.centreCombat button:disabled {
    cursor: default;
    background: #bbb8b6c4;
}

.sousMain form:not(.formParchemin) button:hover, .sousMain button.submitLike:hover:not([disabled]), .formParchemin button[type="submit"]:hover, .formParchemin button.submitLike:hover, .centreCombat button:not([disabled]):hover, .centreCombat button.submitLike:hover, .centreCombat button[type="submit"]:hover, .pageCampagne #moduleDes .submitLike:hover, .groupeOptions .submitLike:hover, button.submitGenerique:hover {
	background: #7d5b4794;
	box-shadow: 0 1px 2px #e1dccfc2;
}
.formParchemin button[type="submit"]:hover, .formParchemin button.submitLike:hover, .centreCombat button[type="submit"], .centreCombat button.submitLike:hover, .pageCampagne #moduleDes .submitLike:hover, .groupeOptions .submitLike:hover, button.submitGenerique:hover {
	color: #fff;
}

.sousMain form:not(.formParchemin) button.supprimer:hover, .sousMain button.supprimer.submitLike:hover:not([disabled]), .formParchemin button.supprimer[type="submit"]:hover, .formParchemin button.supprimer.submitLike:hover, .centreCombat button.supprimer:hover, .centreCombat button.supprimer.submitLike:hover, .centreCombat button.supprimer[type="submit"]:hover, .pageCampagne #moduleDes .submitLike.supprimer:hover, .groupeOptions .submitLike.supprimer:hover, button.supprimer.submitGenerique:hover {
	color: #fff !important;
}

.liensFichePerso, .inspiration, .formeAnimale, .bureau #notes #notesTitre, .bureau #repos i {
	font-family: "Great Vibes", cursive;
	font-size: 1.7em;
	color: var(--brunClair);
}
.nomProprietaire {
	cursor: default;
	text-align: center;
	color: #99521e;
	font-family: "Charm", cursive;
	font-style: italic;
	font-size: 1.2em;
	margin-bottom: 2px;
}
.campagnesPerso {
	text-align: center;
	color: var(--brunClair);
}

.campagnesPerso a {
	color: var(--brunClair);
	font-family: "Charm", cursive;
	font-size: 1.3em;
}

.campagnesPerso a:hover {
	color: #fff;
}

.formeAnimale {
	text-align: center;
}

.formeAnimale span {	
	cursor: pointer;
}

.formeAnimale span:first-child {
	display: inline-block;
	margin-right: 1em;
}

.bureau #repos {
	text-align: center;
	margin-top: 2em;
}
.bureau #repos i {
	font-size: 1.3em;
}
.bureau #repos form {
	display: inline-block;
	margin: 0 10px;
}

.liensFichePerso > div {
	position: absolute;
	transform: rotate(-10deg);
	transition: all 0.6s linear;
	cursor: pointer;
}
.liensFichePerso > div:hover, .liensFichePerso > span:hover, .formeAnimale .actif, .bureau #notes #notesTitre:hover, .bureau #notes.actif #notesTitre {
	color: #fff;
}

.sousMainPres {
	background: var(--cuir);
    padding: 30px;
    margin: 2em auto;
    max-width: 90%;
    border-radius: 4px;
    box-shadow: inset 0 0 4px 6px #d1957670, 0 0 4px #000000de;
}

.persoSvgMort {
	text-align: center;
    margin: 0.5em auto 0;
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	border-radius: 6px;
    padding: 0 6px;
    background: rgb(191 174 120 / 16%);
    box-shadow: 0 0 2px #fff;
}

.persoSvgMort button, .persoSvgMort button:hover {
	background: none;
	border: none;
	padding: 0;
	box-shadow: none;
	cursor: pointer;
} 

.persoSvgMort .gi-skull-shield {
	color: #8d2c14;
    font-size: 1.8em;
	display: inline-block;
	margin-right: 6px;
}

.persoSvgMort .bi-check, .persoSvgMort .bi-x {
	font-size: 1.8em;
	font-weight: bold;
	text-shadow: -1px 1px 1px #fff;
}

.persoSvgMort .bi-check {
	color: #009b00;
}

.persoSvgMort .bi-x {
	color: #cb0000;
}

.persoSvgMort .bi-arrow-clockwise {
	font-size: 1.5em;
	color: #21699d;
	margin-left: 10px;
}

.persoSvgMort .bi-arrow-clockwise:hover {
	color: purple;
}

.feuille {
	background-image: var(--papier);
	position: relative;
	min-height: 200px;
	padding: 10px;
	box-shadow: -1px 1px 6px rgba(0,0,0,0.6);
	margin: 2em auto 1em;
	color: #231a06;
	max-width: 1050px;
	min-height: 630px;
}

.feuille.pres {
	min-height: 10px;
	background-image: var(--papierClair);
	margin: auto;
	color: var(--couleurTitresPapier);
	padding-bottom: 20px;
}

.feuille.clair {
	background-image: var(--papierTresClair);
}

.feuille hr, .centreCombat hr {
	border: none;
	border-top: 1px dotted var(--couleurTitresPapier);
	color: var(--couleurTitresPapier);
	height: 5px;
	margin-top: 1em;
}

.pres h4 {
	font-family: "Julee", cursive;
    color: var(--couleurClairBois);
    font-size: 1.5em;
    margin: 1em auto;
}

.pres .portrait {
	overflow: visible;
	max-height: none;
	box-shadow: none;
	border: none;
	margin: 0 2em 10px 10px;
}

.personnageResume .pres .portrait img {
	max-height: 250px;
	max-width: 200px;
}

@media (max-width: 768px) {
	.personnageResume {
		position: relative;
	}
	.personnageResume .pres .portrait img {
		max-height: 120px;
		max-width: 100px;
	}
	.personnageResume .stats {
		position: absolute;
		bottom: 0;
		opacity: 0.1;
	}
}
.personnageResume .nomJoueur {
	font-weight: normal;
	font-size: 0.8em;
}

.pres .portrait:before, .pres .portrait:after, .complementGalerie .imagesItemGalerie div:before, .complementGalerie .imagesItemGalerie div:after {
    display: block;
    content: "";
    background: rgb(255 243 214 / 32%);
    width: 106%;
    height: 14px;
    top: 6px;
    left: -3%;
    position: relative;
    box-shadow: 0 -2px 6px rgb(0 0 0 / 15%);
}

.pres .portrait:after, .complementGalerie .imagesItemGalerie div:after {
    top: -11px;
    border-bottom: 2px solid #fff2d2;
}

.portrait.mini {
	max-height: 100px;
	max-width: 100px;
	overflow: hidden;
}
.portrait.mini img {
	max-width: 100px;
}
.cadreMiniPortrait {
	/*display: inline-block;*/
	float: left;
	margin: 0 2em 10px 10px;
}
.cadreMiniPortrait:before {
    display: block;
    content: "";
    background: rgb(255 243 214 / 32%);
    width: 110%;
    height: 12px;
    top: 6px;
    left: -5px;
    position: relative;
    box-shadow: 0 -2px 6px rgb(0 0 0 / 15%);
}
.cadreMiniPortrait .portrait {
	float: none;
	margin: 0;
	box-shadow: 1px 2px 4px #0000008f;
}

.feuille h1, .feuille h2 {
	color: var(--couleurTitresPapier);
    text-shadow: var(--ombreTitresPapier);
}

.feuille .lettresCreuses {
	color: #ddd2b3;
    text-shadow: -1px -1px 1px #6b5b38, 1px 1px 1px #fff2cc;
}

.feuille .lettresCreuses.tresgrandes {	
	text-shadow: -1px -1px 1px #9b875a, 1px 1px 1px #fff2cc;
}

.feuille2 {
	transform: rotate(-0.4deg);
}

.feuille .pale {
	color: #9d9177;
}

.listePerso .pale {
	color: #8f7847;
}

.portrait, .portrait2 {
	float: left;
	margin: 0 4em 10px 10px;
	/*display: inline-block;*/
}
.portrait2 {
	position: relative;
	z-index: 2;
	transform: rotate(-4deg);
	margin: -80px 1.5em 10px -10px;
	border: solid #ffe9b9;
	border-width: 1px 3px 1px 2px;
	transition: transform linear 0.2s;
	background-size: cover;
    background-repeat: no-repeat;
	box-shadow: -2px 2px 4px 2px rgb(0 0 0 / 35%);
}

.portrait img, .portrait2 img {	
	max-width: 250px;
	max-height: 350px;
}


.postItDroiteFeuille, .postItDroiteStats, .listePerso {
	float: right;
	padding: 10px;
	min-width: 140px;
	font-size: 1.1em;
	background: var(--papier);
	transform: rotate(5deg);
    margin-top: -80px;
    margin-right: -10px;
    box-shadow: 2px 2px 4px 2px rgb(0 0 0 / 35%);
	transition: all linear 0.2s;
}

.postItDroiteStats {
	padding: 0;
	transform: rotate(-1deg);
	margin: 0 -70px 10px 10px;
	position: relative;
	z-index: 2;
}

.droit.postItDroiteFeuille, .droit.postItDroiteStats, .droit.portrait2 {
	transform: rotate(0.4deg);
	backdrop-filter: none;
}

.postItDroiteStats > div:not(.boisStats) {
	border: 2px #fffbf0; border-style: none solid; padding: 10px 6px;
}


#casesSorts form {
	display: inline-block;
}

#modifsRapides {
	position: absolute;
	right: 10px;
	bottom: 5px;
}
#modifsRapides > .bi {
	color: #bd1e1e;
	font-size: 2em;
	cursor: pointer;
}

#modifsRapides > .bi:hover, #modifsRapides.actif > .bi {
	color: red;
}

#modifsRapidesPerso {
	display: none;
}

.actif #modifsRapidesPerso {
	display: block;
	width: auto;
    height: auto;
    max-height: 90%;
    padding: 30px 20px 20px;
    box-shadow: -1px 2px 8px 1px rgba(0, 0, 0, 0.6);
    border: 2px solid #fffcf5;
    z-index: 10;
    overflow-y: auto;
	position: fixed;
    right: 50%;
    top: 50%;
	transform: translate(50%, -50%);
}

.boutonSimple, .emplSort button {
	background: none;
	border: none;
	cursor: pointer;
}

.listePerso {
	background: var(--papierClair);
}

.papierFonce {
	min-height: auto;
	max-width: 90%;
	padding: 10px 20px;
	border-radius: 0 20px 20px 0;
	display: inline-block;
	margin: 1em 0;
	color: #fffcf2;
	box-shadow: -1px 1px 6px rgba(0, 0, 0, 0.6), inset -2px 0 6px rgb(225 215 190 / 70%);
	border: 1px dashed #8f796b;
    border-left: 1px solid var(--couleurTitresPapier);
}
.papierFonce div {
	background: var(--papierClair);
    color: var(--couleurTitresPapier);
    padding: 8px;
    box-shadow: inset 0 0 4px var(--couleurTitresPapier);
}

.sousMain .inspiration {
	margin: 1.5em auto 0.5em;
	text-align: center;
	width: calc(100% - 200px);
}

.inspiration .bi {
	margin-right: 1em;
}

.inspiration .gemmePartiePerso {
	width: 25px;
	height: 25px;
	background-size: 25px;
	background-image: var(--gemmeCyan);
	position: relative;
	display: inline-block;
    border-radius: 50%;
    box-shadow: 0 0 6px 1px #f9cab2;
	margin-right: 6px;
	opacity: 0.8;
	transition: all linear 0.8s;
}

.inspiration .gemmePartiePerso:hover {
	transform: rotate(360deg);
}

.compteursPerso {
	display: flex;
	flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
}

.compteursNombres {
	display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.resumePersoCombat .compteursNombres {
	justify-content: center;
}

.resumePersoCombat .compteursNombres > div {
	margin-bottom: 10px;
}

.bureau #equipement #iconeEquipement {
	width: 80px;
	height: 85px;
	position: absolute;
    right: 10px;
    bottom: 10px;
	background-image: url("/static/img/site/elements/pieces_.png");
	background-size: 80px 85px;
	cursor: pointer;
	transition: background-image linear 0.2s;
}
.bureau #equipement #iconeEquipement:hover, .bureau #equipement.actif #iconeEquipement {
	background-image: url("/static/img/site/elements/pieces_i.png");
}

#equipementDetail {
	width: 0;
	height: 0;
	max-width: calc(1200px - 10px);
	max-height: 90%;
	overflow: hidden;
    display: inline-block;
	transition: all linear 0.2s;
    background-image: var(--papier);
	background-attachment: fixed;
	background-position: center;
    border-radius: 4px 0 4px 0;
    position: fixed;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	color: var(--couleurTitresPapier);
}

.bureau #equipement.actif #equipementDetail {
	width: auto;
	height: auto;
	max-height: 90%;
    padding: 30px 20px 20px;
    box-shadow: -1px 2px 8px 1px rgba(0, 0, 0, 0.6);
    border: 2px solid #fffcf5;
    z-index: 10;
	overflow-y: auto;
}

#equipementDetail .compteursPerso {
	margin-bottom: 1em;
	padding-bottom: 10px;
	border-bottom: dotted 1px #fff;
}
#equipementDetail > .naturel {
	font-style: italic;
}
#objetsDonnesPerso {
	margin-top: 1em;
	font-style: normal;
}



.bureau #notes #notesTitre {
	position: absolute;
    left: 20px;
    bottom: 30px;
	cursor: pointer;
	transform: rotate(-10deg);
	border-bottom: 8px double #f1b484;
	font-family: "Charm", cursive;
	transition: all linear 0.2s;
}

#notesDetail {
	width: 0;
	height: 0;
	max-width: 800px;
	max-height: 90%;
	overflow: hidden;
    display: inline-block;
	transition: all linear 0.2s;
    border-radius: 4px 0 4px 0;
    position: fixed;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -50%);
	color: var(--couleurTitresPapier);
	font-style: italic;
	z-index: 1;
}
#notesDetail::before {
    content: "";
    position: absolute;
    top: -15px; /* Espace supplémentaire pour éviter les coupures */
	left: -15px;
	right: -15px;
	bottom: -15px;
    box-shadow: -1px 2px 8px 1px rgba(0, 0, 0, 0.6);
    border: 2px solid #fffcf5;
    filter: url(#wavy2);
    z-index: -1;
    background-image: var(--papier);
	background-attachment: fixed;
	background-position: center;
}

.bureau #notes.actif #notesDetail {
	width: auto;
	height: auto;
	max-height: 90%;
    z-index: 10;
	overflow: visible;
    padding: 30px 20px 20px;
}

#notesDetail h3 {
	margin-top: 2em;
}


.bureau .encart {	
	max-width: 1240px;
	margin: auto;
	box-shadow: 0 0 6px rgb(191 85 5 / 38%);
	border-radius: 10px;
	color: #ffbd8c;
}

.bureau .encart .boisStats {
	border-radius: 10px 10px 0 0;
	border-top: 1px solid #cf8853;
	text-align: center;
	position: relative;
	font-family: "Great Vibes", cursive;
	letter-spacing: 2px;
}

.bureau .encart .boisStats:last-child {
	border-radius: 0px 0px 10px 10px;
	border-top: none;
	border-bottom: 1px solid #1e0d00;
}

.bureau .encart .interieurListe {
	padding: 10px 20px;
	background: rgb(39 17 11 / 43%);
	box-shadow: inset 0 0 8px 1px rgb(18 5 0);
	border: solid #8d5932;
	border-width: 0 1px;
	font-size: 1.1em;
}

.bureau .encart form {
	display: inline-block;
}

.bureau .encart input, .bureau .encart button {
	background: rgb(207 136 83 / 21%);
	border: 1px solid #8d5932;	
	color: #ffbd8c;
	text-align: center;
	margin-left: 10px;
	padding: 4px 1px;
}

.bureau .encart button {
	padding: 4px 6px;
	box-shadow: inset 0 0 4px #ffad70, 1px 1px 5px #270900;
	cursor: pointer;
	border-radius: 2px;
}

.bureau .encart button:hover {
	box-shadow: inset 0 0 6px #270900, 0px -1px 3px #ffad70;
}

.barreVie {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-top: 1px solid #000;
    box-shadow: inset 0 2px 2px rgb(255 255 255 / 67%), inset 0 -2px 3px rgb(0 0 0 / 44%), 0 -1px 1px rgb(0 0 0 / 25%);
}

.barreVie.compteur {
    position: relative;
    width: 200px;
    display: inline-block;
    border-radius: 20px;
}

.barreVie.compteur div {
    border-radius: 30px;
}

.barreVie, .barreVie div {
    height: 10px;
}

.bv.vert {
    background: rgba(0,255,0,0.4);
    box-shadow: inset 0 2px 2px rgb(174 255 201 / 67%), inset 0 -2px 3px rgb(4 38 0 / 44%);
}

.bv.jaune {
    background: rgb(237 208 0 / 61%);
    box-shadow: inset 0 2px 2px rgb(255 217 174 / 67%), inset 0 -2px 3px rgb(38 23 0 / 44%);
}

#menuListes {
	margin: 1em auto;
	display: flex;
	justify-content: space-around;
}
#menuListes div {
	font-family: "Charm", cursive;
    color: var(--brunClair);
	margin: auto 10px;
    font-size: 1.5em;
	text-shadow: -1px 1px 2px #000, 1px -1px 1px #eb8560;
	cursor: pointer;
}
#menuListes .actif, #menuListes div:hover {
	color: #fff;
}

.listes {
	max-width: 1220px;
	margin: 1em auto;	
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	box-shadow: 0 0 8px 1px rgb(191 85 5 / 38%), inset 0 0 10px 5px #000;
	padding: 10px;
	background: rgba(0,0,0,0.3);
	border: 1px solid #854d23;
	position: relative;
	filter: blur(0.2px);
}

.listes.ouvert {
	filter: blur(0);
}

.listes:before {	
	content: "";
	display: block;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	top: 1px;
	left: calc(-100% + 10px);
	border: groove #854d23;
	border-width: 5px 0;
	background: rgba(0,0,0,0.1);
}

.listes:after {
	content: "";
	display: block;
	width: calc(100% - 10px);
	height: calc(100% - 10px);
	position: absolute;
	top: 1px;
	left: 1px;
	background: var(--vitreBg);/*linear-gradient(90deg, rgb(219 204 190) 0%, rgb(255 255 255) 49%, rgb(77 66 45) 100%);/*linear-gradient(90deg, rgb(197 204 205) 0%, rgb(255 255 255) 49%, rgb(119 131 135) 100%);*/
	box-shadow: inset 0 0 3px #000;
	border-radius: 1px 1px 1px 1px / 50% 50% 50% 50%;
	border: 4px ridge #ffb67a;
	opacity: 0.3;
	transition: all linear 0.5s;
}

.listes.ouvert:after {
	left: calc(-100% + 6px);
	box-shadow: 1px 0 6px 4px #000, inset 0 0 8px 2px rgb(255 255 255 / 19%);
	opacity: 0.4;
}

.tapis {
	background: var(--tapisBleu);
	background-size: 600px;
	padding: 2em 1em;
	border: solid rgb(48 78 101 / 85%);
	border-width: 10px 0;
	box-shadow: 0 0 10px #000;
}


.listes .listePerso {
	padding: 0;
	margin: 0;
	float: none;
	display: inline-block;
	transform: rotate(0);
	font-size: 1em;
	position: relative;
    color: #000;
}

.listePerso#aataml {
	width: 76%;
}

.backgroundSatin {
	border: solid #fffdf8;
	border-width: 12px 0;
	background: var(--verreTransparentMotifs), #fff;	
}

.menuModule.backgroundSatin {
	margin: -1.8em -1.8em 2em;
    padding: 10px;
}

.boisStats {
	height: 20px;
	background: var(--boisBureau);
	box-shadow: inset 0 2px 4px #cf6c4c;
}

.listes .listePerso .boisStats {
	background: none;
	box-shadow: inset 0 2px 4px #002237, 0 1px 4px #000;
	text-align: center;
	color: #838383;
    text-shadow: -1px 1px 0 #fbfbfb;
	height: 20px;
}
.listes .listePerso .boisStats:first-child {
	box-shadow: inset 0 2px 4px #002237, 0 1px 4px #000;
	height: 30px;	
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}

.listes .listePerso .interieurListe {
	padding: 20px;
}

.listes .listePerso .pale {	
	color: #838383;
    text-shadow: -1px 1px 0 #e1e1e1;
}

.listes .listePerso ul {
	padding-right: 10px;
	display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.listes .listePerso li {
	margin-bottom: 10px;
}

.postItDroiteFeuille .bi {
	font-size: 0.9em;
}

.noRotate {	
	transform: rotate(0.4deg);
}

.feuille2 .resumePerso {
	margin-top: 3em;
}

.physique {
	margin-top: 2em;
}

.feuille .puce, .papierFonce .puce {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ab9689;
    margin-right: 6px;
    position: relative;
    top: -2px;
	box-shadow: var(--ombreTitresPapier);
}

.pv {
	font-size: 1.3em;
	text-align: center;
}

.pv .bi {
	color: #991313;
	margin-right: 10px;
}

.pv .explication {
	font-size: 0.9em;
	color: var(--couleurTitresPapier);
}

.stats {
	height: 100px;
	width: 100px;
	border-bottom: 2px solid #fff;
	display: flex;
	flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
}

.stats .barreStat {
	opacity: 0.5;
	position: relative;
	width: 10px;
	text-align: center;
	font-weight: bold;
}

.barreStat.force {
	background: repeating-linear-gradient(-55deg, rgb(181 0 0), rgb(181 0 0) 5px, #9d0909 4px, #b15656 8px);
}
.barreStat.dexterite {
	background: repeating-linear-gradient(-55deg, rgb(233 110 0), rgb(233 110 0) 5px, #9d7809 4px, #b18056 8px);
}
.barreStat.constitution {
	background: repeating-linear-gradient(-55deg, rgb(28 28 28), rgb(28 28 28) 5px, #4f4f4f 4px, #181818 8px);
}
.barreStat.intelligence {
	background: repeating-linear-gradient(-55deg, rgb(0 107 165), rgb(0 107 165) 5px, #005c81 4px, #00405f 8px);
}
.barreStat.sagesse {
	background: repeating-linear-gradient(-55deg, rgb(0 125 3), rgb(0 125 3) 5px, #005c81 4px, #00405f 8px);
}
.barreStat.charisme {
	background: repeating-linear-gradient(-55deg, rgb(99 0 153), rgb(99 0 153) 5px, #2d0081 4px, #20005f 8px);
}

.nomStat {
	display: inline-block;
	margin: 0 10px;
}

.force {
	color: rgb(181 0 0);
}
.dexterite {
	color: rgb(165 78 0);
}
.constitution {
	color: rgb(28 28 28);
}
.intelligence {
	color: rgb(0 107 165);
}
.sagesse {
	color: rgb(0 125 3);
}
.charisme {
	color: rgb(99 0 153);
}

.carreEmplSort.vert {
    background: green;
}
.carreEmplSort:first-child {
    margin-left: 0;
}
.carreEmplSort {
    display: inline-block;
    margin-left: 10px;
    height: 10px;
    width: 10px;
    background: red;
}

.iconeCompteur {
    display: inline-block;
    width: 36px;
    height: 36px;
    margin: 0 4px 0 10px;
}

.comptJauge, .comptNb {
    display: inline-block;
}

.comptJauge:last-child, .comptNb:last-child {
    margin-right: 0 !important;
}

.listes .gemmePartiePerso, .boisStats .gemmePartiePerso {
	width: 14px;
    height: 14px;
	background-size: 14px;
	position: absolute;
	left: 4px;
	top: 7px;
	opacity: 0.7;	
}

.listes .gemmePartiePerso:last-child, .boisStats .gemmePartiePerso:last-child {
	left: auto;
	right: 4px;
}

.bureau .encart .gemmePartiePerso {
	top: 3px;
	opacity: 0.6;
}

.gemmePartiePerso.force {
	background-image: var(--gemmeRouge);
}

.gemmePartiePerso.dexterite {
	background-image: var(--gemmeOrange);
}

.gemmePartiePerso.sagesse  {
	background-image: var(--gemmeVerte);
}

.gemmePartiePerso.intelligence  {
	background-image: var(--gemmeBleue);
}

.gemmePartiePerso.charisme  {
	background-image: var(--gemmeViolette);
}

.gemmePartiePerso.cyan  {
	background-image: var(--gemmeCyan);
}


.papierFonce {
	background-image: var(--papier);
}


/* LIVRE de sorts */

.tabouretLivreSorts {
	margin: auto; 
	width: 80%; 
    max-width: calc(1500px + 6em);
	border-radius: 6em;
	border-width: 0 10px;
	padding: 2em;
}

.livre {
    margin: 3em auto;
    max-width: 1500px;
	text-align: left;
}

.livre a {
	border-bottom: 1px dotted var(--couleurTitresPapier);
	cursor: help;
	color: var(--brunMoyen);
}

.livre a[target="_blank"], .livreH a {
	border: none;
	color: var(--bleuFonce);
	cursor: pointer;
}

.livre a[target="_blank"]:hover, .livreH a:hover {
	color: var(--violetLienHover);
}

.livre .explication {
	color: var(--couleurTitresPapier);
}

.livre .listeSorts {
	margin: 1em 0;
	padding-left: 40px;
}
.livre .listeSorts a {
	display: inline-block;
	margin-left: 6px;
}
.livre .listeSorts a:first-child {
	margin-left: 0;
}

.livre .listeSorts .explication {
	font-size: 0.9em;
}

.livreSuivPrec {
	text-align: center;
	position: absolute;
	width: 100%;
	top: 0;
	margin-left: calc(-2em - 0.5px);
}

.tabouretLivreSorts .livreSuivPrec:last-child {
	top: auto;
	bottom: 0;
}

.pageSortSuivante, .pageSortPrecedente {
	cursor: pointer;
	font-weight: bold;
	font-size: 3em;
	color: var(--couleurClairBois);
	text-shadow: -1px 2px 2px #000, 1px -1px 1px #ddae9d;
	transition: color linear 0.1s;
}

.pageSortSuivante:hover, .pageSortPrecedente:hover {
	color: #fff;
}

.livre section:before {
	background: var(--cuir);
	border-radius: 0.25em;
	bottom: -1em;
	content: '';
	left: -1em;
	position: absolute;
	right: -1em;
	top: -1em;
	z-index: 0;
}

.livre section {
    background: var(--papierClair);
    box-shadow: rgba(0,0,0,0.5) 0 1em 3em;
    color: #000;
    padding: 2em;
	margin: 1em;
	position: relative;
}

.livre section h3 {
	margin: 1em 0 2em;
	text-align: center;
}

.chapitresLivre {
	width: 49%;
	float: left;
	margin-left: -2em;
}

.detailSorts {
	width: 50%;
	min-height: 500px;
	float: right;
}

.lienFicheChapitre {
	margin: 0.5em auto 1.8em;
    padding-left: 2em;
}

.lienFicheChapitre a {
	color: #30658f;
	border-color: #30658f;
}

#afficherSort {
    position: fixed;
    top: 2%;
    right: 2%;
    box-shadow: -2px 2px 8px #000;
    width: 80%;
    max-width: 600px;
    max-height: 80%;
    overflow: hidden;
    z-index: 3;
	background: var(--papier);
    display: flex;
    flex-direction: column;
}

#afficherSort .closeB {
	top: 20px;
}

#afficherSort .infosSort {
	flex: 1; /* Utilise tout l’espace restant dans le conteneur */
    overflow-y: auto;
    padding: 1em;
	padding-top: 0;
	max-height: calc(80vh - 10em);
}

.livre section:after {
	background: linear-gradient(to right, transparent 0%,rgba(0,0,0,0.2) 46%,rgba(0,0,0,0.5) 49%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.5) 51%,rgba(0,0,0,0.2) 52%,transparent 100%);
	bottom: -1em;
	content: '';
	left: 50%;
	position: absolute;
	top: -1em;
	transform: translate(-50%,0);
	width: 4em;
	z-index: 2;
}

.livre section * {
    position: relative;
}

/* Header/Footer */
.livre section header {
    padding-bottom: 1em;
}

.livre section header *,
.livre section .footerLivre * {
    margin: 0;
}

.livre section article {
	background: var(--papierClair);
    margin: -3em -2em -5em;
    padding: 3em 2em;
	position: relative;
	z-index: 2;
}

.livre section > * {
	position: relative;
	z-index: 1;
}

.livre section .footerLivre {
    padding-top: 1em;	
	color: transparent;
}

/* Header/Footer */
.livre section header:before,
.livre section header:after,
.livre section .footerLivre:before,
.livre section .footerLivre:after {
	background: var(--papierClair);
	border-radius: 25%;
	content: '';
	height: 2em;
	position: absolute;
	z-index: -1;
	width: calc(50% + 2em);
}

.livre section header:before,
.livre section .footerLivre:before,
.livre section .footerLivre:after {
	border-top-left-radius: 0;
}

.livre section header:after,
.livre section .footerLivre:before,
.livre section .footerLivre:after {
	border-top-right-radius: 0;
}

.livre section header:before,
.livre section header:after,
.livre section .footerLivre:after {
	border-bottom-right-radius: 0;
}

.livre section header:before,
.livre section header:after,
.livre section .footerLivre:before {
	border-bottom-left-radius: 0;
}

.livre section header:before,
.livre section header:after {
	top: -2.65em;
}

.livre section header:before,
.livre section .footerLivre:before {
	right: 50%;
}

.livre section header:before {
	transform: rotate(-2deg);
}

.livre section header:after,
.livre section .footerLivre:after {
	left: 50%;
}

.livre section header:after {
	transform: rotate(2deg);
}

.livre section .footerLivre:before,
.livre section .footerLivre:after {
	bottom: -2.65em;
}

.livre section .footerLivre:before {
	transform: rotate(2deg);
}

.livre section .footerLivre:after {
	transform: rotate(-2deg);
}


/*===== Coffre ========*/
#coffre {
	margin-top: 5em;
	margin-bottom: 3em;
	position: relative;
}

#bords {
	width: calc(80% - 10em);	
	max-width: min(calc(1500px + 6em), 100%);
	min-width: min(500px, 100%);
	margin: auto;
	background: var(--boisPorte);
	border-radius: 8px;
	padding: 3em;
	box-shadow: 0 5px 10px 6px #000, inset 0 0 10px #913a1d;
	border: 4px ridge rgb(137 87 38);
}

#bords .afficherCacher {
	margin-top: 0.5em;
    margin-bottom: -2.5em;
}

#bords .pages .afficherCacher {
	margin: auto;
}

#coffre form {
	overflow: auto;
}

#couvercle {	
	height: 37em;
	width: calc(80% - 10em);
	background: linear-gradient(0deg, rgba(43,23,4,0.5) 12%, rgba(255,248,0,0.2) 55%, rgba(43,23,4,0.5) 87%), var(--boisPorte);
	position: absolute;
	left: -40%;
	top: -3em;
	box-shadow: 8px 4px 10px 10px #000, inset -6px 4px 8px #853127b8, inset 16px 0px 8px #000;
	border-radius: 6px;
	border: 8px ridge rgb(137 87 38);
	display: flex;
    align-items: center;
    justify-content: center;
	transform: rotate(2deg);
	z-index: 6;
	transition: all linear 0.5s;
}
.remis #couvercle {	
	transform: rotate(0deg);
	left: calc(50% - calc(40% - 5em) - 8px);
	top: -8px;
	box-shadow: 8px 4px 10px 10px #000, inset -6px 4px 8px #853127b8, inset 3px 0px 8px #000;
}
	

#couvercle div {
	font-size: 6em;
    margin-left: 30%;
    color: #1d06033d;
	-webkit-text-stroke: 2px #3b1e18;
	font-family: "Charm", cursive;
	opacity: 0.5;
	transition: all linear 0.5s;
}
.remis #couvercle div {
    margin-left: 0;
}

#interieurCoffre {
	background: rgba(0,0,0,0.6);
	border-radius: 10px;
	height: 30em;
	margin: auto;
	box-shadow: inset 0 2px 10px 20px #000;
	border: 4px solid rgb(103 35 17);
	display: flex;
	justify-content: center;
}

/*========= Livre histoire ===========*/
	
.livreH {
	position: relative;
	width: 50%; 
	max-width: 250px;
	height: 70%;
	left: 10%;
	top: 12%;
	perspective: 1000px;
	transform-style: preserve-3d;
}

.couvertureLivreH, .dosLivreH, .livreHReliure,
.couvertureLivreH > div, .dosLivreH > div, .livreHReliure > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    max-width: 830px;
	height: 100%;
	transform-style: preserve-3d;
}

/* Couverture */

.couvertureLivreH {
	transform: rotateY(-34deg) translateZ(8px);
	z-index: 100;
	transition: all 0.8s ease, z-index 0.6s;
}

.couvertureLivreH .devantCouvertureH {
	background-color: #eee;
	backface-visibility: hidden;
	background-image: var(--dragonsOr), var(--cuir);
    background-size: 450px, 100%;
	background-position: center;
	cursor: default;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	transform: translateZ(2px);
}

.livreH.familiers .couvertureLivreH .devantCouvertureH {
	background-image: var(--dragonsOr), var(--cuirVert);
}

.livreH .signets {
	position: absolute;
	z-index: 10;
	height: auto;
	transform: translateZ(2px);
	display: flex;
	justify-content: space-evenly;
}
.livreH.ouvert.persoL .signets {
    top: -10px;
}
.livreH.ouvert .signets > div {
    margin: 0 10px;
}

.livreH .signets div {
	background: #9b93ad;
    padding-top: 10px;
    height: 60px;
    width: 35px;
    text-align: center;
    top: -2px;
    position: relative;
    box-shadow: 0 2px 4px 2px rgba(0, 0, 0, 0.5);
    border-radius: 0 0 20% 20%;
	border: 1px solid #fff;
	border-top-width: 0;
	font-weight: bold;
	font-size: 0.8em;
	cursor: pointer;
}
#s_obligationsLiens {
	background: #c9976b;
}
#s_histoire {
	background: #6897b3;
}
#s_histoireL {
    background: #5f9f5f;
}
#s_journal {
	background: silver;
}

#s_familiers {
	background: #c9976b;
}
#s_formesAnimales {
	background: #86b186;
}
.livreH .signets div:hover {
    color: #fff;	
}

.couvertureLivreH h3 {
	position: absolute; 
	z-index: 10;
	top: 30%; 
	width: 100%; 
	display: flex;
	justify-content: center;
	text-align: center;
	color: #ffe4b0;
    text-shadow: -2px 3px 2px #5d2300;
	font-size: 1.8em;
	cursor: pointer;
}

.livreH.familiers .couvertureLivreH h3 {
	text-shadow: -2px 3px 2px #216722;
}

.couvertureLivreH img {
	height: 100%; width: 100%; opacity: 0.2;
}

.couvertureLivreH .derriereCouvertureH {
	background: #fffbec;
	transform: rotateY(180deg) translateZ(2px);
}

/* Dos */

.dosLivreH {
	transform: rotateY(-15deg) translateZ(-8px);
}

.couvertureLivreH, .dosLivreH {
	transform-origin: 0% 100%;
}

.dosLivreH .devantDosH {
	background: #fffbec;
	transform: translateZ(2px);
}

.dosLivreH .derriereDosH {
	background: #fffbec;
	transform: translateZ(-2px);
}

/* Reliure */
.livreHReliure {
	transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
	width: 5px;
	z-index: 0;
}

.livreHReliure .reliure1 {
	background: #ad774a;
	transform: translateZ(2px);
}

.livreHReliure .reliure2 {
	background: #4e351f;
	transform: translateZ(-2px);
}

/* pages */

.livreH ul, .livreH li {
	margin: 0;
	padding: 0;	
	list-style: none;
}

.livreH .pages, .livreH .pages > li {
	position: absolute;
	top: 0;
	left: 0;
	transform-style: preserve-3d;
}

.livreH .pages {
	width: 100%;
	height: 98%;
	top: 1%;
	left: 3%;
	z-index: 10;
}

.livreH .pages li {
	overflow: hidden;
}

.livreH .pages > li {
	width: 100%;
	height: 100%;
	transform-origin: left center;
	transition-property: transform;
	transition-timing-function: ease;
	background: linear-gradient(to right, #e1ddd8 0%, #fffbf6 100%);
	box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
	border-radius: 0px 5px 5px 0px;
}

.livreH .texteLivreH {
	transform: rotateY(-34deg);
	transition-duration: 0.5s;
}
.livreH .texteLivreH > div {
	padding: 10px;
}
.livreH .texteLivreH div h3 {
	margin-bottom: 1em;
	color: green;
}

.texteLivreH .imgLivre img {
	float: left; 
	margin: 0 10px 10px 0; 
	max-width: 40%; max-height: 200px;
}

.livreH.familiers .consigne {
	margin: 1em 0;
}
.livreH.familiers .onoff {
	margin-bottom: 1em;
}
.livreH.familiers hr {
	margin: 1em 0;
}


.livreH .sommaireLivreH {
	transform: rotateY(-36deg);
	transition-duration: 0.6s;
}

.livreH .sommaireLivreH > div:not(.signets) {
	text-align: center;
	transition: opacity linear 1s;
	opacity: 0;
	padding: 10px;
	transform: rotateY(180deg);
}

.livreH .sommaireLivreH .signets {
	transform: rotateY(180deg);
	flex-direction: row;
}

#sommairePerso li:not(.explication), #sommaireFamiliers li:first-child:not(.explication) {
	cursor: pointer;
}
#sommairePerso li:not(.explication):hover, #sommaireFamiliers li:first-child:not(.explication):hover {
	color: var(--violetLienHover);
}

.livreH .pages > li:nth-child(3) {
	transform: rotateY(-28deg);
	transition-duration: 0.6s;
}

.livreH .pages > li:nth-child(4) {
	transform: rotateY(-30deg);
	transition-duration: 0.6s;
}

.livreH .pages > li:nth-child(5) {
	transform: rotateY(-32deg);
	transition-duration: 0.4s;
}

/* OUVERTURE LIVRE */
.livreH.ouvert {
	perspective: none;
	transform-style: flat;
	/*margin-top: -30em;*/
	top: auto;
	/*left: 30%;*/
	height: fit-content;
	width: fit-content;
	min-width: 50vw;
	max-width: 90vw;
	min-height: 30em;
    z-index: 10;
}

.livreH.ouvert .couvertureLivreH {
	transform: rotateY(-170deg) translateZ(0);
	z-index: 0;
	width: calc(80% + 1em);
}

.livreH.ouvert .pages {
	width: 100%;
    max-width: 800px;
	min-height: 30em;
	top: 0%;
	left: 0%;
	z-index: 10;
	position: relative;
}

.livreH.ouvert .texteLivreH {
	transform: rotateY(-16deg);
	transition-duration: 1.4s;
	position: relative;
	min-height: 30em;	
	font-size: 1em;
	padding: 1em 0.5em;
	border-left: 2px solid #45312e4d;
	overflow-y: auto;
}

.livreH.ouvert .sommaireLivreH {
	transform: rotateY(-165deg);
	transition-duration: 1.2s;
	width: 80%;
}
.livreH.ouvert .sommaireLivreH .signets {
	position: relative;
}

.livreH.ouvert .sommaireLivreH > div:not(.signets) {
	opacity: 1;
	display: flex;
    flex-direction: column;
    justify-content: center;
}

.livreH.ouvert .sommaireLivreH div ul {
	margin-top: 2em;
}
.livreH.ouvert .sommaireLivreH div li {
	display: block;
}

.livreH.ouvert > .pages > li:nth-child(3) {
	transform: rotateY(-4deg);
	transition-duration: 1.5s;
}

.livreH.ouvert > .pages > li:nth-child(4) {
	transform: rotateY(-8deg);
	transition-duration: 1.8s;
}

.livreH.ouvert > .pages > li:nth-child(5) {
	transform: rotateY(-12deg);
	transition-duration: 1.6s;
}


@media (max-width: 768px) {
    .feuille2, .noRotate {
        transform: rotate(0);
    }

	.portrait2, .postItDroiteFeuille {
		transform: rotate(0);
		margin: 0;
		float: none;
		text-align: center;
		box-shadow: none;
		border: none;
		padding: 0;
	}

	.portrait2 {
		border: 1px solid #ad8a75;
		width: fit-content;
		height: fit-content;
		margin: auto 10px auto 0;
        float: left;
	}

    .postItDroiteFeuille {
        text-align: left;
    }

    .postItDroiteFeuille b.vert {
        font-weight: normal;
    }

	.portrait img, .portrait2 img {	
		max-width: 150px;
		max-height: 150px;
	}

	.postItDroiteStats {
		float: none;
		transform: rotate(0);
		width: fit-content;
		margin: 1em auto;
		box-shadow: none;
		background: none;
	}

	.postItDroiteStats  .boisStats {
		display: none;
	}
	.postItDroiteStats > div:not(.boisStats) {
		border: none;
		padding: 0;
	}

	.postItDroiteStats > div:not(.boisStats) div:not(.nomStat) {
		display: none;
	}

    .nomStat {
        margin-bottom: 0.4em;
    }

    .nomStat:last-child {
        margin-bottom: 0;
    }

	.postItDroiteFeuille, .postItDroiteStats, .listePerso {
		font-size: 1em;
	}

	.sousMain .stats {
		position: absolute;
		bottom: 0;
		opacity: 0.2;
	}

    .bureau #notes #notesTitre {
        font-size: 1.5em;
        border-bottom-width: 4px;
    }

    .bureau #equipement #iconeEquipement {
        width: 60px;
        height: 62.5px;
        background-size: 60px 62.5px;
    }

    .bureau .encart .interieurListe {
        font-size: 1em;
    }

    .iconeCompteur {
        width: 20px;
        height: 20px;
        background-size: 100%;
    }

    .bureau .encart input, .bureau .encart button {
        padding: 1px;
    }

    .listePerso.competences {
        margin: auto;
    }
    .listePerso.competences ul {
        max-height: 150px;
        overflow: auto;
        display: block;
    }
    .listePerso#aataml {
        width: 95%;
        margin: 1em auto 0;
    }

    #gererCompteurs {
        overflow: auto;
    }

    .tapis {
        padding: 2em 0.5em;
    }

    #afficherSort {
        right: auto;
        left: 50%;
        transform: translate(-50%, 0);
    }

    .tabouretLivreSorts {
        width: 100%;
        max-width: 100%;
        padding: 10px;
        border-radius: 3em;
        border-width: 0 4px;
    }

    .chapitresLivre, .detailSorts {
        width: auto;
        float: none;
        margin: auto;
        min-height: auto;
    }

    .livre section:after {
        background: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 46% 46%, rgb(207 207 207 / 4%) 49%, rgb(0 0 0 / 37%) 50%, rgba(0, 0, 0, 0.5) 51%, rgba(0, 0, 0, 0.2) 52%, transparent 100%);
    }

    .livre section article {
        padding: 3em 1em;
    }

    #bords {
        padding: 3em 1em 3em 0.2em;
    }

    .livreH.ouvert .sommaireLivreH .signets {
        position: absolute;
    }
    .livreH.ouvert .signets > div {
        margin: 0 10px;
    }
}


.grandeImage {
	position: fixed;
	z-index: 10;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: calc(90% - 20px);
	max-height: calc(90vh - 20px);
	background: rgba(0,0,0,0.8);
	text-align: center;
	padding: 20px;
}

.grandeImage img {
	max-height: calc(89vh - 20px);
	max-width: calc(95% - 20px);
	object-fit: contain;
}

.grandeImage .fermer {
	cursor: pointer;
	color: var(--rougeDoux);
	position: absolute;
	right: 10px;
	top: 10px;
	text-shadow: 0 0 4px #fff;
	z-index: 10;
}


/******** ENIGMES *************/


#page.pageEnigme {
	background: var(--parquetDecore);
	background-size: 400px;
}

#page.pageEnigme .texteMur {
	border-image-source : var(--boisBureau);
	background: url("/static/img/site/bg/cuir/cuirClair.jpg");
	color: #532808;
}

#page.pageEnigme .texteMur:before, #page.pageEnigme .texteMur:after {
	display: none;
}

.puzzle {
	display: flex; 
	justify-content: center;
}
.puzzle .konvajs-content {
	border: 1px solid #000;
	cursor: pointer;
}

.gemmes {
	position: relative;
}

.gemmes.choix, .gemmes.choisies, .gemmes.ancien, .gemmes.mj {
    border-radius: 10px;
    padding: 10px;
    padding-left: 2em;
    margin: 2em auto;
    background: var(--boisHorizontalClair) center center;
    width: auto;
    max-width: 800px;
	box-shadow: 0 0 20px 30px rgb(219 205 192 / 45%), 0 -1px 6px rgb(53 30 21 / 21%), inset 0 0 1px 1px rgb(139 113 91 / 60%);
}

.gemmes.choix > div, .gemmes.choisies, .gemmes.ancien, .gemmes.mj {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.gemmes.choix img {
    width: 45px;
    box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.5);
    padding: 4px;
    cursor: pointer;
}
.gemmes.choisies img, .gemmes.ancien img, .gemmes.mj img {
    width: 55px;
    box-shadow: 0 1px 4px rgb(61 45 26);
    border-radius: 50%;
}

.gemmes .gemme {
    width: 55px;
    height: auto;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px;
    position: relative;
}

.gemme.rouge {
	background-image: url("/static/img/site/gemmes/gemmeRouge.png");
}
.gemme.bleue {
	background-image: url("/static/img/site/gemmes/gemmeBleue.png");
}
.gemme.violette {
	background-image: url("/static/img/site/gemmes/gemmeViolette.png");
}
.gemme.jaune {
	background-image: url("/static/img/site/gemmes/gemmeJaune.png");
}
.gemme.verte {
	background-image: url("/static/img/site/gemmes/gemmeVerte.png");
}
.gemme.cyan {
	background-image: url("/static/img/site/gemmes/gemmeCyan.png");
}
.gemme.orange {
	background-image: url("/static/img/site/gemmes/gemmeOrange.png");
}
.gemme.blanche {
	background-image: url("/static/img/site/gemmes/gemmeBlanche.png");
}
.gemme.noire {
	background-image: url("/static/img/site/gemmes/gemmeNoire.png");
}

.numProp {
    color: #fff;
    font-weight: bold;
    box-shadow: 1px 0 4px rgba(57, 44, 29, 0.3), inset 2px 1px 4px #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    border-radius: 10px 0 0 10px;
    width: 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    text-shadow: 1px 1px 1px #372415;
    font-size: 1.2em;
    background: rgb(213 195 175 / 30%);
}

.billeOk, .billeMalPlacee, .billeKo {
    background-image: var(--billeVerte);
    background-size: 14px 13px;
    background-repeat: no-repeat;
    position: absolute;
    left: 22px;
    bottom: -14px;
    width: 14px;
    height: 13px;
}

.billeMalPlacee {
	background-image: var(--billeRouge);
}

.billeKo {
	background-image: var(--billeNoire);
}

.solution {
	padding: 10px;
	background: rgba(255,255,255,0.45);
	border-radius: 6px;
	box-shadow: 0 -1px 4px rgba(0,0,0,0.6);
	width: fit-content;
}


/* BOT */


.bot {
	border-radius: 10px 0px 0 10px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 2px 6px #000;
	border: 1px dashed #a37a65;
	display: inline-block;
	margin: auto;
	width: 500px;
	max-width: 96%;
	color: var(--brunFonce);
}
.bot.allume {
	background: #fff;
	animation: neonPulseBox 1.5s ease-in-out infinite;
}
.pastilleBot {
	display: inline-block;
	margin-right: 6px;
	background: #fff;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1px solid #457da3;
	animation: neonPulseBox 1.5s ease-in-out infinite;
}

.botBot.allume {
	animation: neonPulseClair 2s ease-in-out infinite;
}

.bot button, .infosVisite button, #moduleImages button {
	background: #feffff;
    border: 1px solid #c0ddd4;
    display: inline-block;
    border-radius: 4px;
    padding: 3px 10px;
    box-shadow: inset 0 1px 8px #dffbff8f, inset 0 -1px 3px #d7ebff, 0 1px 2px rgb(32 86 87 / 14%);
    color: #00314f;
    transition: all linear 0.1s;
	cursor: pointer;
}
.bot button:hover:not(:disabled), .infosVisite button:hover, #moduleImages button:hover {
	background: #49848b;
    border: 1px solid #e1fff4;
    box-shadow: inset 0 1px 8px #0b2327, inset 0 -1px 3px #b5cce3, 0 -1px 2px rgb(32 86 87 / 14%);
    color: #f3faff;
}

.bot button:disabled {
	background: #d7d7d7;
    color: #818181;
    box-shadow: none;
	cursor: default;
}

.portraitBot {
	float: left;
	border-radius: 50%;
    overflow: hidden;
	margin: 10px;
	height: 100px;
}

.portraitBot img {
	max-width: 100px;
}

.choixBot {
	display: inline-block; margin: 6px 16px;
}

.botUtilisateur, .botBot {
	max-width: 96%;
	margin-left: auto !important;
	margin-right: auto !important;
}

.botUtilisateur {
	text-align: right;
	color: var(--brunMoyen);
	font-style: italic;
}

.botBot {
	text-align: left;
	color: #357b91;
}

.bot a, .infosVisite a {
	border-bottom: 1px dotted;
	color: var(--bleuFonce);
}
.bot a:hover, .infosVisite a:hover {
	color: var(--framboise);
}

.botBot li {
	margin-bottom: 0.6em;
}

.botBot hr {
	border-color: var(--couleurBleuClair);
	margin: 1.5em 5%;
}

#botSite {
	position: fixed;
	bottom: 20px;
	right: 10px;
	z-index: 10;
	text-align: center;
	max-width: 90%;
}

#botSite .bot {
	margin-right: 0;
	max-height: 90vh;
}

#botSite.botOuvert .bot {
	overflow: auto;
}

.bot .effetsSonoresMj .iconeCateg {
	margin-right: 4px;
}

.bot .bi-leaf {
	color: green;
}
.bot .bi-magic {
	color: #7000ff;
}
.bot .bi-fire {
	color: #e76d00;
}
.bot .bi-claude {
	color: #c1817d;
}
.bot .bi-droplet {
	color: #007dc9;
}
.bot .bi-gitlab {
	color: #c96922;
}
.bot .bi-wind {
	color: #568fab;
}
.bot .gi-anvil {
	font-size: 1.25em;
    color: #797979;
}
.bot .explication > .bi-star-fill {
	color: #fff02a;
    text-shadow: -1px -1px 1px #9d6e17, 1px 1px 1px #6f4d10;
    margin-right: 8px;
}

.bot .categEffetSonore {
	max-height: 250px;
	overflow: auto;
	margin: 0 auto 1.5em;
}

.bot .etiquette {
	background: #f8fdff;
    border-radius: 4px;
    box-shadow: inset 0 -1px 2px #6e95818a;
    padding: 2px 6px;
    border: solid 1px rgba(0, 0, 0, 0.2);
    margin: 3px;
    color: #414b4f;
}

.bot .etiquette button.light {
	border: none;
	box-shadow: none;
    padding: 1px 4px;
}

@keyframes doubleBounce {
	/* rebond dure 4 secondes */
  0%   { transform: translateY(0); }
  4%   { transform: translateY(-12px); }
  9%  { transform: translateY(0); }
  12%  { transform: translateY(-6px); }
  16%  { transform: translateY(0); }

  /* Phase d'inactivité : plus de mouvement jusqu'à 100% */
  100% { transform: translateY(0); }
}

@keyframes rgbFlow {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

#iconeBot {
	font-size: 3em;
	color: #c9181f;
	text-shadow: -1px 2px 4px #000, 1px -2px 1px #ffb9b9;
	cursor: pointer;
	opacity: 0.8;
	transition: all linear 0.2s;
	padding-top: 1em; /* pour qu'elle ne disparaisse pas quand elle bondit*/
	animation: doubleBounce 11.6s ease-in-out infinite;
	animation-delay: 10s; /* rebond commence après x secondes */
  	animation-fill-mode: both;
  	animation-iteration-count: infinite;
  	will-change: transform;
}
#iconeBot .bi {
	margin: 10px;
	animation: rgbFlow 8s linear infinite;
	animation-delay: 0s; /* commence dès le départ */
  	animation-fill-mode: both;
  	animation-iteration-count: infinite;
  	will-change: filter;
}
#iconeBot:hover {
	opacity: 0.9;
	font-size: 4em;
	transform: translateY(0); /* neutralise le bond sur hover */
	animation-play-state: paused;
}
#iconeBot:hover .bi {
	animation-play-state: paused;
}

@keyframes neonPulse {
  0%, 100% {
    text-shadow: 0 0 4px #00f0ff,
                 0 0 6px #00f0ff,
                 0 0 12px #00f0ff,
                 0 0 24px #00b8ff;
  }
  50% {
    text-shadow: 0 0 10px #00ffff,
                 0 0 20px #00ffff,
                 0 0 30px #00ffff,
                 0 0 50px #00e0ff;
  }
}

@keyframes neonPulseBox {
  0%, 100% { box-shadow: 0 0 4px #66d9e8, 0 0 6px #66d9e8, 0 0 12px #66d9e8, 0 0 24px #3399cc; }
  50% { box-shadow: 0 0 10px #66ffff, 0 0 20px #66ffff, 0 0 30px #66ffff, 0 0 50px #55cce0; }
}

#botSite.allume .bi {
	color: lightcyan;
	text-shadow: 0 0 4px #00f0ff,
               0 0 6px #00f0ff,
               0 0 12px #00f0ff,
               0 0 24px #00b8ff;
	animation: neonPulse 1.5s ease-in-out infinite;
}

#botSite.botOuvert #iconeBot {
	display: none;
}

#botSite .bot {
	display: none;
}
#botSite.botOuvert .bot {
	display: block;
}

.bot #moduleCalculatrice textarea {
	display: block;
	width: 80%;
	margin: auto;
	border: 1px solid #c0ddd4;
}

.bot #moduleCalculatrice input:disabled {
	background: #f4feff;
    border: 1px solid #c0ddd4;
	color: #00314f;
	text-align: right;
}

.bot #moduleCalculatrice .botBot {
	display: block;
	margin: 0.5em auto 0.6em;
    text-align: center;
}

/*** Visite guidée ***/

.zoneVisible {
	position: absolute;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    border: 2px dashed #208920;
    z-index: 9999;
    pointer-events: none;
    padding: 6px;
    margin-left: -5px;
    margin-top: -5px;
}

.infosVisite {
	position: absolute;
	background: #fffefdfa;
	padding: 1rem;
	border-radius: 6px;
	box-shadow: 0 3px 30px #2121214d;
	z-index: 10000;
	max-width: min(600px, 70%);
	margin-top: 8px;
}

.infosVisite.fixe {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 3px 6px 9999px #212121b3;
}

.infosVisite h3 {
    margin: 0.5em auto 1em;
	color: #005300;
}

.navVisite {
	text-align: center;
	border-top: 1px dotted green;
}

.numEtape {
	display: inline-block;
	margin: auto 6px;
	cursor: pointer;
	font-style: normal;
}

.numEtape.passe {
	color: silver;
	font-style: italic;
}

.numEtape.desactivee {
	color: #e7e7e7;
	cursor: default;
	text-decoration: line-through;
}

.numEtape.active {
	color: #0089dd;
    font-weight: bold;
    cursor: default;
    font-size: 1.2em;
}



/* Swagger ui */
#swagger-ui-container .scheme-container {
	display: none;
}

#swagger-ui-container .swagger-ui .opblock.opblock-get {
	background: #eaf5ffc7;
}
#swagger-ui-container .swagger-ui .opblock.opblock-post {
	background: #e5f7efd6;
}

#swagger-ui-container .swagger-ui .opblock.opblock-delete {
	background: #fff2f2b5;
}

#swagger-ui-container .swagger-ui .info .title {
	display: none;
}



@media (max-width: 768px) {
    nav a, nav > div {
        background: none;
        box-shadow: none;
        border: none;
    }
}


.invisible {
    display: none !important;
}
.cache {visibility: hidden !important;}