/* données variables */
  :root {
    /* div fond d'écran container / footer */
    --color-div-back-container : #4a4a4a; /* couleur div.container */

    /* Nom et abréviation des compagnies */
    /* Nom actuel compagnie */
    --weight-cp-actuel : bold;
    --color-cp-actuel : Gold;
    /* Provenance de la machine */
    --weight-ex-cp : bold;
    --color-ex-cp : white;


    /* lien hypertexte */
    --color-a : white; /* couleur lien */
    --color-a-hover : gold; /* couleur lien survolé */
    --color-background-hover: transparent; /* fond lien survolé */

    /* bouton */
      /* couleur bouton survolé */
      --background-color-button-survol : #4e4e4e;
      /* couleur bouton actif */
      --background-color-button-actif : #333333;

    /* Statut des machine */
      /* Machine en projet - Livraison - Mise en service */
      --background-color-machine-projet : rgba(0, 100, 0, 0.2);
      --font-style-machine-projet : italic;
      /* Machine en service */
      --background-color-machine-service : rgba(0, 0, 0, 0.2);
      --font-weight-machine-service : bold;
      /* Machine hors service, remisée ou abandonnée */
      --background-color-machine-hs : rgba(255, 255, 0, 0.2);
      --color-machine-hs : white;
      --font-style-machine-hs : italic;
      /* Machine démolie */
      --background-color-machine-demoli : rgba(220, 20, 60, 0.2);
      --color-machine-demoli : white;
      --font-style-machine-demoli : italic;
      /*  Machine statut inconnu */
      --color-machine-inconnu : white;
      --font-style-machine-inconnu : italic;
      --background-color-machine-inconnu : rgba(139, 69, 19, 0.3);
      /* Machine renuméroté et/ou transformée dans la même entreprise */
      --color-machine-transform : white;
      --font-style-machine-transform : italic;
      --background-color-machine-renumber : rgba(30, 144, 255, 0.2);
      /* Machine transferée dans une autre entrprise */
      --color-machine-transfer : white;
      --font-style-machine-transfer : italic;
      --background-color-machine-transfer : rgba(0, 0, 128, 0.2);
      /* Machine exposée au musée/monuments */
      --color-machine-musee : Orange;
      --font-style-machine-musee : italic;
      --background-color-machine-musee : rgba(255, 165, 0, 0.1);
      /* Révision machine */
      --background-color-machine-revision : rgba(138, 43, 226, 0.2);

    /* Tableau information machine (page machine.html)*/
    --background-color-tableau-machine : rgba(0, 0, 0, 0.2);
      /* Textes tableau machine */
       /* constructeur */
      --weight-text-machine-const : Bold;
      --color-text-machine-const : white;
      /* Type machine */
      --weight-machine-type : Bold;
      --color-machine-type : Crimson;
 }

 body {
   color: white;
   background-color: #333333;
   font-family: "Calibri", Courier, sans-serif;
  }

/* correction pour hauteur de fenêtre */
html, body {
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}
main {
flex: 1; /* Permet à la partie principale de prendre tout l'espace disponible */
}

 /* Reset des marges et paddings de tous les éléments */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }


/* Menu */
header {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
  align-items: center; /* Centrer verticalement les éléments */
  justify-content: space-between; /* Espace entre titre et menu */
  padding: 10px;
  background-color: #626262;
  border: 2px solid black;
  width: 100%;
}

/* Titre */
#menu .titre-menu {
    flex: 1; /* Prend l’espace disponible */
}

#menu .titre-menu a {
    padding-left: 10px;
    text-decoration: none;
    text-shadow: gold 1px 1px 5px;
    color: white;
    font-size: 36px;
    font-weight: bold;
    white-space: nowrap; /* Empêche le titre de se couper */
}

/* Conteneur du menu */
#menu .menu {
    flex: 2; /* Permet au menu de prendre de la place */
    display: flex;
    justify-content: flex-end; /* Aligne le menu à droite */
    width: auto;
}

/* Liste du menu */
#menu .nav-menu ul {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    list-style-type: none;
    padding: 0;
}

