/*
Theme Name: KB Bâtiment Scroll World
Theme URI: https://kbbatiment.fr
Author: KB Bâtiment
Description: Site vitrine scroll-world interactif pour KB Bâtiment — maçonnerie générale et démolition. Fonctionne tel quel ; Advanced Custom Fields (optionnel) permet de gérer galerie, textes de contact et logo depuis l'administration.
Version: 1.1
Requires at least: 5.9
Requires PHP: 7.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kb-batiment
*/

/* Les styles du moteur de scroll sont injectés par scrub-engine.js.
   Ci-dessous : le thème de la page et les deux sections statiques. */

:root,
.sw-root {
  --sw-bg: #F2F0EB;
  --sw-ink: #1C1C1C;
  --sw-ink-soft: #5A5A56;
  --sw-accent: #E8590C;
}

html, body { margin: 0; padding: 0; }

/* La barre d'admin WordPress décale le haut de page et passerait par-dessus
   la barre fixe du moteur. On redescend celle-ci d'autant. */
body.admin-bar .sw-topbar { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .sw-topbar { top: 46px; }
}

/* ---------- Réalisations ---------- */
#realisations {
  position: relative; z-index: 1;
  background: var(--sw-bg, #F2F0EB); color: #1C1C1C;
  padding: clamp(48px, 8vw, 96px) clamp(18px, 5vw, 64px) clamp(24px, 4vw, 48px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
#realisations .realisations-inner { max-width: 1100px; margin: 0 auto; }
#realisations .realisations-eyebrow {
  display: block; font-weight: 700; font-size: .8rem; letter-spacing: .16em;
  text-transform: uppercase; color: #E8590C; margin-bottom: 10px;
}
#realisations h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 32px; }
.realisations-grid { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.realisations-grid .wp-block-image { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 14px; }
.realisations-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.realisations-grid .wp-block-image:hover img { transform: scale(1.06); }
@media (max-width: 860px) { .realisations-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Contact ---------- */
#contact {
  position: relative; z-index: 1;
  background: #1C1C1C; color: #F2F0EB;
  padding: clamp(48px, 8vw, 96px) clamp(18px, 5vw, 64px) clamp(64px, 10vw, 120px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
#contact .contact-inner { max-width: 720px; margin: 0 auto; }
#contact h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 12px; }
#contact p.lead { color: #C9C6C0; margin: 0 0 32px; font-size: 1.05rem; }
#contact .contact-direct { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 36px; }
#contact .contact-direct a {
  color: #F2F0EB; text-decoration: none; font-weight: 600; padding: 12px 20px;
  border-radius: 999px; border: 1.5px solid rgba(242,240,235,.25);
  transition: border-color .2s, background .2s;
}
#contact .contact-direct a:hover { border-color: #E8590C; background: rgba(232,89,12,.12); }
#contact form { display: grid; gap: 14px; }
#contact label { font-size: .85rem; color: #C9C6C0; display: block; margin-bottom: 6px; }
#contact input, #contact textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid rgba(242,240,235,.2); background: rgba(242,240,235,.06);
  color: #F2F0EB; font: inherit; font-size: 1rem;
}
#contact input:focus, #contact textarea:focus { outline: none; border-color: #E8590C; }
#contact textarea { min-height: 120px; resize: vertical; }
#contact button[type="submit"] {
  justify-self: start; margin-top: 6px; font: inherit; font-weight: 700; font-size: .95rem;
  color: #1C1C1C; background: #E8590C; border: 0; padding: 14px 28px; border-radius: 999px;
  cursor: pointer; transition: transform .2s;
}
#contact button[type="submit"]:hover { transform: translateY(-2px); }
#contact button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; transform: none; }
#contact .form-note { margin-top: 14px; font-size: .88rem; color: #C9C6C0; min-height: 1.2em; }
#contact .form-note.success { color: #7BD88F; }
#contact .form-note.error { color: #FF8A8A; }