/* =============================================================
   LÅNSTRÖM — Design System v2
   Chargé en dernier, surcharge le thème de base
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  --cf-orange:      #B8842A;
  --cf-orange-dark: #9A6D20;
  --cf-orange-light:#FAF3E5;
  --cf-navy:        #0F1A2D;
  --cf-navy-mid:    #1B2B45;
  --cf-green:       #0a6b52;
  --cf-purple:      #5a35a8;
  --cf-surface:     #ffffff;
  --cf-bg:          #F5F2EC;
  --cf-border:      #E0D9CE;
  --cf-text:        #0F1A2D;
  --cf-text-2:      #3d4a5c;
  --cf-text-3:      #8a95a6;
  --cf-radius:      0px;
  --cf-radius-sm:   0px;
  --cf-shadow:      0 1px 8px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.04);
  --cf-shadow-lg:   0 4px 24px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.06);
  --cf-transition:  .18s ease;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Inter', 'Poppins', sans-serif !important;
  background-color: #fff !important;
  color: var(--cf-text-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.65;
  font-feature-settings: 'cv02','cv03','cv04','cv11';
}


@media (max-width: 991px) {
  /* Sur mobile le top-bar reste (~36px) + hamburger nav (~56px) */
  body.light-version {
    padding-top: 92px !important;
  }
}
@media (max-width: 575px) {
  body.light-version {
    padding-top: 88px !important;
  }
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Inter', 'Poppins', sans-serif !important;
  color: var(--cf-navy);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}
p { color: var(--cf-text-2); margin-bottom: 1rem; }
a { transition: color var(--cf-transition); }

/* Sections alternées blanc/gris pour aérer */
.service-area-two:nth-child(even),
.choose-us-area { background: var(--cf-bg) !important; }

/* ── Section wrapper ────────────────────────────────────────── */
/* style.css impose height:100% + overflow:hidden sur about-area, counter-area-two, footer → reset */
section, .about-area, .service-area-two,
.choose-us-area, .counter-area-two, .testimonial-area {
  background-color: transparent;
  height: auto !important;
  overflow: visible !important;
}
section.light { background: var(--cf-surface) !important; }
section.grey  { background: var(--cf-bg) !important; }

/* ── Section Title ──────────────────────────────────────────── */
.section-title {
  text-align: center;
  margin-bottom: 52px;
}
.section-title span {
  display: inline-block;
  background: var(--cf-orange-light);
  color: var(--cf-orange);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 12px;
}
.section-title h2 {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  color: var(--cf-navy);
  margin-bottom: 14px;
  position: relative;
  display: inline-block;
}
.section-title h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  background: var(--cf-orange);
  border-radius: 2px;
  margin: 10px auto 0;
}
.section-title p {
  font-size: 16px;
  color: var(--cf-text-2);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Buttons ────────────────────────────────────────────────── */
.default-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Inter', 'Poppins', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 13px 28px !important;
  border-radius: 0 !important;
  background-color: var(--cf-orange) !important;
  color: #fff !important;
  border: none !important;
  cursor: pointer;
  transition: background var(--cf-transition), transform var(--cf-transition), box-shadow var(--cf-transition) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 1 !important;
}
/* Remove old split animation pseudo-elements */
.default-btn::before,
.default-btn::after {
  display: none !important;
}
.default-btn:hover {
  background-color: var(--cf-orange-dark) !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184,132,42,.35) !important;
}
.default-btn.active {
  background-color: var(--cf-navy) !important;
  margin-left: 0 !important;
}
.default-btn.active:hover {
  background-color: var(--cf-navy-mid) !important;
  box-shadow: 0 6px 20px rgba(15,26,45,.3) !important;
}

/* btn-red / btn-gray redesign */
.btn-red {
  background: var(--cf-orange) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-family: 'Inter', 'Poppins', sans-serif !important;
  transition: background var(--cf-transition), transform var(--cf-transition) !important;
  border: none !important;
}
.btn-red:hover  { background: var(--cf-orange-dark) !important; transform: translateY(-2px); }
.btn-gray {
  background: var(--cf-navy) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  font-family: 'Inter', 'Poppins', sans-serif !important;
  transition: background var(--cf-transition), transform var(--cf-transition) !important;
  border: none !important;
}
.btn-gray:hover { background: var(--cf-navy-mid) !important; transform: translateY(-2px); }

