#DivPhoneAnim {
    width: 100%;
    overflow:hidden;
}
#DivPhoneAnimBG {
    width: 100%;
    height: 100%;
    background: url(/include/images/sections/home/carousel2/video-1-image-1.jpg);
    background-position:center center;
    background-size:cover;
    transform:scale(1.3);
    transition:all 2s ease-in;
}
.trans-fast {
    transition:all .4s ease-in;
    transform:scale(1);
}
#DivPhoneAnimBG.zout {
    transform:scale(1);
}
#DivVideoMessage {
    position:absolute;
    float:left;
    width:100%;
    min-height:100px;
    z-index:3;
}
#DivPlayButton {
    color: #383838;
    background: rgba(255, 255, 255, 0.4);
    transition: all 0.3s linear;
}
.buttonBlink, #DivPlayButton:hover {
    color: #f0f0f0 !important;
    background: rgba(0, 0, 0, 0.25) !important;
}

.fnt-h1-video {
    text-shadow: #282828 2px 2px, #282828 -1px 1px, #282828 -1px -1px, #282828 1px -1px;
    font-size:50px;
    margin-top: 40px;
}
@media (max-width: 1024px) {
    .fnt-h1-video {    
        font-size:35px;
        margin-top: 25px;
    }
}

@media (max-width: 768px) {
    .fnt-h1-video {    
        text-shadow: #282828 1px 1px, #282828 -1px 1px, #282828 -1px -1px, #282828 1px -1px;
        font-size:27px;
        margin-top: 10px;
    }
}

@media (max-width: 400px) {
    .fnt-h1-video {
        font-size:17px;
    }
}
h1, h2{font-size: 36px; line-height: 38px; margin:16px 0;font-weight: normal; hyphens: none;}
h3{font-size: 24px; line-height: 26px; margin:10px 0;font-weight: normal; hyphens: none;}
@media (max-width: 1250px) {
    h2 {font-size: 30px; line-height: 32px;margin:8px 0;}
    h3 {font-size: 20px; line-height: 22px; margin:7px 0;}
}
@media (max-width: 800px) {
    h2 {font-size: 24px; line-height: 26px;margin:4px 0;}
    h3 {font-size: 18px; line-height: 20px; margin:4px 0;}
}
@media (max-width: 500px) {
    h2 {font-size: 19px; line-height: 19px;margin:2px 0; letter-spacing:1px;}
    h3 {font-size: 16px; line-height: 18px; margin:2px 0;}
}
.div-container-carousel {
    padding: 20px 20px  20px;
    height: 725px;
}
.owl-item {
    border: 1px solid #d4c37b;
    border-radius: 13px;
}

.owl-carousel .item {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    height: 650px;
    border-radius: 12px;
    background-size:cover;background-position:bottom center;
}

.owl-dot.active span {
    background:#9e0e40 !important;
}
.owl-dot:hover > span {
    background:#9e0e40 !important;
}

@media (max-width: 1200px) {
    .div-container-carousel {
        padding: 0;
    }
    .owl-item {
        border: 0px;
        border-radius: 0;
    }
    .owl-carousel .item {
        border-radius: 0;
    }
}

.item-text {
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    padding: 14px;
}
.owl-carousel h1, .owl-carousel h2, .owl-carousel h3 {
    text-shadow: #000000 1px 1px, #000000 -1px 1px, #000000 -1px -1px, #000000 1px -1px;
    padding: 5px;
}

