:root{
  /* Light premium */
  --bg:#f7f9ff;
  --bg2:#eef3ff;
  --panel:#ffffff;
  --card:#ffffff;

  --line: rgba(15, 35, 64, .10);
  --line2: rgba(15, 35, 64, .14);

  --text:#0f2340;
  --muted: rgba(15, 35, 64, .70);
  --muted2: rgba(15, 35, 64, .55);

  --shadow: 0 18px 50px rgba(12, 34, 60, .12);
  --shadow2: 0 12px 30px rgba(12, 34, 60, .10);

  --primary:#22c55e;
  --primary2:#16a34a;
  --primaryInk:#072513;

  --blue:#2563eb;
  --white:#ffffff;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  font-family:"Manrope",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(34,197,94,.12), transparent 55%),
    radial-gradient(900px 420px at 82% 0%, rgba(37,99,235,.10), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1100px, calc(100% - 40px)); margin:0 auto}

/* ===== Topbar ===== */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,.78);
  border-bottom: 1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
}

.brand{display:flex;align-items:center;gap:12px}
.brand__mark{
  width:42px;height:42px;border-radius:14px;
  display:grid;place-items:center;
  background: linear-gradient(180deg, rgba(34,197,94,.18), rgba(37,99,235,.10));
  border:1px solid rgba(34,197,94,.22);
  box-shadow: var(--shadow2);
  font-weight:1000;
  letter-spacing:.2px;
}
.brand__text{display:grid;line-height:1.05}
.brand__name{font-weight:1000;letter-spacing:.2px}
.brand__sub{font-size:12px;color:var(--muted2)}

.nav{display:flex;gap:18px;color:var(--muted);font-weight:900}
.nav a{opacity:.9}
.nav a:hover{opacity:1;color:var(--text)}

.topbar__cta{display:flex;gap:10px;align-items:center}
.burger{
  display:none;
  background: transparent;
  border:1px solid var(--line2);
  color: var(--text);
  border-radius:12px;
  padding:10px 12px;
  font-size:18px;
}

/* Mobile menu */
.mobile{
  border-top:1px solid var(--line);
  padding:14px 0;
  background: rgba(255,255,255,.78);
}
.mobile a{
  display:block;
  padding:10px 0;
  color:var(--muted);
  font-weight:900;
}
.mobile__btn{margin-top:8px}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:10px;
  padding:12px 16px;
  border-radius:14px;
  font-weight:1000;
  border:1px solid transparent;
  box-shadow: var(--shadow2);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.btn:hover{transform: translateY(-1px); box-shadow: var(--shadow)}
.btn:active{transform: translateY(0)}
.btn--pill{border-radius:999px}
.btn--block{width:100%}

.btn--primary{
  background: linear-gradient(180deg, var(--primary), var(--primary2));
  color: var(--primaryInk);
}
.btn--ghost{
  background: rgba(255,255,255,.80);
  border-color: var(--line2);
  color: var(--text);
}

/* ===== Hero ===== */
.hero{padding:34px 0 26px}
.hero__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:22px;
  align-items: start;
}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.75);
  color: var(--muted);
  font-weight:900;
  width: fit-content;
}
.dot{
  width:10px;height:10px;border-radius:99px;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 0 6px rgba(34,197,94,.14);
}

/* Prix dans le hero */
.hero-price{
  margin-top: 12px;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(34,197,94,.22);
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(34,197,94,.18), transparent 60%),
    rgba(255,255,255,.85);
  box-shadow: var(--shadow2);
}

