/*
Theme Name: Sans Collier 2025
Description: Inside Web 2025 - thème
Version: 2.0.0
Author: Inside Web
Author URI: https://www.insideweb.be
*/

:root {
    --cabin: "Cabin", sans-serif;
    --roca: "roca", sans-serif; 
    --white: #ffffff;
    --black: #000000;
    --primary: #521124;
    --secondary: #ED6A48;
    --background: #FCEBE0;
    --background-yellow: #FCE197;
    --background-pink: #E8A89C;
    --background-purple: #E5BDE1;
    --wave1-ratio: 0.11875;
    --wave2-ratio: 0.09123;
    --wave3-ratio: 0.11875;
    --wave4-ratio: 0.09123;
    --wave5-ratio: 0.04732;
}

button{
    box-shadow: none !important;
    outline: 0 !important;
}

body{
    font-family: var(--cabin);   
    margin: 0;
    overflow-y: scroll;
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.35px;
}
.mobile{
    display: none;
}
a {
    color: var(--secondary);
    text-decoration: none;
}

a:hover {
    color: var(--primary);
    text-decoration: none;
}

img {
    width: 100%;
}

p:last-child {
    margin-bottom: 0;
}

.button{
    background: var(--secondary);
    border-radius: 23px;
    padding: 11px 40px;
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 0px;
    transition: all 0.5s ease 0s;
    display: block;
    width: fit-content;
    box-shadow: none !important;
    outline: 0 !important;
}

.button:hover{
    background: var(--primary);
    color: var(--white);
}

button.button,
.button {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    -webkit-appearance: none; /* Safari/iOS */
    appearance: none;
}

.button:focus,
.button:active,
.button:focus-visible {
    border: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Firefox inner focus ring */
button.button::-moz-focus-inner {
    border: 0;
}

.hide{
    display: none;
}
/*TITLE*/
.header1{ /*Roca 50px*/
    font-family: var(--roca);
    font-weight: 800;
    font-size: 50px;
    line-height: 64px;
    letter-spacing: 0px;
    margin-bottom: 0px;
}
.header2{ /*Roca 40px*/
    font-family: var(--roca);
    font-weight: 800;
    font-size: 40px;
    line-height: 52px;
    letter-spacing: 0px;
    margin-bottom: 0px;
}
.title1{ /*Roca 25px*/
    font-family: var(--roca);
    font-weight: 800;
    font-size: 25px;
    line-height: 32px;
    letter-spacing: 0px;
    margin-bottom: 0px;
}
.title2,.bloc-texte h3{ /*Cabin 20px*/
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: 0.5px;
    margin-bottom: 0px;
}
.text1{ /*Roca 20px*/
    font-family: var(--roca);
    font-weight: 800;
    font-size: 20px;
    line-height: 25px;
    letter-spacing: 0px;
    margin-bottom: 0px;
}
.text2{ /*Roca 14px*/
    font-family: var(--roca);
    font-weight: 800;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0px;
    margin-bottom: 0px;
}
.text3{ /*Cabin 12px*/
    font-weight: 700;
    font-size: 12px;
    line-height: 15px;
    letter-spacing: 0.3px;
    margin-bottom: 0px;
}
/*Margin & Padding*/
.pt-100{
    padding-top: 100px;
}
.pt-75{
    padding-top: 75px;
}

.pb-100{
    padding-bottom: 100px;
}
.pb-75{
    padding-bottom: 75px;
}

.mb-50{
    margin-bottom: 50px;
}
.mb-40{
    margin-bottom: 40px;
}
.mb-30{
    margin-bottom: 30px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-5px{
    margin-bottom: 5px;
}

/*GENERALE*/
strong{
    color: var(--secondary);
}
.color-white{
    color: var(--white);
}
.color-secondary{ /*#ED6A48*/
    color: var(--secondary);
}
.color-pink{
    color: var(--background-pink);
}
.color-yellow{
    color: var(--background-yellow);
}

.placeholder-primary::placeholder {
    color: var(--primary) !important;
}

.fw-500{
    font-weight: 500;
}
.bg-color-primary{ /*#521124*/
    background: var(--primary);
}
.bg-color-secondary{ /*#ED6A48*/
    background: var(--secondary);
}
.bg-color{ /*#FCEBE0*/
    background: var(--background);
}
.bg-yellow{ /*#FCE197*/
    background: var(--background-yellow);
}
.bg-pink{ /*#E8A89C*/
    background: var(--background-pink);
}
.bg-purple{ /*#E5BDE1*/
    background: var(--background-purple);
}
.gap-16{
    --bs-gutter-x: 16px;
    --bs-gutter-y: 16px;
}
.gap-45{
    --bs-gutter-x: 45px;
    --bs-gutter-y: 50px;
}
.bloc-texte li{
    margin-bottom: 15px;
}
.bloc-texte li:last-child{
    margin-bottom: 0px;
}
.image-arrondi{
    border-radius: 50% 50% 0px 0px;
}
.icone{
    height: 30px;
    width: 30px;
    border-radius: 100%;
    background: var(--background-pink);
    color: var(--primary);
    font-size: 16px;
    justify-content: center;
    align-items: center;
    display: flex;
}
.icone:hover{
    color: var(--white);
}
.wave1-top{
    position: relative;
    overflow: visible;
    z-index: 3;
}
.wave1-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 4px);
  height: 500px;
  background: var(--white);
  -webkit-mask: url("/layout/uploads/2025/08/Intersection-6.svg") no-repeat bottom center / 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask: url("/layout/uploads/2025/08/Intersection-6.svg") no-repeat bottom center / 100%;
  mask-repeat: no-repeat;
  mask-size: 101% auto;
  pointer-events: none;
  z-index: 2;
}
.bg-color.wave1-top::before{
    background: var(--background);
}
.bg-yellow.wave1-top::before{
    background: var(--background-yellow);
}

