/*--------------------------------------------------------------
  Template Name: Simply Construction HTML Template.
  Template URI: #
  Description: Simply Construction is a unique website template designed in HTML with a simple & beautiful look. There is an excellent solution for creating clean, wonderful and trending material design corporate, corporate any other purposes websites.
  Author: DevItems
  Version: 1.0
---------------------------------------------------------------*/

/* ----------------------------------------------------
	You can put your custom css code here: 
-------------------------------------------------------*/
/* =========================================================
   AMÉLIORATION RESPONSIVE - FORMULAIRE DE CONTACT SIBA
   À copier-coller à la toute fin du fichier css/custom.css
   ========================================================= */

.htc__contact__form__wrap {
    max-width: 900px;
    margin: 0 auto;
}

.contact-form-wrap {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    padding: 40px;
    margin-top: 20px;
}

.single-contact-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Premier bloc : nom, email, téléphone, sujet -> grille 2 colonnes */
.single-contact-inner > .single-contact-form:first-of-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 24px;
}

/* Deuxième bloc : message + bouton -> pleine largeur */
.single-contact-inner > .single-contact-form:last-of-type {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-form-wrap .contact-box {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box;
    margin: 0 !important;
}

.contact-form-wrap .single-contact-form,
.contact-form-wrap .single-contact-inner {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
}

.contact-box span {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
    letter-spacing: 0.3px;
}

.contact-box input,
.contact-box textarea {
    width: 100%;
    border: 1.5px solid #e2e2e2;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 15px;
    color: #222222;
    background: #fafafa;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-sizing: border-box;
}

.contact-box textarea {
    min-height: 150px;
    resize: vertical;
}

.contact-box input:focus,
.contact-box textarea:focus {
    outline: none;
    border-color: var(--theme-color, #d4a017);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.12);
}

.contact-box input::placeholder,
.contact-box textarea::placeholder {
    color: #a5a5a5;
}

/* Le champ Message occupe toute la largeur même dans une grille */
.contact-box.message {
    grid-column: 1 / -1;
}

.contact-btn {
    margin-top: 4px;
}

.contact-btn .htc__btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    font-size: 15px;
    line-height: 1;
    border-radius: 8px;
    cursor: pointer;
}

/* Bloc de message de retour (succès / erreur) */
.form-output {
    margin-top: 20px;
}

.form-messege {
    display: none;
    padding: 14px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
}

.form-messege:not(:empty) {
    display: block;
}

.form-messege.success {
    background: #e6f4ea;
    color: #1e7e34;
    border: 1px solid #b7e1c3;
}

.form-messege.error {
    background: #fdecea;
    color: #b3261e;
    border: 1px solid #f5c2c0;
}

/* ============ RESPONSIVE MOBILE ============ */
@media (max-width: 767px) {
    .contact-form-wrap {
        padding: 24px 20px;
        border-radius: 10px;
    }

    .single-contact-inner > .single-contact-form:first-of-type {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .contact-box.message {
        grid-column: auto;
    }

    .contact-btn .htc__btn {
        padding: 13px 20px;
    }
}


/* =========================================================
   FIX ESPACEMENT VERTICAL — Texte du slider (Hero)
   ========================================================= */
.slider__inner{
  display: flex;
  flex-direction: column;
}

.slider__inner h1{
  margin: 0 0 12px !important;
  line-height: 1.1 !important;
}

.slider__inner p{
  margin: 0 0 10px !important;
  line-height: 1.4 !important;
}

.slider__inner h4{
  margin: 0 0 22px !important;
  line-height: 1.3 !important;
}

.slider__inner .slider__btn{
  margin-top: 4px;
}

/* Centrage vertical du texte pour TOUS les boutons .htc__btn
   (slider ECRIVEZ-NOUS / DEMANDEZ UN DEVIS, Découvrir, etc.) */
.htc__btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

@media (max-width: 767px){
  .slider__inner h1{ margin-bottom: 8px !important; }
  .slider__inner p{ margin-bottom: 6px !important; }
  .slider__inner h4{ margin-bottom: 16px !important; }
}

/* =========================================================
   STYLES TENDANCE 2026 — SIBA
   À ajouter à la fin de css/custom.css
   Conserve la charte actuelle : on réutilise la couleur de
   marque déjà définie par le thème (orange/rouge SIBA).
   Si la couleur ne correspond pas exactement, ajuste UNE SEULE
   valeur ci-dessous (--brand) avec le hex exact de ton thème
   (visible dans css/core.css ou style.css, classe .text--theme).
   ========================================================= */

:root{
  --brand: #E6532B;        /* <-- ajuste si besoin avec ta couleur exacte */
  --brand-dark: #C1421E;
  --brand-soft: rgba(230, 83, 43, 0.10);
  --ink: #222222;
  --shadow-soft: 0 8px 24px rgba(230, 83, 43, 0.14);
  --shadow-lift: 0 16px 36px rgba(230, 83, 43, 0.22);
}

/* =========================================================
   1. BOUTONS — .htc__btn (ENVOYER, DEMANDEZ UN DEVIS, etc.)
   ========================================================= */
.htc__btn{
  position: relative;
  overflow: hidden;
  border-radius: 10px !important;
  padding: 14px 30px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em;
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  isolation: isolate;
}

/* Effet "sheen" : reflet lumineux qui traverse le bouton au survol */
.htc__btn::before{
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  z-index: 1;
}

.htc__btn:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.htc__btn:hover::before{
  left: 130%;
}

.htc__btn:active{
  transform: translateY(-1px) scale(0.98);
}

/* Bouton contour (variante secondaire, ex. "Découvrir") */
.htc__btn.btn--outline{
  background: transparent !important;
  border: 1.5px solid var(--brand) !important;
  color: var(--brand) !important;
  box-shadow: none;
}
.htc__btn.btn--outline:hover{
  background: var(--brand-soft) !important;
  box-shadow: var(--shadow-soft);
}


/* =========================================================
   2. CARTES — Services (.service), Projets (.project__itm),
      Offres (.offer), Témoignages (.testimonial)
   ========================================================= */

/* --- Services --- */
.service{
  border-radius: 14px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.service .service__thumb{
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}
.service .service__thumb img{
  transition: transform .5s ease;
}
.service:hover{
  transform: translateY(-6px);
  box-shadow: var(--shadow-lift);
}
.service:hover .service__thumb img{
  transform: scale(1.08);
}
.service__details{
  position: relative;
}
.service__details::after{
  content:'';
  position: absolute;
  left: 0; bottom: 0;
  height: 3px; width: 0;
  background: var(--brand);
  transition: width .3s ease;
}
.service:hover .service__details::after{
  width: 100%;
}

/* --- Offres (Fiabilité, Expertise, Prix compétitifs) --- */
.offer{
  border-radius: 14px;
  padding: 28px 22px;
  background: #fff;
  transition: transform .3s ease, box-shadow .3s ease;
}
.offer:hover{
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft);
}
.offer__icon img{
  transition: transform .35s ease;
}
.offer:hover .offer__icon img{
  transform: scale(1.12) rotate(-4deg);
}

/* --- Projets (.project__itm) --- */
.project__itm{
  border-radius: 14px;
  overflow: hidden;
}
.project__thumb{
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.project__thumb img{
  transition: transform .5s ease;
}
.project__itm:hover .project__thumb img{
  transform: scale(1.06);
}
.project__hover__info{
  transition: background .3s ease;
}

/* --- Témoignages (.testimonial) --- */
.testimonial{
  border-radius: 14px;
  padding: 26px 24px;
  background: #ffffff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.testimonial:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-soft);
}
.testimonial .tes__icon{
  color: var(--brand);
}


/* =========================================================
   3. FORMULAIRE DE CONTACT — champs et focus
   ========================================================= */
.clint__comment__form input,
.clint__comment__form textarea,
.contact-box input,
.contact-box textarea{
  border-radius: 10px !important;
  border: 1.5px solid #e4e4e4 !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.clint__comment__form input:focus,
.clint__comment__form textarea:focus,
.contact-box input:focus,
.contact-box textarea:focus{
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-soft) !important;
  outline: none !important;
}

/* Message de retour du formulaire, plus doux visuellement */
.form-messege:not(:empty){
  display: block;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  animation: fadeInUp .35s ease;
}
@keyframes fadeInUp{
  from{ opacity:0; transform: translateY(6px); }
  to{ opacity:1; transform: translateY(0); }
}


/* =========================================================
   4. SÉPARATEURS DE SECTION — titre animé au survol (léger)
   ========================================================= */
.title__line{
  position: relative;
  padding-bottom: 14px;
}
.title__line::after{
  content:'';
  position:absolute; left:50%; bottom:0;
  width: 60px; height: 3px;
  background: var(--brand);
  transform: translateX(-50%);
  border-radius: 3px;
}
.text-left .title__line::after{
  left: 0; transform: none;
}


/* =========================================================
   RESPONSIVE — allège les effets sur mobile (perf + tactile)
   ========================================================= */
@media (max-width: 767px){
  .htc__btn::before{ display:none; }
  .service:hover,
  .offer:hover,
  .testimonial:hover{
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce){
  .htc__btn, .service, .offer, .project__thumb img, .testimonial{
    transition: none !important;
  }
  .htc__btn::before{ display:none; }
}