/* Importation de la police */
@import url('https://fonts.googleapis.com/css2?family=Modern+Antiqua&display=swap');

:root {
    --border-radius: 10px;
  }
  
:root,
[data-selected-theme="defaut"] {
--fond-theme: url("../illustrations/fond_theme_defaut.webp");
--illustration-connexion: url("../illustrations/action 10 avec ombres.webp");
--texture-menu: url("../illustrations/bois.jpg");
--illustration-main: url("../illustrations/affrontement 5.webp");
--bordure: 4px solid black;
--illustration-gestion: url("../illustrations/orcs.webp");
--illustration-effectif: url("../illustrations/effectif.webp");
--illustration-recrutement: url("../illustrations/recrutement.webp");
--illustration-matchs: url("../illustrations/action 4.webp");
--illustration-compte_rendu: url("../illustrations/action 3.webp");
--illustration-marchand: url("./illustrations/marchand.webp");
--illustration-entraineur: url("./illustrations/entraineur.webp");
--illustration-feuille-de-match: url("./illustrations/feuille\ de\ match.webp");
--illustration-manuel: url("./illustrations/illustration_se_connecter_2.webp");
}

[data-selected-theme="maliran"] {
--fond-theme: url("../illustrations/fond_theme_maliran.webp");
--illustration-connexion: url("../illustrations/ecran_connexion.webp");
--texture-menu: url("../illustrations/mur de chateau.webp");
--illustration-main: url("../illustrations/accueil.webp");
--bordure: 4px solid black;
--illustration-gestion: url("../illustrations/humains.webp");
--illustration-effectif: url("../illustrations/humains.webp");
--illustration-recrutement: url("../illustrations/recrutement_theme_maliran.webp");
--illustration-matchs: url("../illustrations/matchs_theme_maliran.webp");
--illustration-compte_rendu: url("../illustrations/compte_rendu_maliran.webp");
--illustration-marchand: url("./illustrations/marchand_maliran.webp");
--illustration-entraineur: url("./illustrations/entraineur maliran.webp");
}

[data-selected-theme="figenord"] {
--fond-theme: url("../illustrations/fond_theme_dark.webp");
--illustration-connexion: url("../illustrations/se_connecter_theme_dark.webp");
--texture-menu: url("../illustrations/mur de pierre.webp");
--illustration-main: url("../illustrations/accueil_theme_dark.webp");
--bordure: 4px solid #e3d09d;
--illustration-gestion: url("../illustrations/recrutement_theme_dark.webp");
--illustration-effectif: url("../illustrations/recrutement_theme_dark.webp");
--illustration-recrutement: url("../illustrations/recrutement_theme_dark.webp");
--illustration-matchs: url("../illustrations/matchs_theme_dark.webp");
--illustration-compte_rendu: url("../illustrations/compte_rendu_dark.webp");
--illustration-marchand: url("./illustrations/marchand_figenord.webp");
--illustration-entraineur: url("./illustrations/entraineur elfe.webp");
}

[data-selected-theme="kenholl"] {
--fond-theme: url("../illustrations/fond_theme_kenholl.webp");
--illustration-connexion: url("../illustrations/se_connecter_theme_kenholl.webp");
--texture-menu: url("../illustrations/mur de kilt.webp");
--illustration-main: url("../illustrations/accueil_theme_kenholl.webp");
--bordure: 4px solid rgba(255, 255, 255, 0.945);
--illustration-gestion: url("../illustrations/recrutement_theme_kenholl.webp");
--illustration-effectif: url("../illustrations/accueil_theme_kenholl.webp");
--illustration-recrutement: url("../illustrations/recrutement_theme_kenholl.webp");
--illustration-matchs: url("../illustrations/matchs_theme_kenholl.webp");
--illustration-compte_rendu: url("../illustrations/compte_rendu_kenholl.webp");
--illustration-marchand: url("./illustrations/marchand_kenholl.webp");
--illustration-entraineur: url("./illustrations/entraineur kenholl.webp");
}

[data-selected-theme="madritt"] {
--fond-theme: url("../illustrations/fond_theme_madritt.webp");
--illustration-connexion: url("../illustrations/se_connecter_theme_madritt.webp");
--texture-menu: url("../illustrations/mur de planches.webp");
--illustration-main: url("../illustrations/accueil_theme_madritt.webp");
--bordure: 4px solid black;
--illustration-gestion: url("../illustrations/orcs.webp");
--illustration-effectif: url("../illustrations/effectif_theme_madritt.webp");
--illustration-recrutement: url("../illustrations/recrutement_theme_madritt.webp");
--illustration-matchs: url("../illustrations/matchs_theme_madritt.webp");
--illustration-compte_rendu: url("../illustrations/matchs_theme_madritt.webp");
--illustration-marchand: url("./illustrations/marchand_madritt.webp");
--illustration-entraineur: url("./illustrations/entraineur orc.webp");
}

