:root {
  --bp-sm-min-width: 576px;
  --bp-md-min-width: 768px;
  --bp-lg-min-width: 992px;
  --bp-xl-min-width: 1200px;
  --bp-xxl-min-width: 1400px;

  --size-header-height: 110px;
  
  /* Note: On utilise uniquement le nom Typekit pour éviter les conflits avec les polices locales */
  --font-family: "itc-avant-garde-gothic-pro", "Century Gothic", "Futura", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --sidebar-width: 16rem;
  --sidebar-width-open: 50vw;
  --topbar-height: 4rem;

  --100vh: calc(var(--vh, 1vh) * 100);
}

html {
  font-size: 16px;
  padding: 0;
  margin: 0;
}


body {
  background: #FFFAFA;
  color: var(--color-main-black);
  /* FONT SUR TOUT LE SITE */
  font-family: var(--font-family);
}

body.preprod,
body.preprod header,
body.preprod header .container-wrapper,
body.preprod.maintenance-page header {
  /*background: var(--color-yellow1);*/
}

#toolbar-administration
{
  z-index: 100000;
}

/********************************************** GLOBAL *******************************************/
.toolbar-fixed.toolbar-vertical {
  padding-top: 70px !important;
}

a, a:hover {
  text-decoration: none;
}

a:focus {
  outline: none;
}

.far, .fas {
  font-size: 26px;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
}

table thead tr,
table thead tr th,
table tbody tr th
{
  background-color: var(--color-main-background) !important;
}

table thead tr td a,
table thead tr th a
{
  color: var(--color-main-black);
}

.node--unpublished
{
  background-color: var(--color-unpublished-node);
}

/********************************************** STRUCTURE ****************************************/

body.downsize-container .container {
  max-width: 960px;
}


a.a-mailto
{
  word-wrap: break-word;
}

/********************************************** BUTTONS ******************************************/
.btn-primary, .btn-secondary, .btn-success, .btn-danger {
  /* margin-bottom: 7px; */

}

.btn {
  padding: .75rem 1rem;
  width: fit-content;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  border-radius: .75rem;
  border-width: .125rem;
  border-style: solid;
  box-shadow: none;

  font-weight: 700;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);

  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus-visible {
  background-color: var(--color-primary) !important;;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;

  box-shadow: 0 .5rem 1rem rgba(var(--color-primary-rgb), 0.30);
  transform: scale(1.01);
}
.btn-primary:active, .btn-primary:focus-visible {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  
  box-shadow: none;
  transform: scale(.98);
}
.btn-primary .icon.idle {
  display: inline;
}
.btn-primary .icon.hover {
  display: none;
}
.btn-primary:hover .icon.idle,
.btn-primary:focus-visible .icon.idle,
.btn-primary:active .icon.idle {
  display: none;
}
.btn-primary:hover .icon.hover,
.btn-primary:focus-visible .icon.hover,
.btn-primary:active .icon.hover {
  display: inline;
}
 

.btn-light {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);

  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn-light:hover {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);

  box-shadow: 0 .5rem 1rem rgba(var(--color-white-rgb), 0.30);
  transform: scale(1.01);
}
.btn-light:active, .btn-light:focus-visible {
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: var(--color-primary) !important;

  box-shadow: none;
  transform: scale(.98);
}

.btn-outline-primary {
  background-color: var(--color-white);
  border-color: var(--color-primary);
  color: var(--color-primary);
  box-shadow: none !important;

  transition: color 0.3s ease, background-color 0.3s ease;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
}
.btn-outline-primary:active, .btn-outline-primary:focus-visible {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-white) !important;
} 

.btn-outline-secondary {
  background-color: var(--color-primary);
  border-color: var(--color-white);
  color: var(--color-white);
  box-shadow: none !important;

  transition: color 0.3s ease, background-color 0.3s ease;
}
.btn-outline-secondary:hover {
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: var(--color-primary) !important;
}
.btn-outline-secondary:active, .btn-outline-secondary:focus-visible {
  background-color: var(--color-white) !important;
  border-color: var(--color-white) !important;
  color: var(--color-primary) !important;
} 

.btn-outline-gris {
  background-color: var(--color-white);
  border-color: var(--color-gris);
  color: var(--color-gris);
  box-shadow: none !important;

  transition: color 0.3s ease, background-color 0.3s ease;
}
.btn-outline-gris:hover {
  background-color: var(--color-gris) !important;
  border-color: var(--color-gris) !important;
  color: var(--color-white) !important;
}
.btn-outline-gris:active, .btn-outline-gris:focus-visible {
  background-color: var(--color-gris) !important;
  border-color: var(--color-gris) !important;
  color: var(--color-white) !important;
} 