/* Éléments du menu */
#menu .nav-menu li {
    margin: 0 10px;
}

/* Liens du menu */
#menu .nav-menu a {
    text-decoration: none;
    color: white;
    background-color: #626262;
    padding: 10px 10px;
    border-radius: 5px;
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
    white-space: nowrap; /* Empêche le texte de se couper */
}
/* Effet au survol (hover) */
  #menu .nav-menu a:hover {
    background-color: var(--background-color-button-survol); /* Couleur de fond plus claire au survol */
    transform: scale(1.2); /* Agrandir le fond */
  }
/* Effet actif (lorsque le bouton est cliqué) */
  #menu .nav-menu a:active {
    background-color: var(--background-color-button-actif);/* Couleur de fond plus sombre lorsqu'on clique */
    transform: scale(1.2); /* Agrandir le fond */
  }


/* Responsive : ajustement sur petit écran */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Place le titre et le menu en colonne */
        align-items: center;
        text-align: center;
    }
    #menu .titre-menu {
        width: 100%; /* Prend toute la largeur */
        text-align: center;
        margin-bottom: 5px;
    }
    #menu .menu {
        width: 100%;
        justify-content: center; /* Centre le menu */
    }
    #menu .nav-menu ul {
        flex-direction: column; /* Empile les liens */
        align-items: center;
        padding: 0;
    }
    #menu .nav-menu li {
        margin: 0px 0; /* Espacement entre les éléments */
    }
    #compagnie table {
          margin-left: 10px;
          margin-right: 10px;
          width: calc(100% - 20px); /* Ajuste la largeur pour tenir compte du margin */
        }
}

/* fenêtre principale */
  main.container {
    display: flex;
    justify-content: center; /* Centre le contenu du menu horizontalement */
    width: 100%;
  }
  div.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90%;
    background-color: var(--color-div-back-container);
    margin-top: 5px;
    margin-bottom: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    border: 1px solid black;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
  /* fenêtre mise à jour */
    main.update-box {
      display: flex;
      justify-content: center; /* Centre le contenu du menu horizontalement */
      width: 100%;
    }
    div.update-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90%;
      height: 35px;
      background-color: var(--color-div-back-container);
      margin-top: 0px;
      margin-bottom: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
      border: 1px solid black;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      box-sizing: border-box;
    }


    /* footer */
    footer {
      width: 100%;
      text-align: center;
      background-color: var(--color-div-back-container);
      border: 1px solid black;
      padding: 10px;
      font-weight: bold;
      box-sizing: border-box;
      /*position: relative;
      bottom: 0;
      left: 0;
      bottom: auto;*/
    }

