/* ===== KUSTOM3D – PAGE BOX LIGHT ===== */
.kb { font-family: "Barlow", system-ui, sans-serif; color: #1C1C1E; }
.kb *, .kb *::before, .kb *::after { box-sizing: border-box; }
.kb p { display: contents !important; }
.kb br { display: none !important; }
.kb a { text-decoration: none !important; }
.kb img { margin: 0 !important; max-width: 100%; }
.kb-wrap { max-width: 1320px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.kb-cond { font-family: "Barlow Condensed", sans-serif !important; text-transform: uppercase !important; font-weight: 800 !important; letter-spacing: 0 !important; }
.kb-kicker { display: block; font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #C62828; }
.kb-h2 { display: block; margin: 6px 0 0 !important; font-size: 46px !important; line-height: 1 !important; color: #1C1C1E !important; }
.kb-btn { display: inline-flex !important; align-items: center; gap: 10px; height: 56px; padding: 0 28px !important; border-radius: 999px !important; background: #C62828; color: #FFFFFF !important; font-weight: 700; font-size: 17px; transition: transform .2s ease, background .2s ease; }
.kb-btn:hover { background: #A61F1F; transform: translateY(-2px); }
.kb-btn::after { content: ""; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4'%3E%3Cpath d='M12 5v14M6 13l6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; }

/* ---------- 1. BANNIÈRE ---------- */
.kb-hero { position: relative; background-color: #1C1C1E; color: #FFFFFF;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.6px); background-size: 16px 16px; }
.kb-hero-in { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding-top: 40px; padding-bottom: 130px; }
.kb-hero-txt { flex: 1 1 520px; min-width: 0; }
.kb-ariane { display: block; font-size: 14px; color: #A3A09B; }
.kb-ariane b { color: #FFFFFF; font-weight: 500; }
.kb-h1 { display: block; margin: 16px 0 0 !important; font-size: 76px !important; line-height: .93 !important; color: #FFFFFF !important; }
.kb-l2 { display: block; }
.kb-h1 em { font-style: normal; color: #E04848; }
.kb-lead { display: block; margin-top: 18px; max-width: 540px; font-size: 18px; line-height: 1.6; color: #C9C6C1; }
.kb-atouts { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.kb-atouts span { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; padding: 9px 16px; background: rgba(255,255,255,.08); font-size: 14px; font-weight: 600; }
.kb-atouts span::before { content: ""; width: 16px; height: 16px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E04848' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") no-repeat center / contain; }
.kb-hero-cta { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.kb-prix { font-size: 15px; color: #C9C6C1; }
.kb-prix b { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 28px; color: #FFFFFF; }
.kb-hero-img { flex: 1 1 560px; min-width: 0; position: relative; }
.kb-hero-img::before { content: ""; position: absolute; inset: 8% 6%; border-radius: 50%; background: #E04848; opacity: .18; filter: blur(60px); }
.kb-hero-cadre { position: relative; display: block; border-radius: 32px 32px 32px 120px; overflow: hidden; border: 1px solid #2E2E32; box-shadow: 0 30px 70px rgba(0,0,0,.45); }
.kb-hero-cadre img { display: block; width: 100% !important; height: 380px !important; object-fit: cover; }
.kb-hero-cadre em { position: absolute; left: 18px; bottom: 16px; font-style: normal; background: rgba(255,255,255,.12); color: #FFFFFF; border-radius: 999px; padding: 7px 14px; font-size: 12px; font-weight: 600; }
.kb-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 80px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C260,100 520,0 760,40 C1000,80 1220,90 1440,30 L1440,90 L0,90 Z' fill='%23F6F4F1'/%3E%3C/svg%3E") no-repeat bottom / 100% 100%; }

/* ---------- 2. ÉTAPES ---------- */
.kb-etapes { position: relative; margin-top: -56px; }
.kb-etapes-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.kb-etape { background: #FFFFFF; border-radius: 22px; padding: 20px; display: flex; gap: 14px; align-items: flex-start; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.kb-etape i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #1C1C1E; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-style: normal; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 20px; }
.kb-etape.rouge i { background: #C62828; }
.kb-etape span { display: flex; flex-direction: column; gap: 4px; }
.kb-etape b { font-size: 16px; }
.kb-etape small { font-size: 14px; line-height: 1.5; color: #5E5B57; }

/* ---------- 3. CONFIGURATEUR ---------- */
.kb-config { padding-top: 84px; padding-bottom: 40px; scroll-margin-top: 90px; }
.kb-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin-bottom: 22px; }
.kb-head small { max-width: 480px; font-size: 15px; line-height: 1.55; color: #5E5B57; }

/* ---------- 4. INCLUS ---------- */
.kb-inclus { padding-top: 60px; padding-bottom: 20px; }
.kb-titre-centre { text-align: center; margin-bottom: 24px !important; }
.kb-cartes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kb-carte { background: #FFFFFF; border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform .2s ease, box-shadow .2s ease; }
.kb-carte:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.kb-carte i { width: 52px; height: 52px; border-radius: 16px; background: #FBE9E7 no-repeat center / 26px 26px; }
.kb-carte b { font-size: 18px; }
.kb-carte small { font-size: 14.5px; line-height: 1.55; color: #5E5B57; }
.kb-ic-bloc { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2'%3E%3Cpath d='M12 3l8 4.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='M12 12l8-4.5M12 12v9M12 12L4 7.5'/%3E%3C/svg%3E") !important; }
.kb-ic-led { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2'%3E%3Cpath d='M9 18h6M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 00-3.5 10.9c.6.5 1 1.2 1 2.1h5c0-.9.4-1.6 1-2.1A6 6 0 0012 3z'/%3E%3C/svg%3E") !important; }
.kb-ic-prise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2'%3E%3Cpath d='M9 2v5M15 2v5'/%3E%3Cpath d='M6 7h12v4a6 6 0 01-12 0z'/%3E%3Cpath d='M12 17v5'/%3E%3C/svg%3E") !important; }
.kb-ic-atelier { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C62828' stroke-width='2'%3E%3Cpath d='M3 21h18M5 21V9l7-5 7 5v12'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E") !important; }

/* ---------- 5. INSPIRATIONS ---------- */
.kb-inspi { padding-top: 70px; padding-bottom: 20px; }
.kb-inspi .kb-head small { font-size: 14px; color: #6B6863; }
.kb-galerie { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.kb-photo { position: relative; display: block; height: 340px; border-radius: 26px; overflow: hidden; background: #0B0B0D; transition: transform .2s ease, box-shadow .2s ease; }
.kb-photo:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }
.kb-photo:first-child { border-radius: 26px 26px 26px 90px; background: #E9E5DF; }
.kb-photo:last-child { border-radius: 26px 90px 26px 26px; }
.kb-photo img { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.kb-photo:first-child img { object-fit: cover; }
.kb-photo em { position: absolute; left: 16px; bottom: 14px; font-style: normal; background: #FFFFFF; color: #1C1C1E; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; }

/* ---------- 6. PRO ---------- */
.kb-pro { padding-top: 70px; padding-bottom: 20px; }
.kb-pro-box { display: flex; flex-wrap: wrap; align-items: center; gap: 30px; border-radius: 34px; padding: 40px; color: #FFFFFF; background-color: #1C1C1E;
  background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.6px); background-size: 16px 16px; }
.kb-pro-txt { flex: 1 1 520px; min-width: 0; }
.kb-pro-txt .kb-kicker { color: #FF8A80; }
.kb-pro-txt .kb-h2 { color: #FFFFFF !important; margin-top: 8px !important; }
.kb-pro-txt small { display: block; margin-top: 12px; max-width: 560px; font-size: 16px; line-height: 1.6; color: #C9C6C1; }
.kb-pro-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.kb-pro-btns a { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 999px; font-weight: 700; font-size: 16px; }
.kb-pro-btns .rouge { background: #C62828; color: #FFFFFF !important; }
.kb-pro-btns .contour { border: 1px solid #4A4A50; color: #FFFFFF !important; }

/* ---------- 7. FAQ ---------- */
.kb-faq { max-width: 920px; padding-top: 70px; padding-bottom: 100px; }
.kb-faq details { background: #FFFFFF; border-radius: 18px; padding: 0 22px; margin: 0 0 10px; }
.kb-faq summary { list-style: none; cursor: pointer; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-weight: 700; font-size: 17px; }
.kb-faq summary::-webkit-details-marker { display: none; }
.kb-faq summary::after { content: "+"; flex: none; width: 30px; height: 30px; border-radius: 50%; background: #F1EDE8; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; transition: transform .2s ease; }
.kb-faq details[open] summary::after { transform: rotate(45deg); }
.kb-faq details > span { display: block; padding: 0 0 18px; font-size: 15px; line-height: 1.6; color: #5E5B57; }

/* ---------- TABLETTE ET MOBILE ---------- */
@media (max-width: 849px) {
  .kb-etapes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kb-galerie { grid-template-columns: 1fr; }
  .kb-photo { height: 260px; }
}
@media (max-width: 549px) {
  .kb-wrap { padding-left: 16px; padding-right: 16px; }
  .kb-h1 { font-size: 50px !important; }
  .kb-h2 { font-size: 34px !important; }
  .kb-hero-in { padding-bottom: 110px; }
  .kb-hero-cadre img { height: 240px !important; }
  .kb-etapes-grid, .kb-cartes { grid-template-columns: 1fr; }
  .kb-pro-box { padding: 30px 22px; }
}