/* =========================================================
   FGD Custom Overrides (keep main.css untouched)
   Sections:
   1) Theme tokens
   2) Process (#processus)
   3) Problem/Solution (#problem-solution)
   4) About cards (.fgd-*)
   5) Services layout tweaks (#services + .h8-service)
   6) Projects/Solutions slider (desktop static)
   7) CTA blocks (.cta-*)
   8) Contact boxes
   9) Quote / Demande form (.quote-* / .qf-*)
========================================================= */

/* ---------- 1) THEME TOKENS ---------- */
:root{
  --fgd-primary: #E28A14;
  --fgd-primary-dark: #C8740E;
  --fgd-text: #111827;
  --fgd-muted: rgba(17,24,39,.72);
  --fgd-border: rgba(0,0,0,.06);
  --fgd-card: #fff;
  --fgd-soft: rgba(226,138,20,.10);
}

/* map to template tokens if used */
:root{
  --tj-color-theme-primary: var(--fgd-primary);
  --tj-color-theme-primary-2: var(--fgd-primary-dark);
}

/* ---------- 2) PROCESS (#processus) ---------- */
#processus .process-item{
  background: transparent;
  border: 1px solid var(--fgd-border);
  border-radius: 16px;
  padding: 18px;
}

#processus .process-img img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

#processus .process-step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  line-height:1;
  letter-spacing:.06em;
  text-transform:uppercase;
  border:1px solid rgba(103,110,122,.35);
}

#processus .process-item .title{ font-size:18px; margin:10px 0 8px; }
#processus .process-item .desc{ font-size:14px; margin:0; }

#processus .process-reassurance{
  display:flex;
  align-items:center;
  gap:18px;
  padding:24px 28px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(226,138,20,.11), rgba(226,138,20,.04));
  border:1px solid rgba(226,138,20,.22);
}

#processus .reassurance-icon{
  flex:0 0 auto;
  width:52px;height:52px;
  border-radius:50%;
  background: var(--fgd-primary-dark);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:800;
}

#processus .reassurance-text{
  margin:0;
  font-size:17px;
  line-height:1.6;
  color:#623d01;
}

@media (max-width: 575px){
  #processus .process-reassurance{
    flex-direction:column;
    text-align:center;
    padding:22px;
  }
}

/* Optional: Process section background (if used) */
.h10-process{
  background-color:#e1e4e9;
  color:#111;
}

/* Optional: horizontal process item variant (if you really use .h10-process-item) */
.h10-process-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 14px;
  margin-bottom:12px;
  border-radius:30px;
  background:#f6ecde;
  border:1px solid rgba(0,0,0,.08);
}
.h10-process-item > *{ margin:0; }
.h10-process-sln{
  flex:0 0 34px;
  font-size:13px;
  font-weight:600;
  line-height:1;
  color:#fff;
  background:var(--fgd-primary-dark);
  border-radius:999px;
  padding:6px 10px;
}
.h10-process-icon{
  flex:0 0 32px;
  width:32px;height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
}
.h10-process-content .title{
  margin:0 0 4px;
  font-size:19px;
  line-height:1.25;
  color:#000;
  font-weight:600;
}
.h10-process-content .desc{
  margin:0;
  font-size:16px;
  line-height:1.4;
  color:rgba(38,38,38,.65);
}

/* ---------- 3) PROBLEM / SOLUTION (#problem-solution) ---------- */
#problem-solution .ps-card,
#problem-solution .ps-step-card{
  background:var(--fgd-card);
  border:1px solid var(--fgd-border);
  border-radius:18px;
}

#problem-solution .ps-card{ padding:22px; }
#problem-solution .ps-step-card{ padding:20px; border-radius:16px; }

#problem-solution .ps-head{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
#problem-solution .ps-head-icon{
  width:54px;height:54px;border-radius:50%;
  display:inline-flex;
  align-items:center;justify-content:center;
  color:#fff;font-size:20px;
  flex:0 0 auto;
}
#problem-solution .ps-head-icon--problem{ background:#1f2d3d; }
#problem-solution .ps-head-icon--solution{ background:var(--fgd-primary); }

#problem-solution .ps-head-title{ margin:0; font-size:24px; }
#problem-solution .ps-head-sub{ margin:2px 0 0; opacity:.75; }

#problem-solution .ps-items{ display:grid; gap:12px; }
#problem-solution .ps-item{
  display:flex;
  gap:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(0,0,0,.03);
}
#problem-solution .ps-card--solution .ps-item{ background: var(--fgd-soft); }

#problem-solution .ps-ico{
  width:46px;height:46px;border-radius:50%;
  display:inline-flex;
  align-items:center;justify-content:center;
  background:rgba(0,0,0,.06);
  flex:0 0 auto;
  font-size:18px;
}
#problem-solution .ps-ico--brand{ background: rgba(226,138,20,.16); }
#problem-solution .ps-item h4{ margin:0 0 2px; font-size:16px; }
#problem-solution .ps-item p{ margin:0; font-size:14px; opacity:.78; }