/* Page Index / index.html */
  #index h2.index-text {
    margin: 5px;
    text-align: center;
    font-size: xx-large;
  }
  #index p.index-text {
    text-align: center;
    margin: 10px;
  }
  #index figure.index-text {
    text-align: center;
    margin-bottom: 5px;
    max-width: 100%; /* Empêche de dépasser la largeur du conteneur */
    padding-left: 10px; /* Ajoute un padding à gauche */
    padding-right: 10px; /* Ajoute un padding à droite */
    box-sizing: border-box; /* Inclut les bordures et padding dans le calcul de la largeur */
  }
  #index figure.index-text img {
    max-width: 100%; /* L'image ne dépasse pas la largeur du conteneur */
    height: auto; /* Conserve le ratio de l'image */
    box-sizing: border-box; /* Inclut le padding dans la largeur totale de l'image */
    border: 1px solid black;
  }
  #index span.cp {
    font-weight: var(--weight-cp-actuel);
    color: var(--color-cp-actuel);
  }

  /* Countries / countries.html */
  #countries .pays {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 60%;
    margin: 5px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(192, 192, 192, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Empêche le contenu de sortir de la div */
  }
  #countries .pays > .titre-pays {
    margin: 0;
    flex-grow: 1;
  }
  #countries .pays > img {
    margin: 0;
    border: 1px solid black;
  }
  #countries .pays > .liste-train {
    flex-basis: 100%;
    margin-top: 10px;
  }
  #countries h2 {
    text-decoration: underline;
    margin-left: 5px;
  }
  #countries h3 {
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 5px;
  }
  #countries ul {
    list-style-type: square; /* Liste à puce */
    margin-top: 10px;
    margin-left: 25px;
  }
  #countries a {
    color: var(--color-a); /* couleur police */
    text-decoration: none; /* enlevement soulignement lien*/
    white-space: nowrap; /* empêche le texte de se mettre à la ligne */
  }
  #countries a:hover {
    color: var(--color-a-hover); /* couleur police */
    background-color: var(--color-background-hover);
  }

  /* Mise à jour / maj.html */
  #maj .maj {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 60%;
    margin: 5px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(192, 192, 192, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Empêche le contenu de sortir de la div */
  }
  #maj h2 {
    margin-bottom: 5px;
    text-decoration: underline;
  }
  #maj table {
    text-align: left;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    border-collapse: collapse;
    padding: 10px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
    background-color: rgba(192, 192, 192, 0.2);
    box-sizing: content-box;
  }
  #maj th {
    text-align: center;
    vertical-align: text-top;
    font-weight: bold;
    width: 100px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    padding: 5px;
    padding-right: 20px;
    padding-left: 20px;
  }
  #maj td {
    text-align: left;
    width: 900px;
    border-width: 1px;
    border-style: solid;
    border-color: black;
    padding: 5px;
    padding-right: 20px;
    padding-left: 20px;
  }
  #maj td.separation {
    height: 1px;
    background-color: grey;
    padding: 1px;

  }
  #maj ul {
    margin-top: 0px;
    margin-bottom: 5px;
    padding-left: 20px;
  }
  #maj span.titre {
    text-decoration: underline;
    color: white;
    font-weight: bold;
  }
  #maj span.cp-maj {
    text-decoration: underline;
    font-style: oblique;
  }
  #maj span.nb-photos {
    font-style: oblique;
  }
  #maj sup{
    font-size: 0.6em;
    vertical-align: baseline; /* ou -10% selon le rendu souhaité */
    position: relative;
    top: -0.5em; /* Ajuste ici selon l'effet visuel désiré */
  }


  /* page Liens / liens.html */
  #liens section.liens {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 60%;
    margin: 5px;
    padding: 10px;
    border: 1px solid black;
    border-radius: 8px;
    background-color: rgba(192, 192, 192, 0.2);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Empêche le contenu de sortir de la div */
  }
  #liens h2 {
    margin-bottom: 5px;
    text-decoration: underline;
  }
  #liens h3 {
    text-decoration: underline;
    margin-bottom: 5px;
  }
  #liens h4 {
    text-decoration: underline;
    margin-bottom: 5px;
  }
  #liens ul {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  #liens a {
    color: var(--color-a); /* couleur police */
    text-decoration: none; /* enlevement soulignement lien*/
  }
  #liens a:hover {
    color: var(--color-a-hover); /* couleur police */
    background-color: var(--color-background-hover);
  }


  /* page contact / contact.html */
  #mailto section  {
    text-align: center;
    margin-left: 50px;
    margin-right: 50px;
    padding: 10px;
  }
  #mailto p {
    font-size: large;
  }
  #mailto form {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
  }
  #mailto .contact-button {
    background-color: #666;
    color: white;
    font-size: 16px;
    padding: 15px 32px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }
  #mailto .contact-button:hover {
    background-color: grey;
    transform: scale(1.2); /* Agrandir le fond */
  }
  #mailto .contact-button:active {
    color: black;
      background-color: gold; /* Encore plus foncé au clic */
      transform: scale(1.2); /* Agrandir le fond */
    }


