:root {
  --primary-h: 206; /* hue */
  --primary-s: 22%; /* saturation */
  --primary-l: 48%; /* lightness */

  --primary-color-05: hsla(200, 20%, 97%, 1);
  --primary-color-10: hsla(210, 25%, 94%, 1);
  --primary-color-20: hsla(208, 24%, 86%, 1);
  --primary-color-30: hsla(207, 23%, 74%, 1);
  --primary-color-40: hsla(206, 23%, 60%, 1);
  --primary-color-50: hsla(206, 22%, 48%, 1);
  --primary-color-60: hsla(208, 25%, 42%, 1);
  --primary-color-70: hsla(208, 24%, 32%, 1);
  --primary-color-80: hsla(210, 20%, 24%, 1);
  --primary-color-90: hsla(212, 21%, 16%, 1);
  
  --primary-color: var(--primary-color-50);
  
  --accent-h: 30; /* hue */
  --accent-s: 83%; /* saturation */
  --accent-l: 50%; /* lightness */

  --accent-color-05: hsla(40, 90%, 96%, 1);
  --accent-color-10: hsla(39, 86%, 89%, 1);
  --accent-color-20: hsla(40, 88%, 77%, 1);
  --accent-color-30: hsla(38, 88%, 65%, 1);
  --accent-color-40: hsla(35, 87%, 56%, 1);
  --accent-color-50: hsla(30, 83%, 50%, 1);
  --accent-color-60: hsla(24, 86%, 44%, 1);
  --accent-color-70: hsla(18, 82%, 37%, 1);
  --accent-color-80: hsla(14, 75%, 31%, 1);
  --accent-color-90: hsla(13, 83%, 14%, 1);

  --accent-color: var(--accent-color-50);

  --main-h: 208; /* hue */
  --main-s: 9%; /* saturation */
  --main-l: 41%; /* lightness */

  --main-color-05: hsla(180, 5%, 96%, 1);
  --main-color-10: hsla(216, 10%, 90%, 1);
  --main-color-20: hsla(207, 10%, 82%, 1);
  --main-color-30: hsla(210, 9%, 69%, 1);
  --main-color-40: hsla(210, 8%, 53%, 1);
  --main-color-50: hsla(208, 9%, 41%, 1);
  --main-color-60: hsla(210, 9%, 36%, 1);
  --main-color-70: hsla(216, 7%, 27%, 1);
  --main-color-80: hsla(214, 6%, 24%, 1);
  --main-color-90: hsla(220, 8%, 15%, 1);

  --text-h: 214; /* hue */
  --text-s: 6%; /* saturation */
  --text-l: 24%; /* lightness */

  --text-color: hsla(214, 6%, 24%, 1);
  --title-color: hsla(220, 8%, 15%, 1);

  --background-h: 0; /* hue */
  --background-s: 0%; /* saturation */
  --background-l: 100%; /* lightness */

  --background-color: hsla(0, 0%, 100%, 1);

  --primary-font: 'area-normal', sans-serif;
  --secondary-font: 'area-normal', sans-serif;

  --h1-font-size: 3rem;
  --h2-font-size: 2.5rem;
  --h3-font-size: 2rem;
  --headings-line-height: 1.2;

  --link-color: var(--primary-color-50);

  --border-radius: 0;
  --button-border-radius: 0;
}

/* ANIMATIONS CSS */
/* ============== */
.reveal{
  position: relative;
  transition: 0.5s all ease-out;
}
.reveal.active{
  
}
.delay-0{
  transition-delay: 0ms;
}
.delay-1{
  transition-delay: 200ms;
}
.delay-2{
  transition-delay: 400ms;
}
.delay-3{
  transition-delay: 600ms;
}
.delay-4{
  transition-delay: 800ms;
}
.delay-300{
  transition-delay: 300ms;
}
.duration-500{
  transition-duration: 500ms;
}
.zoom-up-top{
  transform-origin: top center;
  transform: scale(0);
  opacity: 0;
}
.zoom-up-top.active{
  transform: scale(1);
  opacity: 1;
}
.zoom-up-top-right{
  transform-origin: top right;
  transform: scale(0);
  opacity: 0;
}
.zoom-up-top-right.active{
  transform: scale(1);
  opacity: 1;
}
.slide-right{
  transform-origin: center right;
  transform: translatex(100px);
  opacity: 0;
}
.slide-right.active{
  transform: translatex(0);
  opacity: 1;
}
.slide-left{
  transform-origin: center left;
  transform: translatex(-100px);
  opacity: 0;
}
.slide-left.active{
  transform: translatex(0);
  opacity: 1;
}
.slide-down{
  transform-origin: center top;
  transform: translateY(-100px);
  opacity: 0;
}
.slide-down.active{
  transform: translateY(0);
  opacity: 1;
}
.slide-up{
  transform-origin: center bottom;
  transform: translateY(100px);
  opacity: 0;
}
.slide-up.active{
  transform: translateY(0);
  opacity: 1;
}

/* GÉNÉRAL */
/* ======= */
.section{
  padding: 4rem 0;
  @media (width >= 601px){
    padding: 6rem 0;
  }
  @media (width >= 993px){
    padding: 7.5rem 0;
  }
}
/* @media screen and (min-width: 601px) {
  .section{
    padding: 4rem 0;
  }
} */
.max-container{
  max-width: none;
}
@media screen and (min-width: 1280px) {
  .max-container{
    min-width: 1200px;
  }
}
@media screen and (min-width: 1220px) {
  .container{
    width: 100%;
    max-width: 1352px;
    padding-inline: 1rem;
  }
}
.valide {
  color: hsl(120deg 100% 35%);
}
.erreur, .errors {
  color: hsl(0deg 100% 46%);
}

#blocHorsLigne{
  z-index: 99999!important;
  right: 0;
  position: absolute!important;
}

/* Titres */
h1, .title-1,
h2, .title-2,
h3, .title-3,
h4, .title-4{
  font-family: var(--secondary-font);
  font-weight: 700;
  color: var(--title-color);
  span:not(.underline-text){
    display: block;
    font-size: 65%;
    font-weight: 700;
    line-height: 1.2;
    margin: 0.5rem auto 0;
  }
  span.underline-text{
    position: relative;
    display: inline;
    font-size: inherit;
    margin: 0;
    line-height: inherit;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: var(--accent-color-40);
    text-decoration-thickness: 4px;
  }
}

