/* KARUBAT — blocs communs : engagements, « Votre projet ressemble à… » et pied de page.
   Classes préfixées kb- pour ne pas interférer avec metiers.css, navigation.css ni les styles
   intégrés de projet.html / mentions-legales.html. Polices : celles déjà chargées par chaque page. */
.kb-promises,.kb-scenarios,.kb-footer{--kb-bg:#101313;--kb-ink:#efece4;--kb-muted:#bcc4bc;--kb-copper:#e58e54;--kb-line:#eee9da29;--kb-display:"Barlow Condensed",Impact,"Arial Narrow",sans-serif}

/* Engagements */
.kb-promises{border-top:1px solid var(--kb-line);border-bottom:1px solid var(--kb-line);background:#121716}
.kb-promises ul{list-style:none;margin-block:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.kb-promises li{padding:30px clamp(18px,2.4vw,40px);display:flex;flex-direction:column;gap:7px}
.kb-promises li:first-child{padding-left:0}
.kb-promises li:last-child{padding-right:0}
.kb-promises li+li{border-left:1px solid var(--kb-line)}
.kb-promises strong{display:flex;align-items:baseline;gap:10px;font:600 21px/1.15 var(--kb-display);text-transform:uppercase;letter-spacing:.02em;color:var(--kb-ink)}
.kb-promises strong:before{content:"+";color:var(--kb-copper);font-size:20px}
.kb-promises span{color:var(--kb-muted);font-size:14px;line-height:1.65}

/* Votre projet ressemble à… */
.kb-scenarios{padding-block:clamp(60px,7.5vw,120px)}
.kb-scenarios-intro{max-width:620px;margin:-14px 0 0;color:var(--kb-muted);font-size:15px}
.kb-scenario-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-top:42px;background:var(--kb-line);border:1px solid var(--kb-line)}
.kb-scenario{position:relative;overflow:hidden;display:flex;flex-direction:column;background:var(--kb-bg);padding:30px 26px 76px;transition:background .3s}
.kb-scenario:hover{background:#161d1b}
.kb-scenario-letter{font:600 17px/1 var(--kb-display);color:var(--kb-copper);letter-spacing:.08em}
.kb-scenario h3{font:600 27px/1.02 var(--kb-display);text-transform:uppercase;letter-spacing:.005em;margin:16px 0 14px;color:var(--kb-ink)}
.kb-scenario p{color:var(--kb-muted);font-size:14.5px;line-height:1.65}
.kb-scenario a{position:absolute;left:26px;right:26px;bottom:26px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:6px;border-bottom:1px solid #e58e5466;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--kb-ink);text-decoration:none;transition:color .2s,border-color .2s}
.kb-scenario a svg{flex:none;width:16px;height:16px;color:var(--kb-copper)}
.kb-scenario a:after{content:"";position:absolute;inset:-400px -26px -26px}
.kb-scenario:hover a{color:var(--kb-copper);border-color:var(--kb-copper)}
.kb-scenario a:focus-visible{outline:2px solid var(--kb-copper);outline-offset:3px}

/* Pied de page */
.kb-footer{border-top:1px solid var(--kb-line);background:#0c1010;color:var(--kb-ink);padding:58px var(--pad,4.5vw) 38px;font:400 14px/1.7 Manrope,Arial,sans-serif}
.kb-footer-grid{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr) minmax(0,.75fr);gap:40px}
.kb-footer a{color:inherit;text-decoration:none}
.kb-wordmark{display:inline-flex;align-items:flex-start;gap:5px;font:600 40px/1 var(--kb-display);letter-spacing:.012em}
.kb-wordmark .kb-square{width:6px;height:6px;margin-top:5px;background:var(--kb-copper)}
.kb-footer-brand p{color:var(--kb-muted);margin:14px 0 0;max-width:390px}
.kb-footer .kb-footer-phone{display:inline-block;margin-top:18px;font:600 26px/1 var(--kb-display);letter-spacing:.04em;color:#e8ae7b}
.kb-footer .kb-footer-phone:hover{color:#f6c89f}
.kb-footer-copy{font-size:12px!important;letter-spacing:.06em;color:#9aa298!important;margin-top:18px!important}
.kb-footer-title{margin:0 0 14px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--kb-copper)}
.kb-footer nav a{display:block;width:fit-content;padding:5px 0;color:#d1d7cc;transition:color .2s}
.kb-footer nav a:hover,.kb-footer nav a[aria-current="page"]{color:var(--kb-copper)}
.kb-footer a:focus-visible{outline:2px solid var(--kb-copper);outline-offset:3px}

/* Fond quadrillé (de « Votre lieu. Vos envies. » jusqu'aux métiers), fondu en haut et en bas */
.kb-grid-bg{position:relative;isolation:isolate}
.kb-grid-bg:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(#ffffff0e 1px,transparent 1px),linear-gradient(90deg,#ffffff0e 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 90px,#000 calc(100% - 90px),transparent 100%)}

/* FAQ : introduction sous le titre */
.kb-faq-intro{margin-top:22px;max-width:420px;color:#bcc4bc;font-size:15px;line-height:1.7}

/* Zone d'intervention (bandeau de contact) */
.contact-banner p.kb-zone{margin-top:22px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#bcc4bc}

/* Surtitres : même style partout (les règles « .process p », « .local-focus p » et
   « .contact-banner p » de metiers.css écrasaient la taille et la couleur de .eyebrow) */
.process p.eyebrow,.local-focus p.eyebrow,.contact-banner p.eyebrow{font-size:11px;letter-spacing:.16em;color:var(--copper,#e58e54);max-width:none;margin:0}
@media(max-width:540px){.process p.eyebrow,.local-focus p.eyebrow,.contact-banner p.eyebrow{font-size:10px;letter-spacing:.12em}}

/* Méthode en 5 étapes — design d'origine : ligne continue, carrés cuivre, chiffres en contour */
@font-face{font-family:"KB Manrope Medium";src:url("metiers/manrope-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"KB Barlow Medium";src:url("metiers/barlow-condensed-500.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
.kb-grid-bg--process{padding-block:30px 20px}
.process ol.kb-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:56px;list-style:none;padding:0}
.process ol.kb-steps li{position:relative;border-top:0;padding:28px 22px 0 0;display:block}
.process ol.kb-steps li:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:#ffffff33}
.process ol.kb-steps li:after{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;background:#e58e54}
.process .kb-step-num{display:block;margin-bottom:14px;font:500 46px/1 "KB Barlow Medium","Barlow Condensed",Impact,sans-serif;color:transparent;-webkit-text-stroke:1px #e58e54}
.process .kb-steps h3{margin:0 0 8px;font:500 17px/1.4 "KB Manrope Medium",Manrope,Arial,sans-serif;color:#efece4}
.process .kb-steps p{grid-column:auto;max-width:none;font-size:15px;line-height:1.65;color:#bcc4bc}
.hero:after{display:none}

/* Cadres « Bon à savoir en Guadeloupe » dans les métiers */
.service .kb-know{margin-top:26px;padding:20px 22px;border-left:2px solid #e58e54;background:linear-gradient(90deg,#e58e5414,#e58e5405)}
.service .kb-know p.kb-know-title{margin:0 0 8px;font-size:10px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:#e58e54}
.service .kb-know p:not(.kb-know-title){font-size:14px;line-height:1.75;color:#e4ddd2;max-width:none}
.service .kb-know+.text-link{margin-top:20px}

@media(max-width:1100px){.kb-scenario-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.process ol.kb-steps{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:36px}}
@media(max-width:760px){.kb-footer{padding-inline:var(--pad,6vw)}}
@media(max-width:850px){
  .kb-promises ul{grid-template-columns:1fr}
  .kb-promises li{padding:22px 0}
  .kb-promises li+li{border-left:0;border-top:1px solid var(--kb-line)}
  .kb-footer-grid{grid-template-columns:1fr 1fr}
  .kb-footer-brand{grid-column:1/-1}
}
@media(max-width:620px){.process ol.kb-steps{grid-template-columns:1fr;row-gap:30px}.process ol.kb-steps li{padding-right:0}.process .kb-steps p{font-size:14px}}
@media(max-width:540px){
  .kb-scenario-grid,.kb-footer-grid{grid-template-columns:1fr}
  .service .kb-know{padding:18px 18px}
  .kb-scenario{padding:26px 22px 72px}
  .kb-scenario a{left:22px;right:22px}
  .kb-scenario h3{font-size:25px}
  .kb-wordmark{font-size:34px}
  .kb-footer{padding-top:46px}
}
@media(prefers-reduced-motion:reduce){.kb-scenario,.kb-scenario a,.kb-footer nav a{transition:none}}
@media(forced-colors:active){.kb-scenario a{border-color:LinkText}}
@media print{.kb-scenarios,.kb-footer{display:none}}