/* Page disclamer / disclamer.html */
  #disclamer h2 {
    text-align: center;
    text-decoration: underline;
    margin-bottom: 5px;
  }
  #disclamer article{
    margin-top: 10px;
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 25px;
  }
  #disclamer p {
    margin-top: 5px;
    margin-bottom: 5px;
  }
  #disclamer ul{
    list-style: square;
    margin-top: 5px;
  }
  #disclamer h3 {
    text-decoration: underline;
    margin-top: 10px;
    margin-bottom: 5px;
  }
  #disclamer h4 {
    text-decoration: underline;
    margin-top: 5px;
    margin-bottom: 5px;
  }


  /* Page pour la description de la compagnie (a-asb.html par exemple) */
  #compagnie div.compagnie {
    display: flex;
    flex-direction: column;
    width: 80%;
    background-color: rgba(192, 192, 192, 0.2);
    margin-top: 0px;
    margin-bottom: 5px;
    border: 1px solid black;
    border-radius: 8px;
    overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
    padding: 0 10px; /* Ajout d'un padding pour gérer la marge */
    max-width: 100%; /* S'assure que le div ne dépasse pas */
  }
  #compagnie .button-return-list {
    display: flex;
    justify-content: flex-start;
    margin-top : 4px;
    margin-bottom: 10px;
    margin-left: 10px;
    list-style: none;
    padding: 0;
  }
  #compagnie figure.logo-cp{
    justify-content: center;
    text-align: center; /* aligner au centre le logo */
    margin-left: 10px;
    margin-right: 10px;
  }
  #compagnie img.logo-cp{
    border: 2px solid black;
  }
  #compagnie h2 {
    font-size: xx-large;
    text-decoration: underline;
    text-align: center; /* aligner au centre */
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
    margin-bottom: 1px;
  }
  #compagnie h3 {
    font-size: x-large;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
    text-align: center; /* aligner au centre */
  }
  #compagnie h4.tableau{
    text-decoration: underline;
    text-align: center; /* aligner au centre */
    font-size: x-large;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 1px;
    margin-bottom: 1px;
  }
  /* Bouton "Retour en arrière" */
    #compagnie .button-return {
      background-color: transparent; /* Fond initial transparent */
      color: white;
      font-weight: bold;
      font-size: 16px;
      padding: 10px 10px;
      border-radius: 8px; /* Bouton arrondi */
      /* border: 1px solid black; */
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
      display: inline-block;
      text-decoration: none;
    }
    #compagnie .button-return:hover {
      color: white;
      background-color: var(--background-color-button-survol); /* couleur du bouton survolé */
      transform: scale(1.1);
    }
    #compagnie .button-return:active {
      color: white;
      background-color: var(--background-color-button-actif); /* couleur du bouton actif */
      transform: scale(1.1);
    }
  /* tableau compagnie */
    #compagnie text.cp{
      font-weight: var(--weight-cp-actuel);
      color: var(--color-cp-actuel);
    }
    /* info entreprise */
      #compagnie table {
        margin : 10px auto 10px auto;
        border: 2px solid Cornsilk; /* Uniformisation des bordures */
        border-collapse: collapse;
        width: 800px; /* Définir une largeur fixe */
        max-width: 100%; /* S'assure que ça ne dépasse pas sur petits écrans */
        table-layout: auto; /* Permet un ajustement flexible des colonnes */
        box-sizing: border-box; /* Prend en compte les bordures et padding */
      }
      #compagnie th.th-1, #compagnie td.td-2 {
        border: 1px solid black; /* Assure que la bordure épouse th et td */
        padding: 5px 10px;
      }
      #compagnie th.th-1 {
        width: 210px;
        text-align: left;
        vertical-align: top;
        text-decoration: underline;
      }
      #compagnie td.td-2{
        width: 600px;
      }
      #compagnie sup{
        font-size: 0.6em;
        vertical-align: baseline; /* ou -10% selon le rendu souhaité */
        position: relative;
        top: -0.5em; /* Ajuste ici selon l'effet visuel désiré */
      }
    /* gestion des liens */
    #compagnie a {
      color: var(--color-a); /* couleur police */
      text-decoration: none; /* enlevement soulignement lien*/
    }
    #compagnie a:hover {
      color: var(--color-a-hover); /* couleur police */
      background-color: var(--color-background-hover);
    }
    #compagnie td.separation {
      height: 1px;
      background-color: grey;
      border: 1px solid black;
      padding: 1px;
    }
    /* tableau materiel roulant */
      #compagnie h4.cp {
        text-align: center;
        margin-top: 5px;
        margin-bottom: 0px;
        text-decoration: underline;
      }
      #compagnie table.materiel {
        margin : 10px auto 10px auto;
        border: 2px solid Cornsilk; /* Uniformisation des bordures */
        border-collapse: collapse;
        width: auto; /* Définir une largeur fixe */
        max-width: 100%; /* S'assure que ça ne dépasse pas sur petits écrans */
        table-layout: auto; /* Permet un ajustement flexible des colonnes */
        box-sizing: border-box; /* Prend en compte les bordures et padding */
      }
      #compagnie td.titre-vhc{
        width: 200px;
        height: 30px;
        background-color: #333;
        border: 1px solid black;
        text-align: center;
        }
    /* tableau source */
      #compagnie div.source {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--main-width);
        margin-top: 5px;
        margin-bottom: 0px;
        border: 1px solid black;
        background-color: var(--color-div-container);
      }
      #compagnie table.source{
        border: 2px solid black;
        border-collapse: collapse;
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 10px;
      }
      #compagnie th.source{
        width: 100px;
        vertical-align: top;
        text-decoration: underline;
        text-align: left;
        border: 2px solid black;
        background-color: Gray;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
      }
      #compagnie td.source-titre{
        width: 450px;
        padding-left: 5px;
        border: 1px solid black;
      }
      #compagnie td.source-editeur{
        width: 170px;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
        border: 1px solid black;
      }
      #compagnie td.source-date{
        width: 70px;
        border: 1px solid black;
        text-align: center;
      }
      #compagnie td.source-ISBN{
        width: 230px;
        padding-left: 5px;
        border: 1px solid black;
        text-align: left;
      }


