/* =========================================================
   MODERN OVERRIDES – CLEAN (sans doublons)
   ========================================================= */

/* =========================
   Design tokens
   ========================= */
:root{
  --brand:#2563eb;
  --brand2:#0ea5e9;
  --text:#0f172a;
  --muted:#475569;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:rgba(15,23,42,.10);
  --shadow:0 10px 30px rgba(2,6,23,.10);
  --radius:16px;

  --footer:#0b1220;

  /* Menu */
  --menu1:#1e3a8a;
  --menu2:#2563eb;

  /* Header top background (gris clair) */
  --headerTopBg:#f1f5f9;
}

/* =========================
   Base
   ========================= */
body{
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{ text-decoration:none; }
a:hover{ text-decoration:underline; }

h1,h2,h3,h4,h5{ letter-spacing:-.02em; }
h1,h2{ font-weight:900; }

.color{ color:var(--brand)!important; }
.color2{ color:#0f766e!important; }

/* =========================
   Header top (logo + infos) – fond gris clair
   ========================= */
.page-header.sticky,
.page-header .navbar{
  background:var(--headerTopBg)!important;
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.header-top{
  background:var(--headerTopBg)!important;
  padding-top:10px!important;
  padding-bottom:10px!important;
}

/* Infos header (adresse / estimation) */
.header-top-info,
.header-top-info i{
  color:#0f172a!important;
  font-weight:600!important;
  font-size:13px!important;
}
.header-top-info i{
  color:var(--brand)!important;
}

/* Téléphone header : sans fond, bleu */
.page-header .phone,
.page-header .phone *{
  background:transparent!important;
  box-shadow:none!important;
}
.page-header .phone .number,
.page-header .phone .number span{
  color:var(--brand)!important;
  font-weight:800;
  font-size:15px;
  padding:0!important;
}
.page-header .phone-wrapper .above-number{
  color:#0f172a!important;
  font-weight:700;
}
.page-header .phone a:hover{ text-decoration:underline; }

/* Mobile : on garde compact */
@media (max-width:767px){
  .header-top-info{ display:none; }
}

/* =========================
   Menu principal (Bootstrap 3) – pilule premium
   ========================= */
#slidemenu{
  background:transparent!important;
  margin:0!important;
  max-width:none!important;
  border-radius:0!important;
  overflow:visible!important;
  box-shadow:none!important;
}

#slidemenu > ul.nav.navbar-nav{
  float:none!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  flex-wrap:nowrap!important;

  background:linear-gradient(135deg,var(--menu1),var(--menu2))!important;
  border-radius:999px!important;
  box-shadow:0 12px 26px rgba(2,6,23,.18)!important;

  padding:8px 10px!important;
  margin:12px auto 0!important;
  max-width:1140px!important;
}

#slidemenu > ul.nav.navbar-nav > li{ float:none!important; }

#slidemenu > ul.nav.navbar-nav > li > a{
  color:#fff!important;
  font-weight:700!important;
  padding:10px 14px!important;
  border-radius:999px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
  text-decoration:none!important;

  font-size:13px!important;
  letter-spacing:.3px!important;
  text-transform:uppercase!important;
}

#slidemenu > ul.nav.navbar-nav > li > a:hover{
  background:rgba(255,255,255,.16)!important;
}
#slidemenu > ul.nav.navbar-nav > li.active > a,
#slidemenu > ul.nav.navbar-nav > li.active > a:hover{
  background:rgba(255,255,255,.22)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important;
}

@media (max-width: 991px){
  #slidemenu > ul.nav.navbar-nav{
    flex-wrap:wrap!important;
    justify-content:flex-start!important;
    max-width:calc(100% - 30px)!important;
    border-radius:18px!important;
  }
  #slidemenu > ul.nav.navbar-nav > li{ margin:2px 0!important; }
}

/* =========================
   Slider OFF
   ========================= */
#mainSliderWrapper,
#mainSlider{
  display:none!important;
}

/* =========================
   HERO fixe – image centrée largeur site + blancs côtés
   ========================= */
.hero-fixed{
  position:relative;
  width:100%;
  margin-top:12px;

  height:500px!important;
  min-height:500px!important;
  max-height:500px!important;

  /* blancs sur les côtés */
  background:#ffffff!important;

  display:flex;
  align-items:stretch;

  /* optionnel */
  filter:saturate(.95) contrast(.98);
}

/* Panneau image centré (largeur site) */
.hero-fixed::after{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  transform:translateX(-50%);

  width:min(1140px, calc(100% - 30px));
  background-image:url("../images/rachat-voiture.webp")!important;
  background-size:cover!important;            /* remplit sans “contain” */
  background-position:center center!important;
  background-repeat:no-repeat!important;

  z-index:1;
}

/* Overlay premium */
.hero-fixed .hero-overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,
      rgba(11,18,32,.82) 0%,
      rgba(11,18,32,.55) 42%,
      rgba(11,18,32,.25) 65%,
      rgba(11,18,32,.82) 100%
    ),
    linear-gradient(to top,
      rgba(11,18,32,.80),
      rgba(11,18,32,.12)
    )!important;
  z-index:2;
}

/* Contenu */
.hero-fixed .hero-content{
  position:relative;
  z-index:3;

  max-width:1140px;
  margin:0 auto;
  width:100%;
  height:100%;

  padding:0 15px 70px!important;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;

  color:#fff;
}

