/* -----------------------------
       Style principal (HTML + CSS only)
       ----------------------------- */
    :root{
        --accent: #70C9F2;
        --accent-2: #308EB9;
        --muted: #272d3f;
      --bg:#f7f9fb;
      --card:#ffffff;
      --radius:12px;
      --container:1100px;
      --gap:1.25rem;
      --shadow: 0 6px 18px rgba(10,10,10,0.06);
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    }
    *{box-sizing:border-box}
    body{
      margin:0;
      background:var(--bg);
      color:#0b2a2e;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.5;
    }
    a{color:var(--accent); text-decoration:none}
    .wrap{max-width:var(--container); margin:0 auto; padding:1rem}

    /* Header */
    header{background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:white}
    .topbar{display:flex; align-items:center; justify-content:space-between; padding:1rem; gap:1rem}
    .logo{display:flex; align-items:center; gap:.75rem; font-weight:700}
    .logo .mark{width:100px; height:100px; border-radius:10px; background:rgba(255,255,255,0.12); display:grid; place-items:center}
    nav ul{list-style:none; display:flex; gap:1rem; margin:0; padding:0}
    nav a{color:rgba(255,255,255,0.95); padding:.5rem .6rem; border-radius:8px}
    nav a:hover{background:rgba(255,255,255,0.06)}

    /* Hero */
    .hero{display:grid; grid-template-columns:1fr 420px; gap:2rem; align-items:center; padding:3rem 1rem}
    .hero h1{font-size:2.1rem; margin:.25rem 0}
    .hero p{color:rgba(255,255,255,0.92); margin:0 0 1rem}
    .cta-row{display:flex; gap:.75rem}
    .btn{background:white; color:var(--accent-2); padding:.6rem 1rem; border-radius:10px; font-weight:600; box-shadow:var(--shadow); border:none}
    .btn.ghost{background:transparent; color:rgba(255,255,255,0.95); border:1px solid rgba(255,255,255,0.12)}
    .hero-card{background:rgba(255,255,255,0.08); padding:1rem; border-radius:12px; box-shadow: none}

    /* Services */
    /*.services{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1.25rem}
    .service{background:var(--card); padding:1rem; border-radius:12px; box-shadow:var(--shadow); min-height:120px}*/
	/* Replace the old .services rule with this */
.services {
  display: grid;
  /* create centered columns of a consistent card width;
     auto-fit makes it adapt to available space */
  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
  justify-content: center;   /* center the whole grid when there's extra space */
  gap: 1rem;
  margin-top: 1.25rem;
}