#problem-solution .ps-step-num{
  width:44px;height:44px;border-radius:50%;
  display:inline-flex;
  align-items:center;justify-content:center;
  background:var(--fgd-primary);
  color:#fff;
  font-weight:800;
  margin-bottom:10px;
}
#problem-solution .ps-step-card h4{ margin:0 0 6px; font-size:18px; }
#problem-solution .ps-step-card p{ margin:0; opacity:.78; }

/* ---------- 4) ABOUT PRO BLOCK (.fgd-*) ---------- */
#about-fgd-pro .sec-title{ color:#000; }

.fgd-card,
.fgd-guarantees{
  background:#fff;
  border:1px solid #e6e8eb;
  border-radius:16px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.04);
}

.fgd-card{ border-radius:14px; padding:18px; transition:transform .2s ease, box-shadow .2s ease; }
.fgd-card:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(0,0,0,.06); }

.fgd-card-top{ display:flex; gap:12px; align-items:center; margin-bottom:10px; }
.fgd-ico{
  width:44px;height:44px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;justify-content:center;
  background:var(--fgd-primary-dark);
  color:#fff;
  font-size:18px;
  flex-shrink:0;
}
.fgd-card-title{ margin:0; font-size:18px; line-height:1.2; color:#111; }
.fgd-card-text{ margin:0 0 12px; color:#555; line-height:1.5; font-size:14.5px; }

.fgd-list{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.fgd-list li{ display:flex; gap:8px; align-items:flex-start; color:#333; font-size:14px; line-height:1.4; }
.fgd-list i{ margin-top:2px; color:#9f5102; }

.fgd-guarantees{ position:relative; overflow:hidden; }
.fgd-guarantees::before{
  content:"";
  position:absolute;
  left:0; top:0;
  width:6px; height:100%;
  background: linear-gradient(180deg, #9f5102, #c9ad20);
}

.fgd-guarantees-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.fgd-guarantees-title{ margin:0; font-size:20px; color:#111; }
.fgd-guarantees-sub{ margin:0; color:#666; font-size:14px; }

.fgd-guarantees-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 14px; margin-top:10px; }
.fgd-g-item{
  display:flex; gap:10px; align-items:flex-start;
  background:#f7f7f8;
  border:1px solid #eceef1;
  border-radius:12px;
  padding:10px 12px;
  color:#222;
  font-size:14px;
  line-height:1.35;
  transition:all .25s ease;
}
.fgd-g-item:hover{ background:#fff; transform:translateX(4px); box-shadow:0 6px 18px rgba(0,0,0,.06); }

.fgd-quote{
  margin-top:14px;
  border-radius:12px;
  padding:14px;
  border-left:4px solid #9f5102;
  background: linear-gradient(90deg, #fffcee, #d2b47c);
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.fgd-quote p{ margin:0; color:#111; line-height:1.55; font-size:14.5px; font-weight:500; }

@media (max-width: 767px){
  .fgd-guarantees-head{ flex-direction:column; align-items:flex-start; }
  .fgd-guarantees-grid{ grid-template-columns:1fr; }
}

/* ---------- 5) SERVICES ---------- */
/* Services grid: turn bootstrap row into auto-grid (only inside #services) */
#services .h8-service-wrapper > .row{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:24px;
}
#services .h8-service-wrapper > .row > [class*="col-"]{
  width:100%;
  max-width:100%;
  flex:unset;
  display:block;
}

/* Service card */
#services .service-item.h8-service-item{
  height:100%;
  padding:22px;
  border-radius:16px;
  background:transparent;
  border:1px solid rgba(16,24,40,.27);
  box-shadow:0 10px 24px rgba(16,24,40,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
#services .service-item.h8-service-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 44px rgba(16,24,40,.10);
}

/* Template icon gradient fix */
.h8-service-item .service-icon{
  background: linear-gradient(-45deg,
    rgba(226,138,20,.28) 0%,
    rgba(226,138,20,0) 50%,
    rgba(226,138,20,.28) 100%);
  border:1px solid rgba(226,138,20,.18);
}
#services .service-icon i{ color:var(--fgd-primary); }

/* “boxed media service” layout (only if you use these classes) */
.service-item--media .service-media{ display:flex; gap:22px; align-items:stretch; }
.service-item--media .service-media__img{
  flex:0 0 42%;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}
.service-item--media .service-media__img img{ width:100%; height:100%; object-fit:cover; display:block; }
.service-item--media .service-media__content{ flex:1; text-align:left; }

.service-item--even .service-media__img{ order:2; }
.service-item--even .service-media__content{ order:1; }

@media (max-width: 991px){
  .service-item--media .service-media{ flex-direction:column; }
  .service-item--media .service-media__img{ height:240px; }
}

/* Service header bar compact (avoid triple overrides) */
.h8-service .h8-service-item .service-header{
  padding:8px 18px;
  margin-bottom:18px;
  border-radius:999px;
  background: var(--fgd-primary);
}
.h8-service .h8-service-item .service-header__icon{ width:36px; height:36px; background:#fff; border-radius:50%; }
.h8-service .h8-service-item .service-header__icon i{ font-size:18px; line-height:1; color:var(--fgd-primary); }
.h8-service .h8-service-item .service-header__title{ font-size:19px; margin:0; color:#fff; }
.h8-service .h8-service-item .service-intro{ margin-bottom:14px; }
.h8-service .h8-service-item .service-list{ padding-left:0; margin:0; }
.h8-service .h8-service-item .service-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:6px;
  line-height:1.45;
}
.h8-service .h8-service-item .service-list li i{ margin-top:3px; flex-shrink:0; }

/* ---------- 6) PROJECTS / SOLUTIONS (desktop static) ---------- */
.h8-project .swiper-slide{ height:auto; }
.h8-project .project-item{ display:flex; flex-direction:column; }
.h8-project .project-img img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
.h8-project .project-content{ padding:14px 16px; }
.h8-project .project-content .title{ font-size:18px; line-height:1.3; }

/* Desktop: grid static instead of swiper */
@media (min-width: 992px){
  .h8-project .slider-navigation{ display:none; }
  .h8-project .swiper-pagination-area{ display:none; }
  .h8-project-slider.is-static{ overflow:visible; }
  .h8-project-slider.is-static .swiper-wrapper{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:24px;
  }
  .h8-project-slider.is-static .swiper-slide{ width:auto; }
}

/* ---------- 7) CTA BLOCKS ---------- */
.tj-cta-section{ padding:40px 0; }
.cta-area{
  padding:30px 40px;
  display:flex;
  align-items:center;
}
@media (max-width: 767px){
  .cta-area{ padding:24px 20px; flex-direction:column; text-align:center; }
}

/* Modern CTA (single definition, no duplicates) */
.cta-modern{ padding:56px 0; background:#f3f5f4; }
.cta-modern__wrap{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:36px;
  align-items:center;
  background:#fff;
  border-radius:18px;
  padding:34px;
  box-shadow:0 18px 50px rgba(17,24,39,.08);
  overflow:hidden;
}
.cta-modern__title{ font-size:30px; line-height:1.2; margin:0 0 12px; color:#44484f; font-weight:800; }
.cta-modern__title span{ color:var(--fgd-primary); }
.cta-modern__desc{ margin:0 0 22px; color:#44484f; font-size:16.5px; line-height:1.6; max-width:70ch; }
.cta-modern__actions{ display:flex; gap:18px; flex-wrap:wrap; align-items:center; }
.cta-modern__btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 18px;
  border-radius:999px;
  background:var(--fgd-primary);
  color:#fff;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(226,138,20,.28);
  transition:transform .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.cta-modern__btn:hover{
  background:var(--fgd-primary-dark);
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(226,138,20,.35);
}
.cta-modern__trust{ display:inline-flex; align-items:center; gap:10px; color:#111827; font-weight:600; opacity:.85; font-size:14px; }
.cta-modern__trust .dot{ width:10px; height:10px; border-radius:50%; background:#22c55e; }
.cta-modern__media{ height:260px; border-radius:16px; overflow:hidden; background:#eef2f1; }
.cta-modern__media img{ width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 991px){
  .cta-modern__wrap{ grid-template-columns:1fr; padding:26px; }
  .cta-modern__media{ height:220px; }
}
@media (max-width: 575px){
  .cta-modern{ padding:42px 0; }
  .cta-modern__title{ font-size:26px; }
  .cta-modern__btn{ width:100%; justify-content:center; }
}

/* CTA overlap variant */
.cta-overlap{ margin:0; padding:0; background:#eef2f1; position:relative; z-index:2; }
.cta-overlap .cta-modern__wrap{ background:#f6f7f6; border-radius:22px; box-shadow:0 25px 60px rgba(0,0,0,.12); transform:translateY(60px); }
footer{ position:relative; z-index:1; }
@media (max-width: 991px){ .cta-overlap .cta-modern__wrap{ transform:translateY(40px); } }
@media (max-width: 575px){ .cta-overlap .cta-modern__wrap{ transform:translateY(32px); } }

/* ---------- 8) CONTACT BOXES ---------- */
.contact-boxes > [class*="col-"]{ display:flex; justify-content:center; }
.contact-boxes .contact-box,
.contact-boxes .contact-item,
.contact-boxes .h8-contact-item{
  width:100%;
  max-width:380px;
  text-align:center;
  height:100%;
}
@media (max-width: 575px){
  .contact-boxes .contact-box,
  .contact-boxes .contact-item,
  .contact-boxes .h8-contact-item{ max-width:100%; }
}

/* ---------- 9) QUOTE / DEMANDE FORM ---------- */
.quote-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  padding:44px;
}
@media (max-width: 768px){ .quote-card{ padding:26px; } }

.quote-block{ margin-top:28px; }
.quote-block:first-child{ margin-top:0; }

.quote-block-title{
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:700;
  margin-bottom:14px;
}
.quote-block-title i{ color:var(--fgd-primary); }

.quote-label{ display:block; font-weight:600; margin:10px 0 6px; }
.req{ color:var(--fgd-primary); }

.quote-input,
.quote-form input,
.quote-form select,
.quote-form textarea{
  width:100%;
  border:1px solid rgba(15,44,51,.15);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  outline:none;
  transition:.2s;
}
.quote-input:focus,
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus{
  border-color: rgba(226,138,20,.65);
  box-shadow:0 0 0 4px rgba(226,138,20,.12);
}

.quote-textarea,
.quote-form textarea{ min-height:130px; resize:vertical; }

.quote-error{
  display:block;
  margin-top:6px;
  color:#c0392b;
  font-size:13px;
  min-height:16px;
}

.file-drop{
  position:relative;
  border:2px dashed rgba(15,44,51,.18);
  background: rgba(15,44,51,.02);
  border-radius:16px;
  padding:28px;
  text-align:center;
}
.file-drop.dragover{
  border-color: rgba(226, 138, 20, 0.8);
  background: rgba(226,138,20,.06);
}
.file-drop input[type="file"]{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}
.file-drop-inner{ display:flex; flex-direction:column; gap:10px; align-items:center; }
.file-drop-inner i{ font-size:28px; color:var(--fgd-primary); }
.file-drop-link{ color:var(--fgd-primary); font-weight:700; }
.file-drop-hint{ font-size:13px; opacity:.75; }

.file-list{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.file-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(15,44,51,.12);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  background:#fff;
}
.file-chip button{ border:0; background:transparent; cursor:pointer; opacity:.7; }
.file-chip button:hover{ opacity:1; }

.quote-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:28px;
  flex-wrap:wrap;
}
.quote-note{ display:flex; align-items:center; gap:8px; opacity:.8; }
.quote-note i{ color:var(--fgd-primary); }

.quote-toast{ margin-top:16px; font-weight:600; }
.quote-toast.success{ color:#1e8449; }
.quote-toast.error{ color:#c0392b; }

/* Custom fixes (mobile + brand colors) */

/* Brand palette from logo */
:root{
  --fgd-blue: #073d60;
  --fgd-dark: #2f3841;
  --fgd-orange: #e48e27;
}

/* Preloader: change circle color (was orange/green) to brand blue */
.tj-preloader .tj-preloader-ball-inner,
.tj-preloader .tj-preloader-ball-shadow{
  background-color: var(--fgd-orange) !important;
  box-shadow: 0 4px 20px 0 rgba(7, 61, 96, 0.45) !important;
}

/* Toast success color -> brand blue */
.quote-toast.success{ color: var(--fgd-orange) !important; }

/* Replace template green accent with brand orange where used */
.cta-modern__dot{ background: var(--fgd-orange) !important; }

/* Header logo + menu on phones */
@media (max-width: 575px){
  .header-wrapper{ padding: 10px 0; }
  .site_logo .logo{ max-width: 110px; }
} 

/* Hero layout fixes on phones: reduce gaps + avoid text overlap */
@media (max-width: 575px){
  .h8-hero-title{ font-size: 54px; line-height: 1.05; }
  .h8-hero-content .h8-hero-title span{ white-space: normal !important; width: 100% !important; text-align: start !important; display:block !important; }
  .h8-hero-banner{ margin-top: 10px !important; }
}

/* Tablet: reduce banner top space */
@media (min-width: 576px) and (max-width: 991px){
  .h8-hero-banner{ margin-top: 20px !important; }
}


/* === Section Nos Avantages === */
.nos-avantages {
  padding: 60px 0;
}

.nos-avantages .section-title {
  font-size: 36px;
  font-weight: 700;
  color: #333;
  margin-bottom: 30px;
}

.advantage-box {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.advantage-box:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.advantage-icon {
  background-color: #fff;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 70px;
  height: 70px;
  margin-bottom: 15px;
  font-size: 36px;
  color: #f79c42; /* Orange pour les icônes */
}

.advantage-title {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.advantage-description {
  font-size: 16px;
  color: #777;
  line-height: 1.6;
}
/* === SECTION SERVICES === */
.services-section {
  padding: 80px 0 !important;
  background-color: #f9f9f9!important;
}

.section-title {
  font-size: 36px!important;
  font-weight: 700!important;
  color: #333!important;
  margin-bottom: 50px!important;
}

.service-item {
  margin-bottom: 40px!important;
}

.service-image {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

.service-title {
  font-size: 24px!important;
  font-weight: 600!important;
  color: #f39a1f !important;
  margin-top: 20px!important;
}

.service-description {
  font-size: 16px!important;;
  color: #777!important;;
  margin-bottom: 20px!important;;
  line-height: 1.6!important;;
}

.service-details {
  list-style: none!important;;
  padding-left: 0!important;;
}

.service-details li {
  font-size: 16px!important;;
  color: #555!important;;
  margin-bottom: 15px!important;;
}

.service-item:hover .service-image {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15)!important;;
}

.btn-primary {
  padding: 15px 30px!important;;
  background-color: #f79c42!important;;
  color: #fff!important;;
  font-size: 18px!important;;
  border-radius: 30px!important;;
  transition: background-color 0.3s!important;;
}

.btn-primary:hover {
  background-color: #e6892e!important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .service-item {
    text-align: center !important;
  }

  .service-image {
    margin-bottom: 20px!important;
  }

  .service-details {
    padding-left: 20px!important;
  }

  .btn-primary {
    width: 100% !important;
  }
}
/* Services avec image intégrée (garde le style h8-service-item) */
.service-item--media .service-media{
  display: flex;
  gap: 22px;
  align-items: stretch;
}

/* image */
.service-item--media .service-media__img{
  flex: 0 0 42%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.6);
  box-shadow: 0 18px 50px rgba(0,0,0,0.08);
}

.service-item--media .service-media__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* contenu */
.service-item--media .service-media__content{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* alternance pair: image à droite */
.service-item--even .service-media__img{
  order: 2;
}
.service-item--even .service-media__content{
  order: 1;
}

/* max 2 services / ligne déjà assuré par col-lg-6 */
/* mobile: stack propre */
@media (max-width: 991px){
  .service-item--media .service-media{
    flex-direction: column;
  }
  .service-item--media .service-media__img{
    flex-basis: auto;
    height: 220px;
  }
}
/* ===============================
   SERVICES – HEADER ICON + TITRE
================================ */

.service-item--boxed {
  padding: 60px;
}

.service-media {
  display: flex;
  gap: 36px;
  align-items: stretch;
}

/* IMAGE */
.service-media__img {
  flex: 0 0 42%;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.service-media__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENU */
.service-media__content {
  flex: 1;
}

/* HEADER ORANGE */
.service-header {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: #f39a1f; /* ORANGE LOGO */
  padding: 12px 22px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.service-header__icon {
  width: 42px;
  height: 42px;
  background: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.service-header__icon i {
  color: #f39a1f;
  font-size: 20px;
}

.service-header__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

/* TEXTE */
.service-intro {
  font-size: 16px;
  color: #4e5d60;
  margin-bottom: 20px;
  line-height: 1.6;
}

/* LISTE */
.service-list li {
  font-size: 15.5px;
  color: #3e4c4f;
}

/* ALTERNANCE IMAGE DROITE */
.service-item--even .service-media__img {
  order: 2;
}
.service-item--even .service-media__content {
  order: 1;
}

/* MOBILE */
@media (max-width: 991px) {
  .service-media {
    flex-direction: column;
  }

  .service-media__img {
    height: 240px;
  }

  .service-item--boxed {
    padding: 36px;
  }
}
/* ===============================
   AJUSTEMENTS ESPACEMENT SERVICES
================================ */

/* 1️⃣ HEADER ORANGE : un peu moins haut */
.service-header {
  padding: 8px 18px;        /* ↓ avant : 12px 22px */
  margin-bottom: 18px;      /* ↓ avant : 26px */
}

/* icône légèrement plus compacte */
.service-header__icon {
  width: 36px;              /* ↓ avant : 42px */
  height: 36px;
}

.service-header__icon i {
  font-size: 18px;          /* ↓ avant : 20px */
}

/* titre un peu plus resserré */
.service-header__title {
  font-size: 19px;          /* ↓ avant : 20px */
}

/* 2️⃣ TEXTE INTRO : respiration maîtrisée */
.service-intro {
  margin-bottom: 14px;      /* ↓ avant : 20px */
}

/* 3️⃣ LISTE : un peu plus serrée (mais lisible) */
.service-list li {
  margin-bottom: 8px;       /* ↓ avant : 12px */
  line-height: 1.45;        /* équilibre */
}

/* icône de liste légèrement rapprochée */
.service-list li i {
  margin-right: 6px;        /* ↓ avant trop large */
}

/* 4️⃣ GLOBAL : bloc légèrement plus compact */
.service-item--boxed {
  padding: 56px;            /* ↓ avant : 60px */
}

/* MOBILE : encore plus clean */
@media (max-width: 991px) {
  .service-item--boxed {
    padding: 34px;
  }

  .service-header {
    margin-bottom: 14px;
  }

  .service-list li {
    margin-bottom: 6px;
  }
}
/* =========================================
   FORCE OVERRIDE - SERVICES (doit être en dernier)
========================================= */

/* 1) Bandeau orange (titre+icone) plus fin */
.h8-service .h8-service-item .service-header{
  padding: 8px 18px !important;     /* moins haut */
  margin-bottom: 18px !important;   /* moins d’espace dessous */
  border-radius: 999px !important;
}

/* icône du bandeau un peu plus compacte */
.h8-service .h8-service-item .service-header__icon{
  width: 36px !important;
  height: 36px !important;
}

.h8-service .h8-service-item .service-header__icon i{
  font-size: 18px !important;
  line-height: 1 !important;
}

.h8-service .h8-service-item .service-header__title{
  font-size: 19px !important;
  margin: 0 !important;
}

/* 2) Texte intro + liste : un peu plus serré (mais lisible) */
.h8-service .h8-service-item .service-intro{
  margin-bottom: 14px !important;
}

.h8-service .h8-service-item .service-list li{
  margin-bottom: 8px !important;
  line-height: 1.45 !important;
}

/* 3) Cartes un peu moins "gonflées" */
.h8-service .h8-service-item.service-item--boxed{
  padding: 56px !important;
}

/* 4) (Option) réduire l'écart vertical énorme entre services */
.h8-service .h8-service-item{
  margin-bottom: 22px !important;
}
/* =========================================
   FIX ALIGNEMENT TEXTE + PUCES (FINAL)
========================================= */

/* 1️⃣ Forcer alignement à gauche (le template centre le texte) */
.h8-service .service-media__content{
  text-align: left !important;
}

/* intro aussi */
.h8-service .service-intro{
  text-align: left !important;
}

/* 2️⃣ Liste : enlever centrage + padding parasite */
.h8-service .service-list{
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

/* 3️⃣ LI : vrai alignement gauche + puce décalée */
.h8-service .service-list li{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;          /* espace puce ↔ texte */
  margin-bottom: 6px !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

/* 4️⃣ Icône puce : position stable et décalée */
.h8-service .service-list li i{
  margin-top: 3px !important;    /* alignement vertical */
  margin-left: 10px !important;
  flex-shrink: 0 !important;
}
/* Livrables */
.livrables-section .service-item {
  text-align: center;
  padding: 30px 15px;
}

.livrable-item .service-icon {
  margin-bottom: 15px;
}

.livrable-item .service-icon i {
  font-size: 36px;
  color: var(--tj-primary-color);
}

.livrable-item .service-content .title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

/* enlever éléments inutiles */
.livrable-item .desc,
.livrable-item .text-btn {
  display: none;
}

/* Livrables – centrage icône */
.livrable-item .service-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #FFF3E6; /* fond beige clair comme la capture */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icône */
.livrable-item .service-icon i {
  font-size: 26px;
  line-height: 1;
  color: #F2994A; /* orange pro */
}
 /* Transition douce */
.livrable-item {
  transition: all 0.3s ease;
}

.livrable-item .service-icon {
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.livrable-item .service-icon i {
  transition: color 0.3s ease;
}

/* Hover */
.livrable-item:hover .service-icon {
  background-color: #f2984a15 !important; /* couleur hover cercle */
  transform: translateY(-3px);
}

.livrable-item:hover .service-icon i {
  color: #ffffff !important; /* icône blanche */
}
/* CTA Modern */
.cta-modern{
  padding: 56px 0;
  background: #f3f5f4; /* gris clair */
  margin: 0 !important;
}

.cta-modern__wrap{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;

  background: #ffffff;
  border-radius: 18px;
  padding: 34px;
  box-shadow: 0 18px 50px rgba(17, 24, 39, 0.08);
  overflow: hidden;
}

/* Content */
.cta-modern__title{
  font-size: 30px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #44484f; /* noir */
  font-weight: 800;
}

.cta-modern__title span{
  color: #f2994a; /* orange */
}

.cta-modern__desc{
  margin: 0 0 22px;
  color: #44484f;
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 70ch;
}

/* Actions */
.cta-modern__actions{
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.cta-modern__btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  
  padding: 14px 18px;
  border-radius: 999px;
  background: #f2994a;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;

  transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
  box-shadow: 0 10px 24px rgba(242, 153, 74, 0.28);
}

.cta-modern__btn i{
  font-size: 18px;
}

.cta-modern__btn:hover{
  background: #d9822b;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(242, 153, 74, 0.35);
}

/* Trust line */
.cta-modern__trust{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #111827;
  font-weight: 600;
  opacity: 0.85;
  font-size: 14px;
}

.cta-modern__trust .dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e; /* vert */
}

/* Media */
.cta-modern__media{
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: #eef2f1;
}

.cta-modern__media img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* supprime l’espace blanc */
  display: block;
}

/* Responsive */
@media (max-width: 991px){
  .cta-modern__wrap{
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .cta-modern__media{
    height: 220px;
  }

  .cta-modern__title{
    font-size: 30px;
  }
}

@media (max-width: 575px){
  .cta-modern{
    padding: 42px 0;
  }

  .cta-modern__title{
    font-size: 26px;
  }

  .cta-modern__btn{
    width: 100%;
    justify-content: center;
  }
}
/* ===== CTA OVERLAP SECTION ===== */

/* DIV EXTERNE */
.cta-overlap{
  margin: 0!important;                 /* enlève marges extérieures */
  padding: 0;                /* pas d’espace inutile */
  background: rgba(0, 0, 0, 0.009);     /* gris clair + clair */
  position: relative;
  z-index: 2 !important;

}

/* Carte interne */
.cta-overlap .cta-modern__wrap{
  background: #f6f7f6;       /* gris clair légèrement plus foncé */
  border-radius: 22px;
  padding: 36px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.12);

  /* superposition avec footer */
    z-index: 2 !important;

}

/* Ajuster image */
.cta-overlap .cta-modern__media{
  height: 60%;
  border-radius: 18px;
  overflow: hidden;
}

.cta-overlap .cta-modern__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Footer doit passer dessous */
footer{
  position: relative;
  z-index: 1;
}

/* Responsive */
@media (max-width: 991px){
  .cta-overlap .cta-modern__wrap{
    transform: translateY(40px);
    padding: 28px;
  }

  .cta-overlap .cta-modern__media{
    height: 220px;
  }
}

@media (max-width: 575px){
  .cta-overlap .cta-modern__wrap{
    transform: translateY(32px);
  }
}
 /* CTA Modern Overlap (Contact page) */
    .cta-overlap{
      margin:0;
      padding:0;
      background:#eef2f1;
      position:relative;
      z-index:2;
    }
    .cta-modern__wrap{
      display:grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap:36px;
      align-items:center;

      background:#f6f7f6;
      border-radius:22px;
      padding:36px;
      box-shadow:0 25px 60px rgba(0,0,0,0.12);
      overflow:hidden;

      transform: translateY(60px); /* overlap with footer */
    }
    .cta-modern__title{
      font-size:36px;
      line-height:1.2;
      margin:0 0 12px;
      color:#111827;
      font-weight:800;
    }
    .cta-modern__title span{ color:#f2994a; }
    .cta-modern__desc{
      margin:0 0 22px;
      color:#374151;
      font-size:16.5px;
      line-height:1.6;
      max-width:52ch;
    }
    .cta-modern__actions{
      display:flex;
      align-items:center;
      gap:18px;
      flex-wrap:wrap;
    }
    .cta-modern__btn{
      display:inline-flex;
      align-items:center;
      gap:12px;
      padding:14px 18px;
      border-radius:999px;
      background:#f2994a;
      color:#fff;
      font-weight:700;
      text-decoration:none;
      transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease;
      box-shadow:0 10px 24px rgba(242,153,74,0.28);
    }
    .cta-modern__btn i{ font-size:18px; }
    .cta-modern__btn:hover{
      background:#d9822b;
      transform: translateY(-2px);
      box-shadow:0 14px 30px rgba(242,153,74,0.35);
    }
    .cta-modern__trust{
      display:inline-flex;
      align-items:center;
      gap:10px;
      color:#111827;
      font-weight:600;
      opacity:.85;
      font-size:14px;
    }
    .cta-modern__trust .dot{
      width:10px; height:10px; border-radius:50%;
      background:#22c55e;
    }
    .cta-modern__media{
      height:260px;
      border-radius:18px;
      overflow:hidden;
      background:#eef2f1;
    }
    .cta-modern__media img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    footer{ position:relative; z-index:1; }

    @media (max-width: 991px){
      .cta-modern__wrap{
        grid-template-columns:1fr;
        padding:28px;
        transform: translateY(40px);
        text-align:center;
      }
      .cta-modern__actions{ justify-content:center; }
      .cta-modern__media{ height:220px; }
      .cta-modern__title{ font-size:30px; }
    }
    @media (max-width: 575px){
      .cta-modern__wrap{ transform: translateY(32px); }
      .cta-modern__title{ font-size:26px; }
      .cta-modern__btn{ width:100%; justify-content:center; }
    }
    /* centre et limite la largeur des cartes */
.contact-boxes > [class*="col-"] { display: flex; justify-content: center; }

.contact-boxes .contact-box, 
.contact-boxes .contact-item, 
.contact-boxes .h8-contact-item {
  width: 100%;
  max-width: 380px;
  text-align: center;
  height: 100%;
}

/* mobile: cartes pleine largeur */
@media (max-width: 575px){
  .contact-boxes .contact-box,
  .contact-boxes .contact-item,
  .contact-boxes .h8-contact-item { max-width: 100%; }
}
.quote-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 20px 60px rgba(0,0,0,.06);
  padding:44px;
}

.quote-block{ margin-top:28px; }
.quote-block:first-child{ margin-top:0; }

.quote-block-title{
  display:flex; align-items:center; gap:10px;
  font-size:18px; font-weight:700;
  margin-bottom:14px;
}
.quote-block-title i{ color:#f39a1f; }

.quote-label{ display:block; font-weight:600; margin:10px 0 6px; }
.req{ color:#f39a1f; }

.quote-input{
  width:100%;
  border:1px solid rgba(15,44,51,.12);
  border-radius:12px;
  padding:12px 14px;
  background:#fff;
  outline:none;
  transition: .2s;
}
.quote-input:focus{
  border-color: rgba(243,154,31,.65);
  box-shadow: 0 0 0 4px rgba(243,154,31,.12);
}
.quote-textarea{ min-height:140px; resize:vertical; }

.quote-error{
  display:block;
  margin-top:6px;
  color:#c0392b;
  font-size:13px;
  min-height:16px;
}

.file-drop{
  position:relative;
  border:1.5px dashed rgba(15,44,51,.18);
  background: rgba(15,44,51,.02);
  border-radius:16px;
  padding:22px;
  overflow:hidden;
}
.file-drop.dragover{
  border-color: rgba(243,154,31,.8);
  background: rgba(243,154,31,.06);
}
.file-drop input[type="file"]{
  position:absolute; inset:0;
  opacity:0; cursor:pointer;
}
.file-drop-inner{
  text-align:center;
  display:flex; flex-direction:column;
  gap:10px;
  align-items:center;
}
.file-drop-icon i{ font-size:26px; color:#f39a1f; }
.file-drop-text{ font-size:15px; }
.file-drop-link{ color:#f39a1f; font-weight:700; }
.file-drop-hint{ font-size:13px; opacity:.75; }

.file-list{ margin-top:12px; display:flex; flex-wrap:wrap; gap:8px; }
.file-chip{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(15,44,51,.12);
  border-radius:999px;
  padding:6px 10px;
  font-size:13px;
  background:#fff;
}
.file-chip button{
  border:none; background:transparent; cursor:pointer;
  opacity:.7;
}
.file-chip button:hover{ opacity:1; }

.quote-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
  margin-top:28px;
  flex-wrap:wrap;
}
.quote-note{ display:flex; align-items:center; gap:8px; opacity:.8; }
.quote-note i{ color:#f39a1f; }

.quote-toast{
  margin-top:16px;
  font-weight:600;
}
.quote-toast.success{ color:#1e8449; }
.quote-toast.error{ color:#c0392b; }

@media (max-width: 768px){
  .quote-card{ padding:26px; }
}
.quote-form input,
.quote-form select,
.quote-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid rgba(15,44,51,.15);
  outline:none;
}
.quote-form textarea{ min-height:130px; resize:vertical; }

.qf-fieldset{
  border:0;
  background:#fff;
  border-radius:18px;
  padding:26px;
  margin-top:22px;
  box-shadow:0 18px 50px rgba(0,0,0,.06);
}
.qf-fieldset:first-child{ margin-top:0; }

.qf-legend{
  padding:8px 16px;
  border-radius:999px;
  background:rgba(243,154,31,.12);
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}
.qf-legend i{ color:#f39a1f; }

.file-drop{
  display:block;
  border:2px dashed rgba(15,44,51,.18);
  border-radius:16px;
  padding:28px;
  text-align:center;
  cursor:pointer;
}
.file-drop input{ display:none; }
.file-drop-inner i{
  font-size:28px;
  color:#f39a1f;
  display:block;
  margin-bottom:6px;
}
.file-drop small{ display:block; opacity:.7; margin-top:6px; }
 .sec-heading .sub-title {
  color: #f39a1f;
    font-size: 26px;
}
/* ===============================
   PROJECT / SECTEURS – HEIGHT FIX
   Image = hauteur de référence
=============================== */

/* Ne jamais forcer la hauteur du slide */
.h8-project .swiper-slide {
  height: auto !important;
}

/* Carte fluide */
.h8-project .project-item {
  height: auto !important;
  min-height: unset !important;
  display: flex;
  flex-direction: column;
}

/* Image = hauteur naturelle */
.h8-project .project-img {
  width: 100%;
  height: auto !important;
  overflow: hidden;
}

/* Image responsive et propre */
.h8-project .project-img img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9; /* pro, stable */
  object-fit: cover;
  display: block;
}

/* Contenu compact sous l’image */
.h8-project .project-content {
  padding: 14px 16px;
  height: auto !important;
  flex-grow: 0;
}

/* Titres lisibles */
.h8-project .project-content .title {
  font-size: 18px;
  line-height: 1.3;
}
/* === FONDU TRANSPARENT SUR 4 BORDS (10–20px) === */

.fade-edges {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    black 15px,
    black calc(100% - 15px),
    transparent 100%
  ),
  linear-gradient(
    to bottom,
    transparent 0,
    black 15px,
    black calc(100% - 15px),
    transparent 100%
  );

  -webkit-mask-composite: destination-in;
  mask-composite: intersect;

  mask-image: linear-gradient(
    to right,
    transparent 0,
    black 15px,
    black calc(100% - 25px),
    transparent 100%
  ),
  linear-gradient(
    to bottom,
    transparent 0,
    black 25px,
    black calc(100% - 25px),
    transparent 100%
  );
}

.fade-edges {
  position: relative;
}

.fade-edges::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  
}