/******************************************************** Police fonts *********************************************************/
html, body {
    /*font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    font-family: "Google Sans", Verdana, Geneva, Tahoma, sans-serif;
    font-size: medium;
}

.luckiest-guy-regular {
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
  font-style: normal;
}

.blackStrokeWhite {
    color: black;                      /* couleur du remplissage */
    -webkit-text-stroke: 1px white;    /* épaisseur et couleur du contour */
    paint-order: stroke fill;          /* dessine le contour derrière le remplissage */
}

.greenStrokeWhite {
    color: #0d4d2b;                      /* couleur du remplissage */
    -webkit-text-stroke: 1px white;    /* épaisseur et couleur du contour */
    paint-order: stroke fill;          /* dessine le contour derrière le remplissage */
}

.form-control {
    border-radius: 25px;
    background-color: white;
    color: black;
    border-color: white;
}

.form-control:focus {
  border-color: white;
  -webkit-box-shadow: none;
  box-shadow: none;
}

/******************************************************** Boutons  *********************************************************/

.btn-primary, .btn-secondary, .btn-outline-secondary {
    border-radius: 25px;
    background-color: #0d4d2b;
    border-color: #0d4d2b;
    color: white;
}

.relative {
    position: relative; 
    z-index: 1;
}

/******************************************************** Tables *********************************************************/

table.table {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.table-bordure.table {
    border-collapse: separate;
    border-spacing: 0 10px;
    border-color:transparent;
    border:1px;
}


table.table td {
    white-space: nowrap;
}

td,th {
    vertical-align: middle;
    /*text-align: center;*/
}

.col0 {
    text-align:center;
    width:150px;
}

.col1, .col4 {
    min-width: 50%;
    text-align: left;
}

.col2 {
    text-align:center;
    width:50px;
}

.col3 {
    text-align: left;
    width:auto;
}

.nav-item-gk .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color:white;
}

tbody tr td {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    height: 40px;
}

tbody tr td:first-child {
    border-left: 1px solid transparent;
    border-radius: 25px 0 0 25px;
    box-shadow: dimgray;
}

tbody tr td:last-child {
    border-right: 1px solid transparent;
    border-radius: 0 25px 25px 0;
}


.fsgk-3 {
    font-size: 1.3rem;
}

/******************************************************** Responsive *********************************************************/

/* 1. Configuration par défaut : Mobile (Écran vertical) */
.container {
  display: flex;
  flex-direction: column; /* Empilement vertical */
  gap: 5px;             /* Espace entre les éléments */
}

/* 2. Configuration pour Ordinateur / Grand écran */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Alignement horizontal */
  }
}

.flexRow
{
    display:flex; 
    flex-direction:row; 
    align-items: center; 
    justify-content: center; 
}

.flexColumn
{
    display:flex; 
    flex-direction:column; 
    align-items: center; 
    justify-content: center; 
    text-align:center; 
    
}

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

.lightFlexColumn
{
    display:flex; 
    flex-direction:column; 
    align-items: center; 
    justify-content: center; 
    text-align:center;
}

/******************************************************** Pastille *********************************************************/

.pastille
{
    width:150px; 
    height: 80px;
    margin:10px;
    border-style:solid;
    border-width:1px;
    border-color:lightgrey;
    border-radius:15px;
    text-align:center;
}

.pastilleVide
{
    width:150px; 
    height: 80px;
    margin:10px;
    border-style:solid;
    border-width:1px;
    border-color:#2b2b2b;
    border-radius:15px;
    text-align:center;
}

.centrer
{
    align-items:center;
    justify-content:center;
    text-align:center;
}

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

.debut
{
    align-items:start;
    justify-content:center;
    text-align:start;
    margin-left: 10px;
}

.fin
{
    align-items:end;
    justify-content:center;
    text-align:end;
}

.haut
{
    align-items:start;
    justify-content:center;
    text-align:start;
    margin-top: 10px;
}

.bas
{
    align-items:start;
    justify-content:center;
    text-align:start;
    margin-bottom: 10px;
}

