* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
@font-face {
    font-family: 'HAN';
    src: url(../fon/FairfaxSerif.ttf) format('truetype');

}
@font-face {
    font-family: 'HUN';
    src: url(../fon/type_right.ttf) format('truetype');

}

/*--888'Y88   e88 88e   Y8b Y8b Y888P 888     e   e     --*/
/*--888 ,'Y  d888 888b   Y8b Y8b Y8P  888    d8b d8b    --*/
/*--888C8   C8888 8888D   Y8b Y8b Y   888   e Y8b Y8b   --*/
/*--888 "    Y888 888P     Y8b Y8b    888  d8b Y8b Y8b  --*/
/*--888       "88 88"       Y8P Y     888 d888b Y8b Y8b --*/

body, h1, h2, p, a {
    filter: blur(0.2px); /* Ajustez la valeur pour plus ou moins de flou */
    text-shadow:00 25px #41306d51, 00 20px #41306d3a, 00 15px #41306d30, 00 10px #41306d21, 00 5px #41306d0b;
}
body {
    font-family: 'HAN';
    font-size: 14px;
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: #000000;
    color: #fffbee;
}
img{
    width: 110px;
}
footer {
    text-align: center;
    padding: 0.5em;
}
h1 {
    font-family: 'HAN';
    font-size: 82px;
}
h2 {
    font-family: 'HAN';
}
header, nav, aside, main {
/*     background-color: #000000b8; */
    text-align: center;
/*     border-style: dotted; */
    border-width: 1px;
}
header {
    padding: 1em;
    width: auto;
    display: flex;
    justify-content: center;
}
nav {
    flex-direction: column;
    display: flex;
    padding: 0.5em;
    width: 100%;
    font-size: 12px;
}
aside {
    font-size: 0.8em;
    padding: 0.5em;
    width: 100%;
    text-align: left;
    overflow: hidden;
}
main {
    padding: 20px;
    width: 100%;
    max-width: 800px; /* Empêche le contenu d'être trop large */
    display: flex;
    flex-direction: column;
}
a {
    border-style: hidden;
    color: #fffbee;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 1.5px;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s;
}

/*--888 88b,   e88 88e   Y8b Y8P        888 88b,   e88 88e   Y8b Y8P        888 88b,   e88 88e   Y8b Y8P--*/
/*--888 88P'  d888 888b   Y8b Y         888 88P'  d888 888b   Y8b Y         888 88P'  d888 888b   Y8b Y --*/
/*--888 8K   C8888 8888D   Y8b          888 8K   C8888 8888D   Y8b          888 8K   C8888 8888D   Y8b  --*/
/*--888 88b,  Y888 888P   e Y8b         888 88b,  Y888 888P   e Y8b         888 88b,  Y888 888P   e Y8b --*/
/*--888 88P'   "88 88"   d8b Y8b        888 88P'   "88 88"   d8b Y8b        888 88P'   "88 88"   d8b Y8b--*/

.dialoL, .dialoR {

    padding: 8px;
    margin: -3px ;
    height: auto;
    padding-left: 13px;
    padding-right: 13px;
    border-color: #fff;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px solid;
    max-width: 310px;
    clear: both;
    border-style: dotted;
    border-radius: 2px;
}
.dialoL {
    float: left;
}

.dialoR {
    float : right;
}

.dialo00, .dialoN {
    margin-left: auto;
    margin-right: auto;
    margin-top :4px;
    max-width: 355px;
    text-align: center;
    padding: 1px;
}

.dialoN {
    height: auto;
    clear: both;
    border: 1px solid;
    border-style: dotted;
    border-radius: 2px;
    flex-direction: column;
    padding-left: 13px;
    padding-right: 13px;
}

.dialoH {
    padding :10px;
    max-width: auto;
    height: auto;
    clear: both;
    border: 1px solid;
    border-style: dotted;
    border-radius: 2px;
    flex-direction: column;
    padding-left: 13px;
    padding-right: 13px;
}

.dialo00 {
    border : hidden;
    clear: both;
}