.hero-price__label{
  color: rgba(15,35,64,.70);
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.hero-price__value{
  font-weight: 1000;
  font-size: 34px;
  line-height: 1;
}
.hero-price__value small{
  font-size: 14px;
  color: rgba(15,35,64,.60);
  font-weight: 1000;
}
.hero-price__note{
  color: rgba(15,35,64,.62);
  font-weight: 900;
  font-size: 13px;
}

h1{
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.2vw, 52px);
  letter-spacing: -0.7px;
  line-height: 1.05;
}
.grad{
  background: linear-gradient(90deg, rgba(34,197,94,.95), rgba(37,99,235,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin:0 0 18px;
  color:var(--muted);
  font-size: clamp(16px, 1.45vw, 18px);
  line-height:1.65;
}

.hero__actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}

.stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.stat{
  flex: 1 1 160px;
  padding:14px 14px;
  border-radius:18px;
  background: rgba(255,255,255,.82);
  border: 1px solid var(--line);
  box-shadow: var(--shadow2);
}
.stat__n{font-weight:1000;font-size:22px}
.stat__t{color:var(--muted2);font-weight:900;margin-top:2px}
.note{display:block;margin-top:10px;color:rgba(15,35,64,.50)}

/* ===== Visual card ===== */
.hero__visual{
  position: relative;
  padding-bottom: 130px;
}

.card{
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.glass{backdrop-filter: blur(12px)}

.card__top{
  display:flex;align-items:center;gap:12px;
  padding:14px;
  border-bottom:1px solid var(--line);
}
.fake-dots{display:flex;gap:6px}
.fake-dots span{width:10px;height:10px;border-radius:99px;background: rgba(15,35,64,.20)}
.fake-url{color:rgba(15,35,64,.55);font-weight:900;flex:1}

.badge{
  padding:8px 10px;border-radius:999px;
  background: rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.18);
  color: rgba(22,163,74,.95);
  font-weight:1000;
  font-size:12px;
}

.card__body{padding:14px}

.mock{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items: stretch;
}

.mock__left{
  border-radius:18px;
  padding:14px;
  background: rgba(238,243,255,.75);
  border:1px solid var(--line);
}
.mock__h{font-weight:1000;font-size:16px}
.mock__p{margin:6px 0 10px;color:var(--muted);font-weight:900}

.mock__btns{display:flex;gap:8px;margin-bottom:10px}
.mini{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 10px;border-radius:12px;
  font-weight:1000;font-size:12px;
  background: rgba(255,255,255,.85);
  border:1px solid var(--line);
}
.mini--primary{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.22);
  color: rgba(22,163,74,.95);
}

.mock__list{
  display:grid;
  gap:8px;
  color:rgba(15,35,64,.75);
  font-weight:900;
}

/* image du mock */
.mock__img{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  height: 260px;
  box-shadow: var(--shadow2);
}
.mock__img img{
width:100%;
height:100%;
object-fit:cover;
border-radius:16px;;
}

.logos{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:12px;
  color:rgba(15,35,64,.55);
  font-weight:1000;
  font-size:12px;
}
.logos span{
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
}

/* Floating cards */
.floating{
  position: absolute;
  right: 0;
  top: calc(100% + 14px);
  width: min(360px, 92%);
  display: grid;
  gap: 10px;
}
.floating__item{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px;
  border-radius:18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.icon{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(238,243,255,.85);
  border:1px solid var(--line);
}
.floating__t{font-weight:1000}
.floating__s{color:rgba(15,35,64,.62);font-weight:900;margin-top:2px}

/* ===== Sections ===== */
.section{padding:54px 0}

.section--alt{
  background:
    radial-gradient(900px 420px at 10% 10%, rgba(37,99,235,.08), transparent 55%),
    radial-gradient(900px 420px at 90% 40%, rgba(34,197,94,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.10));
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.section__head{margin-bottom:18px}
.section__head h2{margin:0 0 6px;font-size:32px;letter-spacing:-.4px}
.section__head p{margin:0;color:var(--muted);font-weight:900;line-height:1.6}

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}

/* Tiles */
.tile{
  display:block; /* IMPORTANT si tile est un <a> */
  /* le reste de ton CSS tile... */
}
.tile{
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
  min-height: 230px;
  transition: transform .14s ease;
}
.tile:hover{transform: translateY(-2px)}
.tile img{width:100%;height:260px;object-fit:cover;filter:saturate(1.05)}
.tile__overlay{
  position:absolute;inset:0;
  padding:14px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,.62) 100%);
}
.tile__title{font-weight:1000;font-size:18px;color:#fff}
.tile__meta{color:rgba(255,255,255,.82);font-weight:900;margin-top:4px}

/* Features */
.feature{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.feature__icon{font-size:22px}
.feature h3{margin:10px 0 6px;font-size:18px}
.feature p{margin:0;color:var(--muted);font-weight:900;line-height:1.6}

/* ===== Tarifs (unique) ===== */
.pricing-single{
  display:flex;
  justify-content:center;
}
.pricing-single .price{
  width: min(560px, 100%);
}

.price{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow);
}

.price--best{
  border-color: rgba(34,197,94,.24);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(34,197,94,.16), transparent 60%),
    rgba(255,255,255,.88);
}