.bg-pink.wave5-top::before{
    background: var(--background-pink);
}

.wave1-bloc{
    margin-top: -65px;
    z-index: 3;
}
.wave1-bloc2{
    margin-top: -120px;
    z-index: 3;
}
.pb-wave1{
    padding-bottom: calc(var(--wave1-ratio) * 100%);
}
.wave2-top{
    position: relative;
    overflow: visible;
    z-index: 3;
}
.wave2-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
    bottom: calc(100% - 4px);
  height: 100%;
  background: var(--white);
  -webkit-mask: url("/layout/uploads/2025/08/Intersection-4.svg") no-repeat bottom center / 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask: url("/layout/uploads/2025/08/Intersection-4.svg") no-repeat bottom center / 100%;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 2;
  margin-top: 4px;
}
.bg-yellow.wave2-top::before{
    background: var(--background-yellow);
}
.bg-color.wave2-top::before{
    background: var(--background);
}
.bg-purple.wave2-top::before{
    background: var(--background-purple);
}
.pb-wave2{
    padding-bottom: calc(var(--wave2-ratio) * 100%);
}
.wave3-top{
    position: relative;
    overflow: visible;
    z-index: 3;
}
.wave3-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
    bottom: calc(100% - 4px);
  height: 100%;
  background: var(--background-pink);
  -webkit-mask: url("/layout/uploads/2025/08/Intersection-5.svg") no-repeat bottom center / 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask: url("/layout/uploads/2025/08/Intersection-5.svg") no-repeat bottom center / 100%;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 2;
  margin-top: 4px;
}
.pb-wave3{
    padding-bottom: calc(var(--wave3-ratio) * 100%);
}
.wave4-top{
    position: relative;
    overflow: visible;
    z-index: 3;
}
.wave4-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 0;
    bottom: calc(100% - 4px);
  height: 100%;
  background: var(--white);
  -webkit-mask: url("/layout/uploads/2025/08/Intersection-2.svg") no-repeat bottom center / 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask: url("/layout/uploads/2025/08/Intersection-2.svg") no-repeat bottom center / 100%;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  transform: translateY(-100%);
  pointer-events: none;
  z-index: 2;
  margin-top: 4px;
}
.bg-pink.wave4-top::before{
    background: var(--background-pink);
}
.pb-wave4{
    padding-bottom: calc(var(--wave4-ratio) * 100%);
}
.wave5-top{
    position: relative;
    overflow: visible;
    z-index: 3;
}
.wave5-top::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: calc(100% - 4px);
  height: calc(100% + 1px);
  background: var(--white);
  -webkit-mask: url("/layout/uploads/2025/08/Intersection-3.svg") no-repeat bottom center / 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask: url("/layout/uploads/2025/08/Intersection-3.svg") no-repeat bottom center / 100%;
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  pointer-events: none;
  z-index: 2;
}
.bg-purple.wave5-top::before{
    background: var(--background-purple);
}
.pb-wave5{
    padding-bottom: calc(var(--wave5-ratio) * 100%);
}
.wave1-top .container,.wave2-top .container,.wave3-top .container,.wave4-top .container,.wave5-top .container{
    z-index: 5;
    position: inherit;
}
.picto-intro{
    max-width: 250px;
    aspect-ratio: 1/1;
}
.picto-page{
    max-width: 520px;
    aspect-ratio: 1/1;
}
.form-width{
    max-width: 720px;
}
    /*Histoires*/
    .histoires img{
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 100%;
        width: 100%;
    }
    .histoires .swiper-pagination-bullet{
        border: solid 1px var(--primary);
    }
    .histoires .swiper-pagination-bullet-active{
        background-color: var(--primary);
    }