.papier {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    font-size: 11px;
    justify-content:center;
}
.articles {
    padding: 8px;
    margin: 3px ;
    border-color: #fff;
    height: fit-content;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px;
    border-style: dotted;
    max-width: 100px;
}

.exeption {
    padding: 8px;
    margin: 3px ;
    border-color: #fff;
    height: fit-content;
    display: flex;
    flex-direction: column;
    text-align: center;
    border: 1px;
    border-style: dotted;
    max-width: 100px;
}

.credi{
    font-size: 5px;
}

.soft{
    color: #80F527;
}

a:hover {
    color: #fffbee;
    border-color: #fffbee;
}
a:visited {
    color: rgb(255, 255, 255);
    transition: color 0.2s, text-shadow 0.2s;
}
a:link {
    color: rgb(98, 96, 92);
    transition: color 0.2s, text-shadow 0.2s;
}
a:hover {
    color: rgb(255, 255, 255);
}
a:active {
    color: rgb(255, 0, 0);
    border-color: #ff0000;
}
ul{
    list-style-type: none;
}

.section {
    display: none;
}
.section.active {
    display: block;
}

.two-column-list {
    text-align: center;
    padding: 20px;
}
.two-column-list ul {
    display: grid;
    font-size: 12px;
    grid-template-columns: repeat(2, 1fr); /* Deux colonnes */
    gap: 7px; /* Espacement entre les colonnes et les lignes */
    list-style-type: none; /* Supprime les puces */
    padding: 0;
    margin: 0;
}

.tree-column-list {
    text-align: center;
    padding: 20px;
}
.tree-column-list ul {
    display: grid;
    font-size: 12px;
    grid-template-columns: repeat(3, 1fr); /* Deux colonnes */
    gap: 5px; /* Espacement entre les colonnes et les lignes */
    list-style-type: none; /* Supprime les puces */
    padding: 0;
    margin: 0;
}

textarea {
    resize: none; /* Désactive le redimensionnement */
    height: 150px; /* Hauteur fixe */
}

@media screen and (min-width: 768px) {
    body {
        flex-direction: row;
        flex-wrap: wrap; /* Permet de passer à la ligne si besoin */
        justify-content: center; /* Centre le contenu */
    }
    header {
        width: 100%; /* Garde le header pleine largeur */
    }
    nav {
        flex: 1; /* Prend 1 partie de l'espace */
        min-width: 200px; /* Pour éviter qu'il devienne trop petit */
    }
    main {
        flex: 2; /* Prend 2 parties de l'espace */
    }
    aside {
        flex: 1; /* Prend 1 partie de l'espace */
        min-width: 150px; /* Pour éviter qu'il devienne trop petit */
    }
    footer {
        width: 100%; /* Garde le footer pleine largeur */
    }
}

/* =============================
   RESPONSIVE DESIGN (GRAND ÉCRAN)
   ============================= */
@media screen and (min-width: 1024px) {
    body {
        max-width: 1200px;
        margin: auto; /* Centre le site */
    }
}

/* Animation multicolore */
@keyframes rainbow {
    0% { color: red; }
    16.6% { color: orange; }
    33.3% { color: yellow; }
    50% { color: lime; }
    66.6% { color: cyan; }
    83.3% { color: violet; }
    100% { color: red; } /* boucle vers le début */
}

.multicolor
{
    animation: rainbow 1s infinite; /* Change de couleur rapidement */
    text-decoration: none; /* Supprime le soulignement */
    border: 1px solid transparent;
    transition: border-color 0.3s, color 0.3s;
}

h2.multicolor {
    animation: rainbow 1s infinite; /* Change de couleur rapidement */
    text-decoration: none; /* Supprime le soulignement */
    border: 1px solid transparent;
    padding: 2px 4px;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s;
}
a.multicolor:hover {
    animation: rainbow 0.2s infinite; /* Change de couleur rapidement */
    text-decoration: none; /* Supprime le soulignement */
    border: 1px solid transparent;
    padding: 2px 4px;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s;
}

