/*
Theme Name: Hello Elementor Child
Theme URI: https://www.kheops-developpement.re
Description: Child theme de Hello Elementor pour Kheops Développement — gabarit single article fidèle à la source HubSpot.
Author: KAP
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* ===== Single article (fidèle source HubSpot) ===== */
.kh-art-hero{position:relative;min-height:430px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:150px 20px 56px;background-size:cover;background-position:center;text-align:center}
.kh-art-hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.55)}
.kh-art-hero>*{position:relative;z-index:1}
.kh-art-badge{display:inline-block;background:#377D9B;color:#fff;font-family:Nunito,sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;padding:6px 16px;border-radius:20px;margin-bottom:18px}
.kh-art-hero h1{color:#fff;font-family:Nunito,sans-serif;font-weight:700;font-size:33px;line-height:1.25;max-width:820px;margin:0 auto 16px}
.kh-art-meta{color:#fff;font-family:Nunito,sans-serif;font-size:15px;opacity:.95;margin:0 0 22px}
.kh-art-share{display:flex;flex-direction:column;align-items:center;gap:10px}
.kh-art-share-label{color:#fff;font-family:Nunito,sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em}
.kh-art-share-icons{display:flex;gap:12px}
.kh-art-share-icons a{width:40px;height:40px;border-radius:50%;background:#377D9B;color:#fff;display:flex;
  align-items:center;justify-content:center;font-size:16px;text-decoration:none;transition:transform .2s,background .2s}
.kh-art-share-icons a:hover{transform:scale(1.1);background:#2c647d}

.kh-art-body{max-width:820px;margin:48px auto;padding:0 20px;font-family:Nunito,sans-serif;color:#383838;font-size:16px;line-height:1.7}
.kh-art-body h2{color:#377D9B;font-weight:600;font-size:26px;text-transform:uppercase;margin:34px 0 14px}
.kh-art-body h3{color:#377D9B;font-weight:700;font-size:20px;margin:26px 0 12px}
.kh-art-body a{color:#377D9B}
.kh-art-body img{max-width:100%;height:auto;border-radius:4px}
.kh-art-body ul,.kh-art-body ol{padding-left:22px;margin:14px 0}
.kh-art-body li{margin:6px 0}
.kh-art-body table{width:100%;border-collapse:collapse;margin:18px 0}
.kh-art-body table td,.kh-art-body table th{border:1px solid #E7F1F5;padding:9px 12px}
.kh-art-body table th{background:#377D9B;color:#fff}

.kh-art-cta{text-align:center;margin:40px 0 10px}
.kh-art-cta a{display:inline-block;background:#377D9B;color:#fff;font-family:Nunito,sans-serif;font-weight:700;
  padding:12px 34px;border-radius:5px;text-decoration:none}
.kh-art-cta a:hover{background:#2c647d}

.kh-related{background:#fff;padding:50px 20px 60px}
.kh-related h2{text-align:center;color:#377D9B;font-family:Nunito,sans-serif;font-weight:600;font-size:30px;
  text-transform:uppercase;margin:0 0 34px}
.kh-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1080px;margin:0 auto}
.kh-rel-card{background:#fff;border:1px solid #eef3f5;border-radius:6px;overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.06);
  display:flex;flex-direction:column;text-decoration:none;transition:transform .2s,box-shadow .2s}
.kh-rel-card:hover{transform:translateY(-4px);box-shadow:0 10px 26px rgba(0,0,0,.12)}
.kh-rel-img{position:relative;height:170px;background-size:cover;background-position:center}
.kh-rel-date{position:absolute;top:10px;left:10px;background:#fff;color:#377D9B;font-family:Nunito,sans-serif;
  font-weight:700;font-size:11px;text-align:center;padding:5px 8px;border-radius:4px;line-height:1.1}
.kh-rel-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px}
.kh-rel-cat{display:inline-block;align-self:flex-start;background:#377D9B;color:#fff;font-family:Nunito,sans-serif;
  font-weight:700;font-size:10px;text-transform:uppercase;padding:4px 12px;border-radius:14px}
.kh-rel-card h3{color:#383838;font-family:Nunito,sans-serif;font-weight:700;font-size:16px;margin:0;line-height:1.3}
.kh-rel-excerpt{color:#6a6a6a;font-family:Nunito,sans-serif;font-size:13px;line-height:1.5;margin:0}
@media(max-width:900px){.kh-related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.kh-related-grid{grid-template-columns:1fr}.kh-art-hero h1{font-size:26px}}