/*Header*/

header .navbar-brand img, footer .navbar-brand img{
    width: 220px;
}
.headerSpace{
    height: 90px;
}
.ancreScroll{
    scroll-margin-top: 90px;
}
.header-nav{
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: var(--background);
}
.navbar-nav{
    gap: 20px;
}
.nav-link{
    font-family: var(--roca);
    font-size: 14px;
    line-height: 16px;
    box-shadow: unset !important;
}
.nav-link:hover{
    color: var(--secondary);
}
.dropdown-menu{
    background-color: var(--background);
    color: var(--primary);
    padding: 5px 20px 20px 20px;
    border-radius: 0px 0px 20px 20px;
    transform: translateY(60px) !important;
    border: unset;
}
.dropdown-menu .menu-item{
    background: unset;
    padding: 5px;
}
.dropdown-item{
    font-family: var(--roca);
    font-size: 14px;
    line-height: 16px;
    color: var(--primary);
    width: fit-content;
    background: unset !important;
    padding: unset;
}
.dropdown-item:hover{
    color: var(--secondary);
}
.dropdown-item.active, .dropdown-item:active{
    color: var(--secondary);
}
/*Footer*/
footer{
    padding-top: 45px;
    padding-bottom: 20px;
    background: var(--primary);
    color: var(--background-pink);
    font-size: 12px;
    letter-spacing: 0.3px;
    line-height: 18px;
}
.logo-footer{
    max-width: 220px;
}
footer a{
    color: var(--background-pink);
    width: fit-content;
}
footer a:hover{
    color: var(--white);
}
#scrollTopBtn {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 100;
  display: none; /* caché par défaut */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transition: opacity 0.3s ease, transform 0.3s ease;
  padding: 0px;
  width: 45px;
  height: 45px;
  font-size: 28px;
}

#scrollTopBtn:hover {
  transform: scale(1.1);
}
/* PAGE 404 */

#page404{
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-self: center;
}

/* FIN PAGE 404 */

/* ====== BUILDER START ======*/

/* separator start */
.heightSeparator{
    height: 200px;
}

/* separator end */

/*====== BUILDER END ======*/

/*ACCEUIL*/
.titleCoverHome{
    position: absolute;
    transform: translate(-50%, 0%);
    top: 10%;
    left: 50%;
    z-index: 1;
}
.imgCoverHome-front{
    height: calc(100vh - 90px);
    min-height: 500px;
    object-fit: cover;
    object-position: bottom;
    filter: brightness(0.85);
}
.imgCoverHome{
    height: 66vh;
    min-height: 350px;
    object-fit: cover;
    object-position: bottom;
    filter: brightness(0.75);
}

