/* ------------------------------------ *\
  CONTENTS
\* ------------------------------------ */

/**
 * CONTENTS..............You’re reading it!
 * LAYOUT PAGE............................
 * TITRES BR............................
 * ? .....................................
 * FRONT END EDITING ITEMS ...............
 * STYLE DU LIEN BUTTON ..................
 * AMU PUB ...............................
 * WEBFORM ...............................
 * DETAILS ...............................
 * MODAL .................................
 * SKIP LINKS ............................
 * MEDIA QUERIES .........................
*/

.paragraph--type--block-vue .viewsreference--view-title {
  display: none;
}

/* ------------------------------------ *\
  ==LAYOUT PAGE
\* ------------------------------------ */
html,
body {
  overflow-x: clip;
}

body {
  max-width: 1920px;
  margin: 0 auto;
  border-left: solid var(--bs-blue) 1px;
  border-right: solid var(--bs-blue) 1px;
}

.region.region-top-content {
  margin: 0 8.33%;
}

.simple-page .page__content {
  margin: 0 8.33%;
}

.simple-page .page__content .form-control {
  max-width: 20rem;
}

.page__main {
  padding: 0;
}

.main {
  margin-bottom: 3rem;
}

.paragraph {
  position: relative;
}

/* ------------------------------------ *\
  ==ALIGNEMENT CLASSES
\* ------------------------------------ */
.layout__region .paragraph.align-item-left {
  margin-right: auto;
}

.layout__region .paragraph.align-item-right {
  margin-left: auto;
  text-align: right;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: right;
      -ms-flex-pack: right;
          justify-content: right;
}

.layout__region .paragraph.align-item-center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* ------------------------------------ *\
  ==FRONT END EDITING ITEMS
\* ------------------------------------ */
.tabs-wrapper.tabs-primary a {
  color: black;
  background-color: rgba(255 255 255 / 50%);
  margin: 0 0.1rem;
  font-size: 1rem;
}

.tabs-wrapper.tabs-primary a:hover,
.tabs-wrapper.tabs-primary a:focus,
.tabs-wrapper.tabs-primary a:active {
  background-color: rgba(255 255 255 / 100%);
}

.js-form-wrapper,
.js-form-item {
  margin: 0 0 1.5rem;
}

.ui-dialog button.ui-dialog-titlebar-close {
  background: var(--bs-white);
  -webkit-mask-image: url('../../../contrib/gin/dist/media/sprite.svg#close-view');
          mask-image: url('../../../contrib/gin/dist/media/sprite.svg#close-view');
  -webkit-mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
          mask-size: var(--gin-icon-size-close) var(--gin-icon-size-close);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center center;
          mask-position: center center;
}

/* media library front editing */
.media-library-widget-modal .views-form form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding-left: 0;
}

.media-library-widget-modal
  .js-media-library-item.js-click-to-select
  .views-field.views-field-rendered-entity.js-click-to-select-trigger
  .img-fluid.image-style-media-library,
.media-library-widget-modal
  .js-media-library-item.js-click-to-select.views-row
  .views-field.views-field-rendered-entity.js-click-to-select-trigger {
  width: 100%;
}

