/* ~~~~~~~ */
/* Général */
/* ~~~~~~~ */
body, html
{
    margin: 0px;
    padding: 0px;
    height: 100%;
    width: 100%;
    position: fixed;
	box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, 0.7); /* Création d'un voile blanc au dessus de l'image */
    overflow-y: visible;
    background-image: none;
    /* Obligatoire pour gérer plusieurs pages !! */
    left: 0px;
    top: 0px;
    position:absolute;
}

@page {
    margin: 5mm;
    size:21.0cm 29.4cm;
}

/* Ajout du padding */
p
{
    margin-top: 2mm;
    margin-bottom: 2mm;
    padding-right: 2mm;
    padding-left: 2mm;
}


.BordureInf, .BordureInfBloc
{
    margin-bottom: 1mm;
    padding-bottom: 2mm;
    border-bottom: 0.5mm solid black;
}

.BordureInfGrise, .BordureInfBlocGrise
{
    margin-bottom: 1mm;
    padding-bottom: 2mm;
    border-bottom: 0.5mm solid gray;
}

.Wmax250pxHmax250px
{
    max-width: 100px;
    max-height: 100px;
    margin-top: 2px;
    padding-top: 2px;
}

.Contour { border: 0.5mm solid gray; }

.CacherLorsImpression, .HideMe { display:none!important; }
.AfficherLorsImpression { display:contents!important; }
img.Wmax250pxHmax250px.HideMe { display:inline!important; }


/* Demande de ne pas couper les blocs */
div[lien_perso="Joueur"] > .BlocPouvoirs, .BlocServiteur { break-inside: avoid; }



/* Suppression  */
.MarginBottom100px { margin-bottom: 0px }


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Police (taille, couleur, fond) */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.RougeGras
{
    color: red;
    font-weight: bold;
}

.ColorRed { color: red; }

.ColorNavy { color: navy; }

.ColorMaroon { color: maroon; }

.ColorGreen { color: green; }

.ColorBlue { color: blue; }

.ColorOrange { color: orange; }

.ColorPurple { color: purple; }