.swiper.swiper-accueil {
  position: relative;
}

.swiper-accueil .swiper-pagination {
  position: absolute !important;
  top: 50%;
  right: 5%;
  left: auto !important;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
  transform: translateY(-50%);
  bottom: auto !important;
  width: auto !important;
}

.swiper-accueil .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: transparent;
  opacity: 1;
  transition: 0.3s;
  border: solid 1px var(--white);
}

.swiper-accueil .swiper-pagination-bullet-active {
  background: var(--white);
}

.swiper {
    width: 100%;
}

.animaux{
    display: block;
}
.animaux .date-animaux{
    color: var(--primary);
}
.animaux img{
    border-radius: 50% 50% 0px 0px;
    object-fit: cover;
    aspect-ratio: 16/18;
    object-position: top;
}
a.animaux .title1{
    color: var(--primary);
}
a.animaux .title1.color-white{
    color: var(--white)!important;
}
a.animaux:hover .title1{
    color: var(--secondary);
}
.swiperLast{
    background-color: var(--background-pink);
    border-radius: 50% 50% 0px 0px;
    padding: 40px;
    height: calc(100% - 42px);
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
}

.swiper-adoption .swiper-slide {
  display: flex;
  height: auto;
}

.swiper-adoption .animaux {
  flex: 1;
}

.swiper-button-next, .swiper-button-prev{
    top: 40%;
}

.swiper-button-next:after, .swiper-button-prev:after{
    font-weight: 100;
    font-size: 40px;
    color: var(--secondary);
}
.swiper-pagination{
    position: relative;
}
.swiper-pagination-bullet{
    background: transparent;
    opacity: 1;
    border: solid 1px var(--secondary);
    height: 10px;
    width: 10px;
    margin: 0 1.5px !important;
}
.swiper-pagination-bullet-active{
    background: var(--secondary);
}
.action-home img{
    max-width: 180px;
}
.news-home img{
    border-radius: 40px;
    object-fit: cover;
}
.animaux .sauvetage{
    max-width: 65px;
    position: absolute;
    bottom: 15px;
    right: 5px;
    aspect-ratio: 1/1;
}
.picto-animaux{
    max-width: 325px;
    aspect-ratio: 1/1;
}
.sauvetage img{
    max-width: 60px;
    aspect-ratio: 1/1;
    margin-right: 25px;
}
/*FIN ACCEUIL*/
/*ADOPTION*/
.buble-number{
    padding: 25px 33px;
    border-radius: 0px 50px 50px 50px;
    width: fit-content;
}
.buble-1-1{
    border-radius: 50% 50% 0px 0px;
    padding: 40px;
    height: 340px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    margin-right: 16px;
}
.buble-1-2{
    border-radius: 31px 50px 0px 50px;
    padding: 40px;
    height: fit-content;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    margin-right: 16px;
}
.image-etape-1{
    max-width: 360px;
}
.buble-2-1{
    border-radius: 31px 50px 0px 50px;
    padding: 40px;
    height: fit-content;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    margin-right: 42px;
    width: 40%;
}
.buble-2-2{
    border-radius: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: start;
    align-items: center;
    aspect-ratio: 1/1;
}
.buble-2-2-text{
    max-width: 370px;
    padding: 60px 80px;
    aspect-ratio: 1/1;
    display: flex;
    flex-direction: column;
    margin: auto;
    justify-content: center;
}
.image-etape-2{
    max-width: 425px;
}
.bubles-3{
    max-width: calc(50% - 16px);
}
.buble-3-1{
    border-radius: 0px 50% 50% 0px;
    padding: 20px 80px 20px 40px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    margin-right: 16px;
    height: fit-content;
    margin-bottom: 16px;
}
.buble-3-2{
    border-radius: 50px 31px 50px 0px;
    padding: 40px;
    height: fit-content;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    max-width: 50%;
}
.buble-3-3{
    border-radius: 50% 0px 50% 50%;
    padding: 55px 20px 55px 55px;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    margin-right: 16px;
    height: fit-content;
}
.image-etape-3{
    max-width: 500px;
}
.buble-4-1{
    border-radius: 31px 50px 0px 50px;
    padding: 40px;
    height: fit-content;
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: start;
    max-width: 50%;
}
.image-etape-4{
    max-width: 490px;
}
.image-etape-5{
    max-width: 500px;
}
.responsabilite{
    background-color: var(--background);
    border-radius: 40px;
    padding: 40px;
    height: 100%;
    word-wrap: break-word;
}
.picto-arrow{
    max-width: 100px;
    aspect-ratio: 1/1;
}
/*CHAT/CHIEN*/
.image-animal{
    aspect-ratio: 16/18;
    object-fit: cover;
    border-radius: 50% 50% 0 0;
}
.icone-animaux{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: var(--white);
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
}
.icone-animaux.false{
    background-color: #BA0226;
}
.icone-animaux.true{
    background-color: #00AA7C;
}
.icone-animaux img{
    height: 23px;
}
.icone-animaux.false img{
    height: 30px;
}
.icone-animaux.sorties img{
    height: 15px;
}
.icone-animaux .tooltip {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 54px);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  opacity: 0;
  transition: all 0.3s ease;
}
.icone-animaux:hover .tooltip {
  opacity: 1;
}
.swiper-animaux .swiper-slide a{
    display: block;
}
.swiper-animaux .swiper-slide img{
    border-radius: 40px;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
}
.video iframe{
    border-radius: 40px;
    aspect-ratio: 9/16;
    height: auto;
    max-width: 375px;
    width: 60%;
    min-width: 250px;
}
/*Adopté*/
.filters-animaux .filter-btn{
    font-size: 30px;
    line-height: 40px;
    color:var(--secondary);
    font-family: var(--roca);
    font-weight: 900;
    background: unset;
    border: unset;
    cursor: pointer;
    padding: 0 0 12px 0;
    margin: 0px 6px;
    border-bottom: solid 3px var(--white);
}
.filters-animaux .filter-btn.active{
  border-bottom: solid 3px var(--primary);
}

