@layer theme-v15 {
  /* ----- Commun -----*/
  input {
    font-size: 12px;
    font-family: Arial, Helvetica;
    margin: 1px 0;
    color: var(--champ-color);
  }

  /* ----- Checkbox ----- */
  input[type='checkbox']:disabled {
    opacity: 0.6;
  }

  /* ----- Boutons radio ----- */
  input.radio {
    background-color: transparent;
    border: none;
  }

  .radio-button-colonne {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 3px 0;
  }

  .radio-button-colonne > .radio-button-item {
    display: inline-flex;
  }

  .radio-button-item > label {
    vertical-align: middle;
  }

  /* ----- Select ----- */
  select {
    font-size: 12px;
    padding: 0 1px;
    margin: 1px 0;
    font-family: inherit;
  }

  select::-ms-expand {
    border: none;
  }

  select.lectureSeule {
    font-size: 12px;
    color: #282828;
    background-color: var(--champ-background-color-lecture-seule);
    border: 1px solid var(--champ-border-color-lecture-seule);
    border-radius: 4px;
  }

  option.selectionnee {
    background-color: #316ac4;
  }

  /* ----- Textarea ----- */
  textarea {
    font-family: Arial, Helvetica;
    font-size: 12px;
    margin: 1px 0;
    color: var(--champ-color);
    padding: 1px 4px;
    overflow: auto;
    resize: none;
    border-radius: 4px;
  }

  textarea.lectureSeule {
    font-family: Arial, Helvetica;
    border: 1px solid var(--champ-border-color-lecture-seule);
    background-color: var(--champ-background-color-lecture-seule);
    color: var(--champ-color-lecture-seule);
    font-size: 12px;
    padding: 1px 4px;
    scrollbar-base-color: #f0f0f0;
    scrollbar-arrow-color: #606060;
    caret-color: transparent;
  }

  /* ----- File ----- */
  input[type='file'] {
    border: none;
    padding: 0;
    width: 100%;
  }

  input[type='file']::-ms-value,
  input[type='file']::-ms-browse {
    border: 1px solid rgba(204, 204, 204, 1);
    background-color: rgba(230, 230, 230, 1);
    margin: 0;
  }

  input[type='file']::-ms-value:hover,
  input[type='file']::-ms-browse:hover {
    border-color: rgb(38, 160, 218);
  }

  input[type='file']::-ms-browse:hover {
    background-color: rgb(166, 244, 255);
  }

  /* ----- Image ----- */
  input[type='image'] {
    padding: 0 !important;
    vertical-align: middle;
  }

  /* ----- Autres ----- */
  input.dateInput {
    width: 76px !important;
  }

  input.dateCourte {
    width: 45px !important;
  }

  input.dateLongue {
    width: 105px !important;
  }

  input.dateFull {
    width: 125px !important;
  }

  input.dateFullPrecision {
    width: 145px !important;
  }

  input.ligne1 {
    font: var(--tableau-lignes-police);
    color: var(--tableau-lignes-couleur-texte);
    background-color: var(--tableau-lignes-impaires-fond);
    height: 16px;
    padding: 1px;
    border: 0;
  }

  table > tbody > tr > td.ligneliee1,
  table > tr > td.ligneliee1 {
    background-color: #e6e6e6;
    height: 17px;
    padding-left: 30px;
    padding-right: 5px;
  }

  input.ligne2 {
    font: var(--tableau-lignes-police);
    color: var(--tableau-lignes-couleur-texte);
    background-color: var(--tableau-lignes-paires-fond);
    height: 16px;
    padding: 1px;
    border: 0;
  }

  input.ligneSel {
    font: var(--tableau-lignes-police);
    color: var(--tableau-lignes-couleur-texte);
    background-color: transparent;
    height: 16px;
    padding: 1px;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
  }

  input.ligneSelGras {
    font: var(--tableau-lignes-police);
    font-weight: bold;
    color: var(--tableau-lignes-couleur-texte);
    background-color: transparent;
    height: 16px;
    padding: 1px;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
  }

  td.titreColonne input.titreColonne,
  input.titreColonne {
    font: var(--tableau-entete-police);
    color: var(--tableau-entete-couleur-texte);
    background-color: var(--tableau-entete-fond);
    text-indent: 5px;
    height: 16px;
    padding: 1px;
    border: 0;
  }

  input.titreColonneSel {
    font-family: Arial, Helvetica;
    font-size: 12px;
    color: black;
    font-weight: bold;
    background-color: #81abd1;
    text-indent: 5px;
    height: 16px;
    padding: 1px;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
  }

  table > tbody > tr > td.ligneliee2 {
    background-color: #e8e8e8;
    height: 17px;
    padding-left: 30px;
    padding-right: 5px;
  }

  td.etiquette {
    font-size: 12px;
    text-align: right;
    padding-left: 3px !important ;
    padding-right: 7px !important ;
    color: #696969;
    vertical-align: middle;
  }

  div.champTelephone {
    position: relative;
    display: inline-block;
  }

  div.champTelephone > input {
    padding: 1px 4px;
  }

  /* ----- Gestion de l'écartement entre des inputs et leur(s) libellé(s) ----- */
  /* ----- Exemple :                                                      ----- */
  /* -----                     DATE_DEBUT et DATE_FIN                     ----- */
  .ecartement {
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    color: #48555e;
  }

  .ecartement.fixe {
    gap: 4px;
  }

  .ecartement:not(.fixe) > :is(input, div) {
    margin: 0 5px;
  }

  .ecartement:not(.fixe) > :is(input, div):first-of-type {
    margin: 0 5px 0 0;
  }

  .ecartement:not(.fixe) > :is(input, div):last-of-type {
    margin: 0 0 0 5px;
  }

  .ecartement:not(.fixe) > :is(input, div):first-of-type:last-of-type {
    margin: 0;
  }

  /* ----- Champs en non éditables ----- */
  input.lectureSeule {
    font-size: 12px;
    height: 16px;
    border: 1px solid var(--champ-border-color-lecture-seule);
    background-color: var(--champ-background-color-lecture-seule);
    color: var(--champ-color-lecture-seule);
    height: auto !important;
    padding: 1px 4px;
    margin-top: 1px;
    margin-bottom: 1px;
    caret-color: transparent;
    border-radius: 4px;
  }

  /* ----- Champs éditables ----- */
  input[type='text']:not([class^='ligne']):not([class^='titreColonne']):not(.lectureSeule),
  input[type='password']:not([class^='ligne']):not(.lectureSeule),
  select:not([class^='ligne']):not(.lectureSeule),
  textarea:not([class^='ligne']):not(.lectureSeule),
  .cke_wysiwyg_frame:not(.lectureSeule),
  .cke_wysiwyg_div:not(.lectureSeule) {
    background: var(--champ-background-color);
    border: 1px solid var(--champ-border-color);
    transition: box-shadow 0.2s ease-in-out;
    border-radius: var(--border-radius);
  }

  input[type='text']:not([class^='ligne']):not([class^='titreColonne']):not(.lectureSeule):focus-visible,
  input[type='password']:not([class^='ligne']):not(.lectureSeule):focus-visible,
  select:not([class^='ligne']):not(.lectureSeule):focus-visible,
  textarea:not([class^='ligne']):not(.lectureSeule):focus-visible,
  .cke_wysiwyg_frame:not(.lectureSeule):focus-visible,
  .cke_wysiwyg_div:not(.lectureSeule):focus-visible {
    outline: none;
    border-color: var(--champ-border-color-focus);
  }

  /* ----- PasswordTag ----- */
  div.passwordTag {
    position: relative;
    width: min-content;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  div.passwordTag > input:first-of-type {
    padding: 1px 20px 1px 4px;
  }

  div.passwordTag span.iconeAfficherMasquer {
    --taille-icone-afficher-masquer-password: 14px;

    display: none;
    position: absolute;
    top: 3px;
    right: 24px;
    width: var(--taille-icone-afficher-masquer-password);
    height: var(--taille-icone-afficher-masquer-password);
    background-image: url('./images/oeil.svg');
    background-size: var(--taille-icone-afficher-masquer-password);
    cursor: pointer;
  }

  div.passwordTag > input[type='text'] ~ span.iconeAfficherMasquer {
    background-image: url('./images/oeil_barre.svg');
  }

  div.passwordTag > input[modifie]:not(.lectureSeule) ~ span.iconeAfficherMasquer {
    display: inline-block;
  }
}