/* Correction Font Icons */
.material-icons{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;

  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

/* Boutons */
.btn{
  display: inline-block;
  color: #000000;
  background-color: #bbb;
  font-family: var(--primary-font);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  /* letter-spacing: 0.0325rem; */
  text-align: center;
  text-decoration: none;
  /* text-transform: uppercase; */
  padding: 0.375rem 0.875rem;
  border: 2px solid;
  border-color: #bbb;
  border-radius: 0.25rem;
  box-sizing: border-box;
  transition: 0.3s ease-in-out;
  transition-property: color, background-color, border-color;
  /* @media (width >= 993px){
    font-size: 0.8125rem;
  } */
  &.primary{
    color: #fff;
    background-color: var(--primary-color-60);
    border-color: var(--primary-color-60);
    &:is(:hover, :focus-visible){
      color: #fff;
      background-color: var(--primary-color-80);
      border-color: var(--primary-color-80);
    }
  }
  &.secondary{
    color: var(--primary-color-50);
    background-color: var(--primary-color-10);
    border-color: var(--primary-color-10);
    &:is(:hover, :focus-visible){
      color: #fff;
      background-color: var(--primary-color-60);
      border-color: var(--primary-color-60);
    }
  }
  &.accent{
    color: var(--main-color-90);
    background-color: var(--accent-color-40);
    border-color: var(--accent-color-40);
    &:is(:hover, :focus-visible){
      color: var(--main-color-90);
      background-color: var(--accent-color-50);
      border-color: var(--accent-color-50);
    }
  }
  &.outlined{
    color: var(--main-color-90);
    border-color: var(--accent-color-40);
    background-color: transparent;
    &:is(:hover, :focus-visible){
      color: var(--main-color-90);
      border-color: var(--accent-color-40);
      background-color: var(--accent-color-40);
    }
  }
  &.arrow{
    min-width: 3rem;
    width: clamp(3rem, 3rem, 3rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    padding: 0;
    &::before{
      content: '\e5cc';
      font-family: 'Material Symbols Outlined';
      font-weight: normal;
      font-style: normal;
      font-size: 24px;
      line-height: 1;
      letter-spacing: normal;
      text-transform: none;
      display: inline-block;
      white-space: nowrap;
      word-wrap: normal;
      direction: ltr;
      -webkit-font-feature-settings: 'liga';
      -webkit-font-smoothing: antialiased;
    
      font-variation-settings:
      'FILL' 0,
      'wght' 400,
      'GRAD' 0,
      'opsz' 24;
      opacity: 1;
    }
  }
  span[class^=material-]{
    vertical-align: middle;
  }
  &:has([class^=material-]){
    white-space: nowrap;
  }
}

/* Slick */
.slick-dots{
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  bottom: 0;
  li{
    margin: 0;
    button{
      height: 2rem;
      width: 2rem;
      text-align: center;
      .slick-dot-icon{
        display: inline-block;
        opacity: 1;
        color: transparent;
        text-align: center;
        &::before{
          content: '';
          display: block;
          width: 1rem;
          height: 1rem;
          background-color: var(--main-color-30);
          border-radius: 50%;
          transition: 0.3s ease-in-out;
        }
      }
      &:is(:hover, :focus){
        .slick-dot-icon{
          &::before{
            background-color: var(--primary-color-30);
          }
        }
      }
    }
    &.slick-active{
      button{
        .slick-dot-icon{
          &::before{
            background-color: var(--primary-color-50);
          }
        }
      }
    }
  }
}
.slick-slider.slick-dotted{
  margin-bottom: 0;
  padding-bottom: 3.5rem;
}

.slick-prev,
.slick-next{
  /* top: auto;
  bottom: -2.75rem; */
  z-index: 10;
  width: 3rem;
  height: 3rem;
  opacity: 1;
  background-color: var(--primary-color-10);
  border: none;
  border-radius: 0.25rem;
  transition: 0.3s ease-in-out;
  &:is(:hover, :focus-visible){
    background-color: var(--primary-color-80);
    span.slick-prev-icon::before,
    span.slick-next-icon::before{
      color: var(--primary-color-10);
    }
  }
  span{
    text-align: center;
    &:is(.slick-prev-icon, .slick-next-icon){
      opacity: 1;
      display: inline-block;
      font-size: 1rem;
      &::before{
        content: '\e5cc';
        color: var(--primary-color-80);
        opacity: 1;
        font-size: 1.5rem;
        line-height: 2;
        transition: 0.3s ease-in-out;
      }
    }
    &.slick-prev-icon{
      rotate: 180deg;
    }
  }
  &:hover{
    span{
      opacity: 1;
    }
  }
  &:focus{
    .slick-prev-icon,
    .slick-next-icon{
      margin-left: 0;
    }
  }
}
/* .slick-prev{
  left: 36%;
}
.slick-next{
  right: 36%;
} */

.slider-slick {
  width: 100%;
  height: 735px;
  background-color: var(--background-color);
  position: relative;
  z-index: 0;
  @media (width <= 600px) {
    display: block;
  }
  .slick {
    height: 100%;
  }
}
.slide-img {
  min-height: 735px;
  background-size: cover;
  background-position: center;
  &.slide-01 {
    background-image: url('../assets/gifs/slider/slide-01.jpg'); 
  }
  &.slide-02 {
    background-image: url('../assets/gifs/slider/slide-02.jpg');
  }
  &.slide-03 {
    background-image: url('../assets/gifs/slider/slide-03.jpg');
  }
  .container {
    min-height: 500px;
    .bloc {
      height: 500px;
    }
  }
}

/* BRAND */
/* ===== */
header .brand img.footer-only,
footer .brand img.header-only,
.rappel_telephonique .brand img.footer-only {
  display: none;
}
.brand{
  a{
    display: inline-flex;
    scale: 1;
    transition: 0.3s ease-in-out;
    &:is(:hover, :focus-visible){
      scale: 1.1;
    }
  }
}

/* HEADER */
/* ====== */
header {
  /* Sticky */
  /* Menu mobile */
  .menu-mobile {
    height: 5rem;
    background-color: var(--background-color);
    .brand{
      a{
        img{
          width: auto;
          max-height: 72px;
        }
      }
    }
    button {
      &.btn-menu:not(#menu-back) {
        background-color: #fff;
        border: 2px solid var(--primary-color-50);
        border-radius: 50%;
        color: var(--primary-color-50);
      }
      &#menu-back.btn-menu {
        color: var(--primary-color-50);
      }
    }
  }

    /* Header Content */
  .header-content{
    /* Top Bar */
    .top-bar{
      @media (width >= 993px) {
        /* Correction 3e sous-menu */
        .main-nav ul li.sous_menu ul.dropdown li.sous_menu ul.ssdropdown{
          display: none;
          width: max-content;
          max-width: 400px;
          background-color: rgba(255, 255, 255, 1);
          position: absolute;
          top: 0;
          left: 100%;
          box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .08);
          z-index: 2;
        }
        .main-nav ul li.sous_menu ul.dropdown li.sous_menu:hover ul.ssdropdown {
          display: block;
        }
      }
    }
    /* Main Content */
    .main-header-content{
      background-color: #fff;
      @media (width >= 800px){
        #main-nav ul li.sous_menu.opened > a{
          padding-left: 20px;
        }
      }
      @media (width >= 993px){
        .container{
          width: 100%;
          padding-inline: 1rem;
        }
        .wrapper{
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 1rem;
          padding-block: 0.25rem;
          .navigation-header{
            .topbar-navigation{
              display: flex;
              justify-content: flex-end;
              align-items: center;
              gap: 1.5rem;
              padding-block: 0.375rem;
              #topbar-nav{
                & > ul{
                  display: flex;
                  justify-content: flex-end;
                  align-items: center;
                  gap: 0.5rem;
                  & > li{
                    & > a{
                      padding: 0.25rem;
                    }
                  }
                }
                ul{
                  li{
                    a{
                      font-size: 0.875rem;
                      font-weight: 700;
                      line-height: 1.3;
                      color: var(--title-color);
                      transition: 0.3s ease-in-out;
                      &.selected{
                        color: var(--primary-color-50);
                      }
                      &:is(:hover, :focus-visible){
                        color: var(--primary-color-50);
                      }
                    }
                    &.sous_menu{
                      &:is(:hover, :focus-visible),
                      &:has(a:is(:hover, :focus-visible)){
                        & > ul.dropdown{
                          display: flex;
                        }
                      }
                      ul{
                        z-index: 101;
                        li{
                          &::before{
                            content: none;
                          }
                          a{
                            font-size: 0.625rem;
                            padding: 0.25rem;
                          }
                        }
                      }
                    }
                  }
                }
              }
              .header-coordonnees{
                display: flex;
                align-items: center;
                gap: 0.5rem 1rem;
                font-size: 0.875rem;
                .reseaux-sociaux{
                  ul{
                    flex-wrap: nowrap;
                    li{
                      a{
                        svg{
                          fill: #000;
                          transition: 0.3s ease-in-out;
                        }
                        &:is(:hover, :focus-visible){
                          svg{
                            fill: var(--accent-color-40);
                          }
                        }
                      }
                    }
                  }
                }
                .horaires{
                  position: relative;
                  margin: 0 0 0 2rem;
                  padding-left: 0;
                  line-height: 1.5;
                  &::before{
                    content: '\e8b5';
                    position: absolute;
                    top: 0;
                    left: -2rem;

                    font-family: 'Material Symbols Outlined';
                    font-weight: normal;
                    font-style: normal;
                    font-size: 150%;
                    line-height: 1;
                    letter-spacing: normal;
                    text-transform: none;
                    display: inline-block;
                    white-space: nowrap;
                    word-wrap: normal;
                    direction: ltr;
                    -webkit-font-feature-settings: 'liga';
                    -webkit-font-smoothing: antialiased;
                    color: currentColor;
                    font-variation-settings:
                    'FILL' 0,
                    'wght' 400,
                    'GRAD' 0,
                    'opsz' 24;
                  }
                  br{
                    display: none;
                  }
                }
                .coordonnee-telephone{
                  position: relative;
                  margin-inline: auto;
                  padding-left: 2rem;
                  text-align: center;
                  font-weight: 700;
                  line-height: 1.5;
                  color: var(--title-color);
                  &::after{
                    content: '\e0b0';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    translate: 0 -50%;
                    font-family: 'Material Symbols Outlined';
                    font-weight: normal;
                    font-style: normal;
                    font-size: 150%;
                    line-height: 1;
                    letter-spacing: normal;
                    text-transform: none;
                    display: inline-block;
                    white-space: nowrap;
                    word-wrap: normal;
                    direction: ltr;
                    -webkit-font-feature-settings: 'liga';
                    -webkit-font-smoothing: antialiased;
                    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
                  }
                }
              }
            }
            .main-navigation{
              display: flex;
              justify-content: flex-end;
              align-items: center;
              gap: 1.5rem;
              padding-block: 0.5rem;
              #nav-container{
                margin: 0;
                #main-nav{
                  ul{
                    li{
                      a{
                        font-size: 1rem;
                        font-weight: 700;
                        line-height: 1.5;
                        color: var(--title-color);
                        margin: 0;
                        transition: 0.3s ease-in-out;
                        &.selected{
                          color: var(--primary-color-50);
                        }
                        &:is(:hover, :focus-visible){
                          color: var(--primary-color-50);
                        }
                      }
                      &.sous_menu{
                        &:is(:hover, :focus-visible),
                        &:has(a:is(:hover, :focus-visible)){
                          & > ul.dropdown{
                            display: flex;
                          }
                        }
                        & > a{
                          position: relative;
                          padding-right: 1.5rem;
                          border-right: none;
                          &::after{
                            content: '';
                            position: absolute;
                            top: 50%;
                            right: 0.5rem;
                            translate: 0 -50%;
                            width: 0;
                            height: 0;
                            border-top: 5px solid currentColor;
                            border-inline: 4px solid transparent;
                            margin: 0;
                          }
                        }
                        ul{
                          li{
                            a{
                              font-size: 0.875rem;
                              font-weight: 600;
                              padding: 0.25rem;
                            }
                          }
                        }
                      }
                    }
                  }
                  & > ul{
                    display: flex;
                    justify-content: flex-end;
                    align-items: center;
                    gap: 0.5rem 1rem;
                    & > li{
                      & > a{
                        position: relative;
                        padding: 0.25rem;
                        &.selected,
                        &:is(:hover, :focus-visible){
                          color: var(--primary-color-50);
                          padding-block: 0.25rem;
                        }
                      }
                    }
                  }
                }
              } 
              .header-boutons{
                display: flex;
                align-items: center;
                gap: 0.5rem 0.75rem;
                [class^=btn-]{
                  a{
                    white-space: nowrap;
                  }
                }
                .coordonnee-telephone{
                  position: relative;
                  display: inline-block;
                  margin-inline: auto;
                  padding-left: 2.125rem;
                  text-align: center;
                  font-size: 1rem;
                  font-weight: 700;
                  line-height: 1.75;
                  color: var(--title-color);
                  &::after{
                    content: '\e0b0';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    translate: 0 -50%;
                    font-family: 'Material Symbols Outlined';
                    font-weight: normal;
                    font-style: normal;
                    font-size: 1.5rem;
                    line-height: 1;
                    letter-spacing: normal;
                    text-transform: none;
                    display: inline-block;
                    white-space: nowrap;
                    word-wrap: normal;
                    direction: ltr;
                    -webkit-font-feature-settings: 'liga';
                    -webkit-font-smoothing: antialiased;
                    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
                  }
                }
              }         
            }
          }
        }
      }
      @media (width >= 993px) and (width < 1150px){
        .wrapper{
          .navigation-header{
            .main-navigation{
              .header-boutons{
                flex-direction: column;
                justify-content: stretch;
                [class^=btn-]{
                  width: 100%;
                  a{
                    width: 100%;
                  }
                }
              }
            }
          }
        }
      }
      /* @media (width >= 993px) and (width < 1165px){
        .wrapper{
          .navigation-header{
            .main-navigation{
              #nav-container{
                #main-nav{
                  & > ul{
                    flex-wrap: wrap;
                    & > li{
                      & > a{
                        font-size: 0.875rem;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      } */
      @media (width < 993px){
        padding-block: 0.5rem;
        background-color: var(--background-color);

        nav#main-nav > ul > .sous_menu.opened > a{
          background-color: transparent!important;
          color: var(--text-color)!important;
          transition: none;
        }

        .wrapper{
          .brand{
            display: none;
          }
          .navigation-header{
            .topbar-navigation{
              .header-coordonnees{
                display: none;
              }
            }
            .main-navigation{
              #nav-container{
                #main-nav, #topbar-nav{
                  ul{
                    li{
                      a{
                        font-size: 1.25rem;
                        font-weight: 700;
                        line-height: 1.2;
                        color: var(--text-color);
                        background-color: transparent;
                        padding: 1.5rem;
                        border-bottom: 1px solid var(--main-color-20);
                        &.selected{
                          background-color: var(--primary-color-40);
                          color: var(--primary-color-90);
                        }
                      }
                    }
                  }
                }
              }
              .header-boutons{
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: stretch;
                gap: 0.75rem;
                .coordonnee-telephone{
                  position: relative;
                  display: inline-block;
                  margin-inline: auto;
                  padding-left: 2.125rem;
                  text-align: center;
                  font-size: 1.125rem;
                  font-weight: 700;
                  line-height: 1.75;
                  color: var(--text-color);
                  &::after{
                    content: '\e0b0';
                    position: absolute;
                    top: 50%;
                    left: 0;
                    translate: 0 -50%;
                    font-family: 'Material Symbols Outlined';
                    font-weight: normal;
                    font-style: normal;
                    font-size: 1.75rem;
                    line-height: 1;
                    letter-spacing: normal;
                    text-transform: none;
                    display: inline-block;
                    white-space: nowrap;
                    word-wrap: normal;
                    direction: ltr;
                    -webkit-font-feature-settings: 'liga';
                    -webkit-font-smoothing: antialiased;
                    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
                  }
                }
                [class^=btn-]{
                  text-align: center;
                }
              }
            }
          }
        }
      
        #nav-container {
          height: calc(100vh - 5rem);
          margin-top: 5rem;
          .nav{
            ul.dropdown,
            ul.ssdropdown {
              height: calc(100vh - 5rem);
              top: 5rem;
            }
          }
        }
        #nav-container .nav>ul>.sous_menu.opened>a,
        #nav-container .nav .dropdown>.sous_menu.opened>a {
            height: 5rem;
            color: var(--text-color);
        }      
      }
    }
  }

  /* Fold */
  .fold {
    position: relative;
    /* padding-block: 5rem 2.5rem; */
    background-image: url('../assets/gifs/bg-fold-index.jpg');
    background-position: bottom 10% center;
    background-repeat: no-repeat;
    background-size: cover;
    .container {
      text-align: center;
      align-content: center;
      min-height: 700px;
      padding-block: 5rem;
      .bloc-text{
        position: relative;
        margin: 0 auto;
        text-align: center;
        max-width: 683px;
        &::before{
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% -50%;
          width: 160%;
          height: 190%;
          background-image: url('../assets/gifs/img-fold-index.png');
          background-position: center;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        & > *{
          position: relative;
        }
        :is(h1, h2, h3, [class^=title-]){
          text-align: center;
          margin: 0 auto 1.25rem;
          color: #fff;
          @media (width < 993px){
            font-size: 2rem;
          }
        }
        .boutons{
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.5rem 1rem;
          flex-wrap: wrap;
          margin-top: 1.25rem;
          a.btn.outlined{
            color: #fff;
            &:is(:hover, :focus-visible){
              color: var(--main-color-90);
            }
          }
        }
      }
    }
  }
}
body.menu_opened{
  header{
    .menu-mobile{
      background-color: var(--background-color);
      button{
        &.btn-menu:not(#menu-back) {
          background-color: transparent;
          /* border-radius: 50%;
          border: 1px solid var(--title-color); */
          color: var(--primary-color-50);
        }
        &#menu-back.btn-menu {
          background-color: transparent;
          /* border-radius: 50%;
          border: 1px solid var(--title-color); */
          color: var(--primary-color-50);
        }
      }
    }
  }
}
@media (width < 993px){
  body.index-page{
    padding-top: 80px;
  }
}