/* Page liste materiel compagnie / *-***-mat-***.html */
  #materiel div.materiel {
    display: flex;
    flex-direction: column;
    width: 80%;
    background-color: rgba(192, 192, 192, 0.2);
    margin-top: 0px;
    margin-bottom: 5px;
    border: 1px solid black;
    border-radius: 8px;
    overflow-x: auto; /* Ajoute un défilement horizontal si nécessaire */
    padding: 0 10px; /* Ajout d'un padding pour gérer la marge */
    max-width: 100%; /* S'assure que le div ne dépasse pas */
  }
  /* Bouton "Retour en arrière" */
    #materiel .button-return-list {
      display: flex;
      justify-content: flex-start;
      margin-top : 4px;
      margin-bottom: 10px;
      margin-left: 10px;
      list-style: none;
      padding: 0;
    }
    #materiel .button-return {
      background-color: transparent; /* Fond initial transparent */
      color: white;
      font-weight: bold;
      font-size: 16px;
      padding: 10px 10px;
      border-radius: 8px; /* Bouton arrondi */
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.2s ease;
      display: inline-block;
      text-decoration: none;
    }
    #materiel .button-return:hover {
      color: white;
      background-color: var(--background-color-button-survol); /* couleur du bouton survolé */
      transform: scale(1.1);
    }
    #materiel .button-return:active {
      color: white;
      background-color: var(--background-color-button-actif); /* couleur du bouton actif */
      transform: scale(1.1);
    }
    #materiel ul.button-return-list {
      list-style-type: none;
    }
    /* gestion des liens */
    #materiel a {
      color: var(--color-a); /* couleur police */
    }
    #materiel a:hover {
      color: var(--color-a-hover); /* couleur police */
      background-color: var(--color-background-hover);
    }
    #materiel td.separation {
      height: 1px;
      border: 1px solid black;
      background-color: grey;
      padding: 1px;
    }

  /* tableau liste machine */
  #materiel table {
    margin : 10px auto 10px auto;
    border-collapse: collapse;
    max-width: 100%; /* S'assure que ça ne dépasse pas sur petits écrans */
    table-layout: auto; /* Permet un ajustement flexible des colonnes */
    box-sizing: border-box; /* Prend en compte les bordures et padding */
  }
    /* cellule titre */
    #materiel th.titre{
      border: 1px solid black;
      color: black;
      background-color: gold;
      text-align: left;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
    }
    /* cellule accès fichie */
    #materiel th.file{
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      width: 50px;
      padding-left: 5px;
      padding-right: 5px;
    }
    #materiel td.file{
      height: 28px;
      border: 1px solid black;
      text-align: center;
    }
    #materiel a.file {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%; /* Assure un centrage vertical */
    }
    #materiel img.file{
      margin: 2px;
      width : 20px;
      height : 20px;
    }
    /* cellule type de locomotive */
    #materiel th.type{
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
      width: 100px;
    }
    #materiel td.type{
      text-align: center;
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
    }
    /* cellule numéro de la locomotive */
    #materiel th.num{
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      width: 100px;
    }
    #materiel td.num{
      text-align: center;
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
      white-space: nowrap;
    }
    /* cellule constructeur */
    #materiel th.constr{
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      width: 110px;
    }
    #materiel td.constr{
      text-align: center;
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
    }
    /* cellule information */
    #materiel th.info {
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
      width: 400px;
    }
    #materiel td.info {
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
      white-space: nowrap;
    }
    /* cellule provenance de la machine */
    #materiel th.info2 {
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      width: 220px;
    }
    #materiel td.info2 {
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
      white-space: nowrap;
      font-style: italic;
    }
    #materiel span.cp {
      font-weight: var(--weight-ex-cp);
      color: var(--color-ex-cp);
    }
    /* cellule état de la machine */
    #materiel th.annule{
      background-color: #C0C0C0;
      color: black;
      border: 1px solid black;
      width: 90px;
    }
    #materiel td.annule{
      text-align: center;
      border: 1px solid black;
      padding: 0 5px; /* 0px en haut et en bas, 5px à gauche et à droite */
    }
    /* texte en exposant */
    #materiel sup {
      font-size: 0.6em;
      vertical-align: baseline; /* ou -10% selon le rendu souhaité */
      position: relative;
      top: -0.5em; /* Ajuste ici selon l'effet visuel désiré */
    }

    /* Statut des machines */
      /* Machine en service */
      #materiel tr.service {
        background-color: var(--background-color-machine-service);
      }
      #materiel text.service{
        font-weight: var(--font-weight-machine-service);
      }
      /* Machine en projet - Livraison - Mise en service */
      #materiel tr.projet {
        background-color: var(--background-color-machine-projet);
      }
      #materiel span.projet {
        font-style: var(--font-style-machine-projet);
      }
      #materiel text.projet {
        font-style: var(--font-style-machine-projet);
      }
      /* Machine hors service, remisée ou abandonnée */
      #materiel tr.hs {
        background-color: var(--background-color-machine-hs);
      }
      #materiel text.hs{
        font-style: var(--font-style-machine-hs);
      }
      /* Machine démolie ou annulée */
        #materiel tr.demoli {
          background-color: var(--background-color-machine-demoli);
        }
        #materiel text.demoli{
          color: var(--color-machine-demoli);
          font-style: var(--font-style-machine-demoli);
        }
      /*  Machine statut inconnu */
        #materiel tr.inconnu {
          background-color: var(--background-color-machine-inconnu);
        }
        #materiel text.inconnu{
          color: var(--color-machine-inconnu);
          font-style: var(--font-style-machine-inconnu);
        }
      /* Machine renuméroté et/ou transformée dans la même entreprise */
        #materiel tr.renumber {
          background-color: var(--background-color-machine-renumber);
          }
        #materiel text.renumber {
          font-style: var(--font-style-machine-transform);
          color: var(--color-machine-renumber);
        }
      /* Machine transferée dans une autre entrprise */
        #materiel tr.transfer {
          background-color: var(--background-color-machine-transfer);
        }
        #materiel text.transfer {
           color: var(--color-machine-transfer);
           font-style: var(--font-style-machine-transfer);
        }
      /* Machine exposée au musée/monuments */
        #materiel tr.musee{
          background-color: var(--background-color-machine-musee);
        }
        #materiel text.musee{
          color: var(--color-machine-musee);
          font-style: var(--font-style-machine-musee);
        }
        #materiel span.musee{
          color: var(--color-machine-musee);
          font-style: var(--font-style-machine-musee);
        }


  /* Page machine / Xxx-0XXX.html */
    #machine div.machine {
      display: flex;
      flex-direction: column;
      width: 80%;
      margin-top: 0px;
      margin-bottom: 5px;
      padding: 0 10px;
      max-width: 100%;
      background-color: rgba(192, 192, 192, 0.2);
      border: 1px solid black;
      border-radius: 8px;
      overflow-x: auto;
    }
    /* Titre machine */
      #machine h1 {
        text-decoration: underline;
        margin : 5px;
        margin-left: 20px;
        font-size: x-large;
      }
    /* Textes */
      #machine span.const {
        font-weight: var(--weight-text-machine-const);
        color: var(--color-text-machine-const);
      }
      #machine span.type-machine {
        font-weight: var(--weight-machine-type);
        color: var(--color-machine-type);
      }
      #machine sup {
        font-size: 0.6em;
        vertical-align: baseline; /* ou -10% selon le rendu souhaité */
        position: relative;
        top: -0.5em; /* Ajuste ici selon l'effet visuel désiré */
      }

    /* Tableau information machine */
    #machine table {
      border : 2px solid Cornsilk;
      border-collapse: collapse;
      background-color: var(--background-color-tableau-machine);
      margin: 5px auto;
    }
      #machine table.info {
        border : 2px solid Cornsilk;
        border-collapse: collapse;
        background-color: var(--background-color-tableau-machine);
        margin: 5px auto;
      }
      #machine tr {
        background-color: var(--background-color-tableau-machine);
        border: 1px solid black;
      }
      #machine th.titre {
        border: 1px solid black;
        padding: 5px;
        text-align: left;
        vertical-align: top;
        text-decoration: underline;
        white-space: nowrap;
      }
      #machine th.th-1-3 {
        text-align: left;
        border: 1px solid black;
        width: 250px;
        padding: 5px;
        vertical-align: top;
        /* text-decoration: underline; */
        white-space: nowrap;
      }
      #machine td.td-2-4 {
        border: 1px solid black;
        width: 250px;
        padding: 5px;
        vertical-align: top;
        white-space: nowrap;
      }
      #machine td.separation {
        height: 3px; /* 2px */
        background-color: #666;
      }
      /* Fênetre pour historique machine */
      #machine div.machine-2 {
        display: flex;
        flex-direction: column;
        width: 80%;
        margin-top: 0px;
        margin-bottom: 5px;
        padding: 0px;
        max-width: 100%;
        background-color: rgba(192, 192, 192, 0.2);
        border: 1px solid black;
        border-radius: 8px;
        overflow-x: auto;
      }
      /* Tableau baptême */
      #machine table.bapteme {
        border: 2px solid black;
        margin-top: 5px;
        margin-bottom: 5px;
        width: 400px;
      }
      #machine th.bapteme {
        border: 2px solid black;
        padding-top: 2px;
        padding-bottom: 2px;
      }
      #machine td.date-bapteme {
        width: 105px;
        text-align: center;
        border: 1px solid black;
        padding-left: 5px;
        padding-right: 5px;
      }
      #machine td.nom-bapteme{
        border: 1px solid black;
        padding-left: 5px;
      }
      #machine span.bapteme{
        font-style: italic;
      }
      /* Tableau publiciatire */
      #machine table.publicite {
        border: 2px solid black;
        margin-top: 5px;
        margin-bottom: 5px;

        width: 650px;
      }
      #machine th.publicite {
        border: 2px solid black;
        padding-top: 2px;
        padding-bottom: 2px;
      }
      #machine td.date-publicite {
        width: 130px;
        text-align: center;
        border: 1px solid black;
        padding-left: 5px;
        padding-right: 5px;
        padding-top: 2px;
        padding-bottom: 2px;
      }
      #machine td.nom-publicite {
        border: 1px solid black;
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 5px;
      }
      #machine span.publicite {
        font-style: italic;
      }
      /* Tableau changement machine */
        #machine table.machine {
          border: 2px solid black;
          margin-top: 5px;
          margin-bottom: 5px;
        }
        #machine td.items {
          width: 60px;
          border: 1px solid black;
          padding-left: 5px;
        }
        #machine td.numero {
          width: 580px;
          border: 1px solid black;
          padding-left: 5px;
        }
        #machine span.cp {
          font-weight: bold;
        }
      /* Tableau photos */
      #machine table.photos {
        border: 1px solid black;
        width: 90%;
        margin-top: 5px;
        margin-bottom: 5px;
      }
      #machine td.photos {
        text-align: center;
        width: 20%;
      }
      #machine img {
        width : 200px;
        border: 1px solid black;
      }
      #machine img.machine {
        display: block;
        margin: 0px auto;
      }
      #machine td.description {
        border: 1px solid black;
        padding-left: 10px;
      }
      #machine p.machine {
        font-weight: bold;
      }
      #machine p.num_train {
        font-style: italic;
        font-size: small;
        margin-top: 1px;
        margin-bottom: 5px;
      }
      #machine p.lieu {
        margin-top : 0px;
        margin-bottom: 0px;
      }
      #machine p.date_photo {
        font-size: small;
        margin-top : 5px;
      }
      /* Séparation date */
        #machine div.date_sup {
          width: 100%;
          border-bottom: 1px dashed black;
        }
        #machine p.date_sup {
          margin-bottom: 2px;
          padding-left: 10px;
          font-size: small;
          font-style: italic;
        }
        #machine div.date_inf {
          width: 100%;
        }
        #machine p.date_inf {
          margin-top : 1px;
          margin-bottom: 5px;
          padding-left: 10px;
          font-size: small;
          font-style: italic;
        }
      /* Historique statut des machines */
        #machine p.indication {
          display: flex;
          justify-content: center;
          margin-left: 5px;
          margin-right: 5px;
        }
        #machine a {
          font-weight: bold;
          color: var(--color-a); /* couleur police */
          text-decoration: none;
          margin-left: 5px;
          margin-right: 5px;
        }
        #machine a:hover {
          font-weight: bold;
          color: var(--color-a-hover); /* couleur police */
          background-color: var(--color-background-hover);
        }

        #machine p.date {
          display: flex;
          align-items: center;
          justify-content: center;
          min-width: 75px;
          text-align: center;
          font-weight: bold;
          margin-left: 5px;
          margin-right: 5px;
          white-space: nowrap;
        }
        /* Machine en projet - Livraison - Mise en service */
          #machine div.projet {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-projet);
          }
        /* Machine hors service, remisée ou abandonnée */
          #machine div.hs {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-hs);
          }
          /* Machine démolie ou annulée */
          #machine div.demoli {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-demoli);
          }
          /*  Machine statut inconnu */
          #machine div.inconnu {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-inconnu);
          }
          #machine span.inconnu{
            color: var(--color-machine-inconnu);
            font-style: var(--font-style-machine-inconnu);
          }
          /* Machine renuméroté et/ou transformée dans la même entreprise */
          #machine div.renumber {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-renumber);
          }
          /* Machine transferée dans une autre entrprise */
          #machine div.transfer {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-transfer);
          }
          /* Machine exposée au musée/monuments */
          #machine div.musee {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-musee);
          }
          #machine span.musee{
            color: var(--color-machine-musee);
            font-style: var(--font-style-machine-musee);
          }
          /* Révision machine */
          #machine div.revision {
            display: flex;
            flex-direction: row;
            padding: 5px;
            border: 1px solid black;
            margin-top : 5px;
            margin-bottom: 5px;
            box-sizing: content-box; /* Prend en compte les bordures et padding */
            background-color: var(--background-color-machine-revision);
          }