/* La coquille commune de kyras.ai : les menus de la nav, le tiroir par groupes, le pied à cinq colonnes.
   Chargée par la landing (lp/index.html) ET par les pages secondaires, après les jetons de la landing. */
/* ── Les menus de la nav (une nav, quatre portes) ───────────────────────────────────────────────── */
.pill .links .m{position:relative}
.pill .links .m>button{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:15px;font-weight:700;color:var(--nav-text,#4E5F5D);padding:9px 12px;border-radius:var(--r-pill);transition:background .18s,color .18s}
.pill .links .m>button:hover,.pill .links .m.open>button{color:var(--ink);background:#F1F4F2}
.pill .links .m.on>button{color:var(--ink);background:#EDF1EF}
.pill .links .m>button svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.pill .links .m.open>button svg{transform:rotate(180deg)}
.mpanel{position:absolute;top:calc(100% + 16px);left:50%;translate:-50% 0;min-width:520px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.mpanel::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.m.open>.mpanel{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .3s var(--ease),visibility 0s}
.mpanel a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;padding:12px 14px;border-radius:14px}
.mpanel a:hover,.mpanel a:focus-visible{background:#F1F4F2}
.mpanel a b{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;grid-column:2}
.mpanel a span{font-size:14px;line-height:1.4;color:var(--muted);grid-column:2}
.mpanel a .lg{grid-row:1/3;grid-column:1;width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:#fff;display:grid;place-items:center}
.mpanel a .lg img{width:20px;height:20px}
.mpanel .all{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:14px 16px;border-radius:14px;background:var(--paper);font-size:15px;font-weight:700}
.mpanel .all:hover{background:#F1F4F2}
.mpanel .all svg{width:15px;height:15px}
@media (prefers-reduced-motion:reduce){.mpanel,.m.open>.mpanel,.pill .links .m>button svg{transition:none}}

/* Le tiroir mobile, par groupes */
.drawer .grp{padding:10px 16px 4px;font-size:13px;font-weight:700;color:var(--faint)}
.drawer .grp+a{padding-top:10px}
.drawer{max-height:calc(100dvh - 104px);overflow:auto}

/* ── Pied : cinq colonnes ───────────────────────────────────────────────────────────────────────── */
footer .cols.c5{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
@media (max-width:1100px){footer .cols.c5{grid-template-columns:1fr 1fr 1fr}footer .cols.c5 .about{grid-column:1/-1}}
@media (max-width:620px){footer .cols.c5{grid-template-columns:1fr 1fr}}

/* Les liens des panneaux vivent dans `.pill .links` : la règle des liens de la nav (pilule, nowrap) ne doit pas les toucher. */
.pill .links .mpanel a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:start;padding:12px 14px;border-radius:14px;white-space:normal;font-size:inherit;color:var(--ink);background:none}
.pill .links .mpanel a:hover,.pill .links .mpanel a:focus-visible{background:#F1F4F2}
.pill .links .mpanel a.all{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:14px 16px;background:var(--paper);font-size:15px;font-weight:700}
.pill .links .mpanel a.all:hover{background:#F1F4F2}
/* Les tuiles des menus : une icône dessinée ou un logo officiel, dans le même écrin. */
.pill .links .mpanel a{gap:3px 14px;padding:12px 14px 12px 12px}
.mpanel a .lg{grid-row:1/3;grid-column:1;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(180deg,#FFFFFF 0%,#F2F6F4 100%);border:1px solid #E1E8E4;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,40,40,.06),0 6px 14px -8px rgba(16,40,40,.22);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.mpanel a .lg img{width:22px;height:22px}
.mpanel a .lg svg{width:22px;height:22px;display:block}
.mpanel a b{align-self:end}
.mpanel a:hover .lg,.mpanel a:focus-visible .lg{border-color:#BDE7D4;transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,0 0 0 4px rgba(128,232,192,.22),0 8px 18px -8px rgba(16,40,40,.28)}
.lg.mini{width:30px;height:30px;border-radius:9px;display:inline-grid;place-items:center;flex:0 0 30px;background:linear-gradient(180deg,#FFFFFF 0%,#F2F6F4 100%);border:1px solid #E1E8E4;box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(16,40,40,.06)}
.lg.mini svg,.lg.mini img{width:18px;height:18px}
.pill .links .mpanel a.all{gap:12px;justify-content:flex-start}
.mpanel a.all .lab{flex:1}
.drawer a{display:flex;align-items:center;gap:12px}
.drawer a.btn{justify-content:center}
@media (prefers-reduced-motion:reduce){.mpanel a .lg{transition:none}.mpanel a:hover .lg{transform:none}}
.mpanel a .lg svg{width:24px;height:24px}
.lg.mini svg{width:19px;height:19px}
.pill .links .mpanel a.all .lab{font-weight:700;color:var(--ink)}