/* MAIN */
/* ==== */
  /* Encart prestations */
#encart-prestations{
  display: grid;
  grid-template-columns: repeat(var(--repeat, 4), 1fr);
  gap: 0;
  @media (width < 993px){
    --repeat: 2;
  }
  @media (width < 768px){
    --repeat: 1;
  }
}

.prestations-card{
  a{
    position: relative;
    display: block;
    padding: 1.5rem 2.5rem;
    transition: 0.3s ease-in-out;
    text-decoration: none;
    &::before,
    &::after{
      content: '';
      position: absolute;
      top: 1.25rem;
      right: 1.25rem;
      translate: 50% -50%;
      width: 1.5rem;
      height: 0.25rem;
      background-color: var(--primary-color-80);
    }
    &::after{
      rotate: 90deg;
    }
    .icon{
      margin-bottom: 1.5rem;
      svg{
        *{
          transition: 0.3s ease-in-out;
        }
      }
    }
    strong{
      display: block;
      font-family: var(--secondary-font);
      font-size: 2.5rem;
      line-height: 1.2;
      font-weight: 700;
      transition: 0.3s ease-in-out;
      @media (width < 993px){
        font-size: 1.75rem;
      }
    }
    &:is(:hover, :focus-visible){
      background-color: var(--accent-color-30)!important;
      .icon{
        svg{
          *{
            fill: var(--main-color-60);
          }
        }
      }
      strong{
        color: var(--main-color-80)!important;
      }
    }
  }
}

  /* Encart catalogue */