/* ===== FAQ ===== */

/* bubbles */
.faq-bubbles .bubble{
    position: relative;
    border-radius: 24px;
    padding: 22px 22px 18px;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(0,0,0,.04);
}
.faq-bubbles .title1{
    color: var(--primary);
}
.faq-bubbles .bubble a{ text-decoration: none; }
.faq-bubbles .bubble-title a{ color: var(--primary); }
.faq-bubbles .bubble-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.faq-bubbles .bubble-list li a{
    display: inline-block;
}

.faq-bubbles .bubble-list li{
    position: relative;
    padding-left: 18px; /* space for the dot */
    line-height: 1.35;
}

.faq-bubbles .bubble-list li::before {
    content: "";
    position: absolute;
    left: 4px;                 /* tweak to align visually */
    top: 0.72em;               /* aligns with text baseline */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
    transition: transform .15s ease, background .15s ease;
}

.faq-bubbles .bubble:hover{ filter: brightness(0.98); }

/* bubble colors */
.bubble-pink   { background: var(--background-pink); }
.bubble-beige  { background: var(--background); }
.bubble-yellow { background: var(--background-yellow); }
.bubble-orange { background: #FFD1B8; } /* custom */
.bubble-purple { background: var(--background-purple); }

/* headings */
.faq-h2{
    color: var(--primary);
    scroll-margin-top: 100px; /* compensation header sticky */
}
.faq-h3{
    scroll-margin-top: 100px;
}

/* accordion (details/summary) */
.faq-accordion{ display: grid; }
.faq-item{
    background: var(--white);
    border-radius: 0;
    border-top: 1px solid var(--secondary);

    padding: 0 14px;
}
.faq-item[open]{ border-color: var(--secondary); }
.faq-question{
    cursor: pointer;
    padding: 14px 28px 14px 0;
    position: relative;
}
.faq-question::after{
    content: '+';
    position: absolute;
    right: 0; top: 12px;
    font-family: var(--roca);
    color: var(--primary);
    font-size: 35px;
    line-height: 1;
}
.faq-item[open] .faq-question::after{ content: '–'; }
.faq-answer{
    padding: 0 0 14px 0;
    color: var(--primary);
    font-weight: 500;
}
/* remove native disclosure marker (triangle) */
.faq-accordion .faq-question::-webkit-details-marker { display: none; } /* Safari/Chromium */
.faq-accordion .faq-question::marker { content: ""; }                   /* Firefox */

/* custom dot before the question */
.faq-accordion .faq-question{
    position: relative;
    padding-left: 18px;              /* space for the dot */
}
.faq-accordion .faq-question::before{
    content: "";
    position: absolute;
    left: 0;                         /* align to text */
    top: 0.9em;                      /* vertical align to baseline */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);      /* same color as titles */
    transition: background .15s ease, transform .15s ease;
}

