@layer theme-v15 {
  /* ----- CSS pour les popups ----- */
  /* ----- POPUP : général ----- */
  .popup,
  html.popup body {
    width: auto;
    background-color: #fff;
  }

  .titrePopup {
    background-color: #e8e8e8;
    color: white;
    width: 100%;
    display:flex;
    align-items: center;
  }

  .titrePopup > b {
    flex-grow:1;
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    color: #3e3e3e;
    padding: 10px 20px;
  }

  .titrePopup > b::first-letter {
    text-transform: capitalize;
  }

  .ssTitrePopup {
    font-size: 14px;
    background-color: #cdcdcd;
    font-weight: bold;
    display: flex;
    align-items: center;
  }

  .ssTitrePopup {
    background-color: #3376a0;
  }

  .ssTitrePopup a.zoom {
    margin: 0 10px 0 10px;
  }

  .ssTitrePopup h2 {
    margin: 2px 0 2px 10px;
    color: #fff;
    font-weight: normal;
  }

  .ssTitrePopup .rightAligned {
    color: #fff;
    font-size: 1.4em;
    font-weight: normal;
    padding-left:  10px;
    padding-top: 5px;
    text-align: left;
    text-transform: lowercase;
  }

  .ssTitrePopup .rightAligned::first-letter {
    text-transform: capitalize;
  }

  .popup .fondFiche {
    background-color: var(--couleur-haut-principal);
  }

  .popup form[name="theForm"] > table {
    padding-left: 10px; /* Pour les écrans déjà alignés avec le titre */
  }

  .popup ul.onglet,
  .popup ul.sous-onglet {
    padding: 8px 18px 0 18px;
  }

  .popup .resultat-recherche.entete-tableau > span {
    padding: 10px 10px 8px 15px;
  }

  .popup .entete-tableau > span,
  .popup .chapitre > span {
    padding: 4px 10px 1px 20px;
  }

  .popup nav.nav-boutons-bas {
    padding: 17px 20px;
  }

  /* ----- POPUP : spécifique ----- */
  /* ----- Popup de confirmation ----- */
  #confirmMsg {
    padding: 17px 20px 0 20px;
  }

  /* ----- MENU GENERAL ----- */
  .menuGeneral h1.ssTitrePopup {
    margin: 0;
    padding: 5px 10px;
    color: #fff;
    background-color: var(--couleur-haut-principal);
    font-size: 1.7em;
    font-weight: normal;
    display: inline-block;
    width: 100%;
  }

  .menuGeneral h1.ssTitrePopup::first-letter {
    text-transform: capitalize;
  }

  .rechercheRapide {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .rechercheRapide span {
    margin: 4px 5px 0 0;
    align-self: flex-start;
    color: #fff;
  }

  .rechercheRapide .saisieRecherche {
    flex: 1;
  }

  .rechercheRapide .saisieRecherche #idNomMenu {
    width: 100%;
  }

  body.menuGeneral .fondFiche .rightAligned {
    color: #fff;
  }

  body.menuGeneral.popup ul.onglet,
  body.menuGeneral.popup ul.sous-onglet {
    padding: 8px 8px 0 8px;
  }

  body.menuGeneral.popup ul.sous-onglet {
    border-top-color: var(--couleur-blanc);
  }

  body.menuGeneral table.ssongletPopup,
  body.menuGeneral table.fichePopup,
  body.menuGeneral table.ssongletPopup table {
    background: var(--couleur-blanc);
  }

  body.menuGeneral table.ssongletPopup table td {
    padding: 10px 0 4px 10px;
  }

  body.menuGeneral table.fichePopup {
    background: #fff;
    margin-left: 5px;
  }

  body.menuGeneral table.ssTitrePopup,
  body.menuGeneral table.fondFiche{
    width: 100% !important;
  }

  body.menuGeneral .fondFiche .leftAligned {
    color: #fff;
    padding-left: 10px;
  }

  body.menuGeneral .fondFiche tbody,
  body.menuGeneral .ssongletPopup tbody {
    display: inline-block;
  }

  body.popup .fichePopup img {
    display: none;
  }

  table.fichePopup .separateur + td,
  table.ssongletPopup .separateur + td {
    vertical-align: top;
  }

  form[name="theForm"] > table.ssongletPopup {
    margin-left: 10px;
  }
}