#encart-catalogue{
  :is(h1, h2, h3){
    text-align: center;
    margin: 0 auto 3rem;
  }
  .slick-catalogue{
    .slick-prev,
    .slick-next{
      top: 38%;
    }
  }
  .encart-btn{
    text-align: center;
    margin: 3rem auto 0;
  }
}

.catalogue-card {
  padding: 1.25rem;
  .card-image{
    position: relative;
    margin-bottom: 1.25rem;
    &::after{
      content: '';
      position: absolute;
      inset: 0;
      background-color: var(--accent-color-40);
      opacity: 0;
      pointer-events: none;
      transition: 0.3s ease-in-out;
      z-index: 2;
    }
    a{
      position: relative;
      display: block;
      &::before,
      &::after{
        content: '';
        position: absolute;
        top: 1.25rem;
        right: 1.25rem;
        translate: 50% -50%;
        width: 1.5rem;
        height: 0.25rem;
        background-color: var(--primary-color-80);
        z-index: 3;
      }
      &::after{
        rotate: 90deg;
      }
      img{
        display: block;
        width: 100%;
        height: 282px;
        object-fit: cover;
        object-position: center;
      }
    }
  }
  .card-content{
    .card-categorie{
      display: none;
    }
    .card-title{
      a{
        --font-size: 1.25rem;
        --line-height: 1.2;
        --line-clamp: 2;
        display: -webkit-box;
        -webkit-line-clamp: var(--line-clamp);
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-family: var(--secondary-font);
        font-size: var(--font-size);
        font-weight: 700;
        line-height: var(--line-height);
        text-decoration: none;
        text-align: center;
        color: var(--title-color);
        height: calc(var(--font-size) * var(--line-height) * var(--line-clamp));
      }
    }
    .card-text{
      display: none;
    }
  }
  &:has(a:is(:hover, :focus-visible)){
    .card-image{
      &::after{
        opacity: 0.8;
      }
    }
  }
}

  /* Encart avis */