[data-selected-theme="alixerade"] {
--fond-theme: url("../illustrations/fond_theme_alixerade.webp");
--illustration-connexion: url("../illustrations/se_connecter_theme_alixerade.webp");
--texture-menu: url("../illustrations/mur de marbre.webp");
--illustration-main: url("../illustrations/accueil_theme_alixerade.webp");
--bordure: 4px solid black;
--illustration-gestion: url("../illustrations/effectif_theme_alixerade.webp");
--illustration-effectif: url("../illustrations/effectif_theme_alixerade.webp");
--illustration-recrutement: url("../illustrations/recrutement_theme_alixerade.webp");
--illustration-matchs: url("../illustrations/matchs_theme_alixerade.webp");
--illustration-compte_rendu: url("../illustrations/accueil_theme_alixerade.webp");
--illustration-marchand: url("./illustrations/marchand_alixerade.webp");
--illustration-entraineur: url("./illustrations/entraineur alixerade.webp");
}

[data-selected-theme="thurin"] {
--fond-theme: url("../illustrations/fond_theme_thurin.webp");
--illustration-connexion: url("../illustrations/se_connecter_theme_thurin.webp");
--texture-menu: url("../illustrations/mur de pierres naines.webp");
--illustration-main: url("../illustrations/accueil_theme_thurin.webp");
--bordure: 4px solid black;
--illustration-gestion: url("../illustrations/orcs.webp");
--illustration-effectif: url("../illustrations/effectif_theme_thurin.png");
--illustration-recrutement: url("../illustrations/recrutement_theme_thurin.webp");
--illustration-matchs: url("../illustrations/matchs_theme_thurin.webp");
--illustration-compte_rendu: url("../illustrations/effectif_theme_thurin.png");
--illustration-marchand: url("./illustrations/marchand_thurin.webp");
--illustration-entraineur: url("./illustrations/entraineur nain.webp");
}

[data-selected-theme="nordique"] {
--fond-theme: url("../illustrations/fond_theme_nordique.webp");
--illustration-connexion: url("../illustrations/matchs_theme_nordique.webp");
--texture-menu: url("../illustrations/mur de runes.webp");
--illustration-main: url("../illustrations/accueil_theme_nordique.webp");
--bordure: 4px solid black;
--illustration-gestion: url("../illustrations/effectif_theme_nordique.webp");
--illustration-effectif: url("../illustrations/effectif_theme_nordique.webp");
--illustration-recrutement: url("../illustrations/recrutement_theme_nordique.webp");
--illustration-matchs: url("../illustrations/matchs_theme_nordique.webp");
--illustration-compte_rendu: url("../illustrations/effectif_theme_nordique.webp");
--illustration-marchand: url("./illustrations/marchand_dunegarde.webp");
--illustration-entraineur: url("./illustrations/entraineur viking.webp");
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Modern Antiqua', swap;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: var(--fond-theme);
    background-size: contain;
    backdrop-filter: blur(2px);
}