#outputHtml {
    white-space: pre-wrap; /* Conserve les retours à la ligne et les espaces */
    word-wrap: break-word; /* Coupe les mots si nécessaire pour éviter les débordements */
    font-family: Arial, sans-serif; /* Facultatif : personnalisez la police */
    padding: 10px; /* Facultatif : ajoutez un peu d'espace autour du texte */
    background-color: #000000; /* Facultatif : ajoutez un fond pour différencier l'output */
}

/*--SORCELLERIE--*/
@keyframes sorcellerie {
    0%   { color: #91b762; }  /* Vert de base - herbe enchantée */
    15%  { color: #7da34f; }  /* Vert plus terne - forêt sombre */
    30%  { color: #a6d679; }  /* Vert clair lumineux - lueur magique */
    45%  { color: #728c4f; }  /* Vert mousseux - vieux grimoire */
    60%  { color: #c5e99b; }  /* Vert alchimique - potion fraîche */
    75%  { color: #849e5d; }  /* Vert marécageux - toxicité douce */
    90%  { color: #91b762; }  /* Retour au vert mystique */
    100% { color: #91b762; }
}
@keyframes sacasouris {
    0%   { color: #80f5f5; }
    15%  { color: #9bdeff; }
    30%  { color: #acecff; }
    45%  { color: #c0fcff; }
    60%  { color: #94f5ff; }
    75%  { color: #b2edff; }
    90%  { color: #97d3ff; }
    100% { color: #89ffff; }
}

/* 888 88e      e Y8b     88P'888'Y88 888 888 */
/* 888 888D    d8b Y8b    P'  888  'Y 888 888 */
/* 888 88"    d888b Y8b       888     8888888 */
/* 888       d888888888b      888     888 888 */
/* 888      d8888888b Y8b     888     888 888 */

.path {
    background: linear-gradient(90deg, #9fc 0%, #006 1%);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
  }
  
.path p{
    background: linear-gradient(180deg, #9fc 0%, #7078ae 5%);
    color: #006;
    }
  
.path a {
    color: #006;
    text-decoration: none;
    padding: 2px 4px;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s;
    background: #eefeff78;
}
.path a:hover {
    color: #9fc;
}
.path a:link {
/*    color: #80f5f5;*/
    transition: color 0.2s, text-shadow 0.2s;
}
.path a:visited {
/*    color: #80f5f5;*/
    transition: color 0.2s, text-shadow 0.2s;
}
.path a:active {
    color: rgb(255, 255, 255);
    border-color: #9fc;
}

/*-- dP"8     e Y8b       e88'Y88       e Y8b        dP"8   e88 88e   8888 8888 888 88e  888  dP"8 --*/
/*--C8b Y    d8b Y8b     d888  'Y      d8b Y8b      C8b Y  d888 888b  8888 8888 888 888D 888 C8b Y --*/
/*-- Y8b    d888b Y8b   C8888         d888b Y8b      Y8b  C8888 8888D 8888 8888 888 88"  888  Y8b  --*/
/*--b Y8D  d888888888b   Y888  ,d    d888888888b    b Y8D  Y888 888P  8888 8888 888 b,   888 b Y8D --*/
/*--8edP  d8888888b Y8b   "88,d88   d8888888b Y8b   8edP    "88 88"   'Y88 88P' 888 88b, 888 8edP  --*/

.sac h1,
.sac h2,
.sac h3,
.sac p {
    filter: blur(0.4px); /* Ajustez la valeur pour plus ou moins de flou */
    text-shadow:00 25px #41306d51, 00 20px #41306d3a, 00 15px #41306d30, 00 10px #41306d21, 00 5px #41306d0b;
    transition: border-color 0.3s, color 0.3s ;
    animation: sacasouris 60s infinite;
    text-decoration: none;
}
.sac img{
    width: 110px;
}

.sac h1 {
    font-size: 82px;
}
.sac h2 {
    font-size: 12px;
    padding-top: 5px;
}

.sac h3 {
    font-size: 11px;
    padding-bottom: 5px;
}
.sac a {
    color: #394747;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 2px 4px;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s;
}
.sac a:hover {
    color: #ff35f2;
}
.sac a:link {
/*    color: #80f5f5;*/
    transition: color 0.2s, text-shadow 0.2s;
}
.sac a:visited {
/*    color: #80f5f5;*/
    transition: color 0.2s, text-shadow 0.2s;
}
.sac a:hover {
    transition: border-color 0.2s, color 0.2s ;
    /*animation: sacasouris 60s infinite;*/
    border-color: #ff35f2;
}
.sac a:active {
    color: rgb(255, 0, 0);
    border-color: #ff35f2;
}

.sac strong {
    color: #ff35f2;
}
.sac strong:hover {
    color: #ff35f2;
}
.dice {
    padding: 3px 6px;
    margin: 2px;
    font-size: 12px;
    background-color: transparent;
    color: #80f5f5;
    border: 1px solid #80f5f5;
    border-radius: 4px;
    cursor: pointer;
}
.dice:hover {
    background-color: transparent;
}

/*--
--*/

/*-- dP"8   e88 88e   888 88e    e88'Y88 888'Y88 888     888     888'Y88 888 88e  888 888'Y88 888 --*/
/*--C8b Y  d888 888b  888 888D  d888  'Y 888 ,'Y 888     888     888 ,'Y 888 888D 888 888 ,'Y 888 --*/
/*-- Y8b  C8888 8888D 888 88"  C8888     888C8   888     888     888C8   888 88"  888 888C8   "8" --*/
/*--b Y8D  Y888 888P  888 b,    Y888  ,d 888 ",d 888  ,d 888  ,d 888 ",d 888 b,   888 888 ",d  e  --*/
/*--8edP    "88 88"   888 88b,   "88,d88 888,d88 888,d88 888,d88 888,d88 888 88b, 888 888,d88 "8" --*/

.prog2-body h1,
.prog2-body h2,
.prog2-body p,
.prog2-body a {
    color: #91b762;
    text-shadow: 0 10px #41306d51, 0 5px #41306d3a, 0 2px #41306d30, 0 2px #41306d21, 0 1px #41306d0b;
    animation: sorcellerie 60s infinite;
    text-decoration: none;
    transition: border-color 0.3s, color 0.3s;
}
.prog2-body a {
    color: #91b762;
    text-decoration: none;
    border: 1px solid transparent;
    padding: 2px 4px;
    display: inline-block;
    transition: border-color 0.3s, color 0.3s
}
.prog2-body a:link,
.prog2-body a:visited {
    color: #91b762;
    transition: color 0.2s, text-shadow 0.2s;
}
.prog2-body a:hover {
    color: #91b762;
    border-color: #91b762;
}
.prog2-body a:active {
    color: rgb(255, 0, 0);
    border-color: #ff0000;
}
/*----*/

/*--Libra--*/
.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 13px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: transparent;
  transition: .4s;
  border-radius: 4px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  left: 3px;
  bottom: 3px;
  background-color: #fffbee;
  transition: .2s;
  border-radius: 4px;
}
input:checked + .slider {
  background-color: #91b762;
}
input:checked + .slider:before {
  transform: translateX(16px);
}
/*----*/

/*--Dée--*/
.dice-button {
  padding: 3px 6px;
  margin: 2px;
  font-size: 12px;
  background-color: transparent;
  color: #91b762;
  border: 1px solid #91b762;
  border-radius: 4px;
  cursor: pointer;
}
.dice-button:hover {
  background-color: transparent;
}
/*----*/

/*--ITEM--*/
.item-entry input {
  margin: 1px;
  padding: 1px;
  background-color: transparent;
  color: #91b762;
  border: 1px solid #91b762;
  border-radius: 4px;
  width: calc(100% - 10px);
  font-size: 12px;
}

.item-list {
  margin-top: 1px;
}

.item-block {
  padding: 1px;
  border: 1px solid #91b762;
  border-radius: 4px;
  margin: 1px;
  background-color: transparent;
  color: #91b762;
  font-size: 12px;
  cursor: pointer;
}
/*--#f58080--*/

/*--Note--*/
textarea.note-text {
    height: 60px;
    font-size: 12px;
    padding: 5px;
    background-color: transparent;
    border-radius: 4px;
    border-color: #91b762;;
}
/*----*/

/*--Bouton--*/
button.increase,
button.decrease {
    background-color: transparent;
    color: #91b762;
    border: 1px solid #91b762;
    border-radius: 4px;
    padding: 1px 5px;
    margin: 0 4px;
    font-size: 12px;
    font-family: 'HAN';
    cursor: pointer;
    transition: all 0.2s ease;
}
button.increase:hover,
button.decrease:hover {
    background-color: transparent;
    border-color: #91b762;
}
.stat {
    display: inline-block;
    min-width: 24px;
    border: 1px solid transparent;
    border-radius: 4px;
    animation: sorcellerie 60s ease-in-out infinite;
}
.dice-button,
.item-entry input,
.item-block,
textarea.note-text,
button.increase,
button.decrease {
    animation: sorcellerie 60s ease-in-out infinite;
    transition: color 0.3s, text-shadow 0.3s;
}

/*--
--*/

/*--  e88 88e   888     888 88e     888'Y88   e88 88e   Y8b Y8b Y888P 888     e   e     --*/
/*-- d888 888b  888     888 888b    888 ,'Y  d888 888b   Y8b Y8b Y8P  888    d8b d8b    --*/
/*--C8888 8888D 888     888 8888D   888C8   C8888 8888D   Y8b Y8b Y   888   e Y8b Y8b   --*/
/*-- Y888 888P  888  ,d 888 888P    888 "    Y888 888P     Y8b Y8b    888  d8b Y8b Y8b  --*/
/*--  "88 88"   888,d88 888 88"     888       "88 88"       Y8P Y     888 d888b Y8b Y8b --*/

body.old  {
    font-family: 'HUN';
    filter: blur(0.4px); /* Applique un léger flou */
    background: linear-gradient(180deg, #18008a 0%, #000 5%);
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-attachment: fixed;
    justify-content: center;
    align-items: center;
    /*height: 100vh;*/
    text-align: center;
}

body.old,
.old h1,
.old h2,
.old p,
.old a,
.old pre {
    font-family: 'HUN';

}

.old a {
    border-style: hidden;
    color: #fffbee;
    text-decoration: none;
    padding: 1.5px;
    transition: border-color 0.3s, color 0.3s;
}
.old a:hover {
    color: #fffbee;
    border-color: #fffbee;
}
.old a:visited {
    color: rgb(255, 255, 255);
    transition: color 0.2s, text-shadow 0.2s;
}
.old a:link {
    color: rgb(98, 96, 92);
    transition: color 0.2s, text-shadow 0.2s;
}
.old a:hover {
    color: rgb(255, 255, 255);
    border-style:hidden;
}
.old a:active {
    color: rgb(255, 0, 0);
    border-color: #ff0000;
}

.window {
    background-color: rgba(0, 0, 0, 0.4);
    color: white;
    display: flex;
    flex-direction: column;
}

.old header {
    font-family: 'HUN';
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    margin-top: 15%;
    margin-bottom: 10%;
    font-size: 10px;
    cursor: pointer;
}


#boot-sequence {
white-space: pre-wrap; /* Pour afficher les sauts de ligne */
color: rgb(255, 255, 255);
overflow: hidden;
font-family: 'HUN';
font-size: 1rem;
}

#intro {
position: fixed;
width: 100%;
height: 100%;
background: #1e0079;
display: flex;
justify-content: left;
align-items: left;
z-index: 10000;
}


/*-- 888 88b,   888'Y88   e88 88e   Y8b Y8b Y888P 888     e   e     --*/
/*-- 888 88P'   888 ,'Y  d888 888b   Y8b Y8b Y8P  888    d8b d8b    --*/
/*-- 888 8K     888C8   C8888 8888D   Y8b Y8b Y   888   e Y8b Y8b   --*/
/*-- 888 88b,   888 "    Y888 888P     Y8b Y8b    888  d8b Y8b Y8b  --*/
/*-- 888 88P'   888       "88 88"       Y8P Y     888 d888b Y8b Y8b --*/