/* =========================
   Global
   ========================= */
a{
  text-decoration:none !important;
}

/* =========================
   Offcanvas (UAE)
   ========================= */
@media (max-width: 1024px){
  .skl-offcanvas .uael-nav-menu__dropdown,
  .skl-offcanvas .uael-nav-menu__layout-dropdown,
  .skl-offcanvas .uael-nav-menu__menu-container{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:auto !important;

    width:360px !important;
    max-width:90vw !important;
    height:100vh !important;

    background:#0F1418 !important;
    overflow-y:auto !important;

    z-index:99999 !important;

    transform:translateX(calc(100vw - 360px)) !important;
  }

  @media (max-width: 420px){
    .skl-offcanvas .uael-nav-menu__dropdown,
    .skl-offcanvas .uael-nav-menu__layout-dropdown,
    .skl-offcanvas .uael-nav-menu__menu-container{
      width:90vw !important;
      transform:translateX(10vw) !important;
    }
  }
}

/* =========================================
   SKL - Services Switcher (Clean)
   - boutons outline (repos)
   - hover/actif orange plein
   - image cover
   ========================================= */

/* Desktop layout 40/60 */
.skl-services-split{
  display:flex;
  gap:32px;
  align-items:stretch;
}

.skl-services-left{
  flex:0 0 40%;
  display:flex;
}

.skl-services-right{
  flex:0 0 60%;
}

/* Liste à gauche */
.skl-services-switch{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:16px;
  height:520px;
  justify-content:space-between;
}

/* Boutons (repos outline) */
.skl-services-switch .skl-service-tab{
  width:100% !important;
  text-align:left !important;

  background:transparent !important;
  background-image:none !important;

  border:1px solid #F28C28 !important;
  border-radius:0 !important;

  padding:18px 20px !important;
  cursor:pointer !important;

  color:#F28C28 !important;
  box-shadow:none !important;
  outline:none !important;

  transition:background .15s ease, color .15s ease, border-color .15s ease;
}

/* Typo */
.skl-services-switch .skl-service-tab .skl-tab-title{
  display:block !important;
  font-weight:700 !important;
  font-size:17px !important;
  line-height:1.2 !important;
  color:#F28C28 !important;

  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

.skl-services-switch .skl-service-tab .skl-tab-desc{
  display:block !important;
  margin-top:6px !important;
  font-weight:400 !important;
  font-size:13px !important;
  line-height:1.4 !important;
  opacity:.9 !important;
  color:#F28C28 !important;

  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}

/* Hover + Actif (orange plein) */
.skl-services-switch .skl-service-tab:hover,
.skl-services-switch .skl-service-tab.is-active{
  background:#F28C28 !important;
  border-color:#F28C28 !important;
  color:#0F1418 !important;
}

.skl-services-switch .skl-service-tab:hover .skl-tab-title,
.skl-services-switch .skl-service-tab.is-active .skl-tab-title,
.skl-services-switch .skl-service-tab:hover .skl-tab-desc,
.skl-services-switch .skl-service-tab.is-active .skl-tab-desc{
  color:#0F1418 !important;
  opacity:1 !important;
}

/* Stage image à droite */
.skl-service-stage{
  position:relative;
  height:520px;
  border:1px solid #2A2F35;
  background:#1C1F23;
  overflow:hidden;
}

.skl-service-panel{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:none;
}

.skl-service-panel.is-active{
  display:block;
}

/* Elementor wrapper image */
.skl-service-panel .elementor-widget-container,
.skl-service-panel figure,
.skl-service-panel a{
  width:100%;
  height:100%;
}

.skl-service-panel img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
  display:block !important;
  margin:0 !important;
}

/* =========================
   Responsive (Tablette ≤1024)
   ========================= */
@media (max-width: 1024px){
  .skl-services-split{
    flex-direction:column !important;
    gap:20px !important;
    padding-left:16px !important;
    padding-right:16px !important;
    box-sizing:border-box !important;
  }

  .skl-services-left,
  .skl-services-right{
    width:100% !important;
    flex:0 0 auto !important;
  }

  .skl-services-switch{
    height:auto !important;
    justify-content:flex-start !important;
  }

  .skl-services-switch .skl-service-tab{
    padding:16px 18px !important;
  }

  .skl-service-stage{
    height:420px !important;
    width:100% !important;
  }
}

/* =========================
   Responsive (Mobile ≤767)
   ========================= */
