/* ==========================================================================
   korbyx-nav.css - header (barre blanche, liens de menu, panneaux pleine
   largeur sombres facon HP) + drawer + footer (style page d'accueil). Charte HP.
   ========================================================================== */

/* --- Header : barre blanche, fixe. Masque au scroll bas / revient au scroll haut (facon HP). --- */
.kx-header { position: fixed; left: 0; right: 0; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(18, 1, 45, 0.07); transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .3s; will-change: transform; }
.kx-header.is-hidden { transform: translateY(-100%); }
.kx-header.is-scrolled { box-shadow: 0 10px 30px -20px rgba(18, 1, 45, 0.28); }
.kx-header__bar { max-width: var(--kx-content); margin-inline: auto; padding: .85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; transition: padding .3s; }
.kx-header.is-scrolled .kx-header__bar { padding-block: .55rem; }
/* Reserve la place du header fixe (hauteur calee en JS) */
.kx-header-spacer { height: 4rem; }

.kx-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--kx-navy); font-weight: 600; text-decoration: none; font-size: 1.15rem; }
.kx-brand__mark { width: 2rem; height: 2rem; color: var(--kx-violet); flex: none; transition: width .3s, height .3s; }
.kx-header.is-scrolled .kx-brand__mark { width: 1.7rem; height: 1.7rem; }

