/* shell.css — barre d'annonce, header (logo/nav/actions/megamenu), tiroir mobile, footer. Porte du theme FR. */

/* Barre d'annonce */
.kj-announcement{font-family:var(--font-body--family);font-size:var(--font-body--size);text-align:center;padding:10px var(--page-margin-mobile);line-height:1.5}
.kj-announcement a{color:inherit}

/* ============ HEADER ============ */
.kj-header{position:sticky;top:0;z-index:20;border-bottom:var(--separator-border-width,.5px) solid var(--color-border)}
.kj-header__inner{max-width:var(--page-width);margin:0 auto;padding:0 var(--page-margin-mobile);min-height:100px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}

/* Cluster gauche (mobile) : burger + loupe */
.kj-header__left{display:none;align-items:center;gap:4px;justify-self:start}

/* Logo : desktop a gauche, mobile centre. Le vrai logo est une image (custom logo). */
.kj-header__logo{justify-self:start;display:inline-flex;align-items:center;text-decoration:none;color:inherit;font-family:var(--font-heading--family);font-size:1.6rem;letter-spacing:.01em}
.kj-header__logo img,.kj-header__logo .custom-logo{height:70px;width:auto;display:block}
@media (min-width:1001px){.kj-header__logo img,.kj-header__logo .custom-logo{height:100px}}

/* Nav desktop */
.kj-nav{display:flex;gap:28px;justify-self:center;align-items:center}
.kj-nav__item{position:static}
.kj-nav__link{font-family:var(--font-body--family);font-size:1rem;color:inherit;display:inline-flex;align-items:center;gap:5px;padding:10px 0;cursor:pointer;background:none;border:none;text-decoration:none}
.kj-nav__link .icon{font-size:20px!important;transition:transform .25s}
.kj-nav__link[aria-expanded="true"] .icon--caret{transform:rotate(180deg)}

/* Panneau megamenu : pleine largeur sous le header (comme le FR) */
.kj-nav__panel{position:absolute;left:0;right:0;top:100%;background:var(--color-background);border-bottom:1px solid var(--color-border);box-shadow:0 14px 30px rgba(0,0,0,.06);z-index:19}
.kj-nav__panel-inner{max-width:var(--page-width);margin:0 auto;padding:.75rem 40px;display:flex;gap:20px}
.kj-mega-card{position:relative;flex:1 1 0;min-width:0;height:200px;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:10px;padding:var(--card-padding,1.5rem);overflow:hidden;isolation:isolate;text-decoration:none;color:#fff;background-color:#252525;background-size:cover;background-position:center}
.kj-mega-card::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent,rgba(0,0,0,var(--filter-opacity,.6)));z-index:0}
.kj-mega-card__title{position:relative;z-index:1;font-family:var(--font-h4--family);font-weight:400;font-size:var(--font-h4--size);line-height:var(--font-h4--line-height)}
.kj-mega-card .button{position:relative;z-index:1;background:#fff;color:#000;border-color:#fff}
.kj-mega-card:hover .button{opacity:.85}

/* Actions droite */
.kj-header__actions{display:flex;gap:14px;justify-self:end;align-items:center}
.kj-iconbtn{position:relative;background:none;border:none;cursor:pointer;color:inherit;display:inline-flex;padding:6px;text-decoration:none}
.kj-iconbtn .icon{font-size:23px!important}
.kj-cart-count{position:absolute;bottom:0;right:-2px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#000;color:#fff;font-size:.62rem;font-family:var(--font-body--family);display:flex;align-items:center;justify-content:center}

/* Bascule mobile (calee sur 1000px comme le FR) */
@media (max-width:1000px){
  .kj-nav{display:none}
  .kj-header__left{display:flex}
  .kj-header__inner{grid-template-columns:1fr auto 1fr;min-height:90px}
  .kj-header__logo{justify-self:center;font-size:1.4rem}
  .kj-header__actions .kj-search-desktop,.kj-header__actions .kj-iconbtn--account{display:none}
}

/* ============ TIROIR MOBILE ============ */
.kj-drawer{position:fixed;inset:0;z-index:1000}
.kj-drawer__overlay{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .25s}
.kj-drawer__panel{position:absolute;top:0;left:0;height:100%;width:90vw;max-width:380px;background:var(--color-background);box-shadow:0 0 40px rgba(0,0,0,.2);transform:translateX(-100%);transition:transform .25s ease;display:flex;flex-direction:column}
.kj-drawer.is-open .kj-drawer__overlay{opacity:1}
.kj-drawer.is-open .kj-drawer__panel{transform:translateX(0)}
.kj-drawer__head{display:flex;justify-content:flex-end;padding:12px 14px;border-bottom:1px solid var(--color-border)}
.kj-drawer__nav{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:2px}
.kj-drawer__link{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 10px;font-family:var(--font-body--family);font-size:1.05rem;color:inherit;text-decoration:none;border-radius:6px;cursor:pointer;list-style:none}
.kj-drawer__link:hover{background:var(--color-input-border-low-opacity)}
.kj-drawer__link--child{font-size:.95rem;padding:10px 10px 10px 20px;opacity:.85}
.kj-drawer__acc summary::-webkit-details-marker{display:none}
.kj-drawer__acc .icon--caret{font-size:18px!important;opacity:.55;transition:transform .2s}
.kj-drawer__acc[open] summary .icon--caret{transform:rotate(180deg)}

/* ============ FOOTER ============ */
.kj-reassure{border-top:1px solid var(--color-border)}
.kj-reassure__inner{max-width:var(--page-width);margin:0 auto;padding:34px var(--page-margin-mobile);display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.kj-reassure__col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.kj-reassure__col .icon{font-size:26px!important;opacity:.8}
.kj-reassure__col h6{margin:6px 0 0}
.kj-reassure__col p{margin:0;font-size:.85rem;opacity:.8;line-height:1.5}
.kj-footer{border-top:1px solid var(--color-border)}
.kj-footer__inner{max-width:var(--page-width);margin:0 auto;padding:52px var(--page-margin-mobile) 40px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.kj-footer__brand p{font-size:.85rem;opacity:.8;line-height:1.55;max-width:34ch;margin:14px 0 16px}
.kj-footer__logo{font-family:var(--font-heading--family);font-size:1.3rem}
.kj-social{display:flex;gap:12px}
.kj-social a{color:inherit;display:inline-flex}
.kj-social .icon{font-size:20px!important}
.kj-footer h6{margin:0 0 14px;font-size:.95rem}
.kj-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.kj-footer a{color:inherit;text-decoration:none;font-size:.85rem;opacity:.82}
.kj-footer a:hover{opacity:1;text-decoration:underline}
.kj-copyright{text-align:center;padding:22px;border-top:.5px solid var(--color-border);font-size:.8rem;opacity:.7}
@media (max-width:820px){.kj-reassure__inner{grid-template-columns:1fr;gap:22px}.kj-footer__inner{grid-template-columns:1fr 1fr;gap:32px}.kj-footer__brand{grid-column:1/-1}}