
:root{
  --vc-blue:#20326f;
  --vc-blue-2:#2c4e9f;
  --vc-blue-3:#394a85;
  --vc-gold:#f6df7a;
  --vc-gold-2:#d6ab2b;
  --vc-red:#ff4c4c;
  --vc-white:#fff;
  --vc-text:#f4f7ff;
  --vc-muted:#d8e2ff;
  --vc-panel:rgba(22,39,87,.90);
  --vc-panel-soft:rgba(37,57,122,.80);
  --vc-line:rgba(255,255,255,.15);
  --shadow:0 16px 38px rgba(0,0,0,.26);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  color:var(--vc-text);
  line-height:1.65;
  background:
    linear-gradient(rgba(20,33,75,.72), rgba(20,33,75,.82)),
    url('../../images/fond_bleu_site.jpg') center top / cover fixed no-repeat;
  background-color:var(--vc-blue-3);
}
a{color:var(--vc-white)}
a:hover{color:var(--vc-gold)}
img{max-width:100%;display:block;height:auto}
.container{width:min(1140px, calc(100% - 28px)); margin:0 auto}
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(15,24,56,.94);
  border-bottom:2px solid rgba(246,223,122,.24);
  backdrop-filter:blur(8px)
}
.top-banner-wrap{padding:6px 0 2px}
.top-banner-link{display:block}
.top-banner{
  width:100%;
  max-width:820px;
  margin:0 auto;
  border-radius:10px;
  box-shadow:var(--shadow)
}
.header-inner{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:8px 0 10px
}
.branding a{text-decoration:none}
.branding .name{
  font-size:1.2rem;
  font-weight:700;
  color:#fff
}
.branding .tagline{
  font-size:.82rem;
  color:var(--vc-gold)
}
.main-nav{display:flex; flex-wrap:wrap; gap:8px}
.main-nav a{
  text-decoration:none;
  padding:8px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700;
  font-size:.92rem
}
.main-nav a.cta{
  background:linear-gradient(135deg, var(--vc-blue-2), #6d43c5);
}
.nav-toggle{
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  width:46px;
  height:46px;
  margin-left:auto;
  border:1px solid rgba(255,255,255,.18);
  border-radius:12px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:var(--vc-white);
}
.hero{padding:24px 0 8px}
.hero-grid{
  display:grid;
  grid-template-columns:1.18fr .82fr;
  gap:22px;
  align-items:stretch
}
.hero-card,.visual-card,.callout-card,.category-card,.post-card,.panel,.content-card,.dark-card{
  border:1px solid var(--vc-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden
}
.hero-card,.content-card,.callout-card,.panel,.dark-card{background:var(--vc-panel)}
.visual-card{
  background:linear-gradient(180deg, rgba(32,50,111,.92), rgba(60,74,133,.86));
  display:flex; align-items:center; justify-content:center; padding:18px
}
.visual-card img{max-width:360px}
.hero-card{padding:28px}
.hero-card h1{
  margin:0 0 14px;
  font-size:clamp(2rem,4vw,3.15rem);
  line-height:1.08
}
.hero-card p{margin:0 0 14px; color:var(--vc-muted)}
.eyebrow{
  display:inline-block;
  margin-bottom:14px;
  padding:7px 14px;
  border-radius:999px;
  background:rgba(246,223,122,.15);
  border:1px solid rgba(246,223,122,.32);
  color:#fff8d4;
  font-weight:700
}
.hero-actions,.cluster{display:flex; flex-wrap:wrap; gap:12px}
.btn{
  display:inline-flex; justify-content:center; align-items:center;
  min-height:46px; padding:12px 18px; border-radius:999px;
  text-decoration:none; font-weight:700; text-align:center;
  border:1px solid rgba(255,255,255,.16)
}
.btn-primary{background:linear-gradient(135deg, #c3418f, #5f39b0)}
.btn-secondary{background:linear-gradient(135deg, #2b4085, #305aba)}
.btn-gold{background:linear-gradient(135deg, #f9df81, #e1b23f); color:#3a2500; border-color:transparent}
.btn-block{width:100%}
.section{padding:16px 0 18px}
.section-title{margin:0 0 16px}
.section-title h2{margin:0 0 5px; font-size:clamp(1.55rem,2.5vw,2.1rem)}
.lead{color:var(--vc-muted); margin:0}
.callout-grid,.grid-2,.grid-3,.footer-grid,.article-layout,.dark-grid{display:grid; gap:18px}
.callout-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.callout-card,.panel{padding:22px}
.callout-card h2,.panel h2,.content-card h1,.content-card h2,.post-card h3,.category-card h3{line-height:1.2}
.audiotel-card{
  background:linear-gradient(180deg, rgba(25,63,151,.86), rgba(32,50,111,.96))
}
.private-card{
  background:linear-gradient(180deg, rgba(70,43,134,.86), rgba(32,50,111,.96))
}
.cartouche{
  display:block;
  width:100%;
  max-width:390px;
  margin:14px auto 10px
}
.cartouche img{
  width:100%; height:auto; border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.28)
}
.sidebar-cartouche{max-width:330px}
.price-note{
  margin:6px 0 10px;
  color:var(--vc-gold);
  font-weight:700
}
.compose-now{
  margin:8px 0 14px;
  font-size:1.08rem;
  font-weight:700
}
.phone-link{
  text-decoration:none;
  font-weight:700
}
.phone-big{font-size:clamp(1.5rem,2.1vw,2rem)}
.gold-link{color:#fff1b0}
.intro-note{
  color:#fff4c0;
  font-size:.95rem
}
.category-card,.post-card{
  background:rgba(18,30,70,.88);
}
.category-card .content,.post-card .content{padding:20px}
.category-card p,.post-card p{color:var(--vc-muted)}
.meta{
  color:var(--vc-gold);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.2px
}
.article-link,.readmore{text-decoration:none}
.readmore{
  display:inline-block;
  margin-top:8px;
  color:var(--vc-gold);
  font-weight:700
}
.highlight-box,.cta-band{
  margin:22px 0 10px;
  padding:18px 18px;
  border-radius:16px;
  border:1px solid rgba(246,223,122,.28);
  background:rgba(255,255,255,.05)
}
.cta-band p:last-child{margin-bottom:0}
.article-layout{grid-template-columns:minmax(0,1.75fr) minmax(280px,.85fr)}
.article-body{padding:24px}
.article-body h2{margin-top:24px}
.article-body ul{padding-left:20px}
.badge-line{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.13);
  font-size:.88rem; font-weight:700
}
.breadcrumbs{
  padding:16px 0 10px;
  color:#e9efff;
  font-size:.95rem
}
.breadcrumbs a{text-decoration:none}
.side-stack{display:grid; gap:18px}
.site-footer{
  margin-top:28px;
  padding:30px 0 34px;
  background:rgba(10,18,43,.92);
  border-top:1px solid rgba(255,255,255,.12)
}
.footer-grid{grid-template-columns:1.3fr 1fr 1fr}
.footer-grid h3{margin-top:0}
.footer-grid p,.footer-grid li,.footer-grid a{color:var(--vc-muted)}
.list-clean{margin:0; padding-left:18px}
.mobile-sticky{
  display:none;
  position:fixed; left:10px; right:10px; bottom:10px; z-index:90; gap:10px
}
.mobile-sticky a{flex:1}
.dark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dark-card{
  background:linear-gradient(180deg, rgba(41,63,123,.95), rgba(28,41,86,.95));
  padding:20px
}
.dark-card h3{margin-top:0}
.month-chip{
  display:inline-block; margin-bottom:10px; padding:5px 10px; border-radius:999px;
  background:rgba(255,255,255,.08); color:#fff2bb; font-weight:700; font-size:.88rem
}
.home-intro{
  padding:22px 24px;
  background:rgba(18,30,70,.86)
}
.home-intro h2{margin-top:0}
.home-columns{
  display:grid; grid-template-columns:1.15fr .85fr; gap:18px
}
@media (max-width:980px){
  .hero-grid,.callout-grid,.grid-2,.grid-3,.footer-grid,.article-layout,.dark-grid,.home-columns{grid-template-columns:1fr}
  .header-inner{flex-wrap:wrap}
  .nav-toggle{display:inline-flex}
  .main-nav{
    display:none;
    width:100%;
    flex-direction:column;
    gap:10px;
    padding:12px;
    margin-top:10px;
    border-radius:16px;
    background:rgba(18,30,70,.96);
    border:1px solid rgba(255,255,255,.12)
  }
  .main-nav.is-open{display:flex}
  .main-nav a{width:100%; text-align:center}
  .mobile-sticky{display:flex}
}


.hero-home-card{background:linear-gradient(180deg, rgba(24,39,89,.96), rgba(35,55,118,.93))}
.visual-home-card{background:linear-gradient(180deg, rgba(39,56,116,.92), rgba(72,48,129,.86))}
.hero-points{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 18px}
.hero-points span{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-weight:700;color:#edf3ff}
.service-card{position:relative}
.service-label{display:inline-block;margin-bottom:10px;padding:6px 11px;border-radius:999px;background:rgba(246,223,122,.16);border:1px solid rgba(246,223,122,.28);color:#fff0b2;font-size:.88rem;font-weight:700}
.private-service-card{background:linear-gradient(180deg, rgba(52,34,106,.9), rgba(21,31,71,.9))}
.home-services{align-items:stretch}
.dark-home-section{padding-top:8px}
.dark-home-grid{margin-bottom:16px}
.dark-home-card{min-height:100%}
.dark-quality{color:#fff4c0;font-weight:700}
.center-cta{text-align:center}
.center-cta .btn{min-width:min(100%,420px)}
@media (max-width:980px){
  .hero-points{gap:8px}
  .hero-points span{width:100%;justify-content:center}
}


.private-cartouche{
  display:flex;
  flex-direction:column;
  gap:8px;
  text-decoration:none;
  width:100%;
  margin:16px auto 10px;
  padding:18px 18px;
  border-radius:18px;
  border:1px solid rgba(246,223,122,.30);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:0 12px 28px rgba(0,0,0,.20)
}
.private-cartouche-label{
  display:inline-block;
  align-self:flex-start;
  padding:6px 11px;
  border-radius:999px;
  background:rgba(246,223,122,.16);
  border:1px solid rgba(246,223,122,.28);
  color:#fff0b2;
  font-size:.88rem;
  font-weight:700
}
.private-cartouche-number{
  font-size:clamp(1.6rem,2.4vw,2.15rem);
  line-height:1.1;
  color:#ffffff
}
.private-cartouche-price{
  color:var(--vc-gold);
  font-weight:700
}
.private-cartouche-note{
  color:#edf3ff;
  font-size:.98rem
}
.dark-quality{
  color:#fff1b0;
  font-weight:700
}
.center-cta{
  margin-top:18px;
  display:flex;
  justify-content:center
}


.footer-services{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:26px
}
.footer-service-card{
  background:linear-gradient(180deg, rgba(24,39,89,.96), rgba(35,55,118,.93));
  border:1px solid rgba(255,255,255,.12);
  border-radius:28px;
  padding:28px 26px;
  box-shadow:0 14px 34px rgba(0,0,0,.22)
}
.footer-service-card-private{
  background:linear-gradient(180deg, rgba(37,53,111,.96), rgba(28,41,86,.95))
}
.footer-service-card h2{margin-top:0;margin-bottom:18px;font-size:clamp(2rem,3vw,2.65rem)}
.footer-service-card p{color:#f3f6ff;line-height:1.75;font-size:1.08rem}
.footer-audiotel-cartouche{display:block;max-width:340px;margin:18px 0 12px;text-decoration:none}
.footer-audiotel-cartouche img{width:100%;height:auto;display:block;border-radius:14px;box-shadow:0 12px 28px rgba(0,0,0,.28)}
.footer-service-price{margin:10px 0 18px;color:var(--vc-gold) !important;font-size:1.05rem;font-weight:800}
.footer-service-price-private{font-size:1.12rem}
.footer-private-phone{font-size:1.08rem;font-weight:800;margin:14px 0 18px}
.footer-private-phone a{text-decoration:none;color:#ffffff}
.btn-footer-service{display:inline-flex;justify-content:center;align-items:center;min-width:260px;padding:16px 26px;border-radius:999px;font-size:1.05rem}
@media (max-width:980px){
  .footer-services{grid-template-columns:1fr}
  .footer-service-card{padding:24px 20px;border-radius:24px}
  .footer-service-card h2{font-size:clamp(1.8rem,7vw,2.35rem)}
  .btn-footer-service{width:100%;min-width:0}
}