/* Carte glass derrière le texte */
.hero-fixed .hero-content::before{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:48px;
  top:auto;
  max-width:620px;

  border-radius:18px;
  background:rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  box-shadow:0 18px 40px rgba(2,6,23,.25);
  border:1px solid rgba(255,255,255,.14);
  z-index:1;
}

/* Texte au-dessus */
.hero-fixed .hero-content h1,
.hero-fixed .hero-content p,
.hero-fixed .hero-content a{
  position:relative;
  z-index:2;
}

/* Typo hero */
.hero-fixed .hero-content h1{
  margin:0 0 10px!important;
  font-weight:900!important;
  letter-spacing:-0.03em!important;
  line-height:1.05!important;
  max-width:22ch;

  font-size:44px!important;
  color:#fff!important;
  text-shadow:0 10px 30px rgba(0,0,0,.35)!important;
}

/* Lignes du hero */
.hero-fixed .hero-content p{
  margin:10px 0 0!important;
  color:rgba(255,255,255,.92)!important;
  text-shadow:0 1px 10px rgba(0,0,0,.40);
}

/* 1ère ligne (kicker) */
.hero-fixed .hero-content p:first-of-type{
  font-size:12px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.12em!important;
  opacity:.95!important;
}

/* Bouton CTA (couleur menu) */
.hero-fixed .hero-btn,
.hero-fixed a.hero-btn,
.hero-fixed .btn.hero-btn{
  margin-top:16px!important;
  display:inline-flex!important;
  align-items:center;
  justify-content:center;

  width:auto!important;
  padding:12px 22px!important;
  font-size:14px!important;

  border-radius:999px!important;
  white-space:nowrap!important;

  text-transform:uppercase!important;
  letter-spacing:.08em!important;

  background:linear-gradient(135deg,var(--menu1),var(--menu2))!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:0 12px 26px rgba(2,6,23,.22)!important;
  transition:transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.hero-fixed .hero-btn:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* Supprime tous “traits” éventuels dans le hero */
.hero-fixed hr,
.hero-fixed .separator,
.hero-fixed .divider,
.hero-fixed .line{
  display:none!important;
}

/* Mobile */
@media (max-width: 767px){
  .hero-fixed{
    height:560px!important;
    min-height:560px!important;
    max-height:560px!important;
  }
  .hero-fixed .hero-content{
    padding-bottom:90px!important;
  }
  .hero-fixed .hero-content::before{
    bottom:70px;
    max-width:none;
    left:12px;
    right:12px;
  }
  .hero-fixed .hero-content h1{
    font-size:30px!important;
  }
}

/* =========================
   Titres sections (harmonisation H2/H3)
   ========================= */
.block h2,
.block h3{
  color:var(--text);
  font-weight:900;
  letter-spacing:-0.02em;
}
.block h1,
.block h2{
  line-height:1.15;
}
@media (min-width:992px){
  .block h1{ font-size:36px!important; }
}
@media (max-width:991px){
  .block h1{ font-size:28px!important; }
}

/* =========================
   UI global (cards, sections)
   ========================= */
.btn{
  border-radius:14px!important;
  font-weight:800!important;
  padding:12px 16px!important;
  border:1px solid rgba(15,23,42,.12)!important;
}
.btn:not(.btn-invert){
  background:linear-gradient(135deg,rgba(37,99,235,.95),rgba(14,165,233,.85))!important;
  border-color:rgba(37,99,235,.35)!important;
  color:#fff!important;
}
.btn.btn-invert{
  background:#fff!important;
  border-color:rgba(37,99,235,.35)!important;
  color:var(--brand)!important;
}

.block{ padding-top:48px!important; padding-bottom:48px!important; }
@media (max-width:767px){
  .block{ padding-top:34px!important; padding-bottom:34px!important; }
}

.text-icon,
.text-icon-squared,
.testimonials-item .inside,
.category-block{
  background:var(--card)!important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.testimonials-item .inside{ padding:18px!important; }
.rating .icon-star{ color:#f59e0b!important; }
.category-block img,
img.redim_img{ border-radius:14px; }

/* =========================
   Footer
   ========================= */
.page-footer{
  background:var(--footer)!important;
  color:rgba(255,255,255,.85)!important;
}
.page-footer a{ color:rgba(255,255,255,.92)!important; }
.footer-content{ border-top:1px solid rgba(255,255,255,.10); }

/* =========================================================
   SWITCH OPTIONNEL : masquer le hero (si besoin)
   Décommentez pour tester sans image/zone hero
   ========================================================= */
/*
.hero-fixed{ display:none!important; }
*/
/* =========================================================
   POURQUOI NOUS CHOISIR – cartes uniformes
   ========================================================= */

/* Conteneur des cartes */
.why-us .category-block,
.why-us .text-icon,
.why-us .text-icon-squared{
  height: 260px !important;          /* hauteur fixe identique */
  max-height: 260px !important;
  min-height: 260px !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  padding: 28px 20px !important;
}

/* Cercle/icône en haut : même taille partout */
.why-us .icon,
.why-us .icon-circle,
.why-us .text-icon i,
.why-us .category-block .icon{
  width: 80px !important;
  height: 80px !important;
  min-width: 80px !important;
  min-height: 80px !important;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50% !important;
  margin-bottom: 18px !important;
}

/* Titre de carte */
.why-us h3,
.why-us h4{
  font-size: 18px !important;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
}

/* Texte de carte */
.why-us p{
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  color: #475569;
  margin: 0;
}