/* font */
@font-face {
  font-family: mono;
  /*   src: url(fonts/mono.otf); */
  /*src: url(fonts/IBMPlexSans-Regular.otf); */
  /*src: url(fonts/RobotoMono-Regular.otf); */
  /*src: url(fonts/RobotoMono-Medium.ttf);*/
  src: url(fonts/IBMPlexMono-Medium.ttf);
  /*  src: url(fonts/Theinhardt-Regular.otf);*/
}

* {
  text-decoration: none;
  color: inherit;
  font-weight: normal;
  margin: 0px;
  padding: 0px;
}

body {
  font-family: "mono";
  font-size: 16px;
  letter-spacing: -3%;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: 45px;
  line-height: 100%;
}

h2 {
  font-size: 80px;
}

.logo {
  width: 40%;
  display: block;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 30px;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   NAV XXXXXXXXXXXXXXXXXXXXXXXXXX */

lu,
li {
  list-style: none;
}

.bloc_nav {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: white;
  height: 40px;
  border-top: 1px solid black; /* contour des boutons */
}

.bloc_nav ul {
  display: flex;
  padding: 0;
  margin: 0;
}

.bloc_nav li {
  flex: 1; /* chaque bouton prend la moitié de la largeur */
}

.bloc_nav a.btn {
  display: block;
  padding: 10px; /* hauteur du bouton */
  border-bottom: 1px solid black; /* contour des boutons */
  box-sizing: border-box;
}

.bloc_nav a.jaune {
  border-left: 1px solid black;
}

.bloc_nav a.blanc_2 {
  border-left: 1px solid black;
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   Grille  XXXXXXXXXXXXXXXXXXXXXXXXXX */

.bloc_prez {
  padding: 10px;
  border-bottom: 1px solid black;
}

.bloc_gauche {
  padding: 10px;
  list-style: none;
}

#ligne {
  border-top: 1px solid black;
}

#marge_index {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 5px;


}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX   tableau   XXXXXXXXXXXXXXXXXXXXXXXXXX */

#yellow {
  background-color: #fef50d;
}

table {
  table-layout: fixed;
}

.tableau {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}

caption {
  border-top: 1px solid black;
  background-color: #fef50d;
  text-align: left;
  padding: 10px;
}

th {
  border: none;
  text-align: left;
  padding: 10px;
}

td {
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
}

tr:has(th) {
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #d9d9d9;
}

td,
th {
  width: 33.333%;
  /* border: none;*/
  border: 0px solid red;
}

tr.spacer td {
  height: 30px; /* ajuste selon l’espace désiré */
  border: none; /* pas de bordure pour cette ligne */
}

/* XXXXXXXXXXXXXXXXXXX   Grille Responsive mobile first   XXXXXXXXXXXXXXXXXX */


.container_grid {
  display: grid;
  grid-template-columns: 1fr;
}

/* MOBILE — par défaut */
.tableau th:nth-child(n + 2),
.tableau td:nth-child(n + 2) {
  display: none;
}

.columns_1 {
  position: static;
}

/* si l'écran fait plus de 1000 px de large alors : */
@media only screen and (min-width: 1000px) {

body{
      font-size: 14px;
    }

    header {
      font-size: 14px;
      line-height: 115%;
    }

        h1{
        font-size: 35px;
    }





  .columns_1 {
    overflow-y: auto;
    height: 100vh;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Edge legacy / IE */
  }

  .columns_1::-webkit-scrollbar {
    display: none;
  }

  .columns_2 {
    border-left: 1px solid black;
    overflow-y: auto;
    height: 100vh;
  }

  .container_grid {
    display: grid;
    grid-template-columns: 2fr 6fr;
  }

  .tableau th:nth-child(n + 2),
  .tableau td:nth-child(n + 2) {
    display: table-cell;
  }
}

/* si l'écran fait plus de 1500 px de large alors : */
@media only screen and (min-width: 1650px) {

    body{
      font-size: 16px;
    }

    header {
      font-size: 25px;
      line-height: 115%;
    }

    h1{
        font-size: 55px;
    }

}