.ColorGrey { color: #565656; }

.BackgroundColorGreen { background-color: #BAEDAD; }

.TextIndent60pc { text-indent: 60%; }

.fas, .far { font-size: 6pt; }


.TexteInvisible
{
	text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}


textarea {
    border: none; /* Supprime la bordure */
    outline: none; /* Supprime également l'effet d'outline (contour) */
    font-size: 7pt;
    resize: none;
}


/* ~~~~~~ */
/* Listes */
/* ~~~~~~ */
li
{
    list-style: none;
    text-align: left;
    margin-left: 0mm;
    text-indent: 3mm;
    margin-top: 2mm;
}

.liCenter
{
    text-align: center;
    text-indent: 0mm;
}

/* Suppression des marges pour les li qui servent au clic droit */
.liNoMargin
{
    margin-left: 0mm;
    margin-top: 0mm;
}

ul
{
    all: unset;
    margin: 1mm 0mm 1mm 0mm;
}

ul li
{
    margin-top: unset;
}

ul li:hover
{
    background-color: Gray;
}

ul li:nth-child(odd)
{
    color: navy; /*#00284d;*/
}


/* ~~~~~~~~ */
/* Tableaux */
/* ~~~~~~~~ */
/* Le tableau prend toute la place disponible en largeur */
table {
    width: 100%;
    border-collapse: separate; /* Assurez-vous que la bordure est séparée entre les cellules */
    border-spacing: 0px; /* Définit l'espacement entre les lignes et les colonnes */
}

/* Bordure à gauche pour tous les td sauf le premier */
td + td { border-left: 0.5mm solid black; }

/* Bordure inférieure des th */
th { border-bottom: 0.5mm dotted black; }

/* Bordure à gauche pour les tr sauf le 1er */
th + th { border-left: 0.5mm solid black; }

/* Mise en gris des lignes survolées */
tbody tr:hover { background-color: Gray; }

/* Colore les textes en bleus une ligne sur deux pour plus de lisibilité */
tbody tr:nth-child(odd) { color: navy; /*#00284d;*/ }

/* Le div qui contient le table doit avoir la classe OverflowYscroll pour que son thread ne bouge pas en même temps que la fenêtre */
thead th
{
    position: sticky;
    top: 1mm;
    background-color: rgba(255, 255, 255, 0.7);
}

th, td {
    padding:0px 0px 0px 0px;
}

td { font-size: 7pt; }


/* ~~~~~ */
/* Blocs */
/* ~~~~~ */
/* Bordure noire arrondie avec alignement des textes contenus */
.Bloc
{
    border-bottom: 0.5mm solid black;
    border-left: 0.5mm solid black;
    border-right: 0.5mm solid black;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.6); /* Fond blanc transparent pour plus de lisibilité uniquement sur les blocs et non les blocs gris pour éviter surcouches */
    font-size: 7pt;
}

.BlocGris
{
    border-bottom: 0.5mm solid gray;
    border-left: 0.5mm solid gray;
    border-right: 0.5mm solid gray;
    text-align: center;
    font-size: 7pt;
}

.TitreBloc, .TitreBlocAvecTransition
{
    color: navy;
    display: inline-block;
    text-align: center;
    border: 0.5mm solid black;
    border-radius: 5mm 5mm 0mm 0mm; /* Arrondissement des angles */
    margin-top: 2mm;
    background-color: rgba(255, 255, 255, 0.6); /* Fond blanc transparent pour plus de lisibilité uniquement sur les blocs et non les blocs gris pour éviter surcouches */
    font-size: 7pt;
}


.TitreBlocGris
{
    color: navy;
    display: inline-block;
    text-align: center;
    border-radius: 5mm 5mm 0mm 0mm; /* Arrondissement des angles */
    margin-top: 2mm;
    border: 0.5mm solid gray;
}


#BlocLimitations { min-height: 25px; }

.BlocStretch { flex: 1; }

.MarginLeft10px { margin-left: 7px; }
.MarginRight10px { margin-right: 7px; }
.MarginBottom10px { margin-bottom: 7px; }
.MarginTop10px { margin-top: 7px; }



.WMax1200px
{
    margin: 0 auto;
    max-width: 1200px;
}

.MinHeight32px { min-height: 32px; }


.MinWidth175px { min-width: 175px; }
.MinWidth300px { min-width: 225px; }


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

/* Permet de centrer les <p> et leur texte  */
.FlexLigne > p { margin: auto; }


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

.FlexColonne
{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Permet de mettre les blocs de PV et PP sur la même ligne avec un espace complet entre les 2 */
.FlexSpaceAround
{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.FlexSpaceAround:nth-child(2)
{
    flex: 1;
}

.FlexSpaceBetween
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* Classes des tailles des blocs */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.H32px { height: 32px; }
.H200px { height: 200px; }
.H275px { height: 275px; }
.H350px { height: 350px; }
.H450px { height: 450px; }
.H800px { height: 800px; }

.W5pc { width: 5%; }
.W10pc { width: 10%; }
.W15pc { width: 15%; }
.W20pc { width: 20%; }
.W25pc { width: 25%; }
.W30pc { width: 30%; }
.W35pc { width: 35%; }
.W40pc { width: 40%; }
.W45pc { width: 45%; }
.W50pc { width: 50%; }
.W55pc { width: 55%; }
.W60pc { width: 60%; }
.W65pc { width: 65%; }
.W70pc { width: 70%; }
.W75pc { width: 75%; }
.W80pc { width: 80%; }
.W85pc { width: 85%; }
.W90pc { width: 90%; }
.W95pc { width: 95%; }
.W100pc { width: 100%; }

.H5pc { height: 5%; }
.H10pc { height: 10%; }
.H15pc { height: 15%; }
.H20pc { height: 20%; }
.H25pc { height: 25%; }
.H30pc { height: 30%; }
.H35pc { height: 35%; }
.H40pc { height: 40%; }
.H45pc { height: 45%; }
.H50pc { height: 50%; }
.H55pc { height: 55%; }
.H60pc { height: 60%; }
.H65pc { height: 65%; }
.H70pc { height: 70%; }
.H75pc { height: 75%; }
.H80pc { height: 80%; }
.H85pc { height: 85%; }
.H90pc { height: 90%; }
.H95pc { height: 95%; }
.H100pc { height: 100%; }


/* ~~~~~~ */
/* Inputs */
/* ~~~~~~ */
.Input45px { width: 5mm; }

.WH100pc
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}