/*
  Theme Name: Divi Child Theme
  Theme URI: https://remifonvieille.com/
  Version: 1.0
  Template: Divi
  Author: RF Agency
  Author URI: https://remifonvieille.com/
  Description: SAAD Académie
  Text Domain: divi-child-theme
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

html,
body {
  overflow-x: hidden;
}

/* Positionnement de base */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#metiers,
#formations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.3s ease-in-out;
}

#metiers {
  opacity: 1; /* Visible par défaut */
  z-index: 1;
}

#formations {
  opacity: 0; /* Caché par défaut */
  z-index: 1;
}

/* Container des pads */
#pads {
  position: absolute;
  bottom: 10%; /* Ajuste selon tes besoins */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  background-color: rgba(
    0,
    0,
    0,
    0.5
  ); /* Fond transparent pour voir l'arrière-plan */
  padding: 10px 20px;
  border-radius: 8px;
}

#metiers_pad,
#formations_pad {
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease-in-out;
}

/* Effets au survol */
#pads:hover #metiers_pad:hover ~ #formations,
#pads:hover #formations_pad:hover ~ #metiers {
  opacity: 0;
}

#pads:hover #formations_pad:hover ~ #formations,
#pads:hover #metiers_pad:hover ~ #metiers {
  opacity: 1;
}

/* move content behing the header on desktops */
@media (min-width: 1024px) {
  .et-l.et-l--post {
    /*margin-top: -96px;*/
  }
}