.media-library-widget-modal
  .js-media-library-item.js-click-to-select.views-row {
  width: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 30%;
          flex: 0 0 30%;
  position: relative;
  max-width: 22%;
  margin: 1rem;
  overflow: hidden;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

.media-library-view--widget .views-table .form-type-checkbox {
  position: relative;
}

.media-library-widget-modal .form-checkbox.form-check-input {
  position: absolute;
  top: 0.5rem;
  left: 2rem;
  z-index: 2;
}

.lpb-enable__button {
  margin-top: -2rem;
}

.layout-paragraphs-component-form
  .frontend-editing__action.frontend-editing__action--edit,
.media-library-widget-modal
  .frontend-editing__action.frontend-editing__action--edit.frontend-editing-open-sidebar {
  display: none;
}

.layout-paragraphs-component-form .form-wrapper .js-media-library-item {
  position: relative;
}

.layout-paragraphs-component-form
  .form-wrapper
  .js-media-library-item
  .btn:hover,
.layout-paragraphs-component-form
  .form-wrapper
  .js-media-library-item
  .node-preview-container
  .node-preview-backlink:hover,
.layout-paragraphs-component-form
  .form-wrapper
  .js-media-library-item
  .button:hover,
.layout-paragraphs-component-form
  .form-wrapper
  .js-media-library-item
  button.link:hover {
  color: transparent;
}

.media-library-widget-modal
  .js-media-library-item.js-click-to-select.views-row.media-library-item--disabled {
  pointer-events: none;
  opacity: 0.5;
}

.dropbutton-action input {
  background: unset;
  color: var(--bs-black);
}

/* ------------------------------------ *\
  ==STYLE DU LIEN BUTTON
\* ------------------------------------ */
.external--link {
  position: relative;
}

.external--link:after {
  margin-left: 0.3rem;
  font: var(--fa-font-regular);
  color: var(--bs-blue);
  content: '\f08e';
  top: 0;
}

/* STYLE BUTTON */

button.cta--button {
  padding-left: 0;
}

.cta--button {
  background-color: transparent;
  border: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--bs-black);
  text-align: left;
  position: relative;
  text-decoration: none;
  padding-right: 2rem;
  margin-bottom: 0.438rem;
  display: inline-block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.cta--button:after {
  position: absolute;
  right: 0;
  content: '\f061';
  font: var(--fa-font-regular);
  font-size: 1rem;
  color: var(--bs-blue);
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
}

.cta--button:before {
  content: '';
  position: absolute;
  width: 100%;
  border-bottom: 2px solid var(--bs-blue);
  bottom: -0.5rem;
  left: 0;
  -webkit-transition: all 1s;
  transition: all 1s;
}

/* Ajouter le même nombre de rem que pour le décalage du after
   Permet de coller au bord de la ligne du dessous */
.paragraph--type--texte .field a:not(.cta--button):focus,
.paragraph--type--texte .field a:not(.cta--button):active,
.paragraph--type--texte .field a:not(.cta--button):hover,
.paragraph--type--texte .field a.link--external:not(.cta--button):focus,
.paragraph--type--texte .field a.link--external:not(.cta--button):active,
.paragraph--type--texte .field a.link--external:not(.cta--button):hover {
  text-decoration: none;
  color: var(--bs-blue);
}

.stretched-link:hover ~ * .cta--button:before,
.stretched-link:active ~ * .cta--button:before,
.stretched-link:focus ~ * .cta--button:before,
.stretched-link:hover ~ .cta--button:before,
.stretched-link:focus ~ .cta--button:before,
.stretched-link:active ~ .cta--button:before,
.cta--button:hover:before,
.cta--button:active:before,
.cta--button:focus:before {
  text-decoration: underline;
}

.stretched-link:hover ~ * .cta--button:after,
.stretched-link:focus ~ * .cta--button:after,
.stretched-link:active ~ * .cta--button:after,
.stretched-link:hover ~ .cta--button:after,
.stretched-link:focus ~ .cta--button:after,
.stretched-link:active ~ .cta--button:after,
.cta--button:hover:after,
.cta--button:focus:after,
.cta--button:active:after {
  right: -0.6rem;
}

.cta--button:hover,
.cta--button:focus,
.cta--button:active {
  color: var(--bs-blue);
}

.bg-blue .cta--button {
  color: var(--bs-white);
}

.bg-blue .cta--button:before {
  border-bottom: 2px solid var(--bs-yellow);
}

.paragraph--type--texte.bg-blue .field a:after,
.bg-blue .cta--button:after {
  color: var(--bs-yellow);
}

.bg-blue .cta--button:hover,
.bg-blue .cta--button:focus,
.bg-blue .cta--button:active {
  color: var(--bs-yellow);
}

/* STYLE LINK */
.paragraph--type--texte .field a.link--external:not(.cta--button),
.cta--link {
  position: relative;
  font-size: 1rem;
  line-height: 1.384rem;
  color: var(--bs-black);
  text-decoration: underline;
  padding-right: 1.8rem;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  display: inline-block;
  background: unset;
  border: 0;
}

.paragraph--type--texte .field a.link--external:after {
  position: absolute;
  right: 0.5rem;
  content: '\f061';
  font: var(--fa-font-regular);
  color: var(--bs-black);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
}

.cta--link::after {
  position: absolute;
  right: 0.5rem;
  content: '\f061';
  font: var(--fa-font-regular);
  color: var(--bs-black);
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
}

.stretched-link:hover ~ * .cta--link,
.stretched-link:active ~ * .cta--link,
.stretched-link:focus ~ * .cta--link,
.stretched-link:hover ~ .cta--link,
.stretched-link:focus ~ .cta--link,
.stretched-link:active ~ .cta--link,
.cta--link:hover,
.cta--link:focus,
.cta--link:active {
  color: var(--bs-blue);
}

.stretched-link:hover ~ .cta--link:after,
.stretched-link:active ~ .cta--link:after,
.stretched-link:focus ~ .cta--link:after,
.stretched-link:hover ~ * .cta--link:after,
.stretched-link:active ~ * .cta--link:after,
.stretched-link:focus ~ * .cta--link:after,
.cta--link:hover:after,
.cta--link:focus:after,
.cta--link:active:after {
  right: -0.6rem;
  color: var(--bs-blue);
}

.paragraph--type--texte .field a:hover,
.paragraph--type--texte .field a:focus,
.paragraph--type--texte .field a:active,
.paragraph--type--texte .field a:hover:after,
.paragraph--type--texte .field a:focus:after,
.paragraph--type--texte .field a:active:after {
  color: var(--bs-blue);
}

.bg-blue .cta--link {
  color: var(--bs-white);
}

.bg-blue .cta--link:before {
  border-bottom: 2px solid var(--bs-yellow);
}

.bg-blue .cta--link:after {
  color: var(--bs-yellow);
}

.bg-blue .stretched-link:hover ~ * .cta--link,
.bg-blue .stretched-link:active ~ * .cta--link,
.bg-blue .stretched-link:focus ~ * .cta--link,
.bg-blue .stretched-link:hover ~ .cta--link,
.bg-blue .stretched-link:active ~ .cta--link,
.bg-blue .stretched-link:focus ~ .cta--link,
.bg-blue .cta--link:hover,
.bg-blue .cta--link:focus,
.bg-blue .cta--link:active {
  color: var(--bs-yellow);
}

.paragraph--type--texte .field a.link--external:after,
.stretched-link .cta--link.link--external:after,
.stretched-link .cta--button.link--external:after,
.cta--link.link--external:after,
.cta--button.link--external:after {
  content: '\f08e';
  margin-left: 0.3rem;
  font: var(--fa-font-sharp-regular);
  display: inline-block;
}

/* Lien mail */
.paragraph--type--texte .field a.link--mail:after,
.stretched-link .cta--link.link--mail:after,
.stretched-link .cta--button.link--mail:after,
.cta--link.link--mail:after,
.cta--button.link--mail:after {
  left: 0;
  content: '\f0e0';
  margin-left: 0.3rem;
  font: var(--fa-font-sharp-regular);
  display: inline-block;
}

.paragraph--type--texte .field a.link--mail,
.stretched-link .cta--link.link--mail,
.stretched-link .cta--button.link--mail,
.cta--link.link--mail,
.cta--button.link--mail {
  padding-right: 0;
  padding-left: 1.8rem;
}

/* Lien telephone */
.paragraph--type--texte .field a.link--tel:after,
.stretched-link .cta--link.link--tel:after,
.stretched-link .cta--button.link--tel:after,
.cta--link.link--tel:after,
.cta--button.link--tel:after {
  left: 0;
  content: '\f095';
  margin-left: 0.3rem;
  font: var(--fa-font-sharp-regular);
  display: inline-block;
}

.paragraph--type--texte .field a.link--tel,
.stretched-link .cta--link.link--tel,
.stretched-link .cta--button.link--tel,
.cta--link.link--tel,
.cta--button.link--tel {
  padding-right: 0;
  padding-left: 1.8rem;
}

/* cta underline (file d'ariane) */

.cta__link--underline {
  background: unset;
  -webkit-box-sizing: unset;
          box-sizing: unset;
  border: 0;
  text-decoration: underline;
  font-size: 0.813rem;
  line-height: 1.124rem;
}

/* STYLE PLUS */
.cta--plus {
  color: var(--bs-black);
  position: relative;
  margin: 1rem 0;
  padding: 0 2rem 0 0;
  background: unset;
  border: 0;
}

.cta--plus::after {
  position: absolute;
  right: 0.7rem;
  font: var(--fa-font-regular);
  color: var(--bs-blue);
  font-weight: bold;
  -webkit-transition: all 1s;
  transition: all 1s;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 50%;
}

.cta--plus.collapsed::after {
  content: '\2b';
}

.cta--plus:not(.collapsed)::after {
  content: '\f068';
}

/* ------------------------------------ *\
  ==PAGINATION
\* ------------------------------------ */
.pager .page-item a {
  border: none;
  color: var(--bs-gray-dark);
}

.pager .page-item.is-active a {
  background-color: transparent;
  color: var(--bs-black);
  position: relative;
}

.pager .page-item.is-active a:after {
  content: '';
  display: block;
  height: 2px;
  width: 18px;
  background-color: var(--bs-black);
  position: absolute;
  left: 8px;
  bottom: 5px;
}

.pager .page-item.pager__item--first,
.pager .page-item.pager__item--last {
  display: none;
}

/* ------------------------------------ *\
  ==DETAILS
\* ------------------------------------ */

.details {
  border: 0;
  margin: 1rem 0;
}

.details summary {
  padding: 0;
  position: relative;
  margin-bottom: 1rem;
  display: inline-block;
}

/* Supprime le marker par défaut */
.details summary::marker {
  content: '';
}

.details--plus summary::after {
  content: '+';
  position: absolute;
  right: -1.8rem;
  font-size: 1.8rem;
  color: var(--bs-blue);
  top: 0;
}

.details--plus[open] summary::after {
  content: '-';
}

/* ------------------------------------ *\
  ==MODAL
\* ------------------------------------ */

.modal iframe {
  aspect-ratio: 16/9;
  max-width: 100%;
  height: auto;
}

.modal h1 {
  font-size: 1.75rem;
  margin-top: 1rem;
}

.modal-dialog {
  width: 60%;
  max-width: unset;
  border: 0;
}

.modal-dialog .modal-content {
  border-radius: 0;
}

.modal-dialog .modal-header {
  width: 100%;
  border: 0;
}

.modal-dialog .modal-header button.btn {
  padding: calc(var(--bs-modal-header-padding-y) * 0.5)
    calc(var(--bs-modal-header-padding-x) * 0.5);
  margin: calc(-0.5 * var(--bs-modal-header-padding-y))
    calc(-0.5 * var(--bs-modal-header-padding-x))
    calc(-0.5 * var(--bs-modal-header-padding-y)) auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.modal-dialog .modal-header button.btn i {
  color: var(--bs-blue);
  margin-left: 0.5rem;
}

.modal-dialog .modal-header .btn {
  background-color: var(--bs-white);
}

.modal-dialog .modal-content iframe {
  width: 100%;
}

/* ------------------------------------ *\
  ==FOOTER
\* ------------------------------------ */

footer .logo {
  max-width: 13rem;
  -webkit-filter: invert(1);
          filter: invert(1);
}

footer .logo,
footer .copyright,
footer .social-icon.menu {
  margin: 0 auto;
  text-align: center;
}

/* ------------------------------------ *\
  ==MEDIA QUERIES
\* ------------------------------------ */
@media screen and (max-width: 991.98px) {
  .cta--button {
    font-size: 1.25rem;
  }
}