@font-face {
  font-family: 'Montserrat';
  src: url('./Montserrat.ttf') format("truetype-variations");
  font-weight: 1 999;
  font-display: swap;
}

html[data-theme-v16] {
  --couleur-accent-clair-2: #EFF7FF;
  --couleur-accent-clair-1: #007AFF;
  --couleur-accent: #334E97;
  --couleur-accent-fonce-1: #001756;
  --couleur-accent-contraste: #FFFFFF;

  --couleur-theme-clair-2: #FFFFFF;
  --couleur-theme-clair-1: #FBF9F9;
  --couleur-theme: #DCDCDD;
  --couleur-theme-fonce-1: #717171;
  --couleur-theme-contraste: #000000;

  --font-family-alternative: Montserrat;

  --bouton-couleur-1: var(--couleur-secondaire-1);
  --bouton-couleur-2: #334E97;

  --onglet-conteneur-box-shadow: 0px 1px 4px 0px #0017561A;
  --onglet-conteneur-border-radius: 15px;
  --onglet-border-radius: 10px;
  --onglet-selectionne-box-shadow: 0px 2px 2px 0px #0017564D;
  --onglet-selectionne-background-color: var(--couleur-accent);
  --onglet-separateur-background-color: #3C3C432E;

  --tableau-box-shadow: 0px 3px 4px 0px #00175633;

  --carte-box-shadow: 0px 3px 4px 0px #00175633;
  --carte-border-radius: 10px;
  --carte-padding: 10px;

  --champ-border-color-lecture-seule: var(--couleur-theme-clair-2);
  --champ-background-color-lecture-seule: var(--couleur-theme-clair-2);
  --champ-color-lecture-seule: var(--couleur-theme-contraste);
  --champ-border-color: #71717180;
  --champ-background-color: var(--couleur-theme-clair-2);
  --champ-color: var(--couleur-theme-contraste);

  background: var(--couleur-theme-clair-1) !important; /* Changer la couleur dans frame.css */

  body {
    background: var(--couleur-theme-clair-1) !important; /* Changer la couleur dans frame.css */
  }

  /* ----- FRAME DU HAUT ----- */

  div.bandeau {
    background: linear-gradient(to right, #001756, #00227D);
  }

  table.cheminFer {
    background-color: var(--couleur-accent-clair-2);

    a, td {
      color: var(--couleur-accent-clair-1);
    }

    td:after {
      color: var(--couleur-accent-fonce-1);
    }
  }

  h1.titre-page-bandeau {
    background-color: var(--couleur-accent-contraste);
    border-color: var(--couleur-accent-contraste);
    font-size: 24px;
    font-weight: 500;
    font-family: var(--font-family-alternative);
    color: var(--couleur-accent-fonce-1);
  }

  /* ----- FRAME DU BAS ----- */

  form {
    padding-block-start: 36px;

    & > :not(div.resultat-recherche-root) + table {
      padding: var(--carte-padding);
      border-radius: var(--carte-border-radius);
      box-shadow: var(--carte-box-shadow);
      border-collapse: initial !important; /* Il y a du style inline, voir pour l'enlever afin du supprimer !important */
      background-color: var(--couleur-accent-contraste);
      width: 100%;

      &:has(+ table) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      + table {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        background-color: var(--couleur-accent-contraste);

        &:last-of-type {
          border-bottom-left-radius: var(--carte-border-radius);
          border-bottom-right-radius: var(--carte-border-radius);
        }
      }
    }

    div.resultat-recherche-root {
      div.entete-tableau.resultat-recherche {
        background-color: var(--couleur-accent-contraste);
        border: none;
      }

      + table div.data-table {
        border-radius: 0;
      }
    }

    ul.onglet {
      --gap-onglets: 1.8rem;

      display: inline-flex;
      gap: var(--gap-onglets);
      margin-block: 40px 30px;
      border: initial;
      padding: 0 20px;
      border-radius: var(--onglet-conteneur-border-radius);
      box-shadow: var(--onglet-conteneur-box-shadow);
      background-color: var(--couleur-accent-contraste);
      width: max-content;
      font-family: var(--font-family-alternative);
      font-weight: 300;
      font-size: 14px;

      li.onglet-item {
        position: relative;
        border: initial;
        margin: initial;
        background: none;

        &:not(:last-of-type)::after {
          content: '';
          position: absolute;
          right: calc(0% - var(--gap-onglets) / 2);
          display: inline-block;
          width: 1px;
          height: 22px;
          background-color: var(--onglet-separateur-background-color);
          align-self: center;
        }

        &.active {
          font-weight: 500;

          span {
            position: relative;
            padding-inline: 10px;
            padding-block: 17px 15px;
          }

          &::before {
            content: '';
            position: absolute;
            display: inline-block;
            width: 100%;
            height: 5px;
            bottom: 0;
            background-color: var(--onglet-selectionne-background-color);
          }
        }

        &.disabled {
          color: inherit;
        }

        span {
          padding: 0;

          a {
            padding-inline: 10px;
            padding-block: 17px 15px;
          }
        }

        &.detail a::after {
          background: var(--couleur-theme-contraste);
          mask-image: url(images/fa-arrow-right.png);
          mask-size: contain;
          mask-repeat: no-repeat;
        }
      }
    }

    div.entete-tableau-root {
      background-color: initial;
      margin-block: 0 10px;
      font-size: 16px;
      font-family: var(--font-family-alternative);
      font-weight: 400;

      div.entete-tableau {
        margin: initial;
        background-color: initial;
        border: none;
        color: var(--couleur-theme-contraste);
        font-weight: inherit;
        min-width: unset;

        span {
          padding: 0;
        }
      }

      &:not(.resultat-recherche) > div.ligne {
        display: none;
      }
    }

    div.data-table {
      --tableau-lignes-impaires-fond: var(--couleur-accent-contraste);
      --tableau-lignes-paires-fond: var(--couleur-theme-clair-1);
      --tableau-lignes-hauteur: 26px;

      border: 2px solid var(--couleur-accent-clair-2);
      border-top-left-radius: var(--carte-border-radius);
      border-top-right-radius: var(--carte-border-radius);
      box-shadow: var(--tableau-box-shadow);
      overflow: hidden;

      > table {
        td {
          border: initial;

          &.titreColonne {
            /* Changer les images également */

            background-color: var(--couleur-accent-clair-2);
            color: var(--couleur-theme-contraste);
            border-right: 1px solid #7171714d;
            height: 36px;
          }

          &.bordureFinListe {
            display: none;
          }
        }

        table {
          border: initial;

          td.titreColonne {
            border: none;
          }
        }
      }

      + table {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }
    }

    .nav-boutons-bas, .nav-boutons-liste, .nav-recherche-pagination-liste, .nav-etapes-liste {
      background-color: unset;
    }

    ul.nav-boutons-liste {
      display: none;
    }

    :is(a, input, button):is(.bouton-t1, .bouton-t2, .bouton-nav, .btplus) {
      background: var(--bouton-background);
      color: var(--bouton-color);
      font-family: var(--font-family-alternative);
      font-weight: 500;
      font-size: 14px;
      border-radius: 10px;
      border-color: var(--bouton-border-color);
      padding-inline: 10px;
      max-height: 30px;
    }

    :is(a, input, button):is(.bouton-t2, .bouton-nav) {
      --bouton-background: var(--bouton-couleur-2);
      --bouton-color: var(--couleur-accent-contraste);
      --bouton-border-color: var(--bouton-couleur-2);
    }

    :is(a, input, button).bouton-t1 {
      --bouton-background: var(--couleur-accent-contraste);
      --bouton-color: var(--bouton-couleur-2);
      --bouton-border-color: var(--bouton-couleur-2);
    }

    input.btplus {
      --bouton-background: var(--couleur-accent-clair-2);
      --bouton-color: var(--bouton-couleur-2);
      --bouton-border-color: #334E9766;

      font-size: 12px;
      min-height: 28px;
      max-height: 28px;
      text-decoration: none;
      border: 1px solid;
      margin-inline-start: 18px;
    }

    td.etiquette {
      text-align: unset;
    }
  }
}