.espace5
{
    gap: 5px; 
}

.espace10
{
    gap: 10px; 
}

.espace20
{
    gap: 20px; 
}

.espace5pct
{
    gap: 5%; 
}

.espace25
{
    gap: 25px; 
}

.espace33pct
{
    gap: 33%; 
}

.espace50pct
{
    gap: 50%; 
}

.margin5
{
    margin-bottom: 5px; 
}

.margin10
{
    margin-bottom: 10px; 
}

.margin5pct
{
    margin-bottom: 5%; 
}

.margin20
{
    margin-bottom: 20px; 
}

.margin25
{
    margin-bottom: 25px; 
}

.marginALL25
{
    margin: 25px; 
}

.marginLeft5
{
    margin-left: 5px; 
}

.marginLeft10
{
    margin-left: 10px; 
}

.marginLeft15
{
    margin-left: 15px; 
}

.marginLeft20
{
    margin-left: 20px; 
}

.marginLeft30
{
    margin-left: 30px; 
}

.marginRight20
{
    margin-right: 20px; 
}

.marginRight30
{
    margin-right: 30px; 
}

.marginBottom5
{
    margin-bottom: 5px; 
}

.width30
{
    width:30%;
}

.width33
{
    width:33%;
}

.width45
{
    width:45%;
}

.width50
{
    width:50%;
}

.width80
{
    width:80%;
}

.width90
{
    width:90%;
}

.width100
{
    width:100%;
}

.widthAuto
{
    width:auto;
}

.widthp30
{
    width:30px;
}

.widthp50
{
    width:50px;
}

.widthp80
{
    width:80px;
}

.widthp100
{
    width:100px;
}

.widthp110
{
    width:110px;
}

.widthp150
{
    width:150px;
}

.widthp200
{
    width:200px;
}

.height40
{
    height:40px;
}

.height45
{
    height:45px;
}

.height50
{
    height:50px;
}

.height60
{
    height:60px;
}

.height70
{
    height:70px;
}

.height80
{
    height:80px;
}

.height100
{
    height:100px;
}

.height110
{
    height:110px;
}

.height200
{
    height:200px;
}

.retourligne 
{
    max-height: 75px;
    overflow-wrap: break-word; /* Coupe le mot si nécessaire */
}

.smaller
{
    font-size: 10px;
}

.small
{
    font-size: small;
}

.medium
{
    font-size: medium;
}

.bold
{
    font-weight: bold;
}

.bordure
{
    border-style: solid;
    border-width: 1px;
    border-radius: 25px;
}

.radiusp40
{
    border-radius: 40px;
}

.radius50
{
    border-radius: 50px;
}

.radiusp50
{
    border-radius: 50px;
}

.radiusp25
{
    border-radius: 25px;
}

.radiusp5
{
    border-radius: 5px;
}

/******************************************************** Border color *********************************************************/

.lightGreyBorderColor
{
    border-color:lightgrey;
}

.blackBorderColor
{
    border-color:black;
}

.greenBorderColor
{
    border-color:#0d4d2b;
}

.whiteBorderColor
{
    border-color:#ffffff;
}

/******************************************************** A retirer *********************************************************/

.fontColor
{
    color:white;
}

.backgroundColor
{
    background-color: white;
}


/******************************************************** Font color *********************************************************/

.whiteFontColor
{
    color:white;
}

.blackFontColor
{
    color:black;
}

.greenFontColor
{
    color:#0d4d2b;
}

/******************************************************** Background color *********************************************************/

.greenBackgroundColor
{
    background-color: #0d4d2b;
}

.blackBackgroundColor
{
    background-color: black;
}

.blackGreenBackgroundColor
{
    background-image: linear-gradient(180deg, #0d4d2b 0%, black 90%);
}

.greenBlackBackgroundColor
{
    background-image: linear-gradient(180deg, black 0%,#0d4d2b 90%);
}

.whiteBackgroundColor
{
    background-color: white;
}

.fondGrisClair
{
    background-color: lightgray;
}