/* optional: change color/size when the item is open/hover */
.faq-item[open] .faq-question::before{ background: var(--secondary); transform: scale(1.1); }
.faq-accordion .faq-question:hover::before{ background: var(--secondary); }

/*CONTACT*/
.contact-link{
    color: var(--primary);
    width: fit-content;
}
.contact-link i{
    color: var(--background-pink);
    margin-right: 10px;
}
.contact-icone{
    color: var(--white);
}
.contact-icone:hover{
    color: var(--primary);
}
.contact-link:hover{
    color: var(--secondary);
}
/*SE RENDRE*/
.chastre-refuge{
    background: var(--secondary);
    color: var(--white);
    padding: 40px 35px 25px 35px;
    border-radius: 40px;
}
.button-rendre{
    background: var(--background-yellow);
    color: var(--primary);
}
.button-rendre:hover{
    background: var(--primary);
    color: var(--white);
}
.map iframe{
    display: block;
    width: 100%;
    filter: grayscale(1);
    min-height: 300px;
    height: 66vh;
}
@media only screen and (max-width: 1400px){ 
}
@media only screen and (max-width: 1200px){ 
    .buttons-menu .button{
        padding: 10px 20px;
    }
    header .navbar-brand img, footer .navbar-brand img{
        width: 180px;
    }
    .navbar-nav{
        gap: 10px;
    }
    .headerSpace{
        height:80px;
    }
    .dropdown-menu{
        transform: translateY(56px) !important;
    }
    .ancreScroll{
        scroll-margin-top: 80px;
    }
    .wave1-bloc2{
        margin-top: -60px;
    }
}
@media only screen and (max-width: 992px){ 
    #navbarNav,.buttons-menu{
        display: none !important;
    }
    .burgerMenu{
        background: transparent;
        border: unset;
        font-size: 30px;
        color: var(--primary);
    }
    .burgerMenu:hover{
        color: var(--secondary);
    }
    #offcanvasMenu{
        height: auto;
        overflow-y: scroll;
        padding: 20px 10px;
    }
    #offcanvasMenu .navbar-brand img{
        width: 180px;
    }
    #offcanvasMenu .bouton-close{
        font-size: 30px;
        background: transparent;
        border: unset;
        color: var(--primary);
    }
    #offcanvasMenu .bouton-close:hover{
        color: var(--secondary);
    }
    #offcanvasMenu .navbar-nav .dropdown-menu{
        position: relative !important;
        transform: translateY(0px) !important;
        border-radius: 20px;
        padding: 10px 5px;
        max-width: 250px;
    }

    /*TITLE*/
    .header1{ /*Roca 50px*/
        font-size: 40px;
        line-height: 52px;
    }
    .header2{ /*Roca 40px*/
        font-size: 32px;
        line-height: 42px;
    }
    .title1{ /*Roca 25px*/
        font-size: 20px;
        line-height: 25px;
    }
    .title2,.bloc-texte h3{ /*Cabin 20px*/
        font-size: 16px;
        line-height: 20px;
    }
    .text1{ /*Roca 20px*/
        font-size: 16px;
        line-height: 20px;
    }
    .text2{ /*Roca 14px*/
        font-size: 12px;
        line-height: 14px;
    }
    .text3{ /*Cabin 12px*/
        font-size: 12px;
        line-height: 14px;
    }

    .wave1-bloc,.wave1-bloc2{
        margin-top: -40px;
    }
}
@media only screen and (max-width: 768px) {
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }
    .pt-100{
        padding-top: 75px;
    }
    .pb-100{
        padding-bottom: 75px;
    }
    .pt-75{
        padding-top: 50px;
    }
    .pb-75{
        padding-bottom: 50px;
    }
    .wave2-top::before, .wave3-top::before, .wave4-top::before{
        margin-top: 2px;
    }
    .wave5-top::before{
        bottom: calc(100% - 1px);
    }
    /*TITLE*/
    .header1{ /*Roca 50px*/
        font-size: 32px;
        line-height: 42px;
    }
    .header2{ /*Roca 40px*/
        font-size: 26px;
        line-height: 34px;
    }
    .title1{ /*Roca 25px*/
        font-size: 18px;
        line-height: 22px;
    }
    .title2,.bloc-texte h3{ /*Cabin 20px*/
        font-size: 14px;
        line-height: 18px;
    }
    .text1{ /*Roca 20px*/
        font-size: 14px;
        line-height: 28px;
    }
    .text2{ /*Roca 14px*/
        font-size: 12px;
        line-height: 14px;
    }
    .text3{ /*Cabin 12px*/
        font-size: 10px;
        line-height: 12px;
    }
    .button {
        padding: 8px 20px;
    }
    .swiper-button-next:after, .swiper-button-prev:after{
        font-size: 30px;
    }
    .swiperLast{
        padding: 20px;
        height: calc(100% - 32px);
    }
    .faq-section-left img{
        margin-bottom: 20px;
    }
    .faq-section-right img{
        margin-top: 20px;
    }
    .wave1-bloc2,.wave1-bloc{
        margin-top: 0px;
    }
    .buble-number{
        padding: 15px 20px;
    }
    .bulles{
        flex-direction: column;
    }
    .etape-1{
        flex-direction: column-reverse;
    }
    .image-etape-1{
        max-height: 300px;
        object-fit: contain;
        margin-top: 20px;
    }
    .buble-1-1{
        height: 250px;
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .buble-1-2{
        margin-right: 0px;
    }
    .image-etape-2{
        max-height: 300px;
        object-fit: contain;
    }
    .buble-2-1{
        margin-right: 0px;
        width: 100%;
        margin-bottom: 20px;
    }
    .buble-2-2-text{
        padding: 30px 40px;
    }
    .etape-3{
        flex-direction: column-reverse;
    }
    .image-etape-3{
        max-height: 300px;
        object-fit: contain;
        margin-top: 20px;
    }
    .bubles-3{
        max-width: 100%;
    }
    .buble-3-1{
        margin-right: 0px;
        margin-bottom: 20px;
    }
    .buble-3-3{
        margin-bottom: 20px;
    }
    .buble-3-2{
        max-width: 100%;
    }
    .image-etape-4{
        max-height: 300px;
        object-fit: contain;
    }
    .buble-4-1{
        max-width: 100%;
    }
    .etape-5{
        flex-direction: column-reverse;
    }
    .image-etape-5{
        max-height: 300px;
        object-fit: contain;
        margin-top: 20px;
    }
    .picto-arrow{
        max-width: 80px;
    }
    .histoires img{
        max-width: 250px;
    }
    .filters-animaux .filter-btn{
        font-size: 20px;
        line-height: 30px;
    }
    .etapes-abandon{
        gap: 20px;
    }
    .news-home img{
        border-radius: 10px;
    }
    .heightSeparator{
        height: 50px;
    }
    .wave1-top,  .wave2-top,  .wave3-top,  .wave4-top,  .wave5-top{
        padding-top: 20px;
    }
    .faq-accordion .faq-question::before{
        top: 1.4rem;
    }
}
@media only screen and (max-width: 576px) {
    .imgCoverHome-front{
        height: calc(100vh - 120px);
    }
}
/* @media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1160px;
    }
} */