/*
 Theme Name:     Divi Child
 Theme URI:      https://www.elegantthemes.com/gallery/divi/
 Description:    Divi Child Theme
 Author:         Elegant Themes
 Author URI:     https://www.elegantthemes.com
 Template:       Divi
 Version:        1.0.0
*/


/* =Theme customization starts here
------------------------------------------------------- */

.et_pb_button {
    padding: 10px 30px !important;
}
.mobile_menu_bar:before {
    color: #ffffff;
}
.et_mobile_menu {
    border-top: 3px solid #f27d00;
}
.liste-slide ul {
    display: flex;
    gap: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.liste-slide ul ::marker, .liste-footer ul ::marker{
    color: #f27d00;
    font-size: 20px;
}

.title-span span {
    font-size: 18px;
    color: #ee7800;
	line-height: 12px;
}

.liste-footer ul {
    display: flex;
    gap: 33px;
    justify-content: center;
    margin-top: 20px;
}

.cls-flex .et_pb_column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 768px) {
.liste-slide ul {
    gap: 10px;
    flex-direction: column;
}
}
@media (max-width: 480px) {
.et_pb_button {
    font-size: 12px !important;
	padding: 10px 15px !important;
}
}
@media (max-width: 1300px) and (min-width: 1150px) {
#top-menu li a {
    font-size: 14px !important;
}
#top-menu li {
    padding-right: 10px;
}
}
@media (max-width: 1150px) {
#et_mobile_nav_menu {
    display: block;
}
#top-menu {
    display: none;
}
.et_mobile_menu li a, .nav li li a {
    font-size: 18px;
}
}
@media (max-width: 767px) {
	.et_mobile_menu li a, .nav li li a {
    font-size: 16px;
}
}
/************* Contact 7 **********************/

.cf7-row {
    display: flex;
    gap: 30px;
    margin-bottom: 25px;
}

.cf7-col {
    flex: 1;
}

.cf7-col-full {
    width: 100%;
}

/* Champs */
.cf7-modern input,
.cf7-modern textarea {
    width: 100%;
    background: #f3f3f3;
    padding: 22px 25px;
    font-size: 16px;
    color: #333;
    outline: none;
}

.cf7-modern textarea {
    min-height: 180px;
    resize: none;
}

.cf7-modern input[type="checkbox"] {
    width: auto;
}

/* Placeholder style */
.cf7-modern ::placeholder {
    color: #666;
    font-size: 15px;
}

.wpcf7-submit.et_pb_button {
    cursor: pointer;
}

/* Mobile */
@media (max-width: 768px) {
    .cf7-row {
        flex-direction: column;
    }
	.liste-footer ul {
		display: flex;
		gap: 5px;
		justify-content: center;
		margin-top: 20px;
		flex-direction: column;
		align-items: flex-start;
	}
}

/* ================== ROADMAP ================== */

.steps__line{
  position:absolute;
  left:28px;
  right:28px;
  top:28px;
  height:2px;
  background:#333;
  opacity:.4;
  overflow:hidden;
}

.steps.is-visible .steps__line{
  background: linear-gradient(
    90deg,
    #333 0%,
    #ff8a00 40%,
    #fff2d0 50%,
    #ff8a00 60%,
    #333 100%
  );
  background-size:300% 100%;
  animation: line-wave 4s ease-in-out infinite;
}

@keyframes line-wave{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}

.steps__wrap{
  display:flex;
  gap:56px;
  align-items:flex-start;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.step{
  width:240px;
  color:#a9a9a9;
  opacity:0;
  transform: translateY(40px) scale(.96);
  filter: blur(6px);
}

.steps.is-visible .step{
  animation: step-wave 0.9s cubic-bezier(.22,.61,.36,1) forwards;
}

.steps.is-visible .step:nth-child(1){ animation-delay:.0s; }
.steps.is-visible .step:nth-child(2){ animation-delay:.2s; }
.steps.is-visible .step:nth-child(3){ animation-delay:.4s; }
.steps.is-visible .step:nth-child(4){ animation-delay:.6s; }
.steps.is-visible .step:nth-child(5){ animation-delay:.8s; }

@keyframes step-wave{
  0%{
    opacity:0;
    transform: translateY(40px) scale(.96);
    filter: blur(6px);
  }
  60%{
    opacity:1;
    transform: translateY(-6px) scale(1.03);
    filter: blur(0);
  }
  100%{
    opacity:1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.step__icon{
  width:54px;
  height:54px;
  border-radius:50%;
  border:2px solid #cfcfcf;
  display:grid;
  place-items:center;
  background:#0a0a0a;
  margin-bottom:20px;
  color:#fff;
  position:relative;
  z-index:2;
  transition:.4s;
}

.step__icon svg{ width:26px; height:26px; }

.step:hover .step__icon{
  background:#ff8a00;
  border-color:#ff8a00;
}

.step.is-active .step__icon{
  background:#ff8a00;
  border-color:#ff8a00;
}

.step.is-active .step__icon::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:2px solid #ff8a00;
  animation:pulse-ring 2s infinite;
  opacity:.6;
}

@keyframes pulse-ring{
  0%{ transform:scale(1); opacity:.6; }
  70%{ transform:scale(1.6); opacity:0; }
  100%{ transform:scale(1.6); opacity:0; }
}

/* --- Text --- */
.step__num{
  font-weight:700;
  font-size:32px;
  margin:10px 0 20px;
  transition:.4s;
}

.step.is-active .step__num{
  color:#ff8a00;
}

.step__title{
  font-size:18px;
  letter-spacing:.04em;
  color:#fff;
  margin-bottom:10px;
}

.step__desc{
  opacity:.7;
}

/* hover glow */
.step:hover{
  transform: translateY(-6px) scale(1.02);
  transition:.4s cubic-bezier(.22,.61,.36,1);
}

.step:hover .step__num{
  color:#ff8a00;
  text-shadow:0 0 20px rgba(255,138,0,.5);
}

/* --- Responsive --- */
@media (max-width:1100px){
  .steps__wrap{
    flex-wrap:wrap;
    gap:28px;
  }
  .step{ width:calc(50% - 14px); }
}

@media (max-width:640px){
  .steps__line{left: 25px;right:16px;top:20px;height: 100%;width: 2px;}
  .step{ width:100%; }
  .step__num, .step__title, .step__desc {
    padding-left: 50px;
}
}


/****************** liste check *********************/
.liste-check ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
    text-align: left;
}

.liste-check{
    text-align: center;
}

.liste-check li{
    position: relative;
    padding-left: 34px;
    margin-bottom: 15px;
    white-space: nowrap;
}

.liste-check li::before{
    content: "✔";
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background: #f27d00;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}