/* ensure the .service card looks consistent inside the column */
.service {
  width: 100%;
  max-width: 320px;
  margin: 0 auto; /* center inside its grid track (defensive) */
  background:var(--card);
  padding:1rem; border-radius:12px; box-shadow:var(--shadow); min-height:120px
}

    .svc-title{font-weight:700}
    .svc-desc{color:var(--muted); font-size:.95rem}

    /* Réalisations */
    .gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin:2rem 0}
    .gallery .item{background:linear-gradient(180deg,#e6f7f9,#f6fcfd); height:160px; border-radius:12px; display:flex; align-items:flex-end; padding:1rem; box-shadow:var(--shadow)}

    /* Témoignages (carousel) */
    .testimonials{background:linear-gradient(180deg,#ffff,#70C9F2); padding:1.25rem; border-radius:12px; box-shadow:var(--shadow)}
    .carousel{position:relative; overflow:hidden}
    .slides{display:flex; transition:transform .45s ease}
    .slide{min-width:100%; padding:1rem; box-sizing:border-box}
    .quote{background:linear-gradient(180deg,#f7f9fb,#E9F8FF); padding:1rem; border-radius:10px}
    .controls{display:flex; gap:.5rem; margin-top:.75rem}
    .dot{width:10px; height:10px; border-radius:50%; background:rgba(11,114,133,0.15); border:1px solid rgba(11,114,133,0.2)}
    .dot.active{background:#272d3f}

    /* Contact */
    .contact{display:grid; grid-template-columns:1fr 360px; gap:1rem; margin:2rem 0}
    form{background:var(--card); padding:1rem; border-radius:12px; box-shadow:var(--shadow)}
    label{display:block; font-weight:600; margin:0.5rem 0 .25rem}
    input, textarea{width:100%; padding:.6rem; border-radius:8px; border:1px solid #e6eef0}
    .contact-card{background:linear-gradient(180deg,#fff,#f4fbfc); padding:1rem; border-radius:12px; box-shadow:var(--shadow)}

    /* Footer */
    footer{padding:1rem; color:var(--muted); font-size:.95rem}

    /* Responsive */
    @media (max-width:980px){
      .hero{grid-template-columns:1fr; text-align:left}
      .gallery{grid-template-columns:repeat(2,1fr)}
      .services{grid-template-columns:repeat(2,1fr)}
      .contact{grid-template-columns:1fr}
    }
    @media (max-width:560px){
      nav ul{display:none}
      .topbar{gap:.5rem}
      .services{grid-template-columns:1fr}
      .gallery{grid-template-columns:1fr}
    }

    /* small helpers */
    .muted{color:var(--muted)}
    .badge{background:rgba(255,255,255,0.12); padding:.25rem .5rem; border-radius:8px}

/* Styles spécifiques au module Devis rapide (léger, n'écrase pas ton CSS global) */
    .devis-card {border:1px solid #e6eef0;border-radius:8px;padding:14px;background:#fff;margin-top:1rem;box-shadow:0 6px 18px rgba(5,20,30,0.03)}
    .devis-card h3{margin:0 0 8px 0}
    .devis-lines{width:100%;border-collapse:collapse;margin-top:8px}
    .devis-lines th,.devis-lines td{padding:8px;border-bottom:1px solid #f2f6f7;text-align:left;font-size:14px}
    .devis-lines th{font-weight:600;color:#233339}
    .devis-total{display:flex;justify-content:flex-end;gap:16px;margin-top:8px;align-items:center}
    .devis-total .box{min-width:160px;padding:8px;border-radius:6px;background:#f8fbfc;border:1px solid #eef6f7;text-align:right}
    .devis-actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:10px}
    .devis-actions .btn{padding:.5rem .75rem;border-radius:6px;border:0;cursor:pointer}
    .devis-actions .btn.ghost{background:#f3f3f3;color:#222}
    .no-print {display:inline-block}
    @media print{ .no-print{display:none!important} }
    /* adaptation responsive */
    @media (max-width:700px){ .devis-total{flex-direction:column;align-items:stretch} .devis-total .box{width:100%} .devis-actions{justify-content:stretch} }

/* compact appointment styles */
  .contact { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap }
  .contactFormWrap { flex:1 1 520px; min-width:280px }
  .contact-card { width:280px; min-width:240px }
  .hidden{display:none !important}
  /*#calendar{max-width:420px;border:1px solid #e6e6e6;padding:8px;border-radius:8px;background:#fff}*/
  .cal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
  .cal-weekday{font-size:12px;text-align:center;color:#666}
  .cal-day{min-height:44px;padding:6px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:default;background:transparent}
  .cal-day.disabled{color:#bbb;background:#fafafa}
  .cal-day.available{cursor:pointer;border:1px solid #cfe7d7;background:#f6fffa}
  .cal-day.selected{outline:3px solid #6ab47a}
  .cal-day.today{box-shadow:inset 0 0 0 2px #eef}
  #slots label{display:inline-flex;align-items:center;padding:6px 8px;margin:4px;border-radius:6px;border:1px solid #ddd;cursor:pointer;background:#fff}
  #slots label input{margin-right:8px}
  #msg{margin-top:12px;color:green}
  @media (max-width:880px){ .contact{flex-direction:column} .contact-card{width:100%} }
  .field { margin:0.5rem 0; display:block }
  label { display:block; margin-bottom:6px; font-weight:600 }
  input, select, textarea, button { font:inherit; padding:8px; border:1px solid #ccc; border-radius:6px; width:100%; box-sizing:border-box; }
  .form-actions { display:flex; gap:.5rem; margin-top:.5rem }

  /* Pricing grid styles */
  .price-section { margin-top:1rem; border-top:1px solid #eef2f3; padding-top:1rem }
  .price-section h3 { margin-bottom:0.25rem }
  .price-section .muted { margin-bottom:0.75rem; color:#6b7280 }

  .price-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1rem;
    margin-top:0.5rem;
  }

	/* === Button hover / active / focus (darken on hover & click) === */
.btn, .price-cta {
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:hover, .price-cta:hover {
  filter: brightness(0.92);
  box-shadow: 0 10px 26px rgba(10,10,10,0.06);
}

.btn:active, .price-cta:active {
  filter: brightness(0.84);
  transform: translateY(1px);
}

.btn.ghost:hover {
  background: rgba(255,255,255,0.06);
  filter: none;
}

.btn:focus, .price-cta:focus {
  outline: 3px solid rgba(11,114,133,0.12);
  outline-offset: 2px;
}

/* small utility to style primary .btn when used in modal etc. */
.btn.primary {
  background: #272d3f;
  color: #fff;
  border: 0;
}

/* === Modal / popup styles === */
.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12,18,20,0.5);
  z-index: 9999;
  padding: 1rem;
}

.modal {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem;
  width: clamp(300px, 92%, 480px);
  box-shadow: 0 20px 50px rgba(7,14,20,0.35);
  position: relative;
  color: #0b2a2e;
}

.modal h4 { margin: 0 0 .5rem 0; font-size:1.05rem }
.modal p { margin: 0; color: #334c4f }

/* close button */
.modal .modal-close {
  position: absolute;
  right: 10px;
  top: 10px;
  background: transparent;
  border: 0;
  font-size: 18px;
  cursor: pointer;
  color: #667;
}

/* actions area */
.modal .modal-actions { margin-top: 1rem; text-align: right }

/* small accessibility helper */
.hidden { display: none !important; }

  .price-card {
    background: #fff;
    border: 1px solid #e6eef0;
    padding:1rem;
    border-radius:10px;
    box-shadow: 0 1px 0 rgba(15,23,42,0.02);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:120px;
  }

  .price-card h4 { margin:0 0 .25rem 0; font-size:1rem }
  .price-amount { font-weight:700; font-size:1.1rem; margin-top:.5rem }
  .price-range { font-weight:600; color:#0b7285 }
  .price-note { font-size:13px; color:#666; margin-top:.25rem }

  .price-cta { margin-top:0.75rem; display:inline-block; text-decoration:none; padding:.5rem .6rem; border-radius:8px; border:1px solid transparent }
  .price-cta.primary { background:#272d3f; color:#fff }
  .price-cta.ghost { background:transparent; border-color:#e6eef0; color:#272d3f }

  @media (max-width:1100px){
    .price-grid{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:640px){
    .price-grid{grid-template-columns:1fr}
  }

/* Modal styles (minimal, accessible) */
.modal-overlay {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10, 15, 20, 0.45); z-index: 9999; padding: 1rem;
}
.modal-overlay.hidden{ display:none; }
.modal { background: #fff; border-radius: 10px; padding: 1rem 1.1rem; width: clamp(320px, 90%, 540px); box-shadow: 0 20px 40px rgba(5,10,20,0.25); color: #0b2a2e; position: relative; }
.modal h4 { margin: 0 0 .5rem 0; font-size: 1.05rem; }
.modal-body p { margin: 0 0 .5rem 0; color: #334155 }
.modal-list li { margin: 0.35rem 0; color:#7a2d2d; } /* errors in red-ish */
.modal-close { position: absolute; right: 10px; top: 8px; border: 0; background: transparent; font-size: 18px; cursor:pointer; color:#666 }
.btn.primary { background: #272d3f; color: #fff; padding: .5rem .7rem; border-radius:8px; border:0; cursor:pointer }

/* container */
.wave-divider {
  position: relative;
  line-height: 0;
  height: 88px; /* hauteur visible du composant - ajuste si besoin */
  overflow: visible; /* permet au 'behind' d'être visible */
}

/* top (visible, devant) */
.wave-divider .wave-top {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 3; /* devant */
  transform: scaleY(-1); /* si tu veux l'onde orientée vers le bas, sinon retire */
  transform-origin: 50% 50%;
}

/* behind: placé absolument, derrière la wave-top, décalé vers le bas pour "pointer" */
.wave-divider .wave-behind {
  display: block;
  width: 104%;          /* légèrement plus large pour créer l'effet de peek */
  height: 100%;
  position: absolute;
  left: -4%;            /* recentre l'agrandissement */
  top: 16px;             /* décale vers le bas (sous la top wave) */
  z-index: 2;           /* derrière la wave-top */
  opacity: 0.82;        /* fait-le plus subtil — ajuste entre 0.06 et 0.2 */
  pointer-events: none;
  transform: scaleY(-1); /* si tu as retourné la top wave pour qu'elle regarde vers le bas */
  transform-origin: 50% 50%;
  filter: blur(0px);    /* si tu veux un peu de flou, augmente */
}

header { position: relative; z-index: 5; }
main { position: relative; z-index: 1; }

.wave-divider-footer {
  line-height: 0;
  margin-bottom: -4px; /* chevauchement doux pour masquer bord blanc */
  position: relative;
  z-index: 2;
  height: 80px;
  overflow: hidden;
  background: transparent;
}

.wave-behind-darker {
  display: block;
  width: 104%;          /* légèrement plus large pour créer l'effet de peek */
  height: 100%;
  position: absolute;
  left: -2%;            /* recentre l'agrandissement */
  top: 16px;             /* décale vers le bas (sous la top wave) */
  z-index: 2;           /* derrière la wave-top */
  opacity: 0.82;        /* fait-le plus subtil — ajuste entre 0.06 et 0.2 */
  pointer-events: none;
  transform: scaleY(-1); /* si tu as retourné la top wave pour qu'elle regarde vers le bas */
  transform-origin: 50% 50%;
  filter: blur(0px);    /* si tu veux un peu de flou, augmente */
}

.wave-divider-footer svg { display: block; width: 100%; height: 100px; }

/* Ajuste le main pour que le chevauchement n'ajoute pas d'espace apparent */
main.wrap { position: relative; z-index: 1; }

/* ---------- Featured price card (highlight) ---------- */
.featured-price {
  margin: 1rem 0 0.75rem 0;
  padding: 0 0.5rem;
}
.featured-price-inner {
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  background: linear-gradient(180deg,#ffffff, #f6fbfc);
  border:1px solid rgba(6,37,42,0.06);
  padding:1rem;
  border-radius:12px;
  box-shadow: 0 8px 30px rgba(10,20,30,0.04);
}
.fp-left { flex:1 1 auto; min-width:0; }
.fp-right { display:flex; flex-direction:column; align-items:flex-end; gap:0.6rem; min-width:140px; }

.fp-title { font-weight:700; font-size:1.05rem; margin-bottom:0.25rem; color:#0b2a2e; }
.fp-sub { color:#556b6d; font-size:.94rem; margin-bottom:.6rem; }
.fp-features { margin:0; padding-left:1rem; color:#556b6d; font-size:0.92rem; }
.fp-features li { margin:0.2rem 0; }

/* price block */
.fp-price {
  font-weight:800;
  font-size:1.4rem;
  color:#0b7285;
  background: linear-gradient(180deg, rgba(11,114,133,0.06), rgba(11,114,133,0.02));
  padding:0.45rem 0.75rem;
  border-radius:8px;
  border:1px solid rgba(11,114,133,0.06);
}

/* CTA button in featured block */
.featured-price .price-cta.primary { padding: .5rem .75rem; }

/* responsive */
@media (max-width:880px) {
  .featured-price-inner { flex-direction:column; align-items:stretch; gap:.75rem; }
  .fp-right { align-items:flex-start; }
}

/* Small polish so the wave sits visually under the header */
header { position: relative; z-index: 3; }

/* ---------- Footer: même style que le header + intégration propre de la wave ---------- */

footer {
  /* même dégradé que header */
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #fff;                       /* texte blanc */
  padding: 1.25rem 1rem;             /* un peu plus d'espace */
  position: relative;
  z-index: 2;
}

/* le .wrap à l'intérieur du footer -> garder la mise en page existante */
footer .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0; /* on a déjà le padding sur footer */
}

/* liens dans le footer visibles sur fond foncé */
footer a, footer a:visited {
  color: rgba(255,255,255,0.95);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}

/* petites infos / texte secondaire en clair mais plus doux */
footer small, footer .muted {
  color: rgba(255,255,255,0.9);
  opacity: 0.95;
}

/* si la wave-footer chevauche le footer, s'assurer que le footer est au-dessus du body background */
.wave-divider-footer { z-index: 3; } /* wave juste au-dessus du main mais en-dessous du footer */
footer { z-index: 4; }

/* Ajustement responsive si nécessaire */
@media (max-width:640px) {
  footer .wrap { flex-direction:column; align-items:flex-start; gap:.5rem; }
}