/* ── Inputs ─────────────────────────────────────────────────── */
.form-control,
.cf-input {
  font-family: 'Inter', 'Poppins', sans-serif !important;
  height: 48px;
  border: 2px solid var(--cf-border) !important;
  border-radius: var(--cf-radius-sm) !important;
  background: #fff !important;
  font-size: 14px !important;
  color: var(--cf-text) !important;
  padding: 10px 16px !important;
  transition: border-color var(--cf-transition), box-shadow var(--cf-transition) !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.form-control:focus,
.cf-input:focus {
  border-color: var(--cf-orange) !important;
  box-shadow: 0 0 0 4px rgba(184,132,42,.1) !important;
  background: #fff !important;
  outline: none !important;
}
.form-control:hover:focus {
  -webkit-box-shadow: 0 0 0 4px rgba(184,132,42,.1) !important;
  box-shadow: 0 0 0 4px rgba(184,132,42,.1) !important;
}
textarea.form-control,
textarea.cf-input { height: auto; }
select.form-control,
select.cf-input { -webkit-appearance: none; appearance: none; }

/* ── Cards — choose-us ──────────────────────────────────────── */
.single-choose {
  background: var(--cf-surface) !important;
  border-radius: var(--cf-radius) !important;
  padding: 32px 24px !important;
  text-align: center;
  border: 1px solid var(--cf-border);
  transition: transform var(--cf-transition), box-shadow var(--cf-transition), border-color var(--cf-transition) !important;
  height: 100%;
}
.single-choose:hover {
  transform: translateY(-6px);
  box-shadow: var(--cf-shadow-lg) !important;
  border-color: rgba(184,132,42,.3);
}
.single-choose span[class^="flaticon"],
.choose-us-area-two .single-choose span[class^="flaticon"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 56px !important;
  height: 56px !important;
  line-height: 56px !important;
  background: var(--cf-orange) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 24px !important;
  color: #fff !important;
  margin-bottom: 18px !important;
}
.single-choose span[class^="flaticon"]::before {
  color: #fff;
}
.single-choose h3 {
  font-size: 17px !important;
  font-weight: 700;
  color: var(--cf-navy);
  margin-bottom: 10px;
}
.single-choose p {
  font-size: 13px !important;
  color: var(--cf-text-2);
  line-height: 1.7;
  margin: 0;
}

/* ── Cards — service cards ──────────────────────────────────── */
.single-service {
  background: var(--cf-surface) !important;
  border-radius: var(--cf-radius) !important;
  overflow: hidden;
  border: 1px solid var(--cf-border);
  transition: transform var(--cf-transition), box-shadow var(--cf-transition) !important;
  height: 100%;
}
.single-service:hover {
  transform: translateY(-6px);
  box-shadow: var(--cf-shadow-lg) !important;
}
.single-service .service-content {
  padding: 24px 22px !important;
}
.single-service .service-content h3,
.single-service .service-content h2 {
  font-size: 18px !important;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--cf-navy);
}
.single-service .service-content p {
  font-size: 13px !important;
  line-height: 1.7;
  color: var(--cf-text-2);
}
.single-service .service-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* ── Counter section ────────────────────────────────────────── */
.counter-area-two {
  background: var(--cf-navy) !important;
  height: auto !important;          /* style.css impose height:100% */
  background-attachment: scroll !important;
}
/* style.css place un overlay sarcelle (#43abb0) via ::before — on le masque */
.counter-area-two::before { display: none !important; }
.single-counter h2 {
  font-size: 42px !important;
  font-weight: 800 !important;
  color: #fff !important;
}
.single-counter h2 .target,
.single-counter h2 .traget {
  font-size: 28px !important;
  color: var(--cf-orange) !important;
}
.single-counter p {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 6px;
}
.odometer-digit { font-family: 'Inter', 'Poppins', sans-serif !important; }

/* ── About section ──────────────────────────────────────────── */
.about-content h2 {
  font-size: clamp(22px, 3.5vw, 30px);
  line-height: 1.3;
  margin-bottom: 18px;
}
.about-single-list {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--cf-orange-light);
  border-radius: 0;
  border-left: 3px solid var(--cf-orange);
  margin-bottom: 8px;
}
.about-single-list i,
.about-single-list [class^="flaticon"] { color: var(--cf-orange); font-size: 20px; }
.about-single-list span { font-size: 13px; font-weight: 600; color: var(--cf-navy); }

/* ── Testimonials ───────────────────────────────────────────── */
.testimonial-area { background: var(--cf-bg) !important; }
.single-client {
  background: var(--cf-surface) !important;
  border-radius: var(--cf-radius) !important;
  padding: 32px 28px !important;
  margin: 10px 8px 20px !important;
  border: 1px solid var(--cf-border);
  position: relative;
  box-shadow: var(--cf-shadow) !important;
  transition: box-shadow var(--cf-transition) !important;
}
.single-client:hover { box-shadow: var(--cf-shadow-lg) !important; }
.single-client .client-text h3 {
  font-size: 16px !important;
  font-weight: 700;
  color: var(--cf-navy);
  margin-bottom: 2px;
}
.single-client .client-text span {
  font-size: 12px;
  color: var(--cf-orange);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.single-client p {
  font-size: 14px !important;
  line-height: 1.8;
  color: var(--cf-text-2);
  margin: 14px 0 !important;
  font-style: italic;
}
.single-client ul { display: flex; gap: 3px; padding: 0; }
.single-client ul li { list-style: none; }
.single-client ul li i { color: #fbbf24; font-size: 14px; }
.single-client .quotes {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 40px;
  color: var(--cf-orange-light);
  line-height: 1;
}
.single-client .quotes i { color: var(--cf-orange); opacity: .2; }

/* ── CTA offers band ────────────────────────────────────────── */
.container-offers {
  position: relative;
  overflow: hidden;
  background: var(--cf-navy) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  width: 100%;
  margin: 0 !important;
  border-top: 3px solid var(--cf-orange);
  display: flex !important;
  align-items: stretch !important;
}
.container-offers .col-lg-3,
.container-offers .col-lg-4,
.container-offers .col-lg-5 {
  flex: 1;
  min-width: 0;
}

/* Grille de points tech en arrière-plan */
.container-offers::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* Ligne diagonale orange décorative */
.container-offers::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 320px; height: 100%;
  background: linear-gradient(105deg, transparent 40%, rgba(184,132,42,.08) 40%);
  pointer-events: none;
  z-index: 0;
}

/* Wrapper interne (la row Bootstrap qu'on wrapper avec .container) */
.container-offers > .container,
.container-offers > * { position: relative; z-index: 1; }

/* Layout interne : 3 colonnes centrées */
.container-offers .col-lg-3,
.container-offers .col-lg-4,
.container-offers .col-lg-5 {
  padding: 24px 32px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Séparateur vertical entre colonnes */
.container-offers .col-lg-3:not(:last-child),
.container-offers .col-lg-4:not(:last-child),
.container-offers .col-lg-5:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,.08);
}