/*set the defautl background color of the header section*/
.dp-custom-header {
  background: transparent !important;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

/*set the background color of the fixed header when scrolling*/
.dp-custom-fixed-header {
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

/* Tab */

.et_pb_tabs_controls li {
  border: 0px solid #ffffff !important;
}

.icon-tabs .et_pb_tabs_controls li a {
  padding: 25px 20px 25px 20px !important;
  margin-bottom: 10px !important;
  border: 0px !important;
}

.icon-tabs .et_pb_tabs_controls li {
  width: 33.3333% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
  width: 100% !important;
  text-align: center;
}

.icon-tabs .et_pb_tab {
  padding: 0px;
  margin-top: 10px;
}

.et_pb_tabs.icon-tabs {
  border: none;
}

ul.et_pb_tabs_controls::after {
  border-top: none !important;
}

/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {
  .icon-tabs .et_pb_tabs_controls li {
    width: 100% !important;
  }

  .icon-tabs .et_pb_tabs_controls {
    padding: 0 !important;
  }

  .icon-tabs .et_pb_tabs_controls li {
    margin-bottom: 35px;
  }
}

/* Play Button */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Use numbered timeline globally */
.dipi_timeline {
  counter-reset: timeline;
}
.dipi_timeline_item .ribbon-icon:after {
  counter-increment: timeline;
  content: counter(timeline) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

/* Use numbered Timeline with Custom Class */
.process_steps.dipi_timeline {
  counter-reset: timeline;
}

.process_steps .dipi_timeline_item .ribbon-icon:after {
  counter-increment: timeline;
  content: counter(timeline) !important;
  font-family: "Open Sans", Arial, sans-serif;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

/************* Portfolio ***************/

.et_pb_row_fullwidth .dp-portfolio-grid .et_pb_portfolio_item {
  min-height: 400px;
}
.dp-portfolio-grid {
  padding: 0 10px;
}
.dp-portfolio-grid .et_pb_portfolio_item {
  min-height: 300px;
  padding: 35px;
  border: 10px solid transparent;
  position: relative;
  overflow: hidden;
}
.dp-portfolio-grid .et_pb_portfolio_item:hover .et_overlay {
  z-index: 3;
  opacity: 1;
}
.dp-portfolio-grid .et_portfolio_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.dp-portfolio-grid .et_portfolio_image img {
  max-width: none;
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}

.dp-portfolio-grid .et_pb_module_header,
.dp-portfolio-grid p.post-meta {
  position: relative;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  transform: translate(0, -20px);
  -ms-transform: translate(0, -20px);
  -webkit-transform: translate(0, -20px);
}

.dp-portfolio-grid .et_pb_module_header {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dp-portfolio-grid .et_pb_portfolio_item:hover .et_pb_module_header,
.dp-portfolio-grid .et_pb_portfolio_item:hover p.post-meta {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
.dp-portfolio-grid .et_pb_portofolio_pagination {
  border-top: none;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
  padding: 15px 30px;
  border: none;
  background-color: #f6f7fa;
}

/*** Reverse columns on mobiles ***/
@media screen and (max-width: 980px) {
  .reverse-columns {
    display: flex;
    flex-direction: column-reverse;
  }
} /* move content behing the header on desktops */
@media (min-width: 1024px) {
  .et-l.et-l--post {
    /* margin-top: -96px; */
  }
}

/*set the defautl background color of the header section*/
.dp-custom-header {
  background: transparent !important;
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

/*set the background color of the fixed header when scrolling*/
.dp-custom-fixed-header {
  -webkit-transition: background-color 0.5s ease-out;
  -moz-transition: background-color 0.5s ease-out;
  -o-transition: background-color 0.5s ease-out;
  transition: background-color 0.5s ease-out;
}

/* Tab */

.et_pb_tabs_controls li {
  border: 0px solid #ffffff !important;
}

.icon-tabs .et_pb_tabs_controls li a {
  padding: 25px 20px 25px 20px !important;
  margin-bottom: 10px !important;
  border: 0px !important;
}

.icon-tabs .et_pb_tabs_controls li {
  width: 33.3333% !important;
}
.icon-tabs .et_pb_tabs_controls li a {
  width: 100% !important;
  text-align: center;
}

.icon-tabs .et_pb_tab {
  padding: 0px;
  margin-top: 10px;
}

.et_pb_tabs.icon-tabs {
  border: none;
}

ul.et_pb_tabs_controls::after {
  border-top: none !important;
}

/*
* === Mobile Styles ===
*/
@media (max-width: 768px) {
  .icon-tabs .et_pb_tabs_controls li {
    width: 100% !important;
  }

  .icon-tabs .et_pb_tabs_controls {
    padding: 0 !important;
  }

  .icon-tabs .et_pb_tabs_controls li {
    margin-bottom: 35px;
  }
}

/* Play Button */
@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

/* Use numbered timeline globally */
.dipi_timeline {
  counter-reset: timeline;
}
.dipi_timeline_item .ribbon-icon:after {
  counter-increment: timeline;
  content: counter(timeline) !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

/* Use numbered Timeline with Custom Class */
.process_steps.dipi_timeline {
  counter-reset: timeline;
}

.process_steps .dipi_timeline_item .ribbon-icon:after {
  counter-increment: timeline;
  content: counter(timeline) !important;
  font-family: "Open Sans", Arial, sans-serif;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
}

/************* Portfolio ***************/

.et_pb_row_fullwidth .dp-portfolio-grid .et_pb_portfolio_item {
  min-height: 400px;
}
.dp-portfolio-grid {
  padding: 0 10px;
}
.dp-portfolio-grid .et_pb_portfolio_item {
  min-height: 300px;
  padding: 35px;
  border: 10px solid transparent;
  position: relative;
  overflow: hidden;
}
.dp-portfolio-grid .et_pb_portfolio_item:hover .et_overlay {
  z-index: 3;
  opacity: 1;
}
.dp-portfolio-grid .et_portfolio_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.dp-portfolio-grid .et_portfolio_image img {
  max-width: none;
  object-fit: cover;
  height: 100%;
  width: 100%;
  object-position: center;
}

.dp-portfolio-grid .et_pb_module_header,
.dp-portfolio-grid p.post-meta {
  position: relative;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
  transform: translate(0, -20px);
  -ms-transform: translate(0, -20px);
  -webkit-transform: translate(0, -20px);
}

.dp-portfolio-grid .et_pb_module_header {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.dp-portfolio-grid .et_pb_portfolio_item:hover .et_pb_module_header,
.dp-portfolio-grid .et_pb_portfolio_item:hover p.post-meta {
  opacity: 1;
  visibility: visible;
  transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}
.dp-portfolio-grid .et_pb_portofolio_pagination {
  border-top: none;
}

.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
  padding: 15px 30px;
  border: none;
  background-color: #f6f7fa;
}

/*** Reverse columns on mobiles ***/
@media screen and (max-width: 980px) {
  .reverse-columns {
    display: flex;
    flex-direction: column-reverse;
  }
}