.price__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.price__head h3{margin:0;font-size:18px}
.price__tag{
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.78);
  color:rgba(15,35,64,.70);
  font-weight:1000;
  font-size:12px;
}

.price__value{
  margin:12px 0 10px;
  color: var(--muted);
  font-weight:900;
  font-size:16px;
}
.price__value strong{
  color: var(--text);
  font-size: 34px;
  letter-spacing: -.3px;
}

.price ul{
  margin:0 0 14px;
  padding-left:18px;
  color:rgba(15,35,64,.75);
  font-weight:900;
}
.price li{margin:8px 0}
.mini-note{margin:14px 0 0;color:rgba(15,35,64,.60);font-weight:900}

/* Reviews */
.review{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.review__stars{color:rgba(22,163,74,.95);font-weight:1000}
.review p{margin:10px 0 12px;color:rgba(15,35,64,.80);font-weight:900;line-height:1.6}
.review__who{color:rgba(15,35,64,.60);font-weight:1000}

/* Contact */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
  align-items:start;
}
.contact__cards{display:grid;gap:10px;margin-top:14px}

.contact-card{
  display:flex;gap:12px;align-items:center;
  padding:14px;border-radius:18px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.contact-card span{font-size:18px}
.contact-card__t{font-weight:1000}
.contact-card__s{color:rgba(15,35,64,.62);font-weight:900;margin-top:2px}

.form{
  padding:18px;
  border-radius:22px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow2);
}
.form__row{display:grid;gap:8px;margin-bottom:12px}
label{font-weight:1000;color:rgba(15,35,64,.82)}

input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line2);
  background: rgba(255,255,255,.92);
  color: var(--text);
  outline: none;
  font-weight:900;
}
input:focus,textarea:focus{border-color: rgba(34,197,94,.45)}
.form__note{margin:10px 0 0;color:rgba(15,35,64,.70);font-weight:1000;min-height:20px}

/* Footer */
.footer{
  padding:18px 0;
  border-top:1px solid var(--line);
  color:rgba(15,35,64,.62);
}
.footer__inner{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.footer__links{display:flex;gap:12px;font-weight:1000}
.footer__links a:hover{color:var(--text)}

/* ===== Responsive ===== */
@media (max-width: 980px){
  .hero__grid{
    grid-template-columns:1fr;
  }

  .mock{
    display:flex;
    flex-direction:column;
    gap:16px;
  }

  .mock__left,
  .mock__img{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  .mock__img{
    height:280px;
    overflow:hidden;
  }

  .mock__img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  .floating{
    position:static;
    width:100%;
    margin-top:12px;
  }

  .stats{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}


@media (max-width: 820px){
  .nav{display:none}
  .burger{display:inline-flex}
}
/* Petite signature visuelle pour les pages démo */
.demo-hero .badge{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.16);
  color: rgba(37,99,235,.95);
}

/* Layout interne de la card démo */
.demo-split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: stretch;
}

.demo-panel{
  border-radius:18px;
  padding:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.82);
}

.demo-panel__title{
  font-weight:1000;
  font-size:14px;
  color: rgba(15,35,64,.78);
  margin-bottom: 10px;
}

.demo-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.demo-list{display:grid;gap:8px;color:rgba(15,35,64,.75);font-weight:900;margin-bottom:12px}
.demo-cta{display:flex;gap:10px;flex-wrap:wrap}