.offer-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: rgba(255,255,255,.55) !important;
  margin-bottom: 4px !important;
  text-transform: uppercase;
  letter-spacing: .8px;
  line-height: 1.2;
}
.offer-promo {
  font-size: 26px !important;
  font-weight: 900 !important;
  color: #fff !important;
  margin: 0 !important;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.offer-promo span { color: var(--cf-orange) !important; }
.container-offers p {
  color: rgba(255,255,255,.5) !important;
  font-size: 12px !important;
  margin: 0 !important;
  line-height: 1.6;
}

/* Boutons dans .container-offers */
.container-offers .btn-red,
.container-offers .btn-gray {
  font-size: 12px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.container-offers .btn-red {
  background: var(--cf-orange) !important;
  border-radius: 0 !important;
}
.container-offers .btn-gray {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: rgba(255,255,255,.75) !important;
  border-radius: 0 !important;
}
.container-offers .btn-gray:hover {
  border-color: var(--cf-orange) !important;
  color: var(--cf-orange) !important;
}

/* Éléments internes */
.offer-label {
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.4) !important;
  margin-bottom: 2px;
}
.offer-sublabel {
  font-size: 10px !important;
  color: rgba(255,255,255,.3) !important;
  margin-top: 2px;
  font-style: italic;
}
.offer-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: center;
}
.offer-features span {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.offer-features span i {
  color: var(--cf-orange);
  font-size: 10px;
}
.offer-cta {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Hero Banner ────────────────────────────────────────────── */
.main-banner-area-two {
  background-position: center center !important;
  min-height: 620px;
  height: auto !important; /* annule height:100vh de style.css */
}
/* Sélecteur plus spécifique que style.css/responsive.css pour écraser
   les padding-top:225px / 300px / 350px du thème */
.main-banner-area-two .banner-text {
  padding: 100px 40px 100px 20px !important;
}
.banner-text span {
  display: inline-block;
  background: rgba(184,132,42,.15);
  color: var(--cf-orange);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 0;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 16px;
  border-left: 3px solid var(--cf-orange);
  border-top: none;
  border-right: none;
  border-bottom: none;
}
.banner-text h1 {
  font-size: clamp(28px, 4.5vw, 44px) !important;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cf-navy) !important;
  margin-bottom: 18px;
}
.banner-text p {
  font-size: 16px;
  color: var(--cf-text-2);
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 28px;
}
.banner-btn { display: flex; gap: 12px; flex-wrap: wrap; }
/* Light version banner — text is dark */
.light-version .banner-text h1 { color: var(--cf-navy) !important; }

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-item {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--cf-surface);
}
.faq-question {
  padding: 18px 22px;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--cf-navy);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background var(--cf-transition);
}
.faq-question:hover { background: var(--cf-orange-light); }
.faq-answer {
  display: none;
  padding: 0 22px 18px;
  color: var(--cf-text-2);
  font-size: 14px;
  line-height: 1.8;
  border-top: 1px solid var(--cf-border);
}

/* ── Blog cards ─────────────────────────────────────────────── */
.blog-card {
  background: var(--cf-surface);
  border-radius: var(--cf-radius);
  overflow: hidden;
  border: 1px solid var(--cf-border);
  transition: transform var(--cf-transition), box-shadow var(--cf-transition);
  height: 100%;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--cf-shadow-lg); }

/* ── Hero page generic ──────────────────────────────────────── */
.cf-page-hero {
  padding: 70px 0;
  text-align: center;
  color: #fff;
}
.cf-page-hero h1 {
  color: #fff !important;
  font-size: clamp(28px, 4vw, 38px) !important;
  font-weight: 800;
  margin-bottom: 12px;
}
.cf-page-hero p {
  color: rgba(255,255,255,.8) !important;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
}

/* ── Badges / tags ──────────────────────────────────────────── */
.cf-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.cf-badge-orange { background: var(--cf-orange-light); color: var(--cf-orange); }
.cf-badge-navy   { background: rgba(15,26,45,.08); color: var(--cf-navy); }
.cf-badge-green  { background: #f0fdf8; color: var(--cf-green); }

/* ── Separator / divider ────────────────────────────────────── */
.cf-divider {
  text-align: center;
  color: var(--cf-border);
  font-size: 24px;
  margin: 0 0 52px;
}

/* ── cf-img-block : image 2 incrustée sur image 1 ──────────── */
.cf-img-block {
  position: relative;
  overflow: hidden;
  margin-left: -28px;
  line-height: 0;
}

/* Carré décoratif orange — coin bas droit, visible depuis image 1 */
.cf-img-deco-sq {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 90px;
  height: 90px;
  background: var(--cf-orange);
  z-index: 2;
  opacity: .18;
  pointer-events: none;
}

.cf-img-block::after,
.cf-img-block::before { display: none !important; }

/* Image 1 — fond complet du bloc */
.cf-img-main {
  position: relative;
  z-index: 1;
  line-height: 0;
}
.cf-img-main img {
  width: 100% !important;
  height: 460px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Image 2 — incrustée par-dessus, couvre tout le côté gauche
   elle s'étire sur toute la hauteur mais s'arrête à ~67% de la largeur
   le bord droit se dissout en gradient sombre → image 1 visible derrière */
.cf-img-thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 67% !important;
  height: 100% !important;
  z-index: 2;
  overflow: hidden;
  line-height: 0;
  border: none !important;
  box-shadow: none !important;
}
.cf-img-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Gradient de fondu sur le bord droit de l'image 2
   transition progressive → image 1 qui apparaît derrière */
.cf-img-thumb::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 140px;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(10, 12, 20, .55) 60%,
    rgba(10, 12, 20, .82) 100%
  );
  z-index: 3;
  pointer-events: none;
}

/* Badge stat — ancré en bas à droite, sur image 1 */
.cf-img-badge {
  position: absolute;
  bottom: 24px;
  right: 0;
  background: var(--cf-navy);
  border-left: 4px solid var(--cf-orange);
  padding: 14px 20px 14px 16px;
  z-index: 5;
  min-width: 148px;
  box-shadow: 0 10px 36px rgba(0,0,0,.32);
}
.cf-img-badge-num {
  font-size: 26px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -.025em;
}
.cf-img-badge-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: rgba(255,255,255,.5);
  margin-top: 5px;
  font-weight: 700;
}

/* ── Navigation — header fix + redesign ────────────────────────── */

/* Force opaque header — fixes transparent header on all pages */
.header-area .top-header-area {
  background: var(--cf-navy) !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}