#encart-avis {
  h2{
    position: relative;
    text-align: center;
    margin: 0 auto 3rem;
  }
  .slick-avis {
    .card {
      --background-card: var(--main-color-05);
      background-color: var(--background-card);
      padding: 1rem;
      border: none;
      border-radius: 6px;
      .name {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5rem;
        margin-bottom: 0;
        color: var(--title-color);
      }
      .date {
        font-size: 12px;
        line-height: 1.2;
        color: var(--main-color-60);
      }
      .card-text {
        font-size: 1rem;
        line-height: 1.5;
        margin-top: 0.5rem;
        padding-left: 86px;
        height: 4.5rem;
        color: var(--text-color);
        &::after {
          background: none;
        }
      }
      &:not(.js-show-more-height) {
        .card-text {
          height: 4.5rem !important;
        }
        .align-right {
          position: relative;
          margin-top: -2rem;
        }
        .show-more {
          &::before {
            content: '...';
          }
        }
      }
      .show-more {
        padding: 0 0 0 0.8rem;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5;
        font-family: var(--primary-font);
        color: var(--primary-color-60);
        text-decoration: none;
        text-transform: none;
        border: none;
        border-radius: none;
        outline: none;
        background: none;
        background-color: var(--background-card);
        &:is(:hover, :focus-visible) {
          color: var(--primary-color-80);
        }
      }
    }
  }
}

  /* Encart actualités */
#encart-actualites{
}

.actualites-card{
}

  /* Encart contact-coordonnées */
#encart-contact-coordonnees{
  background-color: var(--primary-color-05);
  .wrapper{
    display: grid;
    gap: 1.5rem;
    @media (width >= 993px){
      grid-template-columns: 1fr 1fr;
    }
    .item{
      &:nth-child(2){
        position: relative;
        padding: 5rem 3rem;
        border-radius: 0;
        background-color: var(--primary-color-70);
        color: #fff;
        @media (width < 993px){
          padding: 2rem 1.5rem;
        }
        h2{
          color: #fff;
          margin: 0 0 0.75rem;
        }
        a.btn.outlined{
          color: white;
          &:is(:hover, :focus-visible){
            color: var(--main-color-90);
          }
        }
      }
      h2{
        margin: 0 0 1.5rem;
        /* text-transform: uppercase; */
      }
      h4{
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.2;
        margin: 3rem 0 0.5rem;
        color: #fff;
        &:first-child{
          margin-top: 0;
        }
      }
      address{
        margin: 0;
        span{
          display: block;
        }
      }
      .horaires{
        margin: 0;
        br{
          display: none;
        }
        tbody{
          tr{
            font-weight: 400!important;
            &:not(:last-child){
              td{
                padding-bottom: 0.75rem;
              }
            }
            td{
              &:first-child{
                padding-right: 1.25rem;
              }
            }
          }
        }
      }
      .map-container{
        margin-top: 3rem;
        .googlemapssearch{
          height: auto!important;
          iframe{
            height: 450px;
          }
        }
      }
      form{
        input[type=text],
        input[type=tel],
        input[type=email],
        textarea{
          border-radius: 0;
          border: 1px solid var(--main-color-20);
          padding: 0.625rem 1.125rem;
          background-color: #fff;
        }
        .nom-prenom,
        .cp_ville{
          @media (width >= 601px){
            display: grid;
            gap: 1rem;
            grid-template-columns: 1fr 1fr;
          }
        }
        p{
          margin: 0 0 0.75rem;
        }
        .divGenerateurRequired{
          display: none;
        }
        .divGenerateur{
          margin: 0 0 0.75rem;
          & > label{
            display: none;
          }
          ul{
            margin: 0;
            li{
              label{
                display: flex;
                align-items: flex-start;
                font-size: 0.75rem;
                padding: 0;
                input{
                  margin-right: 0.5rem;
                }
              }
            }
          }
        }
        p.demarche{
          display: block;
          font-size: 0.75rem;
          margin: 0 0 0.75rem;
        }
        p.submit{
          margin: 0.75rem 0 0;
        }
      }
    }
  }
}

  /* Blocs */