.demo-photo{
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow: var(--shadow2);
}
.demo-photo img{width:100%;height:100%;object-fit:cover}
/* ===== Thème : Rénovation (accent bleu/indigo) ===== */
.theme-renov .grad{
  background: linear-gradient(90deg, rgba(37,99,235,.95), rgba(99,102,241,.92));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.theme-renov .dot{
  background: rgba(37,99,235,.95);
  box-shadow: 0 0 0 6px rgba(37,99,235,.14);
}

.theme-renov .btn--primary{
  background: linear-gradient(180deg, rgba(37,99,235,1), rgba(99,102,241,1));
  color: #0b1020;
}

.theme-renov .badge{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.18);
  color: rgba(37,99,235,.95);
}

.theme-renov .mini--primary{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
  color: rgba(37,99,235,.95);
}

.theme-renov .price--best{
  border-color: rgba(37,99,235,.22);
  background:
    radial-gradient(600px 220px at 50% 0%, rgba(37,99,235,.14), transparent 60%),
    rgba(255,255,255,.88);
}
/* ===== Thème : Électricien (fond warm + accent orange) ===== */
.theme-elec{
  background:
    radial-gradient(900px 420px at 18% 10%, rgba(245,158,11,.14), transparent 55%),
    radial-gradient(900px 420px at 82% 0%, rgba(234,88,12,.12), transparent 55%),
    linear-gradient(180deg, #fff7ed 0%, #ffffff 55%, #f8fafc 100%);
}

/* accents */
.theme-elec .grad{
  background: linear-gradient(90deg, #f59e0b, #ea580c);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.theme-elec .dot{
  background: #f59e0b;
  box-shadow: 0 0 0 6px rgba(245,158,11,.18);
}

.theme-elec .badge{
  background: rgba(245,158,11,.12);
  border-color: rgba(245,158,11,.18);
  color: rgba(234,88,12,.95);
}

.theme-elec .mini--primary{
  background: rgba(245,158,11,.14);
  border-color: rgba(245,158,11,.22);
  color: rgba(234,88,12,.95);
}

.theme-elec .btn--primary{
  background: linear-gradient(180deg, #f59e0b, #ea580c);
  color: #241200;
}


/* ===== Floating CTA (ULTRA PREMIUM) ===== */
.cta-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;
  display: grid;
  gap: 12px;
}

.cta-float__btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-radius: 999px;

  text-decoration: none;
  font-weight: 1000;
  letter-spacing: .2px;

  border: 1px solid rgba(15,35,64,.14);
  background: rgba(255,255,255,.88);
  color: var(--text);

  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  backdrop-filter: blur(12px);

  transform: translateZ(0);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.cta-float__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(0,0,0,.22);
  filter: saturate(1.05);
}

.cta-float__label{
  font-size: 14px;
  line-height: 1;
}

/* Thèmes des boutons */
.cta-float__btn--phone{
  background: linear-gradient(180deg, rgba(37,99,235,.98), rgba(59,130,246,.96));
  color: #071022;
  border-color: rgba(37,99,235,.22);
}

.cta-float__btn--wa{
  background: linear-gradient(180deg, rgba(34,197,94,.98), rgba(22,163,74,.96));
  color: #072513;
  border-color: rgba(34,197,94,.22);
  position: relative;
}

/* Pulse WhatsApp (premium) */
.cta-float__btn--wa::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(34,197,94,.28), transparent 60%);
  animation: waPulse 1.8s ease-out infinite;
  z-index: -1;
  opacity: .9;
}

@keyframes waPulse{
  0%   { transform: scale(.94); opacity: .55; }
  60%  { transform: scale(1.08); opacity: .20; }
  100% { transform: scale(1.14); opacity: 0; }
}

/* Mobile : bulles rondes (ultra clean) */
@media (max-width: 520px){
  .cta-float{
    right: 12px;
    bottom: 12px;
    gap: 10px;
  }

  .cta-float__btn{
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    border-radius: 18px;
  }

  .cta-float__label{
    display:none;
  }

  .cta-float__btn--wa::after{
    inset:-8px;
    border-radius: 22px;
  }
}
/* ===== Modal (Devis Express) ===== */
.modal{
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
}

