.elementor-22 .elementor-element.elementor-element-8cacfe3{--display:flex;--min-height:328px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22 .elementor-element.elementor-element-2c80068{--display:flex;--min-height:100vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22 .elementor-element.elementor-element-2c80068:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-2c80068 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-accent );}.elementor-22 .elementor-element.elementor-element-b8b6686 > .elementor-widget-container{margin:-140px -20px 0px 0px;}.elementor-22 .elementor-element.elementor-element-b8b6686{top:50%;z-index:16;text-align:center;}.elementor-22 .elementor-element.elementor-element-b8b6686 img{max-width:180px;}.elementor-22 .elementor-element.elementor-element-507f24d{--display:flex;--min-height:100vh;--justify-content:center;--overlay-opacity:0.25;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:40px;}.elementor-22 .elementor-element.elementor-element-507f24d:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-507f24d > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.restaurant-la-flamme.com/wp-content/uploads/sites/8/2026/04/home.jpg");background-size:cover;}.elementor-22 .elementor-element.elementor-element-507f24d::before, .elementor-22 .elementor-element.elementor-element-507f24d > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-507f24d > .e-con-inner > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-507f24d > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-507f24d > .e-con-inner > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-507f24d > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-22 .elementor-element.elementor-element-6355030{text-align:center;}.elementor-22 .elementor-element.elementor-element-6355030 .elementor-heading-title{font-size:64px;text-shadow:2px 2px 15px rgba(0, 0, 0, 0.5);color:#FFFFFF;}.elementor-22 .elementor-element.elementor-element-30fc487{text-align:center;}.elementor-22 .elementor-element.elementor-element-30fc487 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.25rem;font-weight:500;letter-spacing:0.5em;text-shadow:2px 2px 12px rgba(0, 0, 0, 0.5);color:#FFFFFF;}.elementor-22 .elementor-element.elementor-element-210a380{--display:flex;--min-height:100vh;--justify-content:center;--overlay-opacity:0.25;--padding-top:0px;--padding-bottom:0px;--padding-left:40px;--padding-right:0px;}.elementor-22 .elementor-element.elementor-element-210a380:not(.elementor-motion-effects-element-type-background), .elementor-22 .elementor-element.elementor-element-210a380 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://www.restaurant-la-flamme.com/wp-content/uploads/sites/8/2026/04/bar3-1.jpg");}.elementor-22 .elementor-element.elementor-element-210a380::before, .elementor-22 .elementor-element.elementor-element-210a380 > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-210a380 > .e-con-inner > .elementor-background-video-container::before, .elementor-22 .elementor-element.elementor-element-210a380 > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-210a380 > .e-con-inner > .elementor-background-slideshow::before, .elementor-22 .elementor-element.elementor-element-210a380 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-22 .elementor-element.elementor-element-8be9817{text-align:center;}.elementor-22 .elementor-element.elementor-element-8be9817 .elementor-heading-title{font-size:64px;text-shadow:2px 2px 15px rgba(0, 0, 0, 0.5);color:#FFFFFF;}.elementor-22 .elementor-element.elementor-element-4c708c6{text-align:center;}.elementor-22 .elementor-element.elementor-element-4c708c6 .elementor-heading-title{font-family:"Inter", Sans-serif;font-size:1.25rem;font-weight:500;letter-spacing:0.5em;text-shadow:2px 2px 12px rgba(0, 0, 0, 0.5);color:#FFFFFF;}body.elementor-page-22:not(.elementor-motion-effects-element-type-background), body.elementor-page-22 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-22 .elementor-element.elementor-element-b8b6686 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-b8b6686{top:2%;}.elementor-22 .elementor-element.elementor-element-b8b6686 img{max-width:97px;}}@media(max-width:767px){.elementor-22 .elementor-element.elementor-element-b8b6686 > .elementor-widget-container{margin:-60px 0px 0px 0px;}.elementor-22 .elementor-element.elementor-element-b8b6686{top:50%;}.elementor-22 .elementor-element.elementor-element-b8b6686 img{max-width:70px;}.elementor-22 .elementor-element.elementor-element-507f24d{--min-height:50vh;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22 .elementor-element.elementor-element-6355030 .elementor-heading-title{font-size:42px;}.elementor-22 .elementor-element.elementor-element-30fc487 .elementor-heading-title{font-size:1rem;}.elementor-22 .elementor-element.elementor-element-210a380{--min-height:50vh;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-22 .elementor-element.elementor-element-8be9817 .elementor-heading-title{font-size:42px;}}/* Start custom CSS for container, class: .elementor-element-2c80068 *//* ============================================
   PARENT CONTAINER
   ============================================ */
.parent-container {
  display: flex;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

/* ============================================
   TRAIT DIAGONAL — suit exactement le clip-path
   Principe : un pseudo-élément pleine largeur
   avec le même clip-path que col-left,
   décalé pour ne laisser visible qu'un liseré
   ============================================ */
.parent-container::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;

  /* Même clip-path que col-left, décalé de ~3px vers la droite */
  /* col-left : polygon(0 0, 100% 0, 88% 100%, 0% 100%)        */
  /* On crée une fine bande en décalant légèrement les points   */
  background: rgba(255, 255, 255, 0.7); /* Couleur du trait */

  clip-path: polygon(
    calc(54% + 0px)  0%,      /* Point haut droit : bord droit de col-left (54vw) */
    calc(54% + 3px)  0%,      /* Même point + épaisseur du trait */
    calc(47.52% + 3px) 100%,  /* Point bas droit décalé (88% de 54vw = 47.52vw) + épaisseur */
    calc(47.52% + 0px) 100%   /* Point bas gauche (88% de 54vw = 47.52vw) */
  );
}

/* ============================================
   COLONNES — BASE COMMUNE
   ============================================ */
.col-left,
.col-right {
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-decoration: none;
}

/* ============================================
   COUCHE IMAGE — ::after
   ============================================ */
.col-left::after,
.col-right::after {
  content: "";
  position: absolute;
  inset: -5%;
  background: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 0.6s ease;
  transform: scale(1);
}

.col-left:hover::after,
.col-right:hover::after {
  transform: scale(1.08);
}

/* ============================================
   OVERLAY — ::before (géré par Elementor)
   On s'assure juste qu'il est au bon z-index
   ============================================ */
.col-left::before,
.col-right::before {
  z-index: 1 !important;
}

/* ============================================
   CONTENU au-dessus de l'overlay
   ============================================ */
.col-left .elementor-widget,
.col-right .elementor-widget {
  position: relative;
  z-index: 2;
}

/* ============================================
   COLONNE GAUCHE
   ============================================ */
.col-left {
  width: 54%;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 0% 100%);
  z-index: 2;
}

/* ============================================
   COLONNE DROITE
   ============================================ */
.col-right {
  width: 54%;
  margin-left: -8%;
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0% 100%);
  z-index: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {

  .parent-container {
    flex-direction: column;
    height: auto;
  }

  .parent-container::before {
    display: none;
  }

  .col-left,
  .col-right {
    width: 100%;
    height: 50vh;
    margin-left: 0;
    clip-path: none;
  }

  .col-left::after,
  .col-right::after {
    inset: 0;
  }
}/* End custom CSS */