.nav-area,
.nav-area .navbar-area,
.nav-area .navbar-area .main-nav,
.nav-area .navbar-area .main-nav nav {
  background: #fff !important;
}
.nav-area .navbar-area .main-nav {
  border-bottom: 1px solid var(--cf-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
}

/* Nav — alignement stable quelle que soit la longueur des libellés */
.nav-area .navbar-area .main-nav nav .navbar-collapse {
  align-items: center !important;
}
.nav-area .navbar-area .main-nav nav .navbar-nav {
  flex-wrap: nowrap !important;
  align-items: center !important;
}
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item {
  flex-shrink: 0 !important;
}
.nav-area .navbar-area .main-nav nav .others-option {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

/* Nav links */
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item > a {
  font-size: clamp(11px, 1.1vw, 14px) !important;
  font-weight: 600 !important;
  color: var(--cf-text-2) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item.active > a,
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item:hover > a {
  color: var(--cf-orange) !important;
}

/* Dropdown */
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item .dropdown-menu {
  border-radius: 0 !important;
  border: 1px solid var(--cf-border) !important;
  border-top: 3px solid var(--cf-orange) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.10) !important;
  padding: 4px 0 !important;
}
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item .dropdown-menu li a {
  border-radius: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 9px 18px !important;
  color: var(--cf-text-2) !important;
  transition: background var(--cf-transition), color var(--cf-transition) !important;
}
.nav-area .navbar-area .main-nav nav .navbar-nav .nav-item .dropdown-menu li a:hover {
  color: var(--cf-orange) !important;
  background: var(--cf-orange-light) !important;
  padding-left: 22px !important;
}

/* Logo */
.navbar-brand img { height: 36px !important; width: auto !important; }

/* ── MeanMenu mobile nav — redesign complet ──────────────────── */

/* 1. Conteneur mobile — hauteur fixe = barre hamburger */
.mobile-nav {
  min-height: 62px !important;
  background: #fff !important;
  border-bottom: 2px solid var(--cf-border) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
  padding: 0 !important;
}

/* 2. Barre absolute (mean-bar) — fond blanc, hauteur 62px */
.mean-container .mean-bar {
  background: #fff !important;
  border-bottom: none !important;
  height: 62px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* 3. Logo dans la barre mobile — centré verticalement */
.mobile-nav .logo {
  position: absolute !important;
  top: 14px !important;
  left: 16px !important;
  z-index: 1000 !important;
  line-height: 0 !important;
}
.mobile-nav .logo img {
  height: 34px !important;
  width: auto !important;
  display: block !important;
}

/* 4. Bouton hamburger — 3 traits navy */
.mean-container a.meanmenu-reveal {
  position: absolute !important;
  right: 16px !important;
  top: 17px !important;
  color: var(--cf-navy) !important;
  padding: 0 !important;
  width: 26px !important;
  height: 28px !important;
}
.mean-container a.meanmenu-reveal span {
  display: block !important;
  background: var(--cf-navy) !important;
  height: 2px !important;
  margin-top: 6px !important;
  border-radius: 0 !important;
}

/* 5. Menu déroulant — blanc, accent orange en haut */
.mean-container .mean-nav {
  margin-top: 62px !important;
  background: #fff !important;
  border-top: 3px solid var(--cf-orange) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.12) !important;
  float: left !important;
  width: 100% !important;
  position: relative !important;
  z-index: 9998 !important;
}

/* 6. Items de navigation */
.mean-container .mean-nav ul {
  padding: 0 !important;
  margin: 0 !important;
}
.mean-container .mean-nav ul li {
  position: relative !important;
  float: left !important;
  width: 100% !important;
  border-top: 1px solid var(--cf-border) !important;
}
.mean-container .mean-nav ul li a {
  display: block !important;
  float: left !important;
  width: calc(100% - 52px) !important;
  padding: 13px 16px !important;
  color: var(--cf-navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  border: none !important;
  border-top: none !important;
  text-decoration: none !important;
  background: transparent !important;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--cf-orange) !important;
  background: var(--cf-orange-light) !important;
}

/* 7. Bouton expand (+/-) sous-menu */
.mean-container .mean-nav ul li a.mean-expand {
  float: right !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center !important;
  line-height: 48px !important;
  background: var(--cf-bg) !important;
  border-left: 1px solid var(--cf-border) !important;
  color: var(--cf-navy) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}
.mean-container .mean-nav ul li a.mean-expand:hover {
  background: var(--cf-orange-light) !important;
  color: var(--cf-orange) !important;
}

/* 8. Sous-menus (dropdown) */
.mean-container .mean-nav ul li li {
  border-top: 1px solid var(--cf-border) !important;
}
.mean-container .mean-nav ul li li a {
  padding-left: 28px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cf-text-2) !important;
  background: var(--cf-bg) !important;
  width: calc(100% - 64px) !important;
}
.mean-container .mean-nav ul li li a:hover {
  color: var(--cf-orange) !important;
  background: var(--cf-orange-light) !important;
}

/* 9. Dernier item — pas de bordure basse */
.mean-container .mean-nav ul li.mean-last a { border-bottom: none !important; }

/* 10. Sticky header sur mobile — garder fond blanc */
@media (max-width: 991px) {
  .nav-area .navbar-area.is-sticky {
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
  }
  .mean-container .mean-bar,
  .mobile-nav {
    background: #fff !important;
  }
}

/* ── Breadcrumb ─────────────────────────────────────────────── */
.cf-breadcrumb { font-size: 13px; color: #888; }
.cf-breadcrumb a { color: #888; }
.cf-breadcrumb a:hover { color: var(--cf-orange); }

/* ── Simulate / Range slider ────────────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 0;
  background: linear-gradient(to right, var(--cf-orange) 0%, var(--cf-orange) var(--val, 50%), #e5e7eb var(--val, 50%), #e5e7eb 100%);
  outline: none;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: var(--cf-orange);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(184,132,42,.4);
  cursor: pointer;
  transition: transform .15s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 0;
  background: var(--cf-orange); border: 2px solid #fff;
  cursor: pointer; box-shadow: 0 2px 8px rgba(184,132,42,.4);
}

/* ── Alert / notice box ─────────────────────────────────────── */
.cf-alert-error {
  background: #fff5f5; border-left: 4px solid #e74c3c; border: 1px solid #fca5a5;
  border-radius: var(--cf-radius-sm); padding: 14px 18px;
  color: #b91c1c; font-size: 14px;
}
.cf-alert-success {
  background: #f0fdf8; border-left: 4px solid var(--cf-green); border: 1px solid #6ee7b7;
  border-radius: var(--cf-radius-sm); padding: 14px 18px;
  color: var(--cf-green); font-size: 14px;
}
.cf-alert-info {
  background: #eff6ff; border: 1px solid #93c5fd;
  border-radius: var(--cf-radius-sm); padding: 16px 20px;
  color: #1d4ed8; font-size: 14px;
}

/* ── Tables ─────────────────────────────────────────────────── */
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table thead tr { background: var(--cf-navy); color: #fff; }
.cf-table thead th { padding: 13px 16px; font-weight: 600; font-size: 13px; text-align: left; }
.cf-table tbody tr:nth-child(even) { background: var(--cf-bg); }
.cf-table tbody td { padding: 12px 16px; font-size: 14px; color: var(--cf-text-2); border-bottom: 1px solid var(--cf-border); }
.cf-table tbody tr:hover td { background: var(--cf-orange-light); }

/* ── Top header bar ─────────────────────────────────────────── */
.header-area .top-header-area {
  background: var(--cf-navy) !important;
}
.header-area .top-header-area .header-content-left p { color: rgba(255,255,255,.7) !important; }
.header-area .top-header-area .header-content-right li { color: rgba(255,255,255,.7); }
.header-area .top-header-area .header-content-right li a { color: rgba(255,255,255,.7) !important; }
.header-area .top-header-area .header-content-right li a:hover { color: var(--cf-orange) !important; }
.header-area .top-header-area .header-content-right li a i {
  background-color: var(--cf-orange) !important;
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer-top-area,
.footer-area,
.footer-top {
  font-family: 'Inter', 'Poppins', sans-serif !important;
  background: var(--cf-navy) !important;
  color: rgba(255,255,255,.65) !important;
  height: auto !important;       /* style.css impose height:100% + background-attachment:fixed */
  background-attachment: scroll !important;
  overflow: visible !important;
}
.footer-top-area .single-widget h3 {
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 18px !important;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--cf-orange);
  display: inline-block;
}
.footer-top-area .single-widget p,
.footer-top-area .single-widget span { color: rgba(255,255,255,.6) !important; font-size: 13px !important; }
.footer-top-area .single-widget ul li a {
  color: rgba(255,255,255,.6) !important;
  font-size: 13px !important;
  transition: color var(--cf-transition) !important;
  text-decoration: none !important;
}
.footer-top-area .single-widget ul li a:hover { color: var(--cf-orange) !important; padding-left: 4px; }
.footer-top-area a,
.footer-area a:hover { color: var(--cf-orange) !important; }
.footer-top-area .copyright-area {
  border-top: 1px solid rgba(255,255,255,.08) !important;
  padding-top: 18px !important;
  margin-top: 10px !important;
}
.footer-top-area .copyright { color: rgba(255,255,255,.4) !important; font-size: 12px !important; }
.footer-top-area .copyright a { color: rgba(255,255,255,.55) !important; }
.footer-top-area .copyright a:hover { color: var(--cf-orange) !important; }


/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cf-orange); }

/* ── Back to top ────────────────────────────────────────────── */
.go-top {
  background: var(--cf-orange) !important;
  border-radius: 5px !important;
}
.go-top:hover { background: var(--cf-orange-dark) !important; }

/* ── Responsive — Tablet & Mobile ───────────────────────────── */

/* ===== 991px : tablette ===== */
@media (max-width: 991px) {

  /* Header / body offset (top-bar ~36px + meanmenu ~62px) */
  body.light-version { padding-top: 98px !important; }

  /* Banner */
  .main-banner-area-two .banner-text { padding: 60px 20px !important; }
  .main-banner-area-two { min-height: 480px; }

  /* Section spacing */
  .pt-70 { padding-top: 48px !important; }
  .pb-70 { padding-bottom: 48px !important; }
  .section-title { margin-bottom: 36px; }

  /* Hero services */
  .cf-hero { padding: 56px 0; }
  .cf-trust-badges { gap: 12px; }
  .cf-trust-badge { font-size: 11px; padding: 6px 12px; }

  /* cf-img-block — tablette */
  .cf-img-block { margin-left: 0 !important; margin-top: 16px; }
  .cf-img-main img { height: 320px !important; }
  .cf-img-thumb { width: 65% !important; }
  .cf-img-badge { bottom: 16px !important; min-width: 130px !important; }
  .cf-img-badge-num { font-size: 20px !important; }

  /* About layout — ensure stacking works */
  .about-content { margin-bottom: 32px; }

  /* Cards grid */
  .single-choose {
    margin-bottom: 16px !important;
    padding: 24px 18px !important;
  }

  /* container-offers — vertical stack */
  .container-offers {
    flex-direction: column !important;
  }
  .container-offers .col-lg-3,
  .container-offers .col-lg-4,
  .container-offers .col-lg-5 {
    flex: none !important;
    width: 100% !important;
    padding: 18px 24px !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
  }
  .container-offers .col-lg-3:last-child,
  .container-offers .col-lg-4:last-child,
  .container-offers .col-lg-5:last-child {
    border-bottom: none !important;
  }
  .offer-promo { font-size: 22px !important; }

  /* Counter */
  .single-counter h2 { font-size: 32px !important; }
  .counter-area-two .row { justify-content: center; }
  .counter-area-two .col-md-3,
  .counter-area-two .col-sm-6 { margin-bottom: 24px; }

  /* Nav */
  .navbar-brand img { height: 30px !important; }
}

/* ===== 767px : grand mobile ===== */
@media (max-width: 767px) {

  /* La top-bar disparaît — seule la meanmenu bar reste (62px) */
  body.light-version { padding-top: 65px !important; }
  .header-area .top-header-area { display: none !important; }

  /* Section spacing */
  .pt-70 { padding-top: 36px !important; }
  .pb-70 { padding-bottom: 36px !important; }

  /* Banner */
  .main-banner-area-two .banner-text { padding: 40px 16px !important; }
  .banner-text h1 { font-size: 26px !important; }
  .banner-text p { font-size: 14px; margin-bottom: 20px; }
  .banner-btn { flex-direction: column; gap: 10px; }
  .banner-btn .default-btn { width: 100%; justify-content: center; }

  /* Hero services */
  .cf-hero { padding: 40px 0; }
  .cf-hero h1 { font-size: 24px !important; }
  .cf-hero p { font-size: 14px !important; }
  .cf-trust-badges { flex-direction: column; align-items: center; gap: 8px; }

  /* cf-img-block — mobile : image 1 seule, image 2 masquée */
  .cf-img-block { margin-left: 0 !important; }
  .cf-img-main img { height: 240px !important; }
  .cf-img-thumb { display: none !important; }
  .cf-img-deco-sq { display: none !important; }
  .cf-img-badge {
    bottom: 12px !important;
    right: 0 !important;
    min-width: 120px !important;
    padding: 10px 14px 10px 12px !important;
  }
  .cf-img-badge-num { font-size: 18px !important; }

  /* About buttons */
  .about-content > div[style*="display:flex"] {
    flex-direction: column !important;
  }
  .about-content .default-btn { width: 100%; justify-content: center; }

  /* Section title */
  .section-title h2 { font-size: 22px !important; }
  .section-title { margin-bottom: 28px; }

  /* Cards */
  .cf-card { padding: 20px !important; }
  .cf-card-sm { padding: 16px !important; }
  .single-choose {
    margin-bottom: 12px !important;
    padding: 20px 16px !important;
  }

  /* Counter */
  .single-counter h2 { font-size: 26px !important; }
  .single-counter p { font-size: 11px !important; }

  /* Counter area — 2 col on mobile */
  .counter-area-two .col-md-3 { flex: 0 0 50%; max-width: 50%; }

  /* container-offers */
  .offer-promo { font-size: 20px !important; }
  .offer-features { flex-direction: column; gap: 6px; }
  .offer-cta { flex-direction: column; gap: 8px; width: 100%; }
  .offer-cta .btn-red,
  .offer-cta .btn-gray { width: 100%; text-align: center; }

  /* Tables */
  .cf-comp-table { min-width: 0; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cf-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* FAQ */
  .faq-question { padding: 14px 16px; font-size: 14px; }

  /* Footer columns stack */
  .footer-top-area .col-lg-3,
  .footer-top-area .col-md-4 {
    margin-bottom: 28px;
  }

  /* Simulator — collapse to 1 col */
  .sim-grid-2col { grid-template-columns: 1fr !important; }
  .sim-step-panel { padding: 24px 18px !important; }
  .sim-progress-steps { gap: 8px !important; }
  .sim-step-label { display: none !important; }
  .sim-type-grid { grid-template-columns: 1fr 1fr !important; }
  .sim-recap-bar { flex-direction: column !important; gap: 8px !important; }
  .sim-recap-item { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.1) !important; padding: 10px 0 !important; }
  .sim-recap-item:last-child { border-bottom: none !important; }
  .sim-step3-grid { grid-template-columns: 1fr !important; }
}

/* ===== 575px : petit mobile ===== */
@media (max-width: 575px) {

  body.light-version { padding-top: 65px !important; }

  /* Section spacing */
  .pt-70 { padding-top: 28px !important; }
  .pb-70 { padding-bottom: 28px !important; }

  /* Hero */
  .cf-hero { padding: 32px 0; }
  .cf-hero h1 { font-size: 21px !important; }

  /* Counter — 1 col on very small */
  .counter-area-two .col-md-3 { flex: 0 0 100%; max-width: 100%; }

  /* Simulator */
  .sim-type-grid { grid-template-columns: 1fr !important; }

  /* Buttons full width */
  .default-btn { width: 100%; justify-content: center; }

  .cf-img-main img { height: 190px !important; }

  /* container-offers cols */
  .container-offers .col-lg-3,
  .container-offers .col-lg-4,
  .container-offers .col-lg-5 {
    padding: 14px 16px !important;
  }

  /* Offer promo text */
  .offer-promo { font-size: 18px !important; }
  .offer-label { font-size: 9px !important; }
}

/* ── Hero sections ────────────────────────────────────────── */
.cf-hero {
  padding: 80px 0;
  text-align: center;
  position: relative;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* Overlay couleur via ::before — se superpose à l'image de fond */
.cf-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cf-hero > .container {
  position: relative;
  z-index: 1;
}
.cf-hero-dark { background-color: var(--cf-navy); }
.cf-hero-dark::before {
  background: linear-gradient(135deg, rgba(15,22,35,.86) 0%, rgba(30,39,64,.80) 100%);
}
.cf-hero-orange { background-color: var(--cf-orange); }
.cf-hero-orange::before {
  background: linear-gradient(135deg, rgba(184,132,42,.88) 0%, rgba(154,109,32,.84) 100%);
}
.cf-hero-green { background-color: var(--cf-green); }
.cf-hero-green::before {
  background: linear-gradient(135deg, rgba(10,107,82,.88) 0%, rgba(26,179,148,.82) 100%);
}
.cf-hero-purple { background-color: var(--cf-purple); }
.cf-hero-purple::before {
  background: linear-gradient(135deg, rgba(90,53,168,.88) 0%, rgba(130,96,210,.82) 100%);
}
.cf-hero h1 {
  color: #fff !important;
  font-size: clamp(26px, 4vw, 38px) !important;
  font-weight: 800;
  margin: 12px 0;
}
.cf-hero p {
  color: rgba(255,255,255,.8) !important;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}
.cf-hero-label {
  display: inline-block;
  background: rgba(255,255,255,.15);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 4px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.25);
}
.cf-hero-label-orange {
  background: rgba(255,255,255,.12);
  color: var(--cf-orange);
  border-color: rgba(184,132,42,.4);
}

/* ── Hero step indicators ───────────────────────────────────── */
.cf-hero-steps {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.cf-hero-step {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 600;
}
.cf-hero-step-num {
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,.25);
  border: 2px solid rgba(255,255,255,.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Trust badges in hero ────────────────────────────────────── */
.cf-trust-badges {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.cf-trust-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 5px;
  padding: 7px 14px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.cf-trust-badge i { color: var(--cf-orange); font-size: 13px; }

/* ── Cards ───────────────────────────────────────────────────── */
.cf-card {
  background: var(--cf-surface);
  border-radius: var(--cf-radius);
  padding: 32px;
  box-shadow: var(--cf-shadow);
  border: 1px solid var(--cf-border);
}
.cf-card-sm {
  background: var(--cf-surface);
  border-radius: var(--cf-radius);
  padding: 22px;
  box-shadow: var(--cf-shadow);
  border: 1px solid var(--cf-border);
}
.cf-dark-card {
  background: linear-gradient(135deg, var(--cf-navy) 0%, var(--cf-navy-mid) 100%);
  border-radius: var(--cf-radius);
  padding: 28px;
  color: #fff;
}
.cf-dark-card h5, .cf-dark-card h6 { color: #fff !important; }
.cf-orange-card {
  background: var(--cf-orange-light);
  border: 2px solid var(--cf-orange);
  border-radius: var(--cf-radius);
  padding: 22px;
}

/* ── Section dividers ────────────────────────────────────────── */
.cf-section-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--cf-border);
}
.cf-section-header h5 {
  margin: 0;
  font-weight: 800;
  font-size: 17px;
  color: var(--cf-navy);
}

/* ── Step / numbered badges ─────────────────────────────────── */
.cf-step-badge {
  width: 38px;
  height: 38px;
  background: var(--cf-orange);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(184,132,42,.3);
}
.cf-step-badge-navy {
  background: var(--cf-navy);
  box-shadow: 0 4px 12px rgba(15,26,45,.25);
}
.cf-step-badge-green {
  background: var(--cf-green);
  box-shadow: 0 4px 12px rgba(13,122,95,.25);
}
.cf-step-badge-sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

/* ── Feature / icon items ────────────────────────────────────── */
.cf-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.cf-feature-item:last-child { margin-bottom: 0; }
.cf-icon-box {
  width: 40px;
  height: 40px;
  background: rgba(184,132,42,.1);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cf-icon-box i { color: var(--cf-orange); font-size: 15px; }
.cf-icon-box-sm {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}
.cf-feature-label {
  font-weight: 700;
  color: #fff;
  margin: 0 0 3px;
  font-size: 13px;
}
.cf-feature-desc {
  color: rgba(255,255,255,.6);
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* ── Checklist ───────────────────────────────────────────────── */
.cf-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cf-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--cf-text-2);
  margin-bottom: 10px;
  line-height: 1.5;
}
.cf-checklist li i {
  color: var(--cf-orange);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 14px;
}

/* ── Result cards (simulator) ───────────────────────────────── */
.cf-result-card {
  border-radius: var(--cf-radius);
  padding: 24px 20px;
  text-align: center;
  color: #fff;
}
.cf-result-card-orange {
  background: linear-gradient(135deg, var(--cf-orange), #D4A855);
  box-shadow: 0 6px 24px rgba(184,132,42,.3);
}
.cf-result-card-navy {
  background: linear-gradient(135deg, var(--cf-navy), var(--cf-navy-mid));
  box-shadow: 0 6px 24px rgba(15,26,45,.2);
}
.cf-result-card-green {
  background: linear-gradient(135deg, var(--cf-green), #1ab394);
  box-shadow: 0 6px 24px rgba(13,122,95,.25);
}
.cf-result-card .cf-rc-label {
  font-size: 12px;
  opacity: .8;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cf-result-card .cf-rc-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}
.cf-result-card .cf-rc-sub {
  font-size: 12px;
  opacity: .65;
}

/* ── Form labels ─────────────────────────────────────────────── */
.cf-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--cf-text-2);
  margin-bottom: 6px;
}
.cf-label .required,
.required { color: #e74c3c; }

/* ── Mensualité preview box ──────────────────────────────────── */
.cf-monthly-preview {
  background: var(--cf-bg);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-radius-sm);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.cf-monthly-preview .cf-mp-label {
  font-size: 13px;
  color: var(--cf-text-2);
}
.cf-monthly-preview .cf-mp-label i { color: var(--cf-orange); margin-right: 6px; }
.cf-monthly-preview .cf-mp-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--cf-orange);
}

/* ── RGPD consent block ──────────────────────────────────────── */
.cf-consent-block {
  background: var(--cf-bg);
  border-radius: var(--cf-radius-sm);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.cf-consent-block label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 13px;
  color: var(--cf-text-2);
  margin: 0;
}
.cf-consent-block input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--cf-orange);
  flex-shrink: 0;
}

/* ── Sidebar loan links ──────────────────────────────────────── */
.cf-loan-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--cf-border);
  text-decoration: none;
  color: var(--cf-text);
  transition: color var(--cf-transition);
}
.cf-loan-link:last-child { border-bottom: none; }
.cf-loan-link:hover { color: var(--cf-orange); text-decoration: none; }
.cf-loan-link span:first-child { font-size: 13px; font-weight: 600; }
.cf-loan-link span:last-child { font-size: 11px; color: var(--cf-orange); font-weight: 700; }