.modal.is-open{ display: block; }

.modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(10, 20, 40, .38);
  backdrop-filter: blur(10px);
}

.modal__card{
  position: relative;
  width: min(720px, calc(100% - 24px));
  margin: 7vh auto 0;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 30px 90px rgba(0,0,0,.25);
  overflow: hidden;
  color: var(--text);
}

.modal__card::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 240px at 15% 0%, rgba(34,197,94,.16), transparent 60%),
    radial-gradient(700px 240px at 85% 0%, rgba(37,99,235,.12), transparent 60%);
  pointer-events:none;
}

.modal__top{
  position: relative;
  padding: 18px 18px 10px;
  display:flex;
  justify-content: space-between;
  gap: 12px;
  align-items:flex-start;
}

.modal__kicker{
  font-weight: 1000;
  font-size: 12px;
  letter-spacing: .25px;
  text-transform: uppercase;
  color: rgba(15,35,64,.62);
}

.modal__title{
  margin: 6px 0 6px;
  font-size: 22px;
  letter-spacing: -.3px;
}

.modal__sub{
  margin: 0;
  color: rgba(15,35,64,.70);
  font-weight: 900;
  line-height: 1.5;
}

.modal__close{
  position: relative;
  border: 1px solid rgba(15,35,64,.14);
  background: rgba(255,255,255,.85);
  width: 40px;
  height: 40px;
  border-radius: 14px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 1000;
}

.modal__form{
  position: relative;
  padding: 0 18px 18px;
}

.modal__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.modal__row{display:grid; gap:8px; margin-bottom: 12px;}
.modal__row label{font-weight:1000; color: rgba(15,35,64,.78);}

.modal textarea{
  resize: vertical;
}

.modal__trust{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  color: rgba(15,35,64,.62);
  font-weight: 1000;
  font-size: 12px;
}

@media (max-width: 720px){
  .modal__grid{ grid-template-columns: 1fr; }
  .modal__card{ margin-top: 4vh; }
}
/* Logo drapeau français premium */
.brand__flag{
  position: relative;
  overflow: hidden;
}

.brand__flag::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;

  background: linear-gradient(
    to right,
    #0055A4 0%,
    #0055A4 33.33%,
    #ffffff 33.33%,
    #ffffff 66.66%,
    #EF4135 66.66%,
    #EF4135 100%
  );
}

/* ===== Logo drapeau français RECTANGULAIRE premium ===== */

.brand__flag-fr{

  width: 46px;
  height: 30px;

  border-radius: 6px;

  display: inline-block;

  background: linear-gradient(
    to right,
    #0055A4 0%,
    #0055A4 33.33%,
    #ffffff 33.33%,
    #ffffff 66.66%,
    #EF4135 66.66%,
    #EF4135 100%
  );

  border: 1px solid rgba(0,0,0,.12);

  box-shadow:
    0 6px 18px rgba(0,0,0,.15),
    inset 0 0 0 1px rgba(255,255,255,.35);

}
/* ===== Prix (stable, premium, ne casse pas le hero) ===== */
.price-card{
  display: inline-block;
  width: min(440px, 100%);
  padding: 16px 18px;
  border-radius: 18px;

  background: rgba(255,255,255,.82);
  border: 1px solid rgba(15,35,64,.10);
  box-shadow: 0 18px 48px rgba(0,0,0,.10);
  backdrop-filter: blur(10px);

  margin: 14px 0 10px; /* espace propre dans le hero */
}

.price-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 8px;
}

.price-card__label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(15,35,64,.62);
}

.price-card__pill{
  font-size: 11px;
  font-weight: 1000;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #22c55e, #16a34a);
  color: #062012;
  border: 1px solid rgba(34,197,94,.20);
}

.price-card__main{
  display:flex;
  align-items:flex-end;
  gap:6px;
  line-height: 1;
}

