.elementor-19 .elementor-element.elementor-element-4ac2ff2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-a54f40c */#vm-cem :root,
.vm-cem-page {
  --g1: #115A65;
  --g2: #0B3C45;
  --g3: #072830;
  --g4: #EAF1F2;
  --ac: #A8CDD3;
  --ac2: #6AAAB4;
  --wh: #FFFFFF;
  --gray: #F4F6F7;
  --t1: #0E1C1F;
  --t2: #3D5558;
  --t3: #7A9498;
  --bd: #D8E3E5;
  --ft: 'Cormorant Garamond', serif;
  --fb: 'Jost', sans-serif;
  --radius: 6px;
}

/* ── BASE RESET IMPORTANT ────────────────────────── */
.vm-cem img { display: block !important; max-width: 100% !important }
.vm-cem a { text-decoration: none !important }
.vm-cem *, .vm-cem *::before, .vm-cem *::after { box-sizing: border-box !important }
.vm-cem { font-family: 'Jost', sans-serif !important; color: #0E1C1F !important }

.vm-wrap { max-width: 1200px !important; margin: 0 auto !important; padding: 0 40px !important }
.vm-wrap--xl { max-width: 1400px !important; margin: 0 auto !important; padding: 0 40px !important }

/* ── ANIMATIONS ──────────────────────────────────── */
.vm-fade { opacity: 0; transform: translateY(20px); transition: opacity .65s ease, transform .65s ease }
.vm-fade.on { opacity: 1 !important; transform: none !important }
.vm-fl { opacity: 0; transform: translateX(-28px); transition: opacity .75s ease, transform .75s ease }
.vm-fl.on { opacity: 1 !important; transform: none !important }
.vm-fr { opacity: 0; transform: translateX(28px); transition: opacity .75s ease, transform .75s ease }
.vm-fr.on { opacity: 1 !important; transform: none !important }
.vm-d1 { transition-delay: .1s } .vm-d2 { transition-delay: .2s } .vm-d3 { transition-delay: .3s }

/* ── BOUTONS ─────────────────────────────────────── */
.vm-btn {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 13px 26px !important;
  font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 1.5px !important; text-transform: uppercase !important;
  cursor: pointer !important; border: none !important; transition: all .22s !important;
  line-height: 1 !important; border-radius: 6px !important; text-decoration: none !important;
}
.vm-btn-green { background: #115A65 !important; color: #fff !important }
.vm-btn-green:hover { background: #0B3C45 !important; color: #fff !important }
.vm-btn-outline-w { background: transparent !important; color: #fff !important; border: 2px solid rgba(255,255,255,.55) !important }
.vm-btn-outline-w:hover { background: rgba(255,255,255,.12) !important }
.vm-btn-white { background: #fff !important; color: #0B3C45 !important; font-weight: 700 !important }
.vm-btn-white:hover { background: #EAF1F2 !important }
.vm-btn svg { width: 14px !important; height: 14px !important; stroke: currentColor !important; fill: none !important; flex-shrink: 0 !important; transition: transform .2s !important }
.vm-btn:hover svg { transform: translateX(3px) !important }
.vm-btn-green svg, .vm-btn-white svg { stroke: #0B3C45 !important }
.vm-btn-green svg { stroke: #fff !important }

/* ── EYEBROW ─────────────────────────────────────── */
.vm-ew {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2.5px !important;
  text-transform: uppercase !important; color: #115A65 !important;
  display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 12px !important;
}
.vm-ew::before { content: '' !important; width: 24px !important; height: 2px !important; background: #115A65 !important; flex-shrink: 0 !important; border-radius: 2px !important }

/* ════════════════════════════════════════════════════
   1. HERO — photo + formulaire
════════════════════════════════════════════════════ */
.vm-hero {
  position: relative !important;
  display: flex !important; align-items: center !important;
  overflow: hidden !important;
}
.vm-hero__bg { position: absolute !important; inset: 0 !important; z-index: 0 !important }
.vm-hero__bg img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important }
.vm-hero__bg::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(to right, rgba(7,40,48,.94) 0%, rgba(7,40,48,.82) 48%, rgba(7,40,48,.60) 75%, rgba(7,40,48,.50) 100%) !important;
}
.vm-hero__bc {
  position: absolute !important; top: 24px !important; left: 40px !important; z-index: 3 !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
  font-size: 12px !important; color: rgba(255,255,255,.5) !important; font-family: 'Jost', sans-serif !important;
}
.vm-hero__bc a { color: rgba(255,255,255,.7) !important; transition: color .2s !important }
.vm-hero__bc a:hover { color: #A8CDD3 !important }
.vm-hero__inner {
  position: relative !important; z-index: 2 !important;
  width: 100% !important; padding: 100px 40px 72px !important;
  display: grid !important; grid-template-columns: 1fr 400px !important;
  gap: 56px !important; align-items: center !important;
  max-width: 1400px !important; margin: 0 auto !important;
}
.vm-hero__tag {
  display: inline-flex !important; align-items: center !important;
  background: rgba(168,205,211,.18) !important; color: #A8CDD3 !important;
  border: 1px solid rgba(168,205,211,.35) !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 2px !important;
  text-transform: uppercase !important; padding: 5px 14px !important;
  margin-bottom: 16px !important; border-radius: 4px !important;
}
.vm-hero__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(34px, 4.2vw, 58px) !important;
  font-weight: 700 !important; line-height: 1.05 !important;
  color: #fff !important; letter-spacing: -.5px !important;
  margin-bottom: 14px !important;
}
.vm-hero__title em { font-style: italic !important; color: #A8CDD3 !important }
.vm-hero__sub {
  font-size: 15px !important; color: rgba(255,255,255,.75) !important;
  line-height: 1.7 !important; max-width: 480px !important; margin-bottom: 24px !important;
}
.vm-hero__btns { display: flex !important; gap: 10px !important; flex-wrap: wrap !important }

/* ── FORMULAIRE ──────────────────────────────────── */
.vm-form-card {
  background: #fff !important; border-radius: 10px !important;
  padding: 28px 28px !important; box-shadow: 0 20px 56px rgba(0,0,0,.3) !important;
  border-top: 4px solid #115A65 !important;
}
.vm-form-card__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 22px !important; font-weight: 700 !important;
  color: #0E1C1F !important; margin-bottom: 3px !important;
}
.vm-form-card__sub { font-size: 12px !important; color: #7A9498 !important; margin-bottom: 16px !important }
.vm-form { display: flex !important; flex-direction: column !important; gap: 10px !important }
.vm-form__row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px !important }
.vm-form__field { display: flex !important; flex-direction: column !important; gap: 4px !important }
.vm-form__label {
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important;
  text-transform: uppercase !important; color: #3D5558 !important;
}
.vm-form__input,
.vm-form__select,
.vm-form__textarea {
  width: 100% !important; padding: 9px 12px !important;
  font-family: 'Jost', sans-serif !important; font-size: 13.5px !important; color: #0E1C1F !important;
  background: #fff !important; border: 1.5px solid #D8E3E5 !important;
  border-radius: 6px !important; outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
  -webkit-appearance: none !important; appearance: none !important;
}
.vm-form__input:focus,
.vm-form__select:focus,
.vm-form__textarea:focus {
  border-color: #115A65 !important; box-shadow: 0 0 0 3px rgba(17,90,101,.12) !important;
}
.vm-form__textarea { resize: vertical !important; min-height: 70px !important; line-height: 1.6 !important }
.vm-form__submit {
  width: 100% !important; padding: 13px !important;
  background: #115A65 !important; color: #fff !important;
  font-family: 'Jost', sans-serif !important; font-size: 12px !important; font-weight: 700 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  border: none !important; border-radius: 6px !important;
  cursor: pointer !important; transition: background .22s !important;
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  margin-top: 4px !important;
}
.vm-form__submit:hover { background: #0B3C45 !important }
.vm-form__submit svg { width: 14px !important; height: 14px !important; stroke: #fff !important; fill: none !important }
.vm-form__note { font-size: 11px !important; color: #7A9498 !important; text-align: center !important; margin-top: 8px !important }

/* ════════════════════════════════════════════════════
   2. BANDE PROMESSE — images icônes + design créatif
   Fond blanc, gradient top vert, hover lift
════════════════════════════════════════════════════ */
.vm-promise { background: #fff !important; padding: 64px 0 !important; border-bottom: 1px solid #D8E3E5 !important }
.vm-promise__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important }
.vm-promise__item {
  padding: 32px 28px !important;
  border-radius: 8px !important;
  background: #F4F6F7 !important;
  border: 1px solid #D8E3E5 !important;
  border-bottom: 4px solid #115A65 !important;
  display: flex !important; flex-direction: column !important; gap: 14px !important;
  transition: box-shadow .25s, transform .25s !important;
  position: relative !important; overflow: hidden !important;
}
.vm-promise__item:hover { box-shadow: 0 8px 28px rgba(17,90,101,.1) !important; transform: translateY(-3px) !important }
.vm-promise__item::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 3px !important; background: linear-gradient(to right, #115A65, #6AAAB4) !important;
}
.vm-promise__icon-wrap {
  width: 64px !important; height: 64px !important;
  background: #EAF1F2 !important; border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.vm-promise__icon-wrap img { width: 40px !important; height: 40px !important; object-fit: contain !important }
.vm-promise__item h4 { font-size: 16px !important; font-weight: 700 !important; color: #0E1C1F !important; line-height: 1.2 !important }
.vm-promise__item p { font-size: 13px !important; color: #3D5558 !important; line-height: 1.65 !important }

/* ════════════════════════════════════════════════════
   3. NOS 3 SOUS-SERVICES — Cards avec photos grandes
   Style : numéro grand + photo + texte condensé
════════════════════════════════════════════════════ */
.vm-sub { padding: 72px 0 !important; background: #F4F6F7 !important; border-top: 1px solid #D8E3E5 !important }
.vm-sub__head { text-align: center !important; max-width: 620px !important; margin: 0 auto 44px !important }
.vm-sub__head h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(26px, 3vw, 42px) !important; font-weight: 700 !important; color: #0E1C1F !important;
}
.vm-sub__head p { font-size: 15px !important; color: #3D5558 !important; margin-top: 8px !important }
.vm-sub__grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important }

.vm-sub-card {
  background: #fff !important; border: 1px solid #D8E3E5 !important;
  border-radius: 6px !important; overflow: hidden !important;
  display: flex !important; flex-direction: column !important;
  text-decoration: none !important;
  transition: box-shadow .25s, transform .25s, border-color .25s !important;
}
.vm-sub-card:hover {
  box-shadow: 0 10px 40px rgba(17,90,101,.13) !important;
  transform: translateY(-4px) !important; border-color: #115A65 !important;
}
.vm-sub-card__imgw { overflow: hidden !important; height: 240px !important; position: relative !important }
.vm-sub-card__img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .6s !important }
.vm-sub-card:hover .vm-sub-card__img { transform: scale(1.05) !important }
.vm-sub-card__num {
  position: absolute !important; bottom: 12px !important; left: 16px !important;
  font-family: 'Cormorant Garamond', serif !important; font-size: 64px !important;
  font-weight: 700 !important; color: rgba(255,255,255,.25) !important; line-height: 1 !important;
}
.vm-sub-card__badge {
  position: absolute !important; top: 14px !important; left: 14px !important;
  background: #115A65 !important; color: #fff !important;
  font-size: 9px !important; font-weight: 700 !important; letter-spacing: 1.5px !important;
  text-transform: uppercase !important; padding: 5px 12px !important; border-radius: 4px !important;
}
.vm-sub-card__body { padding: 24px 24px 20px !important; flex: 1 !important }
.vm-sub-card__title {
  font-family: 'Cormorant Garamond', serif !important; font-size: 24px !important;
  font-weight: 700 !important; color: #0E1C1F !important; margin-bottom: 8px !important;
}
.vm-sub-card__text { font-size: 13.5px !important; color: #3D5558 !important; line-height: 1.7 !important; margin-bottom: 12px !important }
.vm-sub-card__pts { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 4px !important }
.vm-sub-card__pts li {
  font-size: 12.5px !important; color: #3D5558 !important;
  display: flex !important; align-items: center !important; gap: 8px !important;
}
.vm-sub-card__pts li::before { content: '' !important; width: 5px !important; height: 5px !important; background: #115A65 !important; border-radius: 50% !important; flex-shrink: 0 !important }
.vm-sub-card__foot {
  padding: 14px 24px !important; border-top: 1px solid #D8E3E5 !important;
  background: #F4F6F7 !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.vm-sub-card__link {
  font-size: 11px !important; font-weight: 700 !important; letter-spacing: 1.5px !important;
  text-transform: uppercase !important; color: #115A65 !important;
  display: flex !important; align-items: center !important; gap: 5px !important;
}
.vm-sub-card__link::after { content: '→' !important }
.vm-sub-card__devis { font-size: 11px !important; color: #7A9498 !important }
.vm-sub-card__devis::before { content: '✓ ' !important; color: #115A65 !important; font-weight: 700 !important }

/* ════════════════════════════════════════════════════
   4. POURQUOI NOUS CHOISIR — Arguments gras, 2 col
   Style : fond blanc, bordure verte gauche sur chaque item
════════════════════════════════════════════════════ */
.vm-why { padding: 72px 0 !important; background: #fff !important }
.vm-why__head { margin-bottom: 48px !important }
.vm-why__head h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(26px, 3vw, 42px) !important; font-weight: 700 !important; color: #0E1C1F !important;
}
.vm-why__head p { font-size: 15px !important; color: #3D5558 !important; margin-top: 8px !important; max-width: 560px !important }
.vm-why__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important }
.vm-why__item {
  display: flex !important; gap: 16px !important; align-items: flex-start !important;
  padding: 20px 24px !important;
  border: 1px solid #D8E3E5 !important; border-radius: 6px !important;
  border-left: 4px solid #115A65 !important;
  transition: box-shadow .2s !important;
}
.vm-why__item:hover { box-shadow: 0 4px 20px rgba(17,90,101,.08) !important }
.vm-why__icon { width: 44px !important; height: 44px !important; object-fit: contain !important; flex-shrink: 0 !important }
.vm-why__text h3 {
  font-size: 14px !important; font-weight: 700 !important; color: #0E1C1F !important;
  margin-bottom: 4px !important; letter-spacing: .3px !important;
}
.vm-why__text p { font-size: 13px !important; color: #3D5558 !important; line-height: 1.65 !important }

/* ════════════════════════════════════════════════════
   5. RÉALISATIONS — grille 2x2 portrait + 1 large
   Nouvelle mise en page originale
════════════════════════════════════════════════════ */
.vm-portfolio { padding: 72px 0 !important; background: #0B3C45 !important }
.vm-portfolio__head {
  display: flex !important; align-items: flex-end !important;
  justify-content: space-between !important; margin-bottom: 36px !important;
  flex-wrap: wrap !important; gap: 16px !important;
}
.vm-portfolio__head h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(26px, 3vw, 42px) !important; font-weight: 700 !important; color: #fff !important;
}
.vm-portfolio__head p { font-size: 14px !important; color: rgba(255,255,255,.6) !important; margin-top: 6px !important }
/* Layout 2 lignes : 1 grand + 2 petits | 3 medium */
.vm-portfolio__grid {
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1fr !important;
  grid-template-rows: 280px 220px !important;
  gap: 4px !important;
}
.vm-pcard { overflow: hidden !important; position: relative !important; cursor: pointer !important }
.vm-pcard:first-child { grid-row: span 2 !important }
.vm-pcard__img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; transition: transform .6s !important }
.vm-pcard:hover .vm-pcard__img { transform: scale(1.05) !important }
.vm-pcard__overlay {
  position: absolute !important; inset: 0 !important;
  background: linear-gradient(to top, rgba(7,40,48,.85) 0%, transparent 55%) !important;
  opacity: 0 !important; transition: opacity .3s !important;
}
.vm-pcard:hover .vm-pcard__overlay { opacity: 1 !important }
.vm-pcard__info {
  position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
  padding: 16px 18px !important; transform: translateY(8px) !important;
  transition: transform .3s !important; opacity: 0 !important;
}
.vm-pcard:hover .vm-pcard__info { transform: translateY(0) !important; opacity: 1 !important }
.vm-pcard__name {
  font-family: 'Cormorant Garamond', serif !important; font-size: 18px !important;
  font-weight: 700 !important; color: #fff !important; display: block !important;
}
.vm-pcard__cat { font-size: 11px !important; color: #A8CDD3 !important; margin-top: 2px !important; display: block !important }

/* ════════════════════════════════════════════════════
   6. PROCESSUS — Fond vert, horizontal créatif
   Numéros grands en arrière-plan déco
════════════════════════════════════════════════════ */
.vm-process { padding: 72px 0 !important; background: #EAF1F2 !important; border-top: 1px solid #D8E3E5 !important }
.vm-process__head { text-align: center !important; margin-bottom: 52px !important }
.vm-process__head h2 {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(24px, 2.8vw, 40px) !important; font-weight: 700 !important; color: #0E1C1F !important;
}
.vm-process__head p { font-size: 15px !important; color: #3D5558 !important; margin-top: 8px !important }
.vm-process__grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important }
.vm-step {
  background: #fff !important; border-radius: 6px !important;
  padding: 28px 24px !important; position: relative !important;
  overflow: hidden !important; border-bottom: 3px solid #115A65 !important;
}
.vm-step__bg-num {
  position: absolute !important; top: -8px !important; right: 8px !important;
  font-family: 'Cormorant Garamond', serif !important; font-size: 88px !important;
  font-weight: 700 !important; color: #EAF1F2 !important; line-height: 1 !important;
  pointer-events: none !important;
}
.vm-step__num {
  width: 36px !important; height: 36px !important; background: #115A65 !important; color: #fff !important;
  border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 13px !important; font-weight: 700 !important; margin-bottom: 16px !important;
  position: relative !important; z-index: 1 !important;
}
.vm-step h3 { font-size: 15px !important; font-weight: 700 !important; color: #0E1C1F !important; margin-bottom: 8px !important; position: relative !important; z-index: 1 !important }
.vm-step p { font-size: 13px !important; color: #3D5558 !important; line-height: 1.65 !important; position: relative !important; z-index: 1 !important }

/* ════════════════════════════════════════════════════
   7. BANNIÈRE PHOTO PLEINE LARGEUR
════════════════════════════════════════════════════ */
.vm-banner {
  position: relative !important; height: 440px !important; overflow: hidden !important;
  display: flex !important; align-items: center !important;
}
.vm-banner img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.vm-banner::after {
  content: '' !important; position: absolute !important; inset: 0 !important;
  background: linear-gradient(to right, rgba(7,40,48,.88) 0%, rgba(7,40,48,.5) 55%, transparent 100%) !important;
  z-index: 1 !important;
}
.vm-banner__c { position: relative !important; z-index: 2 !important; padding: 0 60px !important; max-width: 580px !important }
.vm-banner__title {
  font-family: 'Cormorant Garamond', serif !important;
  font-size: clamp(26px, 3.5vw, 48px) !important; font-weight: 700 !important;
  color: #fff !important; line-height: 1.1 !important; margin-bottom: 14px !important;
}
.vm-banner__title em { font-style: italic !important; color: #A8CDD3 !important }
.vm-banner__text { font-size: 15px !important; color: rgba(255,255,255,.75) !important; line-height: 1.75 !important; margin-bottom: 28px !important; max-width: 420px !important }
.vm-banner__btns { display: flex !important; gap: 12px !important; flex-wrap: wrap !important }

/* ════════════════════════════════════════════════════
   8. GARANTIES — fond blanc, 4 logos + texte
════════════════════════════════════════════════════ */
.vm-garanties { padding: 56px 0 !important; background: #fff !important; border-top: 1px solid #D8E3E5 !important }
.vm-garanties__inner { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 40px !important; flex-wrap: wrap !important }
.vm-garanties__text h3 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(20px, 2.2vw, 30px) !important; font-weight: 700 !important; color: #0E1C1F !important; margin-bottom: 4px !important }
.vm-garanties__text p { font-size: 13.5px !important; color: #3D5558 !important; max-width: 380px !important; line-height: 1.65 !important }
.vm-garanties__logos { display: flex !important; align-items: center !important; gap: 28px !important; flex-wrap: wrap !important }
.vm-glogo { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; text-align: center !important }
.vm-glogo img { width: 52px !important; height: 52px !important; object-fit: contain !important }
.vm-glogo span { font-size: 9px !important; font-weight: 700 !important; letter-spacing: .8px !important; text-transform: uppercase !important; color: #7A9498 !important; max-width: 72px !important; line-height: 1.4 !important }

/* ════════════════════════════════════════════════════
   9. CTA FINALE
════════════════════════════════════════════════════ */
.vm-cta { background: #0B3C45 !important; padding: 72px 0 !important }
.vm-cta__inner { display: grid !important; grid-template-columns: 1fr auto !important; gap: 64px !important; align-items: center !important }
.vm-cta__text h2 { font-family: 'Cormorant Garamond', serif !important; font-size: clamp(24px, 3vw, 42px) !important; font-weight: 700 !important; color: #fff !important; line-height: 1.1 !important; margin-bottom: 10px !important }
.vm-cta__text h2 em { font-style: italic !important; color: #A8CDD3 !important }
.vm-cta__text p { font-size: 15px !important; color: rgba(255,255,255,.68) !important; line-height: 1.7 !important; max-width: 500px !important }
.vm-cta__pts { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 7px !important; margin-top: 18px !important }
.vm-cta__pts li { font-size: 14px !important; color: rgba(255,255,255,.8) !important; display: flex !important; align-items: center !important; gap: 10px !important }
.vm-cta__pts li::before { content: '✓' !important; color: #A8CDD3 !important; font-weight: 700 !important; flex-shrink: 0 !important }
.vm-cta__btns { display: flex !important; flex-direction: column !important; gap: 12px !important; flex-shrink: 0 !important }

/* ── RESPONSIVE ──────────────────────────────────── */
@media(max-width:1100px){
  .vm-hero__inner { grid-template-columns: 1fr !important; gap: 36px !important; padding: 100px 40px 56px !important }
  .vm-form-card { max-width: 600px !important }
  .vm-sub__grid { grid-template-columns: 1fr 1fr !important }
  .vm-portfolio__grid { grid-template-columns: 1fr 1fr !important; grid-template-rows: auto !important }
  .vm-pcard:first-child { grid-row: span 1 !important }
  .vm-pcard { height: 240px !important }
  .vm-cta__inner { grid-template-columns: 1fr !important; gap: 32px !important }
  .vm-cta__btns { flex-direction: row !important; flex-wrap: wrap !important }
  .vm-why__grid { grid-template-columns: 1fr 1fr !important }
}
@media(max-width:900px){
  .vm-wrap, .vm-wrap--xl { padding: 0 24px !important }
  .vm-hero__inner { padding: 88px 24px 48px !important }
  .vm-hero__title { font-size: clamp(28px, 6vw, 44px) !important }
  .vm-hero__bc { left: 24px !important }
  .vm-promise__grid { grid-template-columns: 1fr !important }
  .vm-sub__grid { grid-template-columns: 1fr !important }
  .vm-process__grid { grid-template-columns: 1fr 1fr !important }
  .vm-portfolio__grid { grid-template-columns: 1fr 1fr !important }
  .vm-why__grid { grid-template-columns: 1fr !important }
  .vm-banner__c { padding: 0 28px !important; max-width: 100% !important }
  .vm-garanties__inner { flex-direction: column !important; align-items: flex-start !important }
  .vm-form__row { grid-template-columns: 1fr !important }
}
@media(max-width:600px){
  .vm-hero__inner { padding: 80px 20px 40px !important; gap: 24px !important }
  .vm-hero__title { font-size: clamp(26px, 8vw, 36px) !important }
  .vm-hero__sub { font-size: 14px !important }
  .vm-hero__btns { flex-direction: column !important }
  .vm-hero__btns .vm-btn { width: 100% !important; justify-content: center !important }
  .vm-form-card { padding: 22px 18px !important }
  .vm-portfolio__grid { grid-template-columns: 1fr !important }
  .vm-pcard { height: 200px !important }
  .vm-process__grid { grid-template-columns: 1fr !important }
  .vm-banner { height: 300px !important }
  .vm-banner__c { padding: 0 20px !important }
  .vm-cta__btns { flex-direction: column !important }
  .vm-garanties__logos { gap: 18px !important }
}
/* ═════════════════════════════
   PEPS + FIX GARANTIES + RESPONSIVE
   AJOUT À LA FIN DU CSS
═════════════════════════════ */

/* Radius harmonisé */
.vm-btn,
.vm-form__submit,
.vm-hero__tag,
.vm-sub-card__badge,
.vm-step__num{
  border-radius:5px !important;
}

.vm-form-card,
.vm-promise__item,
.vm-sub-card,
.vm-why__item,
.vm-step,
.vm-pcard,
.vm-glogo{
  border-radius:14px !important;
}

/* Shine boutons */
.vm-btn,
.vm-form__submit{
  position:relative !important;
  overflow:hidden !important;
}

.vm-btn::after,
.vm-form__submit::after{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  ) !important;
  transform:translateX(-120%) !important;
  transition:transform .55s ease !important;
  pointer-events:none !important;
}

.vm-btn:hover::after,
.vm-form__submit:hover::after{
  transform:translateX(120%) !important;
}

/* Demi-cercles */
.vm-form-card,
.vm-promise__item,
.vm-sub-card,
.vm-why__item,
.vm-step,
.vm-glogo{
  position:relative !important;
  overflow:hidden !important;
}

.vm-form-card::after,
.vm-promise__item::after,
.vm-sub-card::after,
.vm-why__item::after,
.vm-step::after,
.vm-glogo::after{
  content:'' !important;
  position:absolute !important;
  width:110px !important;
  height:110px !important;
  right:-52px !important;
  bottom:-56px !important;
  border-radius:50% !important;
  background:rgba(168,205,211,.20) !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* Contenu au dessus */
.vm-form-card > *,
.vm-promise__item > *,
.vm-sub-card > *,
.vm-why__item > *,
.vm-step > *,
.vm-glogo > *{
  position:relative !important;
  z-index:1 !important;
}

/* Ligne accent top */
.vm-form-card::before,
.vm-promise__item::before,
.vm-sub-card::before,
.vm-why__item::before,
.vm-step::before,
.vm-glogo::before{
  content:'' !important;
  position:absolute !important;
  top:0 !important;
  left:18px !important;
  right:18px !important;
  height:3px !important;
  background:linear-gradient(90deg,#115A65,#6AAAB4) !important;
  border-radius:0 0 10px 10px !important;
  z-index:2 !important;
}

/* Ombres premium */
.vm-form-card,
.vm-promise__item,
.vm-sub-card,
.vm-why__item,
.vm-step,
.vm-glogo{
  box-shadow:0 14px 36px rgba(17,90,101,.08) !important;
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease !important;
}

.vm-promise__item:hover,
.vm-sub-card:hover,
.vm-why__item:hover,
.vm-step:hover,
.vm-glogo:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 20px 48px rgba(17,90,101,.14) !important;
  border-color:#6AAAB4 !important;
}

/* Badges premium */
.vm-sub-card__badge,
.vm-hero__tag{
  background:#0B3C45 !important;
  color:#fff !important;
  border-left:4px solid #6AAAB4 !important;
}

/* Portfolio */
.vm-pcard{
  border-radius:14px !important;
  overflow:hidden !important;
}

/* Inputs */
.vm-form__input,
.vm-form__select,
.vm-form__textarea{
  border-radius:5px !important;
}

/* Garanties */
.vm-garanties__logos{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(120px,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}

.vm-glogo{
  min-height:138px !important;
  padding:18px 14px !important;
  overflow:hidden !important;
  justify-content:center !important;
  gap:12px !important;
  background:rgba(255,255,255,.96) !important;
  border:1px solid #D8E3E5 !important;
}

.vm-glogo img{
  width:78px !important;
  height:46px !important;
  max-width:100% !important;
  object-fit:contain !important;
  flex-shrink:0 !important;
}

.vm-glogo span{
  max-width:100% !important;
  font-size:9px !important;
  line-height:1.35 !important;
  letter-spacing:.9px !important;
  text-align:center !important;
  color:#0B3C45 !important;
}

.vm-glogo:nth-child(3) img,
.vm-glogo:nth-child(4) img{
  height:52px !important;
}

/* Responsive amélioré */
@media(max-width:1100px){

  .vm-garanties__inner{
    align-items:flex-start !important;
  }

  .vm-garanties__logos{
    width:100% !important;
    grid-template-columns:repeat(4,1fr) !important;
  }
}

@media(max-width:767px){

  .vm-form-card,
  .vm-promise__item,
  .vm-sub-card,
  .vm-why__item,
  .vm-step,
  .vm-pcard,
  .vm-glogo{
    border-radius:12px !important;
  }

  .vm-form-card::after,
  .vm-promise__item::after,
  .vm-sub-card::after,
  .vm-why__item::after,
  .vm-step::after,
  .vm-glogo::after{
    width:90px !important;
    height:90px !important;
    right:-42px !important;
    bottom:-46px !important;
  }

  .vm-garanties__logos{
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }

  .vm-glogo{
    min-height:130px !important;
  }
}

@media(max-width:420px){

  .vm-garanties__logos{
    grid-template-columns:1fr !important;
  }

  .vm-glogo{
    min-height:118px !important;
  }
}/* End custom CSS */