/* ── Quick link list ─────────────────────────────────────────── */
.cf-quick-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cf-border);
  text-decoration: none;
  color: var(--cf-text);
  font-size: 14px;
  transition: color var(--cf-transition);
}
.cf-quick-link:last-child { border-bottom: none; }
.cf-quick-link:hover { color: var(--cf-orange); text-decoration: none; }
.cf-quick-link i:first-child { color: var(--cf-orange); width: 16px; }
.cf-quick-link .cf-ql-arrow { color: var(--cf-border); margin-left: auto; font-size: 11px; }

/* ── Security note ───────────────────────────────────────────── */
.cf-security-note {
  font-size: 12px;
  color: var(--cf-text-3);
  text-align: center;
  margin-top: 12px;
}
.cf-security-note i { margin-right: 4px; }
.cf-security-note a { color: var(--cf-orange); }

/* ── Simulator input group ───────────────────────────────────── */
.cf-sim-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cf-sim-input {
  border: 2px solid var(--cf-orange) !important;
  border-radius: var(--cf-radius-sm) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  text-align: center;
  color: var(--cf-orange) !important;
  padding: 7px 10px !important;
  height: auto !important;
}
.cf-sim-input:focus {
  border-color: var(--cf-orange-dark) !important;
  box-shadow: 0 0 0 3px rgba(184,132,42,.1) !important;
}
.cf-sim-unit {
  font-weight: 700;
  color: var(--cf-orange);
  font-size: 15px;
  white-space: nowrap;
}
.cf-slider-range {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--cf-text-3);
  margin-top: 5px;
}