.price-card__n{
  font-size: 56px;
  font-weight: 1000;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #16a34a, #22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

.price-card__eur{
  font-size: 20px;
  font-weight: 900;
  color: rgba(15,35,64,.88);
  padding-bottom: 10px;
}

.price-card__per{
  font-size: 16px;
  font-weight: 900;
  color: rgba(15,35,64,.55);
  padding-bottom: 10px;
}

.price-card__bullets{
  display:flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;

  font-size: 13px;
  font-weight: 900;
  color: rgba(15,35,64,.72);
}

/* Mobile : carte bien lisible */
@media (max-width: 520px){
  .price-card__n{ font-size: 46px; }
}
/* Stop anciens styles prix (évite conflits) */
.price-badge,
.premium-price{
  all: unset !important;
}
/* ===== Section cible artisans ===== */

.center{
  text-align:center;
}

.target{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin-top:30px;
}

.target__item{

  padding:26px;

  border-radius:18px;

  background:white;

  border:1px solid rgba(15,35,64,.08);

  box-shadow:0 10px 30px rgba(0,0,0,.06);

  transition:.2s;
}

.target__item:hover{

  transform:translateY(-4px);

  box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.target__icon{

  font-size:28px;

  margin-bottom:10px;

}

.target__title{

  font-weight:800;

  font-size:18px;

  margin-bottom:6px;

}

.target__text{

  color:#64748b;

  font-weight:600;

}

.highlight{

  background:linear-gradient(180deg,#22c55e,#16a34a);

  color:white;

}

.highlight .target__text{

  color:rgba(255,255,255,.85);

}

/* mobile */

@media(max-width:900px){

.target{

grid-template-columns:1fr;

}
}
.real-badge{

font-size:11px;

background:#22c55e;

color:white;

padding:3px 6px;

border-radius:6px;

margin-left:6px;

font-weight:700;

}
/* ==========================
   THEME DEMO : CLIM (BLEU FROID)
   ========================== */
.theme-clim{
  /* si ton site principal est fond clair, on garde clair mais avec accents bleus */
  --accent: #2563eb;     /* bleu */
  --accent2:#06b6d4;     /* cyan */
  --accentInk:#071326;
}

/* Gradient titre spécifique clim */
.theme-clim .grad{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}

/* Bouton primary en bleu (uniquement sur la page clim) */
.theme-clim .btn--primary{
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  color: #061021;
}

/* Petits badges / mini */
.theme-clim .mini--primary{
  background: rgba(37,99,235,.12);
  border-color: rgba(37,99,235,.22);
  color: rgba(37,99,235,.95);
}

/* Pill dot bleu */
.theme-clim .dot{
  background: rgba(6,182,212,.95);
  box-shadow: 0 0 0 6px rgba(6,182,212,.14);
}

/* Badge en haut à droite de la card */
.theme-clim .badge{
  background: rgba(37,99,235,.10);
  border-color: rgba(37,99,235,.18);
  color: rgba(37,99,235,.95);
}

/* Petite marque AC */
.brand__mini{
  font-weight: 1000;
}

/* Un peu plus “premium” sur la card demo */
.theme-clim .demo-card{
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
}
/* Cartes exemples premium */
.tile{
  transition: transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}

.tile:hover{
  transform: translateY(-6px) scale(1.02);

  box-shadow:
    0 25px 60px rgba(0,0,0,.18),
    0 10px 25px rgba(0,0,0,.12);
}
.tile img{
  transition: transform .4s ease;
}

.tile:hover img{
  transform: scale(1.06);
}
.tile::after{
  content: "Voir le site →";

  position: absolute;
  top: 14px;
  right: 14px;

  background: rgba(0,0,0,.65);
  color: white;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;

  opacity: 0;
  transform: translateY(-6px);

  transition: all .25s ease;
}

.tile:hover::after{
  opacity: 1;
  transform: translateY(0);
}
/* CTA exemples premium */
.examples-cta{
  margin-top: 12px;
  margin-bottom: 32px;
  display: inline-block;
  padding: 12px 18px;
  border-radius: 999px;

  font-weight: 800;
  font-size: 14px;

  color: #0b341a;

  background: linear-gradient(180deg, rgba(74,222,128,.18), rgba(34,197,94,.12));
  border: 1px solid rgba(74,222,128,.35);

  box-shadow:
    0 10px 30px rgba(74,222,128,.25),
    inset 0 1px 0 rgba(255,255,255,.6);

  backdrop-filter: blur(6px);
}
.examples-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(74,222,128,.35);
}
.trust{

  margin-top: 18px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 16px;

  background: rgba(16,185,129,.08);

  border: 1px solid rgba(16,185,129,.25);

  border-radius: 999px;

  font-weight: 600;
  font-size: 14px;

  color: #065f46;

}
/* ===== Comparatif 1400€ vs 89€/mois ===== */
.pricing-compare{
  padding-top: 70px;
  padding-bottom: 70px;
}

.pricing-compare__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
  align-items:stretch;
}

.compare-card{
  background:#ffffff;
  border:1px solid rgba(15,35,64,.10);
  border-radius:22px;
  padding:32px 28px;
  text-align:left;
  box-shadow:0 18px 45px rgba(15,35,64,.08);
  color:#0f2340;
}

.compare-card__title{
  font-weight:800;
  font-size:18px;
  margin-bottom:12px;
  color:#0f2340;
}

.compare-card__price{
  font-size:54px;
  font-weight:900;
  line-height:1;
  margin-bottom:20px;
  color:#0f2340;
}

.compare-card__price span{
  font-size:18px;
  font-weight:800;
  color:rgba(15,35,64,.55);
}

.compare-card ul{
  list-style:none;
  padding:0;
  margin:20px 0 0;
}

.compare-card li{
  margin:10px 0;
  color:rgba(15,35,64,.75);
  font-weight:700;
}

.compare-card__note{
  margin-top:18px;
  color:rgba(15,35,64,.55);
  font-size:14px;
  font-weight:700;
}

.compare-card--best{
  position:relative;
  background:linear-gradient(180deg, rgba(74,222,128,.14), rgba(255,255,255,1));
  border:1px solid rgba(74,222,128,.35);
  box-shadow:0 22px 55px rgba(74,222,128,.14);
  transform:translateY(-6px);
}

.compare-badge{
  display:inline-block;
  background:linear-gradient(180deg, #22c55e, #16a34a);
  color:#062012;
  font-weight:900;
  padding:7px 12px;
  border-radius:999px;
  margin-bottom:14px;
  font-size:12px;
}

@media (max-width: 900px){
  .pricing-compare__grid{
    grid-template-columns:1fr;
  }

  .compare-card--best{
    transform:none;
  }
.hero-seo{
max-width:800px;
margin:30px auto 0;
text-align:center;
font-size:1.05rem;
line-height:1.6;
color:#555;
}

}
.theme-clim .hero__grid{
  position: relative;
}



.theme-clim .floating{
  position: static;
  grid-column: 2;
  justify-self: end;
  width: 100%;
  max-width: 300px;
  margin-top: -130px;
}

.theme-clim .hero__visual{
  padding-bottom: 0;
padding-bottom: 0;
}
/* ===== CORRECTION MOBILE ===== */

@media (max-width:768px){

/* Passe les colonnes en vertical */
.mock{
flex-direction:column;
}

/* Image entière */
.mock__img img{
width:100%;
height:auto;
object-fit:contain;
}

/* Supprime le téléphone vertical */
.phone-vertical{
display:none;
}

/* Espace boutons flottants */
.cta-float{
bottom:20px;
right:20px;
}

.cta-float__btn{
margin-top:10px;
}

}
/* ===== CORRECTION MOBILE HEADER ===== */

@media (max-width:768px){

.mock__img{
height:260px;
}

.mock__img img{
width:100%;
height:100%;
object-fit:cover;
}

}

/* cache le numéro dans le header */
.topbar__cta .btn--ghost{
display:none;
}

/* garde seulement le bouton devis */
.topbar__cta{
gap:8px;
}

/* menu plus propre */
.nav{
display:none;
}

/* Correction mobile clim */
@media (max-width:768px){

.hero__grid{
flex-direction:column !important;
}

.hero__visual{
width:100%;
}

.hero__copy{
width:100%;
}

}/* ===== CORRECTION MOBILE PAGE CLIM ===== */
@media (max-width: 768px) {

  .hero__grid,
  .hero-grid,
  .hero,
  .mock,
  .container.hero__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  .hero__copy,
  .hero__visual,
  .mock__left,
  .mock__img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mock__img {
    height: 260px !important;
    overflow: hidden !important;
  }

  .mock__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
}/* ===== UNIFORMISER TOUTES LES PAGES MÉTIERS EN MOBILE ===== */
@media (max-width: 768px) {

  .hero__grid,
  .hero-grid,
  .hero,
  .mock,
  .container.hero__grid {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .hero__copy,
  .hero__visual,
  .mock__left,
  .mock__img,
  .card,
  .glass {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .mock__img {
    order: 3 !important;
    height: 260px !important;
    overflow: hidden !important;
  }

  .mock__left {
    order: 2 !important;
  }

  .hero__copy {
    order: 1 !important;
  }

  .mock__img img,
  .hero__visual img,
  .tile img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* ===== MOBILE : sous-pages métiers seulement, sans casser l'accueil ===== */
@media (max-width: 768px) {

  /* Ne change pas la grande hero de la page d'accueil */
  .section .hero__grid,
  .section .mock,
  .section .hero,
  .section .container.hero__grid {
    display: block !important;
  }

  /* Sous-pages métiers : la carte exemple passe en colonne */
  .card .mock {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  .card .mock__left,
  .card .mock__img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .card .mock__img {
    height: 280px !important;
    overflow: hidden !important;
  }

  .card .mock__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* ===== MOBILE : page electricien seulement ===== */
@media (max-width: 768px) {

  body:has(.topbar .brand__name) .card__body .mock {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .card__body .mock__left,
  .card__body .mock__img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .card__body .mock__img {
    height: 280px !important;
    overflow: hidden !important;
  }

  .card__body .mock__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* ===== MOBILE : electricien ===== */
@media (max-width: 768px) {
  .card__body .mock {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .card__body .mock__img {
    height: 280px !important;
    overflow: hidden !important;
  }

  .card__body .mock__img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* ===== MOBILE : page electricien seulement ===== */
@media (max-width: 768px) {

  body.theme-elec .demo-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body.theme-elec .demo-panel,
  body.theme-elec .demo-photo{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  body.theme-elec .demo-photo{
    order: 3 !important;
    height: 280px !important;
    overflow: hidden !important;
  }

  body.theme-elec .demo-panel{
    order: 2 !important;
  }

  body.theme-elec .demo-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* ===== MOBILE : page plombier seulement ===== */
@media (max-width: 768px) {

  body:has(a[href="mailto:contact@artisan-plomberie63.fr"]) .demo-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body:has(a[href="mailto:contact@artisan-plomberie63.fr"]) .demo-panel,
  body:has(a[href="mailto:contact@artisan-plomberie63.fr"]) .demo-photo{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  body:has(a[href="mailto:contact@artisan-plomberie63.fr"]) .demo-photo{
    order: 3 !important;
    height: 280px !important;
    overflow: hidden !important;
  }

  body:has(a[href="mailto:contact@artisan-plomberie63.fr"]) .demo-panel{
    order: 2 !important;
  }

  body:has(a[href="mailto:contact@artisan-plomberie63.fr"]) .demo-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* ===== MOBILE : page rénovation seulement ===== */
@media (max-width: 768px) {

  body.theme-renov .demo-split{
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body.theme-renov .demo-panel,
  body.theme-renov .demo-photo{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  body.theme-renov .demo-photo{
    order: 3 !important;
    height: 280px !important;
    overflow: hidden !important;
  }

  body.theme-renov .demo-panel{
    order: 2 !important;
  }

  body.theme-renov .demo-photo img{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 16px !important;
  }
}/* Masquer le bloc visuel du hero sur mobile */
@media (max-width: 768px) {
  .hero__visual {
    display: none !important;
  }
}