.se_connecter {
    background-image: var(--illustration-connexion);
    background-size: contain;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.illustration_se_connecter_1 {
    background-image: url("./illustrations/affrontement\ 5.webp");
    background-size: contain;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.illustration_se_connecter_2 {
    background-image: url("./illustrations/illustration_se_connecter_2.webp");
    background-size: contain;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.illustration_se_connecter_3 {
    background-image: url("./illustrations/effectif_theme_thurin.png");
    background-size: contain;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: 4px solid white;
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

main {
    background-image: var(--illustration-main);
    background-size: contain;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.compte_rendu {
    background-image: var(--illustration-compte_rendu);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.gestion {
    background-image: var(--illustration-gestion);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.recrutement {
    background-image: var(--illustration-recrutement);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.effectif {
    background-image: var(--illustration-effectif);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.marchand {
    background-image: var(--illustration-marchand);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.entraineur {
    background-image: var(--illustration-entraineur);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.matchs {
    background-image: var(--illustration-matchs);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.feuille_de_match {
    background-image: var(--illustration-feuille-de-match);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

button {
    text-decoration: none;
    padding: 8px;
    font-family: 'Modern Antiqua', swap;
    font-size: 1em;
    color: #000000;
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid #494429;
}

.button_theme_defaut {
    background-color: green;
    border: 2px solid black;
    color: white;
}

.button_theme_defaut:hover {
    box-shadow: 1px 1px 10px rgba(0, 128, 0, 0.692);
    -webkit-box-shadow: 1px 1px 10px rgba(0, 128, 0, 0.692);
    -moz-box-shadow: 1px 1px 10px rgba(0, 128, 0, 0.692);
}

.button_maliran {
    background-color: gainsboro;
    border: 2px solid black;
    color: black;
}

.button_maliran:hover {
    box-shadow: 1px 1px 10px purple;
    -webkit-box-shadow: 1px 1px 10px purple;
    -moz-box-shadow: 1px 1px 10px purple;
}

.button_figenord {
    background-color: black;
    border: 2px solid crimson;
    color: white;
}

.button_figenord:hover {
    box-shadow: 1px 1px 10px crimson;
    -webkit-box-shadow: 1px 1px 10px crimson;
    -moz-box-shadow: 1px 1px 10px crimson;
}

.button_kenholl {
    background-color: #06294a;
    border: 2px solid green;
    color: white;
}

.button_kenholl:hover {
    box-shadow: 1px 1px 10px white;
    -webkit-box-shadow: 1px 1px 10px white;
    -moz-box-shadow: 1px 1px 10px white;
}

.button_madritt {
    background-color: #4ab4ca;
    border: 2px solid rgb(165, 87, 42);
    color: black;
}

.button_madritt:hover {
    box-shadow: 1px 1px 10px yellow;
    -webkit-box-shadow: 1px 1px 10px yellow;
    -moz-box-shadow: 1px 1px 10px yellow;
}

.button_alixerade {
    background-color: antiquewhite;
    border: 2px solid gold;
    color: black;
}

.button_alixerade:hover {
    box-shadow: 1px 1px 10px dodgerblue;
    -webkit-box-shadow: 1px 1px 10px dodgerblue;
    -moz-box-shadow: 1px 1px 10px dodgerblue;
}

.button_thurin {
    background-color: goldenrod;
    border: 2px solid white;
    color: black;
}

.button_thurin:hover {
    box-shadow: 1px 1px 10px limegreen;
    -webkit-box-shadow: 1px 1px 10px limegreen;
    -moz-box-shadow: 1px 1px 10px limegreen;
}

.button_nordique {
    background-color: grey;
    border: 2px solid black;
    color: white;
}

.button_nordique:hover {
    box-shadow: 1px 1px 10px #7bb8aa;
    -webkit-box-shadow: 1px 1px 10px #7bb8aa;
    -moz-box-shadow: 1px 1px 10px #7bb8aa;
}

.bouton_dynamique {
    text-decoration: none;
    padding: 8px;
    font-size: 1em;
    color: #000000;
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 3px solid #494429;
}
    
button:hover {
    padding: 8px;
    /*box-shadow: 1px 1px 10px #ffc000;
    -webkit-box-shadow: 1px 1px 10px #ffc000;
    -moz-box-shadow: 1px 1px 10px #ffc000; l'original */
    box-shadow: 1px 1px 10px #7b4c19;
    -webkit-box-shadow: 1px 1px 10px #7b4c19;
    -moz-box-shadow: 1px 1px 10px #7b4c19;
}

h1 {
    padding: 8px;
    font-size: 1.1em;
    color: #000000;
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 3px solid #494429;
    margin-left: 120px;
    margin-right: 120px;
    text-align: center;
}

label {
    padding: 4px;
    font-size: 1.1em;
    color: #000000;
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid #494429;
}

p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    word-spacing: 0.2px;
    line-height: 1.2;
    padding: 8px;
    font-size: 1em;
    color: #000000;
    background-color: #e3d09d;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border: 2px solid #494429;
    /* text-align: center; */
    margin-left: 120px;
    margin-right: 120px;
}

form {
    margin-top: 4px;
    padding: 2px;
    font-size: 1em;
    color: #000000;
    text-align: center;
}

fieldset {
    margin-left: 120px;
    margin-right: 120px;
    border: 2px solid #494429;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    background-color: #e3d09d;
    /* display: flex; 
    flex-direction: column; */
}

legend {
    padding: 4px;
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid #494429;
    margin-bottom: 15px;
}

.competences_sorts {
    text-align: left;
}

header {
    background-image: var(--texture-menu);
    padding: 1px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 5px 5px black;
    height: 80px;
}

.form_se_connecter {
    /*height: 76px;*/
    margin-bottom: 4px;
    /*background-color: green;*/
    display: flex;
    /*flex-direction: column;*/
}

header h1 {
    font-size: 1.3rem;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav ul li a {
    color: black;
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid #494429;
    text-decoration: none;
    font-size: 1rem;
    padding: 10px 15px;
    transition: 0.3s;
}

nav ul li a:hover {
    color: #ff8c00;
    text-shadow: 0 0 10px #ff8c00;
}

.theme-switcher {
    display: flex;
    justify-content: center;
    margin: 1rem 0 1rem 0;
}

.achat_equipement {
    background-color: #e3d09d;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid #494429;
    padding: 4px;
    display: flex;
    flex-direction: column;
}

select {
    position: relative;
    font-family: 'Modern Antiqua', swap;
    background-color: whitesmoke;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid #494429;
    padding: 4px;
}

.label_equipement {
    background-color: #e3d09d;
    padding: 4px;
}

footer {
    background-image: var(--texture-menu);
    padding: 1px 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px -5px 5px 0px black;
    height: 80px;
}

.illustration_equipement {
    width: 965px;
    height: 600px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid black;
    padding: 4px;
}

.galerie {
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.manuel {
    background-image: var(--illustration-manuel);
    background-size: contain;
    background-repeat: no-repeat;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}

.illustration_royaume {
    width: 965px;
    height: 600px;
    border-radius: 24px;
    -webkit-border-radius: 24px;
    -moz-border-radius: 24px;
    border: 2px solid black;
}

.creer_club {
    background-image: url("../illustrations/orc.webp");
    background-size: contain;
    width: 1249px;
    height: 709px;
    margin: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border: var(--bordure);
    overflow: auto;
    border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
}