/* ── Service alternating layout ──────────────────────────────── */
.cf-service-row {
  margin-bottom: 64px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--cf-border);
}
.cf-service-row:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.cf-service-img {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
}
.cf-service-img img {
  width: 100%;
  height: 290px;
  object-fit: cover;
  border-radius: 16px;
}
.cf-service-img-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  color: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}
.cf-service-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 14px;
}
.cf-meta-pill {
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.cf-meta-pill-grey {
  background: var(--cf-bg);
  color: var(--cf-text-2);
}

/* ── Comparison table ────────────────────────────────────────── */
.cf-comp-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cf-surface);
  border-radius: var(--cf-radius);
  overflow: hidden;
  box-shadow: var(--cf-shadow);
  min-width: 680px;
}
.cf-comp-table thead tr { background: var(--cf-navy); color: #fff; }
.cf-comp-table thead th { padding: 15px 18px; text-align: left; font-size: 13px; font-weight: 600; }
.cf-comp-table tbody tr { border-bottom: 1px solid var(--cf-border); transition: background var(--cf-transition); }
.cf-comp-table tbody tr:nth-child(even) { background: var(--cf-bg); }
.cf-comp-table tbody tr:hover { background: var(--cf-orange-light); }
.cf-comp-table td { padding: 13px 18px; font-size: 14px; color: var(--cf-text-2); }
.cf-comp-table td:first-child { font-weight: 700; color: var(--cf-navy); }
.cf-comp-table .cf-rt-link { color: var(--cf-orange); font-size: 12px; font-weight: 700; text-decoration: none; }
.cf-comp-table .cf-rt-link:hover { text-decoration: underline; }
.cf-resp-badge {
  background: #f0fdf8;
  color: var(--cf-green);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}

/* ── Page breadcrumb bar ─────────────────────────────────────── */
.cf-breadbar {
  background: var(--cf-surface);
  border-bottom: 1px solid var(--cf-border);
  padding: 10px 0;
}
.cf-breadbar nav {
  font-size: 13px;
  color: var(--cf-text-3);
}
.cf-breadbar a { color: var(--cf-text-3); text-decoration: none; }
.cf-breadbar a:hover { color: var(--cf-orange); }
.cf-breadbar .sep { margin: 0 8px; }

/* ── FAQ search bar ──────────────────────────────────────────── */
.cf-search-wrap {
  position: relative;
}
.cf-search-wrap i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cf-text-3);
  font-size: 15px;
}
.cf-search-input {
  padding-left: 48px !important;
  border-radius: 30px !important;
  height: 52px !important;
  font-size: 15px !important;
}

