*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{scroll-behavior:smooth}

body{
font-family:Arial,sans-serif;
background:#ffffff;
color:#174b85;
line-height:1.7;
}

header{
background:#1765b5;
padding:20px 6%;
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
}

header h2{color:#ffdc32}
header h2 span{color:white;font-size:15px}

nav{display:flex;gap:18px;flex-wrap:wrap}
nav a{color:white;text-decoration:none;font-weight:bold}

.hero{
min-height:480px;
padding:80px 8%;
display:flex;
align-items:center;
color:white;
background:linear-gradient(90deg,#12539be8,#287ac9bb),url('https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=1500') center/cover;
}

.hero div{max-width:650px}
.tag{color:#ffdc32;font-weight:bold}
.hero h1{font-size:43px;line-height:1.2;margin:20px 0}
.hero p{margin-bottom:20px}

.btn{
display:inline-block;
background:#ffdc32;
color:#174b85;
padding:13px 22px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
margin:8px 5px;
}

section{padding:65px 7%;text-align:center}
section h2{font-size:30px;color:#1765b5;margin-bottom:30px}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
}

.cards article{
background:#edf5ff;
padding:25px;
border-radius:12px;
border-bottom:5px solid #ffdc32;
}

.cards h3{color:#1765b5;margin-bottom:12px}
.cards p{color:#4675a6}

#realisations{background:#edf5ff}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.gallery img{
width:100%;
height:230px;
object-fit:cover;
border-radius:12px;
border:3px solid #ffdc32;
}

#contact p{margin:12px}

.whatsapp{background:#1765b5;color:white}

footer{
background:#1765b5;
color:white;
text-align:center;
padding:30px 15px;
}

footer h3{color:#ffdc32}

@media(max-width:600px){
header{justify-content:center;text-align:center}
nav{justify-content:center}
.hero{padding:60px 7%;min-height:420px}
.hero h1{font-size:34px}
section{padding:45px 6%}
}


.keane-logo {
    display: block;
    width: 230px;
    max-width: 80%;
    height: auto;
    margin: 15px auto;
}


.keane-hero {
  background: linear-gradient(120deg, #0752ad, #1765b5);
  color: #ffffff;
  text-align: center;
  padding: 75px 20px;
  border-bottom: 9px solid #ffcc00;
}
.keane-hero .hero-content {
  max-width: 850px;
  margin: auto;
}
.keane-hero .hero-tag {
  display: inline-block;
  background: #ffcc00;
  color: #0752ad;
  padding: 10px 18px;
  border-radius: 30px;
  font-weight: bold;
}
.keane-hero h1 {
  font-size: clamp(30px, 6vw, 52px);
  margin: 25px 0 15px;
  color: #ffffff;
}
.keane-hero h2 {
  color: #ffdc32;
  font-size: clamp(20px, 4vw, 30px);
}
.keane-hero p {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.8;
  margin: 20px auto 30px;
}
.keane-cta {
  display: inline-block;
  background: #ffdc32;
  color: #0752ad;
  padding: 16px 28px;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
}
.keane-cta:hover {
  background: #ffffff;
}


.keane-about {
  padding: 55px 20px;
  text-align: center;
  background: #edf5ff;
}
.keane-about h2 {
  color: #0752ad;
}
.about-intro {
  max-width: 800px;
  margin: 20px auto 30px;
  line-height: 1.8;
  color: #174b85;
}
.about-points {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: auto;
}
.about-points div {
  background: #ffffff;
  border: 2px solid #ffdc32;
  border-radius: 14px;
  padding: 20px;
}
.about-points h3 {
  color: #0752ad;
}
.about-points p {
  color: #4675a6;
  line-height: 1.7;
}


.keane-map {
  max-width: 950px;
  margin: 35px auto 10px;
  padding: 20px;
  background: #edf5ff;
  border: 2px solid #ffdc32;
  border-radius: 15px;
  text-align: center;
}
.keane-map h3 {
  color: #0752ad;
}
.keane-map p {
  color: #174b85;
}
.keane-map iframe {
  display: block;
  margin: 20px 0;
}
.keane-map a {
  display: inline-block;
  padding: 12px 20px;
  background: #0752ad;
  color: white;
  border-radius: 8px;
  text-decoration: none;
}


.devis-box {
  max-width: 700px;
  margin: 35px auto;
  padding: 25px;
  background: #edf5ff;
  border: 2px solid #ffdc32;
  border-radius: 16px;
}
.devis-box h3 {
  color: #0752ad;
  text-align: center;
}
.devis-box p {
  color: #174b85;
  text-align: center;
  line-height: 1.6;
}
.devis-box label {
  display: block;
  margin: 15px 0 6px;
  color: #0752ad;
  font-weight: bold;
}
.devis-box input,
.devis-box select,
.devis-box textarea {
  width: 100%;
  padding: 13px;
  border: 1px solid #9bbce0;
  border-radius: 8px;
  background: #ffffff;
  color: #174b85;
  font-size: 16px;
  box-sizing: border-box;
}
.devis-box button {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  background: #ffdc32;
  color: #0752ad;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}

/* BOUTON WHATSAPP FLOTTANT KEANE */
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 20px;
    z-index: 9999;
    background: #ffcc00;
    color: #0756a5;
    padding: 13px 18px;
    border-radius: 40px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border: 2px solid white;
}

.whatsapp-float:hover {
    background: #ffffff;
    color: #0756a5;
}


/* AVIS DES CLIENTS */
.keane-testimonials {
    padding: 55px 20px;
    text-align: center;
    background: #ffffff;
    color: #0756a5;
}
.keane-testimonials h2 {
    color: #0756a5;
}
.testimonial-intro {
    max-width: 650px;
    margin: 15px auto 25px;
}
.testimonial-placeholder {
    max-width: 550px;
    margin: auto;
    padding: 25px;
    background: #f2f8ff;
    border: 2px solid #ffcc00;
    border-radius: 15px;
}
.testimonial-placeholder span {
    font-size: 35px;
}
.testimonial-placeholder h3 {
    color: #0756a5;
}
.testimonial-placeholder p {
    color: #0756a5;
}


/* PARTAGE DU SITE */
.keane-share {
    padding: 40px 20px;
    text-align: center;
    background: #0756a5;
    color: #ffffff;
}
.keane-share h2 {
    color: #ffcc00;
}
.share-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.share-buttons a {
    background: #ffcc00;
    color: #0756a5;
    padding: 13px 18px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
}


/* BOUTON WHATSAPP STYLE ORIGINAL */
.whatsapp-float {
    position: fixed;
    right: 18px;
    bottom: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 9px;
    background: #25D366;
    color: #ffffff;
    padding: 13px 19px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    border: none;
}

.whatsapp-float:hover {
    background: #128C7E;
    color: #ffffff;
}