.kx-nav { display: none; }
@media (min-width: 1024px) { .kx-nav { display: block; } }
.kx-nav__list { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.kx-nav__item { position: static; }

/* Liens de 1er niveau : reset DUR du <button> (Astra le stylise en bouton sinon) */
.kx-nav__trigger,
.kx-nav__trigger:hover,
.kx-nav__trigger:focus,
.kx-nav__trigger:active {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.kx-nav__trigger { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; color: rgba(18, 1, 45, 0.7); font: inherit; font-size: .9rem; font-weight: 500; padding: .55rem .8rem; border-radius: .5rem; transition: color .2s; outline: none; }
.kx-nav__item:hover .kx-nav__trigger, .kx-nav__item.is-open .kx-nav__trigger, .kx-nav__trigger:hover { color: var(--kx-navy); }
.kx-chev { width: .8rem; height: .8rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .55; transition: transform .3s; }
.kx-nav__item:hover .kx-chev, .kx-nav__item.is-open .kx-chev { transform: rotate(180deg); }

/* --- Panneau pleine largeur (sombre, facon HP) --- */
.kx-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 90; background: var(--kx-lavender-90); border-top: 1px solid rgba(91, 38, 254, 0.12); box-shadow: 0 24px 50px -30px rgba(18, 1, 45, 0.3); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .22s, transform .22s, visibility .22s; }
.kx-nav__item:hover .kx-panel, .kx-nav__item.is-open .kx-panel { opacity: 1; visibility: visible; transform: none; }
.kx-panel__inner { max-width: var(--kx-content); margin-inline: auto; padding: 2.25rem 1.5rem; display: grid; gap: 2rem; }
.kx-panel__inner--featured { grid-template-columns: 1fr 19rem; }
.kx-panel__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem 2rem; }
.kx-panel__title { font-family: var(--kx-font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--kx-violet); margin: 0 0 .75rem; }
.kx-panel__col ul { list-style: none; margin: 0; padding: 0; }
.kx-panel__col a { display: block; color: var(--kx-navy); text-decoration: none; padding: .45rem .6rem; margin-inline: -.6rem; border-radius: .5rem; font-size: .92rem; transition: background-color .2s; }
.kx-panel__col a:hover { background: #fff; }

.kx-panel__featured { align-self: start; display: flex; flex-direction: column; gap: .75rem; padding: 1.5rem; border-radius: var(--kx-radius-card); background: #fff; box-shadow: inset 0 0 0 1px rgba(91, 38, 254, 0.16); text-decoration: none; transition: box-shadow .25s; }
.kx-panel__featured:hover { box-shadow: inset 0 0 0 1px rgba(91, 38, 254, 0.45); }
.kx-panel__fmark { width: 1.6rem; height: 1.6rem; color: var(--kx-violet); }
.kx-panel__ftitle { display: block; color: var(--kx-navy); font-weight: 600; }
.kx-panel__fdesc { display: block; color: var(--kx-navy-50); font-size: .85rem; margin-top: .25rem; }
.kx-panel__flink { display: inline-block; color: var(--kx-violet); font-weight: 600; font-size: .85rem; }

/* Menus legers (Realisations, Ressources, Agence) : panneau compact (1 colonne + encart), carte ajustee au contenu, alignee a droite */
.kx-nav__item--compact { position: relative; }
.kx-panel--compact { left: auto; right: 0; top: calc(100% + .4rem); border-top: 0; border-radius: var(--kx-radius-card); box-shadow: 0 24px 60px -24px rgba(18, 1, 45, 0.3), inset 0 0 0 1px rgba(91, 38, 254, 0.12); }
.kx-panel--compact .kx-panel__inner { max-width: none; margin: 0; width: max-content; padding: 1.5rem; }
.kx-panel--compact .kx-panel__cols { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(12rem, max-content); gap: 1.25rem 2rem; }
.kx-panel--compact .kx-panel__inner--featured { grid-template-columns: 1fr 14rem; }

/* --- CTA header : "Discutez avec nous" + bouton audit outline (HP) --- */
.kx-header__cta { display: none; align-items: center; gap: 1.25rem; }
@media (min-width: 1024px) { .kx-header__cta { display: flex; } }
.kx-chat { display: inline-flex; align-items: center; gap: .6rem; color: rgba(18, 1, 45, 0.75); text-decoration: none; font-size: .85rem; font-weight: 500; transition: color .2s; }
.kx-chat:hover { color: var(--kx-navy); }
.kx-chat__ic { position: relative; display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(18, 1, 45, 0.18); transition: border-color .2s; }
.kx-chat:hover .kx-chat__ic { border-color: var(--kx-mint); }
.kx-chat__ic svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.kx-chat__dot { position: absolute; top: 0; right: 0; width: .5rem; height: .5rem; border-radius: 9999px; background: var(--kx-mint); box-shadow: 0 0 0 2px #fff; }
@media (max-width: 1279px) { .kx-chat__label { display: none; } }

.kx-btn-audit { display: inline-flex; align-items: center; justify-content: center; padding: .65rem 1.2rem; border-radius: var(--kx-radius-btn); background: var(--kx-mint); color: var(--kx-navy); border: 0; text-decoration: none; font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; transition: transform .25s, box-shadow .25s, border-color .25s, color .25s; }
.kx-btn-audit:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -6px rgba(26, 236, 222, 0.6); }
.kx-header__cta .kx-btn-audit { background: transparent; color: var(--kx-navy); border: 1px solid rgba(18, 1, 45, 0.22); }
.kx-header__cta .kx-btn-audit:hover { transform: none; border-color: var(--kx-mint); box-shadow: 0 0 18px rgba(26, 236, 222, 0.35); }

.kx-burger { display: inline-flex; background: none; border: 0; color: var(--kx-navy); cursor: pointer; padding: .4rem; }
.kx-burger svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (min-width: 1024px) { .kx-burger { display: none; } }

/* --- Drawer mobile (overlay sombre) --- */
.kx-drawer { position: fixed; inset: 0; z-index: 110; visibility: hidden; }
.kx-drawer.is-open { visibility: visible; }
.kx-drawer__scrim { position: absolute; inset: 0; background: rgba(15, 2, 38, 0.6); border: 0; opacity: 0; transition: opacity .3s; cursor: pointer; }
.kx-drawer.is-open .kx-drawer__scrim { opacity: 1; }
.kx-drawer__panel { position: absolute; inset: 0 0 0 auto; width: min(22rem, 90vw); background: var(--kx-navy); color: #fff; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .3s; }
.kx-drawer.is-open .kx-drawer__panel { transform: none; }
.kx-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.kx-drawer__head .kx-brand { color: #fff; font-size: 1rem; }
.kx-drawer__head .kx-brand__mark { width: 1.5rem; height: 1.5rem; color: var(--kx-mint); }
.kx-drawer__x { background: none; border: 0; color: rgba(255, 255, 255, 0.7); cursor: pointer; }
.kx-drawer__x svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.kx-drawer__nav { flex: 1; overflow-y: auto; padding: 1rem 1.5rem 2rem; }
.kx-drawer__group { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 1rem 0; }
.kx-drawer__label { font-family: var(--kx-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--kx-mint); margin: 0 0 .6rem; }
.kx-drawer__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.kx-drawer__group a { color: rgba(255, 255, 255, 0.78); text-decoration: none; font-size: .92rem; }
.kx-drawer__group a:hover { color: #fff; }
.kx-drawer__foot { padding: 1.25rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.kx-drawer__foot .kx-btn-audit { display: flex; }

/* --- Footer (style page d'accueil) --- */
.kx-footer { position: relative; overflow: hidden; background: var(--kx-navy-deep); color: #fff; }
.kx-footer::before, .kx-footer::after { content: ""; position: absolute; border-radius: 9999px; filter: blur(60px); pointer-events: none; }
.kx-footer::before { left: -6rem; top: -4rem; width: 24rem; height: 24rem; background: rgba(91, 38, 254, 0.2); }
.kx-footer::after { right: 0; bottom: -8rem; width: 24rem; height: 24rem; background: rgba(91, 38, 254, 0.15); }
.kx-footer__inner { position: relative; max-width: var(--kx-content); margin-inline: auto; padding-inline: 1.5rem; }

.kx-footer__nl { display: grid; gap: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 3.5rem 0; }
@media (min-width: 768px) { .kx-footer__nl { grid-template-columns: 1fr 1fr; align-items: center; } }
.kx-footer__nl h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 600; line-height: 1.2; margin: 0; }
.kx-footer__nl p { margin: .75rem 0 0; color: rgba(255, 255, 255, 0.6); max-width: 28rem; }
@media (min-width: 768px) { .kx-footer__nl > div:last-child { justify-self: end; width: 100%; max-width: 28rem; } }
.kx-nl { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 480px) { .kx-nl { flex-direction: row; } }
.kx-nl input { flex: 1; min-width: 0; border-radius: var(--kx-radius-btn); border: 1px solid rgba(255, 255, 255, 0.15); background: rgba(255, 255, 255, 0.05); padding: .75rem 1rem; color: #fff; font: inherit; font-size: .9rem; }
.kx-nl input::placeholder { color: rgba(255, 255, 255, 0.4); }
.kx-nl input:focus { outline: none; border-color: var(--kx-mint); box-shadow: 0 0 0 2px rgba(26, 236, 222, 0.35); }
.kx-nl button { flex: none; border: 0; border-radius: var(--kx-radius-btn); background: var(--kx-mint); color: var(--kx-navy); padding: .75rem 1.25rem; font: inherit; font-size: .85rem; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: box-shadow .25s; }
.kx-nl button:hover { box-shadow: 0 0 24px rgba(26, 236, 222, 0.5); }
.kx-nl__ok { color: var(--kx-mint); font-weight: 500; }

.kx-footer__main { display: grid; gap: 2.5rem; padding: 3.5rem 0; }
@media (min-width: 1024px) { .kx-footer__main { grid-template-columns: 1.5fr 3fr; gap: 3rem; } }
.kx-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
@media (min-width: 700px) { .kx-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.kx-footer__brand .kx-brand { color: #fff; }
.kx-footer__brand .kx-brand__mark { color: var(--kx-mint); }
.kx-footer__tag { margin: 1rem 0 1.25rem; font-size: .9rem; line-height: 1.6; color: rgba(255, 255, 255, 0.6); max-width: 20rem; }
.kx-corebyx { display: block; margin-bottom: 1.25rem; padding: .9rem 1rem; border-radius: var(--kx-radius-card); background: linear-gradient(150deg, rgba(91, 38, 254, 0.3), transparent); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); text-decoration: none; transition: box-shadow .25s; }
.kx-corebyx:hover { box-shadow: inset 0 0 0 1px rgba(26, 236, 222, 0.4); }
.kx-corebyx b { color: #fff; font-weight: 600; }
.kx-corebyx span { display: block; color: rgba(255, 255, 255, 0.6); font-size: .82rem; margin-top: .15rem; }
.kx-corebyx em { color: var(--kx-mint); font-size: .82rem; font-weight: 600; font-style: normal; }
.kx-social { display: inline-flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.7); transition: color .2s, border-color .2s; }
.kx-social:hover { color: var(--kx-mint); border-color: var(--kx-mint); }
.kx-footer__col p { font-family: var(--kx-font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--kx-mint); margin: 0 0 1rem; }
.kx-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.kx-footer__col a { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: .88rem; transition: color .2s; }
.kx-footer__col a:hover { color: #fff; }

.kx-footer__local { position: relative; display: flex; flex-wrap: wrap; gap: .5rem 1rem; padding: 1.5rem 0; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: .82rem; color: rgba(255, 255, 255, 0.5); }
.kx-footer__local a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.kx-footer__legal { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: .8rem; color: rgba(255, 255, 255, 0.5); }
.kx-footer__legal nav { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.kx-footer__legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.kx-footer__local a:hover, .kx-footer__legal a:hover { color: var(--kx-mint); }

@media (prefers-reduced-motion: reduce) {
  .kx-header, .kx-panel, .kx-drawer__scrim, .kx-drawer__panel { transition: none; }
}