/***************************************************************************/
/* Modale et fond translucide                         	                   */
/***************************************************************************/

/* Layout */

.fwf_fond_translucide {
  position: fixed;
  z-index: 1;
  background: var(--fond-1);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  opacity: 0;
  display: none;
  transition: 0.25s opacity;
}

.fwf_fond_translucide.active {
  display: block;
  opacity: 1;
}

.fwf_conteneur_modale {
  position: fixed;
  overflow: hidden;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  display: none;
  background: rgba(0, 0, 0, 0.6);
}

.fwf_conteneur_modale_blanc {
  background: rgba(255, 255, 255, 0.6);
}

.fwf_conteneur_modale.active {
  display: flex;
}

.fwf_conteneur_modale.active .fwf_modale {
  opacity: 1;
  display: flex;
}

.fwf_conteneur_modale > .fwf_zone_loading > .fwf_loading {
  border-radius: var(--arrondi-modale-1);
}

.fwf_modale {
  position: relative;
  opacity: 0;
  transition: 0.5s opacity;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.fwf_modale:not(.fwf_borderless_modale) {
  width: 60vw;
  height: 70vh;
  background: #fff;
  border-radius: var(--arrondi-modale-1);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}

/* Tailles de modales */

.fwf_modale.fwf_borderless_modale {
  width: 100dvw;
  height: 100dvh;
}

.fwf_modale.fwf_full_modale {
  width: 97dvw;
  height: 97dvh;
}

.fwf_modale.fwf_x_large_modale {
  width: 85vw;
  height: 90vh;
}

.fwf_modale.fwf_large_modale {
  width: 80vw;
  height: 80vh;
}

.fwf_modale.fwf_large_low_modale {
  width: 75vw;
  height: 70vh;
}

.fwf_modale.fwf_big_modale {
  width: 50%;
  height: 90%;
}

.fwf_modale.fwf_medium_modale {
  width: 50vw;
  height: 50vh;
}

.fwf_modale.fwf_mini_modale {
  width: 40vw;
  height: auto;
}

.fwf_modale.fwf_small_form_modale {
  width: 40vw;
  max-height: 90vh;
}

/* Bouton close */

.fwf_modale > .fwf_modale_header > .fwf_close {
  position: absolute;
  top: 1.1rem;
  right: 1.8rem;
  width: 25px;
  height: 25px;
  cursor: pointer;
  color: #fff;
  text-transform: uppercase;
}

.fwf_modale.fwf_borderless_modale > .fwf_modale_header > .fwf_close {
  right: 0.9rem;
  top: 0.5rem;
}

.fwf_modale.high-density:not(.fwf_borderless_modale)
  > .fwf_modale_header
  > .fwf_close {
  right: 1rem;
  top: 0.6rem;
}

.fwf_modale .fwf_close:hover::before,
.fwf_modale .fwf_close:hover::after {
  background: #696969;
}

.fwf_modale .fwf_close::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
  transition: 0.25s all;
}

.fwf_modale .fwf_close::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(-45deg);
  transition: 0.25s all;
}

/* Header modale */