/* ── Loading shimmer (for future use) ───────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Smooth page transitions ────────────────────────────────── */
* { -webkit-tap-highlight-color: transparent; }
a, button { outline: none !important; }
img { border-radius: 2px; }

/* ── Spacing corrections (Nordic UX pass) ───────────────────── */

/* Sections : réduction de 70px → 52px, 100px → 72px             */
/* Résultat : ~104px entre sections (était 140px) — respirant     */
/* mais pas excessif, esprit Lagom scandinave                     */
.pt-70  { padding-top:    52px !important; }
.pb-70  { padding-bottom: 52px !important; }
.ptb-100 { padding-top:    72px !important; padding-bottom: 72px !important; }
.pt-100 { padding-top:    72px !important; }
.pb-100 { padding-bottom: 72px !important; }

/* Cartes dans les grilles : Bootstrap 4 ne propage pas le g-4    */
/* en gap vertical natif — on compense ici                        */
.choose-us-area .row > [class*="col"],
.service-area-two .row > [class*="col"],
.counter-area-two .row > [class*="col"],
.about-area .row > [class*="col"] {
  margin-bottom: 24px;
}
/* Supprimer le double-margin sur le dernier rang (last visible)   */
.choose-us-area .row,
.service-area-two .row,
.counter-area-two .row,
.about-area .row {
  margin-bottom: -24px;
}

/* Responsive — ajustement du padding section */
@media (max-width: 991px) {
  .pt-70  { padding-top:    40px !important; }
  .pb-70  { padding-bottom: 40px !important; }
  .ptb-100 { padding-top:    56px !important; padding-bottom: 56px !important; }
}
@media (max-width: 767px) {
  .pt-70  { padding-top:    32px !important; }
  .pb-70  { padding-bottom: 32px !important; }
  .ptb-100 { padding-top:    44px !important; padding-bottom: 44px !important; }
}

/* ── Ticker barre de navigation (remplace <marquee>) ────────── */
@keyframes cf-ticker {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
.cf-ticker {
  display: inline-block;
  animation: cf-ticker 22s linear infinite;
}