.btn-icon-menu {
  width: 2.5rem;
  height: 2.5rem;
  padding: .5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  background: none;
  border: none;
  box-shadow: none;
  color: var(--color-white);
  font-size: 1.5rem;
  line-height: 1;

  transition: transform 0.3s ease;
}
.btn-icon-menu:hover, .btn-icon-menu:active, .btn-icon-menu:focus-visible {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--color-white);

  transform: scale(1.1);
}


.btn .icon.idle {
  display: inline;
}
.btn .icon.hover {
  display: none;
}
.btn:hover .icon.idle,
.btn:focus-visible .icon.idle,
.btn:active .icon.idle {
  display: none;
}
.btn:hover .icon.hover,
.btn:focus-visible .icon.hover,
.btn:active .icon.hover {
  display: inline;
}

.btn img.icon {
  width: 1.5rem;
  height: 1.5rem;
  background: none;
}


/********************************************** HEADER *******************************************/
header {
}

header .navbar-toggler {
  font-size: 22px;
}

/********************************************** FOOTER *******************************************/
footer {
}

/********************************************** MODAL ********************************************/
.modal.show {
  z-index: 999999;
}
.modal-dialog .modal-content {
  padding: 1.5rem 3rem;

  border-radius: 1.5rem;
  background: var(--Blanc, #FFF);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.07);
}
@media (min-width: 576px) {
  .modal-dialog {
    max-width: calc(100% - 3rem);
    width: fit-content;
  }
  .modal-dialog .modal-content {
    padding: 1.5rem 5rem;
  }  
  .modal-dialog .modal-content.modal-success {
    padding: 3.5rem 5rem;
  }
}

body.toolbar-fixed .modal-dialog
{
  margin-top: 90px;
}

body.toolbar-fixed .modal-dialog.modal-fullscreen {
  margin: 0;
}

.modal .btn-close {
/*  background: none;*/
}

.modal .modal-header .btn-close {
  width: 2rem;
  height: 2rem;
  margin: 0;
  background-size: 50%;
}


/********************************************** FORM *********************************************/
.form-item {
  margin-top: 1.2rem;
  margin-bottom: 1.2rem;
}
.form-item.form-type-checkbox {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.form-item label {
  display: block;
  margin-bottom: .25rem;

  color: var(--color-gris);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.form-item input[type="radio"].color-primary,
.form-item input[type="checkbox"].color-primary {
  border-color: var(--color-primary);
  outline: 0;
  box-shadow: none;
}
.form-item input:checked[type=checkbox].color-primary {
  background-color: var(--color-primary);
}
.form-item input[type="radio"] + label,
.form-item input[type="checkbox"] + label {
  margin-bottom: 0;

  font-weight: 300;
}
.form-item input[type="text"],
.form-item input[type="email"],
.form-item input[type="number"],
.form-item input[type="password"],
.form-item textarea {
  padding: 1rem 1.5rem;

  border-radius: 0.75rem;
  border: none;
  outline: none;
  background-color: var(--color-white);
  box-shadow: none;

  color: var(--color-gris);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.form-item input[type="text"]:disabled,
.form-item input[type="email"]:disabled,
.form-item input[type="number"]:disabled,
.form-item input[type="password"]:disabled,
.form-item textarea:disabled {
  background-color: #E6E6E6;
}

.form-item input[type="text"].with-shadow,
.form-item input[type="email"].with-shadow,
.form-item input[type="number"].with-shadow,
.form-item input[type="password"].with-shadow,
.form-item textarea.with-shadow {
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.07);
}

.form-item input[type="text"]::placeholder,
.form-item input[type="email"]::placeholder,
.form-item input[type="number"]::placeholder,
.form-item input[type="password"]::placeholder,
.form-item textarea::placeholder {
  color: var(--color-gris);
  font-family: var(--font-family);
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;

  opacity: 0.6;
}


.form-item input[type="text"].error,
.form-item input[type="email"].error,
.form-item input[type="number"].error,
.form-item input[type="password"].error,
.form-item textarea.error {

}

.form-item input[type="text"].with-shadow.error,
.form-item input[type="email"].with-shadow.error,
.form-item input[type="number"].with-shadow.error,
.form-item input[type="password"].with-shadow.error,
.form-item textarea.with-shadow.error {
  outline: 2px solid red;
}








/* PAGE FAQ */
.accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: #ffffff;
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}





.text-tiny {
  font-size: 0.75rem;
  line-height: 1.1;
}
.text-small {
  font-size: 0.875rem;
  line-height: 1.2;
}