.fwf_modale .fwf_modale_header {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.fwf_modale:not(.fwf_borderless_modale) .fwf_modale_header {
  padding: 0.8rem 4.5rem 0.8rem 2.5rem;
  text-align: left;
  font-size: var(--font-size-7);
  line-height: 1;
  font-weight: 500;
  background: var(--secondary-1);
  border-bottom: 1px solid #ccc;
  border-radius: var(--arrondi-modale-1) var(--arrondi-modale-1) 0 0;
  min-height: 58px;
}

.fwf_modale.high-density:not(.fwf_borderless_modale) .fwf_modale_header {
  font-size: var(--font-size-6);
  padding: 0.8rem 3.2rem 0.7rem 1.5rem;
  min-height: 0px;
}

.fwf_modale .fwf_modale_header h3,
.fwf_modale .fwf_modale_header h4 {
  font-size: var(--font-size-7);
  line-height: 1.2;
  font-weight: 600;
  margin: 0;
  padding: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.fwf_modale .fwf_modale_header h4 {
  font-size: var(--font-size-6);
  line-height: 1.3;
}

.fwf_modale .fwf_modale_header h3.inline,
.fwf_modale .fwf_modale_header h4.inline {
  flex-direction: row;
}

.fwf_modale .fwf_modale_header h3 small,
.fwf_modale .fwf_modale_header h4 small,
.fwf_modale .fwf_modale_header h3 span,
.fwf_modale .fwf_modale_header h4 span {
  text-transform: none;
  margin-left: 1rem;
}

.fwf_modale .fwf_modale_header strong {
  text-transform: uppercase;
}

.fwf_modale .fwf_modale_header h3 span {
  display: block;
  font-weight: 100;
}

.fwf_modale .fwf_modale_header h3 strong {
  display: block;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Header, Footer et navigation onglets */

.fwf_modale .fwf_modale_contenu,
.fwf_modale .fwf_modale_onglets,
.fwf_modale .fwf_modale_footer .fwf_modale_contenu_footer {
  padding-left: 3rem;
  padding-right: 3rem;
  scrollbar-gutter: stable;
}

.fwf_modale .fwf_modale_footer .fwf_modale_contenu_footer {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.fwf_modale .fwf_modale_footer .fwf_modale_footer_action {
  display: flex;
  justify-content: flex-end;
}

.fwf_modale .fwf_modale_footer .fwf_modale_footer_action * + * {
  margin-left: 1rem;
}

.fwf_modale:not(.fwf_borderless_modale) .fwf_modale_onglets {
  padding-top: 0.7rem;
  padding-bottom: 0.5rem;
  user-select: none;
}

.fwf_modale.high-density:not(.fwf_borderless_modale) .fwf_modale_onglets {
  padding-top: 0.35rem;
  padding-bottom: 0.25rem;
}

.fwf_modale .fwf_modale_onglets .liste-onglets {
  position: relative;
  top: 0.5rem;
  display: flex;
  border: 1px solid var(--secondary-1);
  border-radius: var(--arrondi-bouton-20);
  padding: 4px;
  background: var(--blanc-1);
  z-index: 1;
}

.fwf_modale .fwf_modale_onglets .item-onglet {
  background: var(--gris-5);
  color: var(--blanc-1);
  padding: 0.35rem 1rem;
  border-radius: var(--arrondi-bouton-20);
  cursor: pointer;
  font-weight: 500;
  line-height: 1;
  transition: var(--transition-2);
}

.fwf_modale .fwf_modale_onglets .item-onglet + .item-onglet {
  margin-left: 0.5rem;
}

.fwf_modale .fwf_modale_onglets .item-onglet:not(.disabled):hover,
.fwf_modale .fwf_modale_onglets .item-onglet:not(.disabled).active {
  background: var(--secondary-1);
}

.fwf_modale .fwf_modale_onglets .item-onglet.disabled {
  opacity: 0.3;
  cursor: default;
}

.fwf_modale .fwf_modale_onglets .item-onglet .number {
  background: var(--gris-7);
  border-radius: 999rem;
  min-height: 15px;
  width: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2);
  margin-left: 0.25rem;
}

.fwf_modale .fwf_modale_onglets .liste-onglets .btn-group {
  position: absolute;
  right: 0.25rem;
  top: 50%;
  transform: translateY(-50%);
  height: 100%;
  display: flex;
  align-items: center;
}

.fwf_modale .fwf_modale_onglets .liste-onglets .btn-group .btn {
  padding: 0.35rem 0.5rem;
  margin: 0;
  border-width: 1px;
}



/* Contenu modale : généralités */

.fwf_modale .fwf_modale_contenu {
  padding-top: 1.8rem;
  padding-bottom: 2.5rem;
  font-size: var(--font-size-4);
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

.fwf_modale.high-density .fwf_modale_contenu {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0;
  padding-bottom: 1.5rem;
  font-size: var(--font-size-3);
}

.fwf_modale.fwf_borderless_modale .fwf_modale_contenu {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.fwf_modale.has-action .fwf_modale_contenu {
  padding-bottom: 1rem;
}

.fwf_modale .fwf_modale_contenu.centered {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fwf_modale .fwf_modale_contenu_with_visuel {
  flex-direction: row;
  margin: 0;
  padding: 1.8rem 3rem 2.5rem;
  overflow: hidden;
  border-bottom-right-radius: 30px;
}

.fwf_modale .fwf_modale_onglets + .fwf_modale_contenu {
  padding-top: 0.75rem;
}

.fwf_modale .fwf_modale_contenu > .fwf_form {
  height: 100%;
}

.fwf_modale .fwf_zone_action {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0.5rem 1.4rem;
  background: rgba(255, 255, 255, 1);
  border: 3px solid var(--secondary-1);
  border-bottom-left-radius: var(--arrondi-modale-1);
  border-bottom-right-radius: var(--arrondi-modale-1);
}

.fwf_modale .fwf_zone_action.centered {
  justify-content: center;
}

.fwf_modale .fwf_modale_contenu.arrondie {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  height: 600px;
  top: 50%;
  margin-top: -300px;
  border-radius: 300px;
  padding: 100px;
  background: var(--primary-2);
  border: 3px solid var(--blanc-1);
}

/* Contenu modale : titres */

.fwf_modale .fwf_modale_contenu h1,
.fwf_modale .fwf_modale_contenu h2,
.fwf_modale .fwf_modale_contenu h3,
.fwf_modale .fwf_modale_contenu h4 {
  color: var(--secondary-1);
}

.fwf_modale .fwf_modale_contenu h1 > span,
.fwf_modale .fwf_modale_contenu h2 > span,
.fwf_modale .fwf_modale_contenu h3 > span,
.fwf_modale .fwf_modale_contenu h4 > span {
  color: var(--gris-5);
}

.fwf_modale .fwf_modale_contenu h1:not(.text-center),
.fwf_modale .fwf_modale_contenu h2:not(.text-center),
.fwf_modale .fwf_modale_contenu h3:not(.text-center),
.fwf_modale .fwf_modale_contenu h4:not(.text-center) {
  text-align: left;
}

.fwf_modale .fwf_modale_contenu h3 {
  font-size: var(--font-size-title-4);
  line-height: 1.2;
  margin-bottom: 1rem;
  display: block;
}

.fwf_modale .fwf_modale_contenu * + h4 {
  margin-top: 1rem;
}

.fwf_modale .fwf_modale_contenu h4 {
  font-size: var(--font-size-title-5);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  display: block;
  width: 100%;
}

.fwf_modale .fwf_modale_contenu h4.underlined {
  border-bottom: 1px solid var(--secondary-1);
}

.fwf_modale .fwf_modale_contenu h5 {
  text-transform: none;
  font-size: var(--font-size-title-6);
  line-height: 1.2;
  margin-bottom: 0.75rem;
  font-weight: 500;
  display: block;
  width: 100%;
  color: var(--gris-5_fonce);
}

.fwf_modale .fwf_modale_contenu h5.underlined {
  border-bottom: 1px dotted var(--gris-5);
}

.fwf_modale .fwf_modale_contenu h1 strong,
.fwf_modale .fwf_modale_contenu h2 strong,
.fwf_modale .fwf_modale_contenu h3 strong,
.fwf_modale .fwf_modale_contenu h4 strong {
  display: inline-block;
}

/* Contenu modale : contenu */

.fwf_modale_contenu .spacer {
  height: 2rem;
}
.fwf_modale_contenu .spacer-1 {
  height: 1rem;
}
.fwf_modale_contenu .spacer-2 {
  height: 2rem;
}
.fwf_modale_contenu .spacer-3 {
  height: 3rem;
}

.fwf_modale_contenu .border-top {
  border-top: 1px solid var(--secondary-1);
}

.fwf_modale_contenu .border-bottom {
  border-bottom: 1px solid var(--secondary-1);
}

.fwf_modale_contenu .texte-taille-xl {
  font-size: var(--font-size-6);
  font-weight: 500;
  line-height: 1.3;
}

.fwf_modale_contenu .texte-taille-xl strong {
  color: var(--secondary-1);
}

/* Contenu modale : listing */
.fwf_modale_contenu .fwf_contenu_listing {
  padding: 0;
}

/* Contenu modale : Bloc apparté / related */

.container-field.bloc-related,
.fwf_modale_contenu .bloc-related {
  border: 1px solid var(--secondary-1);
  background: var(--vert-2);
  padding: 0.5rem;
  border-radius: var(--arrondi-form-field-1);
  position: relative;
  user-select: text;
}

.container-field.bloc-related.read-only,
.fwf_modale_contenu .bloc-related.read-only {
  background: var(--fwf_gris_clair);
  border-color: var(--fwf_gris);
}

.fwf_modale_contenu .bloc-related strong {
  font-weight: 600;
  color: var(--primary-2);
}

.container-field.bloc-related.warning,
.fwf_modale_contenu .bloc-related.warning {
  border: 1px solid var(--orange-1);
  background: var(--orange-2);
}

.fwf_modale_contenu .bloc-related.warning strong {
  color: var(--orange-3);
}

.container-field.bloc-related.danger,
.fwf_modale_contenu .bloc-related.danger {
  border: 1px solid var(--danger);
  background: var(--rouge-2);
}

.fwf_modale_contenu .bloc-related.danger strong {
  color: var(--danger);
}

.container-field.bloc-related.has-label,
.fwf_modale_contenu .bloc-related.has-label {
  padding-top: 2rem;
  overflow: hidden;
}

.container-field.bloc-related.has-label label,
.fwf_modale_contenu .bloc-related.has-label label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: var(--font-size-4);
  background: var(--secondary-1);
  color: var(--blanc-1);
  padding: 0.25rem 1rem;
  font-weight: 500;
  user-select: none;
}

.container-field.bloc-related.has-label.read-only label,
.fwf_modale_contenu .bloc-related.has-label.read-only label {
  background: var(--fwf_gris);
}

.container-field.bloc-related:not(.has-label) label,
.fwf_modale_contenu .bloc-related:not(.has-label) label {
  display: none;
}

.container-field.bloc-related.warning label,
.fwf_modale_contenu .bloc-related.warning label {
  background: var(--orange-4);
  color: var(--blanc-1);
}

.container-field.bloc-related.danger label,
.fwf_modale_contenu .bloc-related.danger label {
  background: var(--danger);
  color: var(--blanc-1);
}

.fwf_modale_contenu .bloc-related ul {
  padding-left: 2.5rem;
}

.fwf_modale_contenu .bloc-related ul li {
  list-style-type: square;
}

.fwf_modale_contenu .bloc-related ul li + li {
  margin-top: 0.75em;
}

/* Thèmes de modales */
.fwf_modale .form-footer {
  background: var(--secondary-1);
}

.fwf_modale.theme-rouge .fwf_modale_header,
.fwf_modale.theme-rouge .form-footer {
  background: var(--rouge-3);
}

.fwf_modale.theme-rouge .fwf_zone_action {
  border-color: var(--rouge-3);
}

.fwf_modale.theme-indigo .fwf_modale_header,
.fwf_modale.theme-indigo .form-footer {
  background-color: var(--indigo-30);
}

.fwf_modale.theme-indigo .fwf_zone_action {
  border-color: var(--indigo-30);
}

.fwf_modale.theme-degrade-violet .fwf_modale_header,
.fwf_modale.theme-degrade-violet .form-footer {
  background: var(--degrade-violet-1);
}

.fwf_modale.theme-degrade-violet .fwf_zone_action {
  border-color: var(--indigo-40);
  background: var(--degrade-violet-1);
}

/* Ecrans moyens et petits */
@media (min-width: 992px) and (max-width: 1600px) {
  .fwf_modale .fwf_modale_header {
    padding: 0.5rem 4.5rem 0.5rem 2rem;
    min-height: 47px;
    font-size: var(--font-size-6);
  }

  .fwf_modale .fwf_modale_header h3,
  .fwf_modale .fwf_modale_header h4 {
    font-size: var(--font-size-6);
  }

  .fwf_modale .fwf_close {
    top: 0.7rem;
    right: 1.2rem;
  }

  .fwf_modale .fwf_modale_contenu,
  .fwf_modale .fwf_modale_onglets,
  .fwf_modale .fwf_modale_footer .fwf_modale_contenu_footer {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

/* Smartphones et tablettes */
@media (max-width: 991px) {
  .fwf_conteneur_modale {
    align-items: center;
  }

  .fwf_modale:not(.fwf_borderless_modale),
  .fwf_modale.fwf_full_modale,
  .fwf_modale.fwf_large_modale,
  .fwf_modale.fwf_big_modale,
  .fwf_modale.fwf_medium_modale,
  .fwf_modale.fwf_mini_modale,
  .fwf_modale.fwf_small_form_modale {
    width: 95dvw;
    height: 95dvh;
    margin-bottom: 1vh;
    overflow: hidden;
    max-height: none;
  }

  .fwf_modale .fwf_modale_header {
    border-radius: var(--arrondi-modale-1) var(--arrondi-modale-1) 0 0;
    font-size: 1.05rem;
    flex-shrink: 0;
    line-height: 1.35;
  }

  .fwf_modale:not(.fwf_borderless_modale) {
    border-radius: var(--arrondi-2);
  }

  .fwf_modale:not(.fwf_borderless_modale) .fwf_modale_header {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 0;
    border-radius: var(--arrondi-2) var(--arrondi-2) 0 0;
    padding: 0.5rem 3.5rem 0.5rem 1.5rem;
    font-size: var(--font-size-6);
  }

  .fwf_modale:not(.fwf_borderless_modale) .fwf_modale_header .btn {
    font-size: 0.8rem;
    padding: 0.25rem 0.6rem;
  }

  .fwf_modale:not(.fwf_borderless_modale) .fwf_modale_header .btn > svg {
    height: 13px;
  }

  .fwf_modale > .fwf_modale_header > .fwf_close {
    right: 0.8rem;
    top: 0;
    bottom: 0;
    margin-block: auto;
    transform: none;
  }

  .fwf_modale .fwf_modale_contenu {
    padding: 0.5rem 0.5rem;
  }

  .fwf_modale .fwf_modale_onglets + .fwf_modale_contenu {
    padding-top: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .fwf_modale.has-action .fwf_modale_contenu {
    padding-bottom: 0.5rem;
  }

  .fwf_modale .fwf_modale_onglets {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .fwf_modale .fwf_modale_onglets .liste-onglets {
    top: 0;
    overflow-x: auto;
    scrollbar-color: var(--secondary-1);
  }

  .fwf_modale .fwf_modale_onglets .liste-onglets::-webkit-scrollbar {
    height: 3px;
  }

  .fwf_modale .fwf_modale_onglets .liste-onglets::-webkit-scrollbar-thumb {
    background: var(--secondary-1);
    border-radius: 999rem;
  }

  .fwf_modale .fwf_modale_onglets .item-onglet {
    padding: 0.3rem 0.65rem;
    font-size: 0.85rem;
    white-space: nowrap;
  }

  .fwf_modale .fwf_zone_action {
    right: 0.5rem;
    left: 0.5rem;
    display: flex;
    justify-content: center;
    padding: 0.25rem;
    border-radius: 0 0 var(--arrondi-2) var(--arrondi-2);
  }

  .fwf_modale .fwf_zone_action .btn {
    font-size: 1rem;
    padding: 0.2rem 1rem;
  }
}