@media (max-width: 767px){
  .skl-services-split{
    padding-left:18px !important;
    padding-right:18px !important;
    gap:18px !important;
  }

  .skl-services-switch{
    gap:12px !important;
  }

  .skl-services-switch .skl-service-tab{
    padding:14px 16px !important;
  }

  .skl-services-switch .skl-service-tab .skl-tab-title{
    font-size:16px !important;
  }

  .skl-services-switch .skl-service-tab .skl-tab-desc{
    font-size:12.5px !important;
  }

  .skl-service-stage{
    height:300px !important;
  }
}

/* =========================
   CF7 - SKL Construct Premium
   Classe à mettre sur le widget Shortcode : cf7-skl-premium
   ========================= */

.cf7-skl-premium {
  /* Rien ici, la classe sert de scope */
}

/* Bloc formulaire : cadre premium, carré, net */
.cf7-skl-premium .wpcf7 form {
  max-width: 640px;
  padding: 28px;
  background: #0F1418;
  border: 1px solid rgba(242, 140, 40, 0.22);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
}

/* Espacements propres entre les champs */
.cf7-skl-premium .wpcf7 form p {
  margin: 0 0 16px;
}

/* Labels */
.cf7-skl-premium .wpcf7 label {
  display: block;
  margin-bottom: 8px;
  color: #CFCFCF;
  font-size: 13px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

/* Inputs / textarea */
.cf7-skl-premium .wpcf7 input[type="text"],
.cf7-skl-premium .wpcf7 input[type="email"],
.cf7-skl-premium .wpcf7 input[type="tel"],
.cf7-skl-premium .wpcf7 textarea,
.cf7-skl-premium .wpcf7 select {
  width: 100%;
  background: #1C1F23;
  border: 1px solid rgba(225, 225, 225, 0.10);
  color: #E1E1E1;
  padding: 14px 14px;
  border-radius: 0;
  outline: none;
  font-size: 15px;
  line-height: 1.2;
  transition: border-color 160ms ease, background-color 160ms ease;
}

/* Placeholder */
.cf7-skl-premium .wpcf7 input::placeholder,
.cf7-skl-premium .wpcf7 textarea::placeholder {
  color: rgba(225, 225, 225, 0.55);
}

/* Textarea : plus premium, stable */
.cf7-skl-premium .wpcf7 textarea {
  min-height: 160px;
  resize: vertical;
}

/* Focus : accent orange, net */
.cf7-skl-premium .wpcf7 input[type="text"]:focus,
.cf7-skl-premium .wpcf7 input[type="email"]:focus,
.cf7-skl-premium .wpcf7 input[type="tel"]:focus,
.cf7-skl-premium .wpcf7 textarea:focus,
.cf7-skl-premium .wpcf7 select:focus {
  border-color: rgba(242, 140, 40, 0.75);
  background: #1A1E22;
}

/* Champ invalide CF7 */
.cf7-skl-premium .wpcf7-not-valid {
  border-color: rgba(242, 140, 40, 0.9) !important;
}

/* Messages CF7 (validation, succès, erreur) : carré, propre */
.cf7-skl-premium .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 14px 14px;
  border-radius: 0;
  color: #E1E1E1;
  background: #1C1F23;
  border: 1px solid rgba(225, 225, 225, 0.12);
}

.cf7-skl-premium .wpcf7 form.invalid .wpcf7-response-output,
.cf7-skl-premium .wpcf7 form.failed .wpcf7-response-output,
.cf7-skl-premium .wpcf7 form.aborted .wpcf7-response-output {
  border-color: rgba(242, 140, 40, 0.55);
}

/* Petits messages sous les champs */
.cf7-skl-premium .wpcf7-not-valid-tip {
  color: rgba(242, 140, 40, 0.95);
  font-size: 13px;
  margin-top: 8px;
}

/* Bouton submit : carré, premium, très net */
.cf7-skl-premium .wpcf7 input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  background: #F28C28;
  color: #0F1418;
  border: 1px solid rgba(242, 140, 40, 0.85);
  padding: 14px 26px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  cursor: pointer;
  transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease;
}

/* Hover : sobre, pro */
.cf7-skl-premium .wpcf7 input[type="submit"]:hover {
  opacity: 0.92;
  filter: saturate(1.05);
}

/* Active */
.cf7-skl-premium .wpcf7 input[type="submit"]:active {
  transform: translateY(1px);
}

/* Align bouton à droite (premium) */
.cf7-skl-premium .wpcf7 form p:last-of-type {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

/* Responsive : padding réduit */
@media (max-width: 767px) {
  .cf7-skl-premium .wpcf7 form {
    padding: 18px;
    max-width: 100%;
  }
}

/* Centrage premium du formulaire */
.cf7-skl-premium .wpcf7 form {
  margin-left: auto;
  margin-right: auto;
}