div[id^=bloc-]{
  position: relative;
  overflow: hidden;
  .row{
    .col{
      position: relative;
      &:last-child{
        & > :last-child{
          margin-bottom: 0;
        }
      }
    }
  }
  :is(h1, h2, h3){
    margin: 0 0 0.75rem;
  }
  h1.h1-geoloc{
    &::before{
      content: 'RENAMCO';
      position: relative;
      display: block;
      font-size: inherit;
      margin: 0;
      line-height: inherit;
      text-decoration: underline;
      text-underline-offset: 6px;
      text-decoration-color: var(--accent-color-40);
      text-decoration-thickness: 4px;
    }
    span{
      &::before{
        content: none;
      }
    }
  }
  .boutons{
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
  }
  /* video{
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    object-position: center;
    @media (width >= 993px){
      position: absolute;
      inset: 0 0.75rem;
      width: calc(100% - 1.5rem);
    }
  } */
  img{
    display: block;
    object-fit: cover;
    object-position: center;
  }
  @media (width < 993px){
    img,
    video{
      display: block;
      width: 100%;
      height: 350px;
      aspect-ratio: auto;
      object-fit: cover;
      object-position: center;
      margin-bottom: 1.5rem;
    }
  }

  &#bloc-01{
    @media (width >= 993px){
      padding-block: 10rem;
    }
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .bloc-text{
      @media (width >= 993px){
        max-width: 650px;
      }
    }
  }
  &#bloc-02{
    img{
      object-fit: contain;
      object-position: center;
    }
  }
  &#bloc-02,
  &#bloc-04,
  &#bloc-06,
  &#bloc-08,
  &#bloc-09{
    background-color: var(--primary-color-05);
  }
  &#bloc-03{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .bloc-text{
      @media (width >= 993px){
        max-width: 650px;
      }
      color: var(--main-color-05);
      :is(h1, h2, h3){
        color: #fff;
      }
      a.btn.outlined{
        color: #fff;
        &:is(:hover, :focus-visible){
          color: var(--main-color-90);
        }
      }
    } 
  }
}
.bloc-primary {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 0 0 0 1.5rem;
  margin-block: 1.5rem;
  border-radius: 0.625rem;
  border-left: 2px solid var(--accent-color-50);
}


/* FOOTER */
/* ====== */
footer{
  /* border-top: 1px solid var(--title-color); */
  background-color: var(--primary-color-10);
  padding-block: 1.25rem;
  .main-footer{
    .wrapper{
      display: grid;
      gap: 1rem;
      padding-block: 1.25rem;
      @media (width >= 993px) {
        /* display: flex;
        justify-content: space-between;
        flex-wrap: nowrap; */
        grid-template-columns: repeat(3, 1fr);
      }
      .item-wrapper{
        @media (width < 993px){
          margin-inline: auto;
          width: fit-content;
          text-align: center;
        }
        h4{
          margin-block: 0 0.5rem;
          font-family: var(--secondary-font);
          font-size: 1.25rem;
          font-weight: 600;
          line-height: 1.2;
        }
        .coordonnee-telephone,
        .coordonnee-adresse,
        .horaires{
          position: relative;
          margin-block: 0.75rem;
          padding-left: 2rem;
          &::before{
            position: absolute;
            top: 0;
            left: 0;

            font-family: 'Material Symbols Outlined';
            font-weight: normal;
            font-style: normal;
            font-size: 24px;
            line-height: 1;
            letter-spacing: normal;
            text-transform: none;
            display: inline-block;
            white-space: nowrap;
            word-wrap: normal;
            direction: ltr;
            -webkit-font-feature-settings: 'liga';
            -webkit-font-smoothing: antialiased;
            color: currentColor;
            font-variation-settings:
            'FILL' 1,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
          }
          a{
            transition: 0.3s ease-in-out;
            &:is(:hover, :focus-visible){
              color: var(--accent-color-80);
            }
          }
        }
        .coordonnee-adresse{
          span{
            display: block;
          }
        }
        .horaires{
          margin-left: 2rem;
          padding-left: 0;
          line-height: 1.5;
          /* @media (width >= 993px){
            min-width: 325px;
          } */
          br{
            display: none;
          }
          tbody{
            tr{
              td{
                white-space: nowrap;
              }
            }
            tr:not(:last-child){
              td{
                padding-bottom: 0.5rem;
              }
            }
          }
        }
        .coordonnee-telephone::before{ content: '\e0b0'; }
        .coordonnee-adresse::before{ content: '\e55e'; }
        .horaires::before{
          content: '\e8b5';
          left: -2rem;
          font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 24;
        }
        .reseaux-sociaux{
          ul{
            li{
              a{
                svg{
                  fill: #000;
                  transition: 0.3s ease-in-out;
                }
                &:is(:hover, :focus-visible){
                  opacity: 1;
                  svg{
                    fill: var(--primary-color-50);
                  }
                }
              }
            }
          }
        }
      }
    }
    .footer-menu{
      padding-block: 1.25rem;
      ul{
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.75rem;
        @media (width < 768px){
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;
        }
        li{
          position: relative;
          &:is(.no-menu, .no-footer){
            display: none;
          }
          a{
            display: inline-block;
            padding: 0.25rem;
            font-size: 1rem;
            font-weight: 400;
            line-height: 1.5;
            text-align: center;
            color: var(--text-color);
            text-decoration: none;
            transition: 0.3s ease-in-out;
            &.selected,
            &:is(:hover, :focus-visible){
              color: var(--primary-color-50);
            }
          }
          ul{
            display: none;
          }
        }
      }
    }
  }
  .sub-footer{
    .wrapper{
      padding-block: 1.25rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.75rem;
      @media (width < 768px){
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
      }
      nav{
        ul{
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 0.25rem 0.75rem;
          margin: 0;
          @media (width < 768px){
            flex-direction: column;
            justify-content: flex-start;
            align-items: center;
          }
          li{
            a{
              font-family: "Inter", sans-serif;
              display: inline-block;
              padding: 0.25rem;
              font-weight: 700;
              line-height: 1.5;
              text-align: center;
              text-decoration: underline;
              text-underline-offset: 3px;
              color: var(--primary-color-50);
              &:is(:hover, :focus-visible){
                text-decoration: none;
              }
            }
          }
        }
      }
    }
  }
}

/* PAGES INTERNES */
/* ============== */
  /* Fil d'ariane */
#fil_ariane,
.fil-ariane{
  margin-block: -2rem 2rem;
  @media (width >= 601px){
    margin-block: -3rem 3rem;
  }
  @media (width >= 993px){
    margin-block: -3.75rem 3.75rem;
    font-size: 0.875rem;
  }
  .first{
    display: inline;
  }
  a{
    color: var(--link-color);
    text-decoration: underline;
    &:is(:hover, :focus-visible){
      text-decoration: none;
    }
  }
}
  /* Relance */