.item1 {
    background:url(/include/images/sections/home/carousel/sofa-1-1.jpg);
}
#DivCarouselCustomized .item {
    height: 400px;
}
@media (max-width: 768px) {
    .owl-carousel .item {
        height: 400px;
    }
    .owl-carousel .item h3 {
        font-size: 18px;
    }
    .owl-carousel .item p {
        font-size: 16px;
    }
    .item-text {
        margin: 0;
    }
    #DivCarouselCustomized .item {
        height: 280px;
    }
    .div-container-carousel {
        height: 435px;
    }
}
.owl-carousel{position: relative;}
.owl-theme .owl-prev{position: absolute; top: 40%; left: 24px;}
.owl-theme .owl-next{position: absolute; top: 40%; right: 24px;}
#DivCarouselCustomized .owl-next, #DivCarouselCustomized .owl-prev {
    top:50%;
}
.owl-theme .owl-prev,
.owl-theme .owl-next{
    font-size: 62px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    width: 40px;
    height: 40px;
    line-height: 24px !important;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.owl-theme .owl-prev:hover{-webkit-transform: translateX(-3px); transform: translateX(-3px);}
.owl-theme .owl-next:hover{-webkit-transform: translateX(3px); transform: translateX(3px);}

.owl-theme .owl-nav [class*="owl-"]:hover {
    background: transparent;
    color: #333333;
    text-decoration: none;
    border-radius: 12px;
}

ul.dash, ul.triangle{
    padding-top:10px;
    list-style-type: none;
    margin-left:0px;
}
ul.dash li {
    padding: 10px;
    padding-left:0px;
    margin-left:0px;
}
@media (max-width: 768px) {
    ul.dash li {
        padding: 0px;
    }
}
ul.dash > li:before {
    content: '\2014';
    position: absolute;
    margin-left: -20px;
}
ul.triangle {
    margin-left: -20px;
}
ul.triangle li {
    padding-top:5px;
}
ul.triangle > li:before {
    margin-top:-7px;
    font-size: 28px;
    content: '\2023';
    position: absolute;
    margin-left: -20px;
}
.rotate {
    transform: rotate(90deg);
    /*transform: rotate(180deg);*/
    transition: .7s;
}
.rotate-0 {
    transform: rotate(0deg);
    transition: .7s;
}

.owl-theme .owl-prev span,
.owl-theme .owl-next span{display: block; height: 40px; width: 40px;}

@media (min-width: 1200px) {
    .container{
        max-width: 1300px;
    }
}
.div-customized-container {
    padding: 20px 20px 12px 20px;
}
@media (max-width: 768px) {
    .div-customized-container {
        margin: 0 -10px;
        padding: 10px 10px 2px 10px;
    }
}
.cell-topic, .cell-artist {
    width: 33%;
}
.cell-artist > div {
    background:#fffdfa;
    border: 2px solid #ded1c1;
    border-radius: 10px;
}
.cell-topic > div, .cell-artist > div {
    margin: 20px;
}
.cell-topic > div > div {
    justify-content: flex-end;
    height:300px;
    transition: all .5s;
}
.div-background {
    transition: all .5s;
}
.no-overflow {
    overflow: hidden;
    border-radius: 10px;    
}
.cell-topic > div > div:hover, .cell-artist .div-background:hover {
    transform: scale(1.1);
}
.cell-topic > div > div > div {
    text-shadow: 2px 2px #000;
    padding: 10px;
}
@media (max-width: 1023px) {
    .cell-topic, .cell-artist {
        width: 49%;
    }
    .cell-topic > div, .cell-artist > div {
        margin: 10px;
    }
    .cell-topic > div > div {
        height: 250px;
    }
}

@media (max-width: 440px) {
    .cell-topic, .cell-artist {
        width: 100%;
    }
    .cell-topic > div, .cell-artist > div {
        margin: 5px;
    }
    .cell-topic > div > div {
        height: 200px;
    }
}

.div-thumb-text {
    background: #fff !important;
}

#DivSectionGrid h1, #DivSectionGridPhone h1 {
    box-sizing:border-box;
    display:inline-block;
    line-height:70%;
    text-shadow:0.0vw 0.30vw 0.0vw rgb(173 98 98 / 14%);
    word-spacing:0.1vw;
    font-size:clamp(15px, 1.3vw, 1.2em);
}

.grid2 {
    //transform: rotateX(0deg) rotateY(-5deg) rotateZ(3deg) translateX(-3%);
    transform: rotateX(0.2deg) rotateY(-0.5deg);
    transform-style: preserve-3d;
    transition: 1s;
    top:-10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%; /* Important pour centrer les items */
}

/* clear fix */
.grid2:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
    width:2vw;
    min-width: 100px;
}
.img-vertical {
    max-width: 70%!important;
    max-height: 220px!important;
}
.img-horizontal {
    max-width: 85%!important;
    max-height: 220px!important;
}

#DivGridContainer {
    perspective: 150px;
    transition: all 2s, height 0s;
    left:0;
    height:31vw;
    min-height:600px;
    width: 100%;
    margin: 0 auto; /* Centrer le conteneur sur la page */
}

/* Define the XXL breakpoint at 1400px */
@media (min-width: 768px) {
    @media (orientation: portrait) {
        #DivGridContainer {
            max-height:28vw;
            min-height:800px;
        }
    }
}
/* Define the XXL breakpoint at 1400px */
@media (min-width: 1600px) {
    #DivSectionGrid h1 {
        font-size:clamp(20px, 1.5vw, 1.8em);
        letter-spacing:0.1vw;
    }
    #DivGridContainer {
        left:5%;
    }
    .grid2 {
        top:-30px;
    }
    .img-vertical {
        max-width: 75%!important;
        max-height: 230px!important;
    }
    .img-horizontal {
        max-width: 80%!important;
        max-height: 240px!important;
    }
}
.span-sw-section {
    font-size:clamp(14px, 0.7vw, 1.6em);
}

@keyframes blinkBorder {
  0% {
      border-bottom-color: transparent;
  }
  50% {
      border-bottom-color: #8f2c3b; /* Changez la couleur comme vous le souhaitez */
  }
  100% {
      border-bottom-color: transparent;
  }
}

.blinking-border {
    border-bottom: 3px solid #8f2c3b;
    animation: blinkBorder 1.2s infinite;
}

.span-sw-section.active, .span-sw-section:hover {
    border-bottom: 3px solid #8f2c3b;
}

.grid-swicth {
    transform: rotateX(1deg) rotateY(-0.9deg);
}

.grid2-item img {
    transition: all 1s, box-shadow 0s;
}

.img-move-1 {
    transform: rotateX(0deg) rotateY(4deg) rotateZ(-5deg) translateX(0%);
    scale:1.05;
}

.img-move-2 {
    transform: rotateX(0deg) rotateY(-4deg) rotateZ(3deg) translateX(0%);
    transform-style: preserve-3d;
}

/* Define the XXL breakpoint at 1400px */
@media (min-width: 1600px) {
  .d-xxl-block {
    display: block !important;
  }  
  .d-xxl-none {
    display: none !important;
  }
}

.grid2:after {
  content: '';
  display: block;
  clear: both;
}

.grid2-item,
.grid2-sizer {
    width: 50%;
}

@media screen and (min-width: 568px) {
  .grid2-item,
  .grid2-sizer { width: 33%; }
}

@media screen and (min-width: 1024px) {
  .grid2-item,
  .grid2-sizer { width: 25%; }
}


@media screen and (min-width: 1124px) {
  .grid2-item,
  .grid2-sizer { width: 20%; }
}