/* ===== CityWatt — charte : bleu #1d1d1b · jaune #f3e600 ===== */
:root{
  --blue:#1d1d1b; --blue-dark:#000000; --yellow:#f3e600; --yellow-soft:#fbf6b0;
  --ink:#1c2333; --gray:#5b6474; --light:#f6f7fb; --border:#e3e6ef; --white:#fff;
  --radius:18px; --radius-sm:12px; --shadow:0 12px 40px rgba(0,0,0,.12);
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:var(--white); line-height:1.65; font-size:16.5px;}
img{max-width:100%; display:block;}
a{color:var(--blue); text-decoration:none;}
h1,h2,h3,h4{line-height:1.2; font-weight:800; letter-spacing:-.01em;}
h1{font-size:clamp(2rem,4.5vw,3.1rem);}
h2{font-size:clamp(1.5rem,3vw,2.1rem); margin-bottom:18px;}
h3{font-size:1.12rem;}
p{margin-bottom:14px;}
.container{max-width:1140px; margin:0 auto; padding:0 22px;}
.narrow{max-width:820px;}

/* ---- header ---- */
.site-header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--border);}
.header-inner{display:flex; align-items:center; gap:26px; height:68px;}
.logo img{height:30px; width:auto;}
.main-nav{display:flex; gap:20px; margin-left:auto;}
.main-nav a{font-weight:600; font-size:.95rem; color:var(--ink);}
.main-nav a:hover{color:var(--blue);}
.header-cta{display:flex; gap:10px;}
.btn{display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; font-weight:700; font-size:.95rem; transition:.18s; border:2px solid transparent;}
.btn-primary{background:var(--blue); color:var(--white);}
.btn-primary:hover{background:var(--blue-dark);}
.btn-outline{border-color:var(--blue); color:var(--blue); background:transparent;}
.btn-outline:hover{background:var(--blue); color:var(--white);}
.btn-yellow{background:var(--yellow); color:var(--blue-dark);}
.btn-yellow:hover{filter:brightness(.96);}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;}
.burger span{width:24px; height:2.6px; background:var(--ink); border-radius:2px;}

/* ---- hero ---- */
.hero{background:linear-gradient(160deg,var(--light) 55%,#eef1fa); overflow:hidden;}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; padding:72px 0;}
.hero h1 span{color:var(--blue);}
.hero-lead{font-size:1.13rem; color:var(--gray); margin:18px 0 26px;}
.hero-img{border-radius:var(--radius); box-shadow:var(--shadow); aspect-ratio:4/3; object-fit:cover; width:100%;}
.managed{margin-top:26px; color:var(--gray); font-size:.92rem;}
.managed img{height:22px; display:inline-block; vertical-align:middle;}

/* ---- sections ---- */
.section{padding:72px 0;}
.section-alt{background:var(--light);}
.badge{display:inline-block; padding:6px 16px; border-radius:999px; background:var(--yellow-soft); color:var(--blue-dark); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;}
.section-lead{color:var(--gray); max-width:720px; margin-bottom:34px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:28px;}
.card h3{margin-bottom:10px;}
.card p{color:var(--gray); font-size:.95rem; margin:0;}
.card .icon{width:44px; height:44px; border-radius:12px; background:var(--yellow-soft); display:flex; align-items:center; justify-content:center; font-size:1.3rem; margin-bottom:14px;}

/* ---- stats ---- */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; text-align:center;}
.stat{background:var(--blue); color:var(--white); border-radius:var(--radius); padding:34px 20px;}
.stat b{display:block; font-size:2.3rem; font-weight:900; color:var(--yellow);}
.stat span{font-size:.95rem; opacity:.92;}

/* ---- cartes opérations ---- */
.op-card{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column;}
.op-card img{aspect-ratio:16/10; object-fit:cover;}
.op-body{padding:24px; display:flex; flex-direction:column; gap:10px; flex:1;}
.op-chips{display:flex; gap:8px; flex-wrap:wrap;}
.op-chips span{background:var(--light); border:1px solid var(--border); font-size:.78rem; font-weight:600; padding:4px 12px; border-radius:999px;}
.op-status{align-self:flex-start; background:var(--yellow); color:var(--blue-dark); font-size:.72rem; font-weight:800; padding:4px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em;}
.op-body .btn{margin-top:auto; align-self:flex-start;}

/* ---- listes ---- */
.check-list{list-style:none; margin:14px 0;}
.check-list li{padding-left:30px; position:relative; margin-bottom:12px; color:var(--ink);}
.check-list li::before{content:"✓"; position:absolute; left:2px; color:var(--blue); font-weight:900;}

/* ---- deux voies ---- */
.path{border-top:5px solid var(--yellow);}
.path ul{margin:8px 0 18px;}

/* ---- formulaire ---- */
.form{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:34px; box-shadow:var(--shadow);}
.form label{display:block; font-weight:700; font-size:.9rem; margin:16px 0 6px;}
.form input,.form select,.form textarea{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; background:var(--light);}
.form textarea{min-height:120px; resize:vertical;}
.form .btn{margin-top:22px;}

/* ---- footer ---- */
.site-footer{background:var(--blue-dark); color:#cdd5ee; padding:56px 0 24px; margin-top:0;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding-bottom:34px;}
.site-footer h4{color:var(--white); margin-bottom:12px; font-size:.95rem;}
.site-footer a{display:block; color:#cdd5ee; font-size:.93rem; margin-bottom:8px;}
.site-footer a:hover{color:var(--yellow);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.15); padding-top:20px; display:flex; justify-content:space-between; font-size:.85rem; flex-wrap:wrap; gap:8px;}
.footer-logo{filter:brightness(0) invert(1); height:26px; width:auto; margin-bottom:14px;}

/* ---- responsive ---- */
@media (max-width:900px){
  .main-nav{display:none; position:absolute; top:68px; left:0; right:0; background:var(--white); flex-direction:column; padding:18px 22px; border-bottom:1px solid var(--border); gap:14px;}
  .main-nav.open{display:flex;}
  .header-cta .btn-outline{display:none;}
  .burger{display:flex;}
  .hero-grid{grid-template-columns:1fr; padding:44px 0; gap:30px;}
  .grid-2,.grid-3,.stats{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ---- stappen ---- */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:22px; counter-reset:step;}
.step{background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative;}
.step::before{counter-increment:step; content:counter(step); position:absolute; top:-16px; left:20px; width:34px; height:34px; border-radius:50%; background:var(--yellow); color:var(--blue-dark); font-weight:900; display:flex; align-items:center; justify-content:center;}
.step h3{margin:10px 0 8px; font-size:1rem;}
.step p{font-size:.9rem; color:var(--gray); margin:0;}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr;}}

/* ---- liens dans le texte : clairement identifiables ---- */
p a:not(.btn), li a:not(.btn), figcaption a:not(.btn), .card a:not(.btn),
.op-body a:not(.btn), .site-footer p a:not(.btn){
  color:var(--ink);
  font-weight:600;
  text-decoration:underline;
  text-decoration-color:var(--yellow);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  transition:.15s;
}
p a:not(.btn):hover, li a:not(.btn):hover, figcaption a:not(.btn):hover,
.card a:not(.btn):hover, .op-body a:not(.btn):hover, .site-footer p a:not(.btn):hover{
  text-decoration-thickness:3px;
  opacity:.85;
}
/* liens du pied de page (sur fond sombre) */
.site-footer p a:not(.btn){ color:#fff; text-decoration-color:var(--yellow); }