#relance ul{
  padding-left: 0;
}
body.page-interne .sc-content #relance{
  margin-block: 4rem 0rem;
  @media (width >= 601px){
    margin-block: 6rem 0rem;
  }
  @media (width >= 993px){
    margin-block: 7.5rem 0rem;
  }
}
body.page-interne .sc-content #relance ul li a{
  color: var(--link-color);
}
  /* Encart contact */
#encart-contact{
  position: relative;
  &::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100vw;
    height: 100%;
    background-color: var(--primary-color-60);
    z-index: -1;
  }
  /* @media (width < 601px){
    &::before{
      height: calc(100% - 2rem);
    }
  } */
  .row{
    .col{
      &:first-child{
        position: relative;
        @media (width < 993px){
          height: 300px;
        }
        img{
          position: absolute;
          display: block;
          object-fit: cover;
          object-position: center;
          max-width: none;
          @media (width >= 993px){
            top: -7.5rem;
            right: 0.75rem;
            bottom: -7.5rem;
            width: 45vw;
            height: calc(100% + 15rem);
          }
          @media (width < 993px){
            top: -7.5rem;
            right: 50%;
            bottom: 0rem;
            translate: 50%;
            width: 100vw;
            height: calc(100% + 7.5rem);
          }
          @media (width < 601px){
            top: -4rem;
            height: calc(100% + 4rem);
          }
        }
      }
      &:last-child{
        padding-block: 3rem;
        h2{
          color: #fff;
          margin-bottom: 0.5em;
        }
        p{
          color: var(--main-color-05);
        }
        [class^=btn-]{
          margin-top: 1.5rem;
        }
      }
    }
  }
}

#encart-contact .card .card-title{
  margin-bottom: 1rem;
}
@media screen and (max-width: 992px) {
  #encart-contact .row .col:not(:last-child) .card{
    margin-bottom: 2rem;
  }
}  /* Politique de confidentialité */
body.page-politique-confidentialite main .section address{
  margin-bottom: 1rem;
}
  /* Plan du site */
body.plan-site main .section .sitemap-nav ul li:not(:last-of-type){
  margin-bottom: 8px;
}
body.plan-site main .section .sitemap-nav .col:not(.main-nav) ul li:last-of-type{
  display: none;
}
  /* Rappel téléphonique */
.rappel_telephonique{
  .brand{
    text-align: center;
    margin: 2rem 0;
    a{
      display: inline-block;
    }
  }
  h2{
    text-align: center;
  }
}

  /* Page 404 */
  /* Page Contact */
body.contact-page main .section:first-child{
  background-color: var(--primary-color-10);
  padding-block: 5rem;
} 
body.contact-page main .section:first-child .btn-radius{
  color: var(--main-color-90);
  border-radius: 0.25rem;
} 
body.contact-page main .section:first-child .row .col .row{
  flex-wrap: nowrap;
} 
/* body.contact-page main .section:first-child h1{
  color: #fff;
} 
body.contact-page main .section:first-child :is(.fil-ariane, #fil_ariane) a{
  color: #fff;
}  */
body.contact-page main .section:first-child .intro{
  @media (width >= 993px){
    margin-bottom: 0;
  }
} 
body.contact-page main .section:first-child .coordonnee-adresse span{
  display: block;
} 
table.horaires tr > td:not(:last-child) {
  padding-right: 1rem;
}
body.contact-page main ul.coordonnees address{
  margin-top: 0;
  margin-bottom: 0;
}
@media screen and (max-width: 600px) {
  body.contact-page main .section .container .row > .col ul.coordonnees{
    margin-bottom: 1rem;
  }
}
body.contact-page{
  form{
    input[type=text],
    input[type=tel],
    input[type=email],
    textarea{
      border-radius: 0;
      border: 1px solid var(--main-color-20);
      padding: 0.625rem 1.125rem;
      background-color: #fff;
    }
    .nom-prenom,
    .cp_ville{
      @media (width >= 601px){
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
      }
    }
    p{
      margin: 0 0 0.75rem;
    }
    .divGenerateurRequired{
      display: none;
    }
    .divGenerateur{
      margin: 0 0 0.75rem;
      & > label{
        display: none;
      }
      ul{
        margin: 0;
        li{
          label{
            display: flex;
            align-items: flex-start;
            font-size: 0.625rem;
            padding: 0;
            input{
              margin-right: 0.5rem;
            }
          }
        }
      }
    }
    p.demarche{
      display: block;
      font-size: 0.625rem;
      margin: 0 0 0.75rem;
    }
    p.submit{
      margin: 0.75rem 0 0;
    }
  }
  .contact-page-image{
    border-radius: 0.625rem;
    @media (width < 993px){
      margin-top: 1.5rem;
    }
  }
  .contact-page-infos-pratiques{
    color: #fff;
    background-color: var(--primary-color-50);
    border: 1px solid var(--primary-color-50);
    .title-2{
      color: #fff;
      margin-top: 0;
    }
    .row{
      .col{
        .material-icons{
          background-color: var(--primary-color-70);
        }
      }
    }
  }
}

  /* Page devis */
body.devis-page{
  .ac-marketing{
    position: relative;
    padding-block: 3.75rem 3.75rem;
    margin-bottom: 4rem;
    @media (width >= 601px){
      margin-bottom: 6rem;
    }
    @media (width >= 993px){
      margin-bottom: 7.5rem;
    }
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 100vw;
      height: 100%;
      background-image: url('../assets/gifs/bg-ac-marketing.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
    }
    .title-1{
      margin: 0;
      @media (width < 993px){
        font-size: 2rem;
      }
    }
  }
  h1{
    display: none;
  }
  .section{
    padding-top: 0;
  }
  h1{
    margin-bottom: 0.75rem;
  }
  form{
    .row{
      row-gap: 1.5rem;
    }
    fieldset{
      margin-bottom: 1rem;
      & > [class*=divGenerateur]{
        & > label[for=field_23]{
          display: none;
        }
      }
      legend{
        font-family: var(--secondary-font);
        font-size: var(--h3-font-size);
        font-weight: 700;
        color: var(--title-color);
      }
    }
    input[type=text],
    input[type=tel],
    input[type=email],
    select,
    textarea{
      border: 1px solid var(--main-color-40);
      padding: 0.625rem 1.125rem;
      background-color: #fff;
    }
    .nom-prenom,
    .cp_ville{
      @media (width >= 601px){
        display: grid;
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
      }
    }
    p{
      margin: 0 0 0.75rem;
    }
    .divGenerateurRequired{
      display: none;
    }
    p.demarche{
      display: block;
      font-size: 0.625rem;
      margin: 0 0 0.75rem;
    }
    .g-recaptcha{
      margin-top: 1rem;
    }
    p.submit{
      margin: 0.75rem 0 0;
    }
  }
}

  /* Actualités listing */
