:root {
  --bleu: #0b4f8a;
  --bleu-fonce: #08365f;
  --bleu-clair: #eaf2fa;
  --vert: #1a7f4b;
  --texte: #1d2733;
  --gris: #5b6672;
  --bord: #d5dde6;
  --fond: #ffffff;
  --rayon: 10px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte); background: var(--fond); line-height: 1.6; font-size: 1.05rem;
  padding-bottom: 76px; /* place pour la barre fixe mobile */
}
.conteneur { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
section { padding: 2.2rem 0; border-top: 1px solid var(--bord); }
h1, h2, h3 { line-height: 1.25; color: var(--bleu-fonce); }
h1 { font-size: 1.8rem; margin: 0 0 .8rem; }
h2 { font-size: 1.4rem; margin: 0 0 .8rem; }
a { color: var(--bleu); }
:focus-visible { outline: 3px solid #f2a900; outline-offset: 2px; }

/* En-tête */
.hero { background: var(--bleu-clair); border-top: 0; padding: 2rem 0; }
.hero p { margin: 0 0 1.2rem; color: var(--gris); }
.logo-vaillant { display: block; height: 36px; width: auto; margin-bottom: 1rem; }
.hero-grille { display: grid; gap: 1.2rem; align-items: center; }
.hero-img { width: 100%; max-width: 320px; height: auto; border-radius: var(--rayon); justify-self: center; }

/* Boutons */
.boutons { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn {
  display: inline-block; padding: .8rem 1.2rem; border-radius: var(--rayon);
  font-weight: 600; text-decoration: none; text-align: center;
  background: var(--bleu); color: #fff; border: 2px solid var(--bleu); cursor: pointer; font-size: 1rem;
}
.btn:hover { background: var(--bleu-fonce); border-color: var(--bleu-fonce); }
.btn-wa { background: var(--vert); border-color: var(--vert); }
.btn-wa:hover { background: #135f39; border-color: #135f39; }
.btn-sec { background: #fff; color: var(--bleu); }
.btn-sec:hover { background: var(--bleu-clair); color: var(--bleu-fonce); }

/* Modèles */
.modeles { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.modeles li { background: var(--bleu-clair); border: 1px solid var(--bord); border-radius: 999px; padding: .25rem .9rem; font-weight: 600; }

/* Tarif */
.tarif { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.carte { border: 1px solid var(--bord); border-radius: var(--rayon); padding: 1rem 1.2rem; text-align: center; }
.carte strong { display: block; font-size: 2rem; color: var(--bleu); }

/* Étapes */
.etapes { list-style: none; counter-reset: e; padding: 0; margin: 0; display: grid; gap: .8rem; }
.etapes li { counter-increment: e; position: relative; padding-left: 3rem; min-height: 2.4rem; }
.etapes li::before {
  content: counter(e); position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: var(--bleu); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Images remplaçables */
.photos { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
.photos figure { margin: 0; }
.photos img {
  display: block; width: 100%; height: auto; border-radius: var(--rayon); background: #f3f6f9;
}
section p { max-width: 75ch; }
.grille-modeles { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.grille-modeles li { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: var(--rayon); overflow: hidden; text-align: center; background: #fff; }
.grille-modeles img { display: block; width: 100%; height: 220px; object-fit: contain; background: #eef2f6; }
.grille-modeles strong { display: block; padding: .6rem; color: var(--bleu-fonce); }
.ico { width: 1.2em; height: 1.2em; fill: currentColor; vertical-align: -.2em; }
.btn .ico { margin-right: .25rem; }
.logo-lbc {
  display: inline-block; background: #ff6e14; color: #fff; font-weight: 800; letter-spacing: -.02em;
  padding: 0 .5em; border-radius: 6px; line-height: 1.5;
}
.photos figcaption { text-align: center; color: var(--gris); font-size: .95rem; margin-top: .3rem; }

.video { display: block; width: 100%; max-width: 420px; max-height: 80vh; margin: .5rem auto 0; border-radius: var(--rayon); background: #000; }

/* Avis */
.avis { text-align: center; }
.avis p { margin-left: auto; margin-right: auto; }
.avis-entete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin-top: 1.2rem; }
.avis-entete .etoiles { font-size: 1.2rem; }
.note-entete { font-size: 1.4rem; color: var(--bleu); }
.total { margin-top: 1rem; font-size: 1.15rem; }
.total strong { color: var(--bleu); font-size: 1.4rem; }
.btn-petit { padding: .3rem .9rem; font-size: .95rem; }
.avis .note { font-size: 2.2rem; font-weight: 700; color: var(--bleu); }
.etoiles { color: #e6a100; letter-spacing: 2px; font-size: 1.4rem; }

/* Formulaire */
form { display: grid; gap: 1rem; }
label { font-weight: 600; display: block; margin-bottom: .25rem; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: .7rem; font: inherit; border: 1px solid #8a96a3; border-radius: 8px; background: #fff; color: var(--texte);
}
textarea { min-height: 130px; resize: vertical; }
[aria-invalid="true"] { border-color: #b3261e !important; border-width: 2px !important; }
.erreur { color: #b3261e; font-size: .95rem; margin: .25rem 0 0; min-height: 1.1em; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.consent input { width: 1.3rem; height: 1.3rem; margin-top: .25rem; flex: none; }
.rgpd { font-size: .9rem; color: var(--gris); margin: 0; }
.facultatif { font-weight: 400; color: var(--gris); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.envoi { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1rem; }
.envoi .btn { flex: none; }
.envoi .statut { flex: 1 1 260px; margin: 0; }
.statut:empty { display: none; }
.statut { padding: .8rem 1rem; border-radius: 8px; font-weight: 600; }
.statut-ok { background: #e3f4ea; color: #0f5a33; border: 1px solid #1a7f4b; }
.statut-err { background: #fdeceb; color: #8f1d17; border: 1px solid #b3261e; }

/* Pied de page */
footer { background: var(--bleu-fonce); color: #fff; padding: 1.5rem 0; font-size: .95rem; }
footer a { color: #fff; }

/* Barre fixe mobile */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: .5rem;
  padding: .6rem; background: #fff; border-top: 1px solid var(--bord); z-index: 10;
}
.barre-mobile .btn { flex: 1; padding: .8rem .4rem; }

/* Pages texte (mentions légales) */
.texte h2 { margin-top: 1.5rem; font-size: 1.2rem; }
.a-completer { background: #fff3c4; padding: 0 .3rem; border-radius: 4px; }

@media (min-width: 700px) {
  h1 { font-size: 2.3rem; }
  .tarif { grid-template-columns: repeat(4, 1fr); }
  .photos { grid-template-columns: 1fr 1fr; }
  .hero-grille { grid-template-columns: 1fr 320px; gap: 2rem; }
  .grille-modeles { grid-template-columns: repeat(4, 1fr); }
  body { padding-bottom: 0; }
  .barre-mobile { display: none; }
}