@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');	  
	  
    :root{
      --brand-red:#c51718;
      --text-dark:#1f2937;
    }
	  
 body{font-family: "Poppins", sans-serif;}
a{text-decoration: none;}
.bg-red {background-color: var(--brand-red);color: #fff;}
.text-red {color: var(--brand-red);}
.btn-cta-white {background: #fff;color: var(--brand-red);font-weight: 800;border-radius: 999px;padding: .85rem 2rem;border: 0;display: inline-block;text-decoration: none;transition: filter .2s ease;}
.btn-cta-white:hover {filter: brightness(.96);color: var(--brand-red);}

    /* Top mini bar */
    .topbar{
      font-size: .85rem;
      background:#f6f7f9;
      border-bottom:1px solid rgba(0,0,0,.06);
    }

    /* Navbar */
    .brand-logo{
	  height:50px;
      display:grid;place-items:center;
      color:#fff;font-weight:800;
      flex:0 0 auto;
    }
    .navbar .nav-link{
      font-weight:600;
      color:#111827;
    }
    .navbar .nav-link:hover{ color:var(--brand-red); }

    /* Hero/Slider */
    .hero{
      position:relative;
      min-height:60vh;
      /*background: url('../img/hero.jpg') no-repeat center center / cover; /* fallback si vidéo indisponible */
	  background: linear-gradient(135deg,#1a1a2e 0%,#2d1b1b 100%);	
      color:#fff;
      display:flex;
      align-items:center;
      overflow:hidden;
    }
    .hero-video{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      z-index:0;
    }
    .hero-overlay{
      position:absolute;
      inset:0;
      background:rgba(0,0,0,0.3);
      z-index:1;
    }
    .hero-content{
      position:relative;
      z-index:2;
    }
    .hero h1{
      font-weight:800;
      letter-spacing:-0.02em;
      line-height:1.0;
    }
    .hero .sub{
      font-weight:700;
      opacity:.95;
    }
    .rating-pill{
      display:inline-flex;
      gap:.5rem;
      align-items:center;
      padding:.35rem .6rem;
      border-radius:999px;
      background:rgba(0,0,0,.55);
      border:1px solid rgba(255,255,255,.15);
      backdrop-filter: blur(6px);
      font-size:.9rem;
      white-space:nowrap;
    }
	/* Hero intérieur — version réduite (38vh) sans vidéo pour toutes les pages hors home */
	.hero-inner{
	  position:relative;
	  min-height:38vh;
	  /*background:url('../img/hero.jpg') no-repeat center center / cover;*/
	  background: linear-gradient(135deg,#1a1a2e 0%,#2d1b1b 100%);	
	  color:#fff;
	  display:flex;
	  align-items:center;
	  overflow:hidden;
	}
	.hero-inner h1{
	  font-size:clamp(28px,3.5vw,54px);
	  font-weight:900;
	  letter-spacing:-.03em;
	}
	.hero-inner .hero-overlay{
	  background:rgba(0,0,0,.55);
	}

    /* Form bar */
    .quote-bar{
      background:#fff;
      border-radius:999px;
      padding:.4rem;
      box-shadow:0 18px 50px rgba(0,0,0,.25);
      color:var(--text-dark);
      overflow:hidden;
    }
    .quote-item{
      display:flex;
      align-items:center;
      gap:.55rem;
      padding:.65rem .85rem;
      border-right:1px solid rgba(0,0,0,.08);
      min-height:56px;
    }
    .quote-item:last-of-type{ border-right:0; }
    .quote-label{
      font-size:.78rem;
      color:#6b7280;
      line-height:1.1;
      margin:0;
    }
    .quote-value{
      font-weight:700;
      margin:0;
      line-height:1.2;
      max-width: 210px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
	.input-transparent {
		background: transparent;
		border: none;
		border-bottom: 2px solid rgba(255,255,255,0.6); /* ou #000 selon fond */
		color: #000; /* texte */
		outline: none;
		width: 100%;
		font-weight:500;
		padding: 0;
		text-overflow:ellipsis;
	}

	.input-transparent::placeholder {
		color: rgba(0,0,0,0.25);
		font-weight:400;
		font-style: italic;
	}

	.input-transparent:focus {
		border-bottom-color: #ffffff;
	}

    .quote-btn{
      border-radius:999px;
      padding:.85rem 1.2rem;
      font-weight:800;
      background:var(--brand-red);
      border:0;
    }
    .quote-btn:hover{ filter:brightness(.95); }

    /* Responsive adjustments */
    @media (max-width: 991.98px){
      .hero{ min-height:78vh; }
      .quote-bar{
        border-radius:24px;
        padding:.6rem;
      }
      .quote-item{
        border-right:0;
        border-bottom:1px solid rgba(0,0,0,.08);
        border-radius:14px;
      }
      .quote-item:last-of-type{ border-bottom:0; }
      .quote-btn{ width:100%; }
    }

/* =====================================================
  AUTOCOMPLETE ADRESSE
===================================================== */
.ac-wrap { position:relative; }
.ac-list {
  position:fixed; /* échappe aux overflow:hidden parents */
  background:#fff; border:1px solid #e5e7eb; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.13);
  z-index:9999; max-height:280px; overflow-y:auto;
  display:none;
}
.ac-list.open { display:block; }
.ac-item {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.65rem .9rem; cursor:pointer; border-bottom:1px solid #f3f4f6;
  font-size:.88rem; color:#1f2937; transition:background .1s;
}
.ac-item:last-child { border-bottom:0; }
.ac-item:hover, .ac-item.ac-active { background:#fef2f2; }
.ac-item i { color:var(--brand-red); flex-shrink:0; margin-top:.1rem; }
.ac-item-main { font-weight:600; line-height:1.3; }
.ac-item-sub { font-size:.78rem; color:#9ca3af; }
.ac-spinner {
  display:none; position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  width:16px; height:16px; border:2px solid rgba(197,23,24,.3);
  border-top-color:var(--brand-red); border-radius:50%;
  animation:ac-spin .6s linear infinite;
}
@keyframes ac-spin { to { transform:translateY(-50%) rotate(360deg); } }
.ac-wrap.loading .ac-spinner { display:block; }


/* ===== Bloc CSS #2 (extrait de l'ancien <style>) ===== */
:root{
    --m-bg:#ffffff;
    --m-line:rgba(0,0,0,.08);
    --m-text:#111827;
    --m-muted:#6b7280;
    --m-radius:14px;
  }

  /* ✅ Mobile navbar style (comme screenshots) */
  .m-nav{
    background: var(--m-bg);
    border-bottom:1px solid var(--m-line);
    padding: .85rem 0;
  }
  .m-nav .m-btn{
    border:0;
    background:transparent;
    padding:.25rem .35rem;
    color:var(--m-text);
  }
  .m-nav .m-btn i{ font-size: 1.65rem; }
  .m-nav .m-logo{
    height:34px;
    width:auto;
    display:block;
  }
  .m-nav .m-icons{
    display:flex;
    align-items:center;
    gap:.65rem;
  }

  /* ✅ Offcanvas full screen */
  .offcanvas.offcanvas-start.m-oc{
    width: 100vw;
    border-right:0;
  }
  .m-oc .offcanvas-header{
    padding: 16px 16px;
    border-bottom:1px solid var(--m-line);
    gap:12px;
  }
  .m-oc .m-back{
    border:0;
    background:transparent;
    padding:0;
    color:var(--m-text);
    font-weight:600;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .m-oc .m-back i{ font-size: 1.25rem; }
  .m-oc .btn-close{
    margin-left:auto;
    opacity:1;
  }

  /* Panels (root + submenus) */
  .m-panels{
    position:relative;
    height: calc(100vh - 66px);
    overflow:hidden;
  }
  .m-panel{
    position:absolute;
    inset:0;
    background:#fff;
    overflow:auto;
    transform: translateX(0);
    transition: transform .22s ease;
  }
  .m-panel.is-next{ transform: translateX(100%); }
  .m-panel.is-prev{ transform: translateX(-30%); opacity:.35; pointer-events:none; }

  /* Menu list style */
  .m-list{
    list-style:none;
    padding:0;
    margin:0;
  }
  .m-item{
    display:flex;
    align-items:center;
    gap:12px;
    padding: 16px 18px;
    border-bottom:1px solid var(--m-line);
    color:var(--m-text);
    text-decoration:none;
    font-size: 18px;
    font-weight:500;
  }
  .m-item:hover{ background:#fafafa; }
  .m-item .m-ico{
    width:26px;
    display:grid;
    place-items:center;
    color:var(--m-text);
    opacity:.9;
  }
  .m-item .m-ico i{ font-size: 1.25rem; }
  .m-item .m-label{ flex:1 1 auto; }
  .m-item .m-chevron{
    color: #111827;
    opacity:.55;
    font-size: 1.2rem;
  }

  /* Dropdowns at bottom (like screenshot) */
  .m-tools{
    padding: 18px;
    display:grid;
    gap:12px;
  }
  .m-select{
    border:1px solid rgba(0,0,0,.15);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 15px;
    color:var(--m-text);
    background:#fff;
  }
  .m-locale{
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(0,0,0,.15);
    border-radius: 12px;
    padding: 12px 14px;
    font-weight:600;
    color:var(--m-text);
    background:#fff;
    width: fit-content;
  }

  /* Hide desktop navbar on mobile (optionnel) */
  @media (max-width: 991.98px){
    .navbar.navbar-expand-lg{ display:none; }
  }
  @media (min-width: 992px){
    .m-nav{ display:none; }
  }

/* ===== Bloc CSS #3 (extrait de l'ancien <style>) ===== */
/* Carte cliquable */
.service-card{
  position:relative;
  display:block;
  min-height:170px;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  color:#1c1c1c;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* Hover */
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}

/* Image à droite (comme ton screenshot) */
.service-card{
  background-repeat:no-repeat;
  background-position:right center;
  background-size: auto 100%;
}

/* Dégradé pour lisibilité à gauche */
.service-overlady{
  position:absolute; inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,.75) 0%,
    rgba(255,255,255,.65) 55%,
    rgba(255,255,255,0) 100%);
}

/* Contenu texte à gauche */
.service-content{
  position:relative;
  z-index:2;
  max-width:75%;
  padding:40px 20px;
}

/* Typo */
.service-content h3{
  margin:0 0 10px 0;
  font-size:18px;
  line-height:1.25;
  font-weight:700;
}

.service-content p{
  margin:0 0 14px 0;
  opacity:.85;
  font-size:14px;	
}

/* Bouton style “pill” */
.btn-service{
  border-radius:12px;
  padding:10px 14px;
  font-weight:400;
  font-size:14px;
  display:inline-block;
}
.link-service{
	color: var(--brand-red);
	font-weight: 600;
	font-size: 18px;
}

/* Hauteur un peu plus grande sur desktop */
@media (min-width:992px){
  .service-card{ min-height:185px; }
}

/* Sur mobile on agrandit le texte + laisse plus de place */
@media (max-width:575.98px){
  .service-content{ max-width:78%; }
  .service-content h3{ font-size:17px; }
}

/* Fonds proches de ton rendu */
.bg-beige{ background-color:#ead9c9; }
.bg-sage{  background-color:#c6c2b4; }
.bg-khaki{ background-color:#cfcabf; }
.bg-brown{ background-color:#b09a86; }
.bg-steel{ background-color:#8da1ab; }
.bg-ice{background-color:#d8e1e8; }

/* ✅ Remplace ces URLs par tes images */
.service-img-1{ background-image:url("../img/services/hero-particuliers.png"); }
.service-img-2{ background-image:url("../img/services/hero-pro.png"); }
.service-img-3{ background-image:url("../img/services/hero-militaire.png"); }
.service-img-4{ background-image:url("../img/services/hero-garde-meubles.png"); }
.service-img-5{ background-image:url("../img/services/hero-monte-meubles.png"); }
.service-img-6{ background-image:url("../img/services/hero-self-stockage.png"); }




/* ===== Bloc CSS #4 (extrait de l'ancien <style>) ===== */
/* Section background (gris clair) */
.pricing-section{
  background:#efefef;
}

/* Title */
.pricing-title{
  font-weight:800;
  letter-spacing:-.5px;
  font-size:clamp(28px, 3.2vw, 52px);
  color:#1f2430;
}

/* Cards */
.pricing-card{
  background:#fff;
  border:1px solid rgba(0,0,0,.10);
  border-radius:22px;
  padding:26px 26px 22px;
  display:flex;
  flex-direction:column;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.pricing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.pricing-featured{
  border:2px solid var(--brand-red);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.pricing-head{
  margin-bottom:4px;
}

.pricing-kicker{
  font-size:22px;
  color:#202633;
  line-height:1.1;
  margin-bottom: 14px;	
}

.pricing-name{
  font-weight:900;
  font-size:40px;
  letter-spacing:-.5px;
  line-height:1.05;
  margin-top:2px;
  text-transform:uppercase;
}

.pricing-badge{
  display:inline-block;
  margin-top:10px;
  padding:4px 10px;
  font-size:12px;
  border:1px solid rgba(197,23,24,.6);
  color:var(--brand-red);
  border-radius:999px;
  background:rgba(197,23,24,.06);
}

.pricing-price{
  margin:8px 0 14px;
  font-size:20px;
  color:#1f2430;
}

.pricing-list{
  margin:0 0 18px;
  padding-left:18px;
  color:#2b313d;
  font-size:15px;
  list-style: none;
}

.pricing-list li{
  margin:8px 0;
}

/* Buttons tweak */
.pricing-btn{
  font-weight:700;
  border-width:2px;
}

/* Note */
.pricing-note{
  font-size:13px;
  color:#1f2430;
  opacity:.85;
}

/* Big CTA */
.pricing-cta{
  letter-spacing:.3px;
 font-size: 14px;	
}

/* Subtitle */
.pricing-subtitle{
  font-weight:800;
  color:#1f2430;
}

/* Tags */
.pricing-tag{
  display:inline-flex;
  align-items:center;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.18);
  background:#fff;
  color:#1f2430;
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  transition: transform .15s ease, box-shadow .15s ease;
}

.pricing-tag:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}

/*Div CTA Formules*/
.divcta-a {
  text-decoration: none;
  padding: 0 9%;
  display: block;
  max-width: 1280px;
  margin: auto;
}	
.divcta {
  padding: 2.5rem;
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  margin-top: 3em;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  transition: transform .2s ease, box-shadow .2s ease;	
  background: var(--brand-red);
  color: #fff;
}	
.divcta p.title {
  font-size: 28px;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 600;	
}
.divcta p.desc {
  opacity: .8;
  margin-top: 10px;
  margin-bottom: 1.3em;
}	
p.learn-more {
  margin: 0;
}	
.divcta img {
  position: absolute;
  transform: rotate(-7deg);
  transition: all .3s;
}	
.divcta.img-as-jpg img {
  position: absolute;
  width: min(20%, 200px);
  height: auto;
  right: 2%;
  top: 10%;
  border-radius: 10px;	
}
.divcta:hover {	
 transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
.divcta:hover img {
  transform: scale(1.1) rotate(-7deg);
}
.divcta.img-as-jpg:hover img {
  top: 8%;
  right: 4%;
}	
.divcta:hover p.learn-more {
  text-decoration: underline;
}	
/* ===== Bloc CSS #5 (extrait de l'ancien <style>) ===== */
/* Base */
.shop-banners{
  background:#d5d5d5;
}

/* Carte cliquable */
.banner-card{
  display:block;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

.banner-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* BIG */
.banner-card--big{
  background:#1f2330;              /* dark bleu/noir */
  color:#fff;
  min-height:260px;
}

.banner-inner{
  height:100%;
  display:flex;
  align-items:stretch;
}

.banner-text{
  flex: 0 0 52%;
  padding:28px 28px 24px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.banner-top{
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:600;
  opacity:.92;
  font-size:14px;
}

.banner-title{
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.5px;
  font-size:26px;
  line-height:1.05;
}

.banner-link{
  margin-top:10px;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.6px;
  color:var(--brand-red);
  font-size: 14px;
}

/* Image à droite */
.banner-media{
  flex: 1 1 auto;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  padding:10px 14px 0 0;
}

.banner-media img{
  max-height:220px;
  width:auto;
  object-fit:contain;
}

/* SMALL */
.banner-card--small{
  background:#fff;
  color:#1b1f2a;
  min-height:260px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.banner-small-top{
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:.6px;
  font-size:14px;
  line-height:1.25;
  opacity:.92;
}

.banner-small-title{
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.6px;
  font-size:26px;
  line-height:1.05;
}

.banner-small-link{
  margin-top:10px;
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.6px;
  color:var(--brand-red);
  font-size: 14px;
}

/* Responsive : empile l'image sous le texte sur petits écrans */
@media (max-width: 767.98px){
  .banner-card--big{ min-height: unset; }
  .banner-inner{ flex-direction:column; }
  .banner-text{ flex: 0 0 auto; }
  .banner-media{
    justify-content:center;
    padding:0 0 16px 0;
  }
  .banner-media img{ max-height:170px; }
  .banner-title, .banner-small-title{ font-size:30px; }
}

/* ===== Bloc CSS #6 (extrait de l'ancien <style>) ===== */
/* Section */
.about-rennes{
  background:#fff;
}

/* Titles */
.about-title{
  font-weight:900;
  letter-spacing:-.6px;
  font-size:clamp(28px, 3.2vw, 54px);
  color:#1f2430;
}

.about-subtitle{
  font-size:clamp(16px, 1.2vw, 22px);
  color:#2a2f3a;
  opacity:.9;
}

/* Photo */
.about-photo{
  border-radius:22px;
  overflow:hidden;
  box-shadow: 0 16px 35px rgba(0,0,0,.10);
}

.about-photo img{
  width:100%;
  height:auto;
  display:block;
}

/* Text */
.content-page h2{
  font-weight:900;
  letter-spacing:-.4px;
  font-size:clamp(22px, 2vw, 34px);
  color:#1f2430;
  margin-bottom:16px;
}

.content-page h3{
  font-weight: 700;
  letter-spacing: -.4px;
  font-size: clamp(17px,2vw,24px);
  color: #1f2430;
  margin-bottom: 16px;
}

.content-page p{
  font-size:18px;
  line-height:1.55;
  color:#1f2430;
  opacity:.92;
  margin-bottom:16px;
}

.content-page picture {
    display: block;
    width: 100%;
	padding: 8%;
}

.content-page picture img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
	border-radius: 10px;
}
/* Bottom bar */
.about-bar{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  box-shadow: 0 16px 40px rgba(0,0,0,.08);
  padding:18px 18px;
  display:flex;
  align-items:center;
  gap:18px;
}

/* Left icon */
.about-bar-icon{
  width:120px;
  min-width:120px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#111827;
}

.about-360{
  font-weight:900;
  color:var(--brand-red);
  margin-bottom:6px;
  font-size:18px;
}

/* Middle text */
.about-bar-text{
  flex:1 1 auto;
  padding:0 10px;
}

.about-bar-title{
  font-weight:900;
  font-size:22px;
  color:#1f2430;
  line-height:1.15;
  margin-bottom:6px;
}

.about-bar-desc{
  color:#1f2430;
  opacity:.86;
  font-size:14px;
  line-height:1.4;
  max-width:560px;
}

/* Right blocks */
.about-bar-links{
  display:flex;
  align-items:stretch;
  gap:0;
  border-left:2px dotted rgba(0,0,0,.18);
  padding-left:18px;
}

.about-mini{
  width:190px;
  padding:0 18px;
  text-align:center;
  position:relative;
}

.about-mini + .about-mini{
  border-left:2px dotted rgba(0,0,0,.18);
}

.about-mini-title{
  font-weight:900;
  font-size:18px;
}

.about-mini-sub{
  margin-top:2px;
  font-size:13px;
  color:#1f2430;
  opacity:.85;
}

.about-mini-cta{
  margin-top:8px;
  font-weight:900;
  letter-spacing:.6px;
  color:var(--brand-red);
  font-size:12px;
}

/* Responsive */
@media (max-width: 991.98px){
  .about-bar{
    flex-direction:column;
    align-items:flex-start;
  }

  .about-bar-icon{
    width:auto;
    min-width:unset;
    flex-direction:row;
    gap:12px;
  }

  .about-bar-text{
    padding:0;
  }

  .about-bar-links{
    width:100%;
    border-left:0;
    padding-left:0;
    border-top:2px dotted rgba(0,0,0,.18);
    padding-top:14px;
    justify-content:space-between;
  }

  .about-mini{
    width:50%;
    padding:0 10px;
  }

  .about-mini + .about-mini{
    border-left:2px dotted rgba(0,0,0,.18);
  }
}

@media (max-width: 575.98px){
  .about-p{ font-size:16px; }
  .about-bar-title{ font-size:18px; }
  .about-mini{ width:100%; padding:10px 0; }
  .about-bar-links{
    flex-direction:column;
    gap:10px;
  }
  .about-mini + .about-mini{
    border-left:0;
    border-top:2px dotted rgba(0,0,0,.18);
    padding-top:12px;
  }
}

/* ===== Bloc CSS #7 (extrait de l'ancien <style>) ===== */
:root{
    --bd-dark:#1f2430;
    --bd-bg:#f1f1f1;
    --bd-card:#ffffff;
    --bd-muted:#6b7280;
  }

  .bd-steps{
    background: var(--bd-bg);
    padding: 70px 0 60px;
  }

  .bd-title{
    font-weight: 900;
    letter-spacing: -0.8px;
    color: var(--bd-dark);
    font-size: clamp(32px, 3.2vw, 56px);
    margin-bottom: 10px;
    text-align:center;
  }
  .bd-title .accent{ color: var(--brand-red); }

  .bd-subtitle{
    text-align:center;
    color: var(--bd-muted);
    font-size: clamp(15px, 1.1vw, 20px);
    margin-bottom: 40px;
  }

  /* Step cards */
  .bd-step-card{
    position: relative;
    background: var(--bd-card);
    border-radius: 16px;
    padding: 34px 24px 22px;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 14px 30px rgba(0,0,0,.06);
    height: 100%;
    transition: transform .18s ease, box-shadow .18s ease;
  }
  .bd-step-card:hover{
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(0,0,0,.10);
  }

  /* Number bubble */
  .bd-step-number{
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 78px;
    border-radius: 999px;
    background: var(--brand-red);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-weight: 900;
    font-size: 34px;
    box-shadow: 0 14px 30px rgba(197,23,24,.30);
  }

  .bd-step-h3{
    margin-top: 22px;
    font-weight: 900;
    color: #111827;
    font-size: 20px;
    line-height: 1.15;
    text-align:left;
  }

  .bd-step-p{
    color: var(--text-dark);
    opacity: .88;
    line-height: 1.55;
    font-size: 15px;
    margin: 12px 0 14px;
  }

  .bd-step-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight: 900;
    color: var(--brand-red);
    text-decoration:none;
    letter-spacing:.2px;
  }
  .bd-step-link:hover{ text-decoration: underline; }
  .bd-step-link .arrow{
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border: 2px solid rgba(197,23,24,.35);
  }

  /* Why */
  .bd-why-title{
    margin-top: 48px;
    font-weight: 900;
    color: var(--bd-dark);
    text-align:center;
    font-size: clamp(22px, 2vw, 34px);
    letter-spacing: -0.4px;
  }
  .bd-why-title .accent{ color: var(--brand-red); }

  .bd-benefit{
    display:flex;
    gap:14px;
    padding: 16px 14px;
    border-radius: 14px;
    transition: background .15s ease, transform .15s ease;
  }
  .bd-benefit:hover{
    background: rgba(255,255,255,.55);
    transform: translateY(-1px);
  }
  .bd-ico{
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(197,23,24,.10);
    color: var(--brand-red);
    font-size: 20px;
    flex: 0 0 42px;
  }
  .bd-benefit h4{
    font-weight: 900;
    color: var(--bd-dark);
    margin: 0;
    font-size: 16px;
  }
  .bd-benefit p{
    margin: 6px 0 0;
    color: var(--text-dark);
    font-size: 14px;
    line-height: 1.45;
  }

  /* Small helper spacing on mobile */
  @media (max-width: 575.98px){
    .bd-step-card{ padding: 34px 18px 20px; }
    .bd-step-h3{ font-size: 19px; }
  }

/* ===== Bloc CSS #8 (extrait de l'ancien <style>) ===== */
  .bd-tips{
    background: var(--bd-bg);
    padding: 70px 0 55px;
  }

  .bd-tips-title{
    font-weight: 900;
    letter-spacing: -0.8px;
    color: var(--bd-dark);
    font-size: clamp(32px, 3.4vw, 58px);
    margin-bottom: 28px;
  }
  .bd-tips-title .accent{ color: var(--brand-red); }

  /* Article cards */
  .bd-article{
    text-decoration: none;
    color: inherit;
    display:block;
    height: 100%;
  }

  .bd-article .bd-img{
    border-radius: 18px;
    overflow:hidden;
    box-shadow: 0 18px 40px rgba(0,0,0,.10);
    background:#fff;
    aspect-ratio: 16/9;
  }

  .bd-article img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transform: scale(1.02);
    transition: transform .22s ease;
  }

  .bd-article:hover img{ transform: scale(1.07); }

  .bd-article h3{
    font-weight: 900;
    color: var(--bd-dark);
    letter-spacing: -0.3px;
    font-size: 22px;
    line-height: 1.18;
    margin: 18px 0 10px;
  }

  .bd-read{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight: 900;
    letter-spacing: .4px;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--bd-dark);
  }
  .bd-read .dot{
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(197,23,24,.12);
    color: var(--brand-red);
    border: 1px solid rgba(197,23,24,.25);
    font-size: 14px;
    transition: transform .18s ease;
  }
  .bd-article:hover .bd-read .dot{
    transform: translateX(2px);
  }

  /* Divider */
  .bd-divider{
    margin: 34px 0 42px;
    border-top: 1px solid rgba(0,0,0,.08);
  }

  /* Zone title */
  .bd-zone-title{
    text-align:center;
    font-weight: 900;
    color: var(--bd-dark);
    letter-spacing: -0.4px;
    font-size: clamp(22px, 2vw, 34px);
    margin-bottom: 8px;
  }
  .bd-zone-title .accent{ color: var(--brand-red); }

  .bd-zone-sub{
    text-align:center;
    color: var(--text-dark);
    font-size: 14px;
    margin-bottom: 22px;
  }

  /* City lists */
  .bd-city-list{
    margin:0;
    padding-left: 0px;
    color: var(--bd-dark);
    font-weight: 600;
    font-size: 13px;
	  list-style: none;
  }
  .bd-city-list li{
    margin: 6px 0;
  }
  .bd-city-list a{
    text-decoration: none;
	color: var(--brand-red);
	transition: color .15s ease, transform .15s ease, opacity .15s ease;  
	opacity: 0.85;
	display: block;
  }
	.bd-city-list a:hover {
	  transform: translateX(2px);
	  opacity: 1;
	}

  /* Small spacing on mobile */
  @media (max-width: 575.98px){
    .bd-article h3{ font-size: 20px; }
  }

/* Fil d'Ariane — bande grise sous le header, fond identique à .topbar */
.bd-breadcrumb{
  background:#f6f7f9;
  border-bottom:1px solid rgba(0,0,0,.06);
  padding:.6rem 0;
}
.bd-breadcrumb .breadcrumb{
  margin:0;
  font-size:.85rem;
}
.bd-breadcrumb .breadcrumb-item a{
  color:var(--brand-red);
  text-decoration:none;
}
.bd-breadcrumb .breadcrumb-item.active{
  color:#6b7280;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;	
  max-width: 350px;	
}
/*Page*/
.hero-city {min-height: 45vh;background: linear-gradient(135deg,#1a1a2e 0%,#2d1b1b 100%);}
/*Blog*/
.blog-header { background-color: #f8f9fa; border-bottom: 1px solid #eee; }
.postBlog-content{font-size:1.05rem;line-height:1.75;color:#374151;}
.postBlog-content h2{font-weight:800;color:#1f2430;margin-top:2rem;margin-bottom:1rem;font-size:1.6rem;}
.postBlog-content h3{font-weight:700;color:#1f2430;margin-top:1.5rem;margin-bottom:.75rem;font-size:1.2rem;}
.postBlog-content ul{padding-left:1.5rem;line-height:2;}
.postBlog-content a{color:var(--brand-red);font-weight:700;}

/* ── Typographie article ── */
.postBlog-content { font-size:1.05rem; line-height:1.8; color:#374151; }
.postBlog-content h1 { font-size:clamp(26px,3.5vw,42px); font-weight:900; letter-spacing:-.02em; line-height:1.1; color:#111827; }
.postBlog-content h2 { font-size:1.65rem; font-weight:800; color:#111827; margin-top:2.5rem; margin-bottom:1rem; padding-bottom:.4rem; border-bottom:2px solid #f3f4f6; }
.postBlog-content h3 { font-size:1.25rem; font-weight:700; color:#1f2937; margin-top:1.75rem; margin-bottom:.6rem; }
.postBlog-content h4 { font-size:1.05rem; font-weight:700; color:#374151; margin-top:1.4rem; margin-bottom:.5rem; }
.postBlog-content h5 { font-size:.95rem; font-weight:700; color:#6b7280; text-transform:uppercase; letter-spacing:.05em; margin-top:1.2rem; margin-bottom:.4rem; }
.postBlog-content h6 { font-size:.85rem; font-weight:600; color:#9ca3af; text-transform:uppercase; letter-spacing:.08em; margin-top:1rem; margin-bottom:.4rem; }

/* Tableau */
.postBlog-content table { width:100%; border-collapse:collapse; margin-bottom:1.5rem; font-size:.95rem; }
.postBlog-content thead th { background:var(--brand-red); color:#fff; padding:.65rem 1rem; text-align:left; font-weight:700; }
.postBlog-content tbody tr:nth-child(even) { background:#f9fafb; }
.postBlog-content tbody td { padding:.6rem 1rem; border-bottom:1px solid #e5e7eb; vertical-align:top; }
.postBlog-content tfoot td { padding:.6rem 1rem; font-weight:700; background:#f3f4f6; border-top:2px solid #d1d5db; }

.cta-blogPost{background:var(--brand-red);color:#fff;border-radius:18px;padding:2rem;margin-top:2.5rem;text-align:center;}
.cta-blogPost h3{font-weight:900;font-size:1.5rem;margin-bottom:.75rem;}
.cta-blogPost p{opacity:.92;margin-bottom:1.2rem;}

/* Sidebar blog — colonne latérale sur les pages blog */
.blog-sidebar-card{
  background:#f6f7f9;
  border-radius:16px;
  padding:1.4rem;
  margin-bottom:1.4rem;
}
.blog-sidebar-card h5{
  font-weight:800;
  font-size:1rem;
  color:var(--bd-dark);
  margin-bottom:.8rem;
}
.blog-sidebar-link{
  display:block;
  font-size:.9rem;
  color:#374151;
  text-decoration:none;
  padding:.4rem 0;
  border-bottom:1px solid rgba(0,0,0,.06);
  transition:color .15s ease;
}
.blog-sidebar-link:hover{ color:var(--brand-red); }
.bsc-cta{background:var(--brand-red);color:#fff;border-radius:16px;padding:1.4rem;}
.bsc-cta h5{color:#fff;}
.bsc-cta p{opacity:.9;font-size:.9rem;margin-bottom:0;}
.sticky-col {position: sticky;top: 18px;}
/* ===== Bloc CSS #9 (extrait de l'ancien <style>) ===== */
:root{
    --bd-footer:#1f2330;
    --bd-white:#ffffff;
    --bd-muted:rgba(255,255,255,.78);
    --bd-muted2:rgba(255,255,255,.62);
    --bd-line:rgba(255,255,255,.18);
    --bd-hover:#ffffff;
  }

  .bd-footer{
    background: var(--bd-footer);
    color: var(--bd-white);
    padding: 64px 0 26px;
  }

  .bd-footer h5{
    font-weight: 900;
    letter-spacing: -0.3px;
    font-size: 34px;
    margin: 0 0 12px;
  }

  .bd-footer .bd-col-title{
    font-weight: 400;
    font-size: 26px;
    letter-spacing: -0.6px;
    margin: 0 0 12px;
  }

  .bd-footer a{
    color: var(--bd-muted);
    text-decoration: none;
    display: inline-block;
    padding: 6px 0;
    transition: color .15s ease, transform .15s ease, opacity .15s ease;
    font-size: 16px;
	font-weight: 200;
  }

  .bd-footer a:hover{
    color: var(--bd-hover);
    transform: translateX(2px);
    opacity: 1;
  }

  .bd-footer .bd-small{
    color: var(--bd-muted2);
    font-size: 16px;
    margin: 0 0 10px;
  }

  /* Separator */
  .bd-footer-sep{
    border-top: 2px solid var(--bd-line);
    margin: 28px 0;
  }

  /* Logo row */
  .bd-logo-wrap{
    display:flex;
    align-items:center;
    gap:16px;
  }

  .bd-logo-mark{
    width: 74px;
    height: 74px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    display:flex;
    align-items:center;
    justify-content:center;
    border: 1px solid rgba(255,255,255,.12);
  }

  .bd-logo-text{
    line-height: 1.05;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 800;
    font-size: 30px;
  }
  .bd-logo-sub{
    letter-spacing: 0;
    font-weight: 700;
    opacity: .9;
    font-size: 18px;
    margin-top: 2px;
  }

  /* Info blocks bottom row */
  .bd-info-title{
    font-weight: 300;
    font-size: 14px;
    margin: 0 0 4px;
  }
  .bd-info-text{
    color: var(--bd-muted);
    font-size: 18px;
    margin: 0;
    line-height: 1.35;
	font-weight: 400;
  }

  /* Social icons */
  .bd-social{
    display:flex;
    gap:14px;
    margin-top: 14px;
  }
  .bd-social a{
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff;
    transform: none;
  }
  .bd-social a:hover{
    background: rgba(255,255,255,.14);
    transform: translateY(-1px);
  }
  .bd-social svg{
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  /* Bottom legal */
  .bd-footer-legal{
    border-top: 2px solid var(--bd-line);
    padding-top: 16px;
    color: rgba(255,255,255,.72);
    font-size: 14px;
  }
  .bd-footer-legal a{
    color: rgba(255,255,255,.72);
    padding: 0 6px;
    font-size: 14px;
  }
  .bd-footer-legal a:hover{
    color:#fff;
    transform:none;
  }

  /* Responsive tweaks */
  @media (max-width: 991.98px){
    .bd-footer .bd-col-title{ font-size: 34px; }
    .bd-footer a{ font-size: 16px; }
    .bd-footer-legal, .bd-footer-legal a{ font-size: 15px; }
  }

  @media (max-width: 575.98px){
    .bd-footer{ padding: 54px 0 22px; }
    .bd-logo-text{ font-size: 26px; letter-spacing: 3px; }
    .bd-info-title{ font-size: 18px; }
    .bd-info-text{ font-size: 16px; }
  }

/* ===== Styles migrés depuis les attributs style="..." ===== */

.m-logo--sm{ height:28px; }
.icon-circle-40{ width:40px; height:40px; }
.icon-circle-42{ width:42px; height:42px; }
.offcanvas-subtitle{ font-size:.9rem; }
.mt-10px{ margin-top:10px; }