body.actualites-listing{
  h1{
    /* text-transform: uppercase; */
  }
  .cat_actu{
    ul{
      li{
        a{
          line-height: 1.5;
          margin: 0;
          border-radius: 0.625rem;
          padding: 0.25rem 0.75rem;
        }
      }
    }
  }
  .recherche_actu{
    #input_recherche_actu{
      @media (width >= 601px){
        width: calc(100% - 5.25rem);
        vertical-align: bottom;
      }
    }
    #recherche_actu_submit{
      padding: 2px 1rem;
      @media (width < 601px){
        width: 100%;
      }
      &:is(:hover, :focus-visible){
        padding: 0px 0.75rem;
      }
    }
  }
  #container_actualite_listing{
    .masonry-grid{
      display: grid;
      grid-auto-rows: auto;
      gap: 1.5rem;
      .actualites-listing-card{
        margin: 0;
      }
    }
  }
}

  /* Actualités détail */
body.actualites-detail{
  #listing-autres-actus-categorie{
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      background-color: var(--primary-color-10);
      width: calc(100% + 3rem);
      height: calc(100% + 3rem);
      opacity: 0.3;
      z-index: -1;
    }
    ul{
      li{
        a{
          text-decoration: none;
          transition: 0.3s ease-in-out;
          &:is(:hover, :focus-visible){
            color: var(--accent-color-80);
          }
        }
      }
    }
    .detail-btn{
      text-align: center;
    }
  }
}
  /* Catalogue listing */
body.catalogue-listing{
  .ac-marketing{
    position: relative;
    padding-block: 3.75rem 3.75rem;
    margin-bottom: 4rem;
    @media (width >= 601px){
      margin-bottom: 6rem;
    }
    @media (width >= 993px){
      margin-bottom: 7.5rem;
    }
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 100vw;
      height: 100%;
      background-image: url('../assets/gifs/bg-ac-marketing.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
    }
    .title-1{
      margin: 0;
      @media (width < 993px){
        font-size: 2rem;
      }
    }
  }
  h1{
    display: none;
  }
  .section{
    padding-top: 0;
  }
}
body.catalogue-listing main #catalogue_contenu .masonry-grid{
  display: grid;
  grid-auto-rows: auto;
  gap: 1.5rem;
}

  /* Catalogue détail */
body.catalogue-detail{
  .ac-marketing{
    position: relative;
    padding-block: 3.75rem 3.75rem;
    margin-bottom: 4rem;
    @media (width >= 601px){
      margin-bottom: 6rem;
    }
    @media (width >= 993px){
      margin-bottom: 7.5rem;
    }
    &::before{
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 100vw;
      height: 100%;
      background-image: url('../assets/gifs/bg-ac-marketing.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      z-index: -1;
    }
    h1{
      margin: 0;
      @media (width < 993px){
        font-size: 2rem;
      }
    }
  }
  .section{
    padding-top: 0;
  }
  main{
    .detail-btn{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 0.5rem 1rem;
      flex-wrap: wrap;
      margin-top: 1rem;
    }
  }
}

  /* PaginationControl */
.paginationControl{
  margin: 2.5rem 0;
  text-align: center;
  *{
    color: var(--text-color);
    text-decoration: none;
    text-align: center;
    display: inline-block;
    line-height: 1.8;
    width: 26px;
    height: 26px;
    margin: 0 1rem;
    padding: 0 4px;
    border-radius: 50%;
    @media (width < 993px) {
      margin: 0.5rem 1rem;
    }
  }
  :first-child,
  :last-child{
    font-size: 1.635rem;
    line-height: 0.8;
  }
  .selected{
    color: white;
    background-color: var(--text-color);
  }
  .disabled{
    opacity: 0.5;
  }
  a{
    transition: 0.3s ease-in-out;
    &:is(:hover, :focus-visible){
      color: white;
      background-color: hsla(var(--text-h), var(--text-s), var(--text-l), 0.5);
    }
  }
}

/* Pages internes */
body.page-interne {
  main {
    &:has(.ac-marketing){
      & > .section{
        padding-top: 0;
      }
      .ac-marketing{
        position: relative;
        padding-block: 3.75rem 3.75rem;
        margin-bottom: 4rem;
        @media (width >= 601px){
          margin-bottom: 6rem;
        }
        @media (width >= 993px){
          margin-bottom: 7.5rem;
        }
        &::before{
          content: '';
          position: absolute;
          top: 50%;
          left: 50%;
          translate: -50% -50%;
          width: 100vw;
          height: 100%;
          background-image: url('../assets/gifs/bg-ac-marketing.jpg');
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          z-index: -1;
        }
        .title-1{
          margin: 0;
          @media (width < 993px){
            font-size: 2rem;
          }
        }
      }
    }
    .sc-content {
      :is(h1, h2, h3){
        /* text-transform: uppercase; */
        margin: 1rem 0 0.5rem;
        span{
          font-size: 60%;
          font-weight: 400;
          margin: 0;
        }
      }
      img {
        height: 100%;
        object-fit: cover;
      }
      .galerie{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        gap: 1rem;
        a{
          display: inline-block;
        }
        img{
          display: block;
          width: auto;
          height: 150px;
        }
      }
      .ac-doubleColonne {
        .ac-colonne {
          :is(h1, h2, h3) {
            /* text-transform: uppercase; */
            @media (width >= 993px) {
              margin-top: 0;
            }
          }
          @media (width >= 993px) {
            :last-child{
              margin-bottom: 0;
            }
          }
          &:has(img){
            position: relative;
            img{
              display: block;
              @media (width >= 993px){
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
              }
              @media (width < 993px){
                margin-bottom: 1.5rem;
              }
            }
          }
        }
      }
    }
    #encart-contact {
      margin-block: 7.5rem;
      &::before{
        position: absolute;
        inset: auto;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
      }
      :is(h1, h2, h3){
        margin: 0 0 0.5rem;
        span{
          font-size: inherit;
          font-weight: inherit;
          margin: 0;
        }
      }
    }
  }
}