/** ===============================================

  Responsive

  ===============================================**/

/** ===============================================

  Layout

  ===============================================**/

/** ===============================================

  Flexbox

  ===============================================**/

/** ===============================================

  Position

  ===============================================**/

/** ===============================================

  Effects

  ===============================================**/

/** ===============================================

  Buttons

  ===============================================**/

/** ===============================================

  Components

  ===============================================**/

html {

  background-color: #ffffff; }



.section,

.section--small,

.custom-section-title,

.block--views-blockrelated-block,

.section--xs {

  padding-left: 1rem;

  padding-right: 1rem; }



.btn-cookies {

  position: absolute;

  margin-top: 20px;

  bottom: 0; }

  .btn-cookies button {

    cursor: pointer;

    background-color: #ffffff;

    color: #000 !important;

    border-radius: 3px;

    border: 2px solid #000;

    padding: 9px 15px;

    font-size: 12px;

    margin: 10px 0 5px 5px;

    font-size: 12px;

    font-weight: normal;

    font-style: normal;

    transition: all .3s; }

    .btn-cookies button:hover {

      background-color: #000;

      border-color: transparent;

      color: #ffffff !important; }



.container,

.section .inner {

  margin: auto; }

  @media (min-width: 48rem) {

    .container,

    .section .inner {

      max-width: 82rem; } }



.container--small,

.section--small .inner {

  margin: auto; }

  @media (min-width: 48rem) {

    .container--small,

    .section--small .inner {

      max-width: 68rem; } }



.container--xs,

.section--xs .inner {

  margin: auto; }

  @media (min-width: 48rem) {

    .container--xs,

    .section--xs .inner {

      max-width: 48rem; } }



.user-login-form,

.site-header-row,

.site-footer-row {

  margin: auto; }

  @media (min-width: 48rem) {

    .user-login-form,

    .site-header-row,

    .site-footer-row {

      max-width: 82rem; } }



.region--precontent .inner,

.region--before-content .inner,

.region--after-content .inner,

.region--breadcrumbs .inner {

  margin: auto; }

  @media (min-width: 48rem) {

    .region--precontent .inner,

    .region--before-content .inner,

    .region--after-content .inner,

    .region--breadcrumbs .inner {

      max-width: 68rem; } }



.site-footer-row {

  padding-left: 1rem;

  padding-right: 1rem; }

  @media (min-width: 48rem) {

    .site-footer-row {

      max-width: 90vw; } }

  @media (min-width: 82rem) {

    .site-footer-row {

      max-width: 82rem; } }



.site {

  background-color: #ffffff; }

  @media (max-width: 48rem) {

    .site {

      padding: 1rem; } }



.user-login-form {

  padding: 1rem 0; }



.region--precontent {

  margin-top: 7rem; }

  @media (min-width: 48rem) {

    .region--precontent {

      margin-top: 10rem; } }
      
  .page-node-type-homepage .region--precontent,
  .page-node-type-accueil-choeur .region--precontent {

    position: absolute; }



.region--prefooter {

  background: #f3f3ef; }







.preheader{

  position: fixed;

  top:0;

  left: 0;

  right: 0;

  z-index: 99;

} 

@media (min-width: 48rem) {

  .toolbar-vertical .preheader,

  .toolbar-horizontal .preheader {

    top: 39px; }

  .toolbar-tray-open .preheader {

    top: 79px; } 

}

.message-exc a:hover{

  color:000;

}

.message-exc{

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 5px;

  background: #000;

  color: #fff;

  height: 50px;

  font-size: 16px;

  font-style: normal;

  font-weight: 400;

  line-height: 24px; /* 150% */

}

.message-exc .field,

.message-exc .field p{

  margin:0;

}

.message-exc a{

  color: #fff;

  font-weight: 600;

}

@media (max-width:520px){

  .message-exc{

    padding: 10px 20px;

    height: auto;

  }

}