/* lameute · chrome partagé du site marketing + blog (nav + footer).
   Autonome : repose uniquement sur les tokens du design system, pas sur landing.css.
   Chargé par nav.js (injection auto) sur toutes les pages marketing/blog. */

/* ===== Navbar (vanilla, crème ton-sur-ton, filet+ombre au scroll) ===== */
.mnav { position: sticky; top: 0; z-index: 50; background: var(--paper); border-bottom: 1px solid transparent; transition: box-shadow var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
.mnav.is-scrolled { border-bottom-color: rgba(11,11,10,0.08); box-shadow: 0 1px 0 rgba(11,11,10,0.03), 0 8px 18px -14px rgba(11,11,10,0.30); }
.mnav-in { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 32px; height: 66px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.mnav-logo { justify-self: start; }
.mnav-links { justify-self: center; }
.mnav-actions { justify-self: end; }
.mnav-logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.mnav-kc { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box; border-radius: 7px; background: #FAF8F1; border: 1px solid #D9D3C4; box-shadow: 0 2px 0 #D9D3C4, inset 0 1px 0 #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: #161513; line-height: 1; }
.mnav-wm { font-weight: 700; font-size: 19px; letter-spacing: -0.03em; color: var(--text-primary); }
.mnav-wm .la { font-weight: 500; color: var(--text-tertiary); }
.mnav-links { display: flex; gap: 4px; }
.mnav-link { padding: 8px 12px; font-size: 14px; font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-md, 10px); white-space: nowrap; text-decoration: none; }
.mnav-link:hover { color: var(--text-primary); }
/* Page courante (feedback fondateur 07/07) : lien ink + filet ambre sous le
   texte (le soulignement signature du DS, jamais un fond plein). Landing :
   aucun état, comme voulu. */
.mnav-link.is-active { color: var(--text-primary); position: relative; }
.mnav-link.is-active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--ambre-500); }
.mnav-actions { display: flex; align-items: center; gap: 8px; }
.mnav-login { display: inline-flex; align-items: center; height: 36px; padding: 0 13px; font-size: 14px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-radius: var(--radius-md, 10px); }
.mnav-login:hover { color: var(--text-primary); background: var(--surface-hover); }
.mnav-cta { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 15px; border-radius: var(--radius-md, 10px); background: var(--sapin-500); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--duration-fast) var(--ease-standard); }
.mnav-cta:hover { background: var(--sapin-600); }

/* Burger + menu mobile (< 720px) */
.mnav-burger { display: none; align-items: center; justify-content: center; flex-direction: column; width: 40px; height: 40px; margin-right: -8px; background: transparent; border: none; cursor: pointer; border-radius: var(--radius-md, 10px); }
.mnav-burger:hover { background: var(--surface-hover); }
.mnav-burger span { display: block; width: 18px; height: 1.75px; background: var(--text-primary); border-radius: 2px; transition: transform var(--duration-fast) var(--ease-standard); }
.mnav-burger span + span { margin-top: 5px; }
.mnav.is-open .mnav-burger span:first-child { transform: translateY(3.4px) rotate(45deg); }
.mnav.is-open .mnav-burger span:last-child { transform: translateY(-3.4px) rotate(-45deg); }
.mnav-mobile { display: none; flex-direction: column; padding: 6px 22px 16px; border-top: 1px solid rgba(11,11,10,0.08); background: var(--paper); }
.mnav-mlink { padding: 13px 4px; font-size: 16px; font-weight: 500; color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid rgba(11,11,10,0.05); }
.mnav-mlink:last-child { border-bottom: none; }
.mnav-mlink:hover { color: var(--text-primary); }
.mnav-mlink.is-active { color: var(--text-primary); box-shadow: inset 2px 0 0 var(--ambre-500); padding-left: 12px; }
@media (max-width: 720px) {
  .mnav-links { display: none; }
  .mnav-login { display: none; }
  .mnav-burger { display: inline-flex; }
  .mnav-in { padding: 0 22px; grid-template-columns: auto 1fr; }
  /* Liens masqués : sans ça, CTA + burger tombent dans la colonne centrale
     et se collent au wordmark ; on les renvoie au bord droit, aérés. */
  .mnav-actions { justify-self: end; gap: 12px; }
  .mnav.is-open .mnav-mobile { display: flex; }
  .mnav-cta-pre { display: none; }
  .mnav-cta { padding: 0 14px; }
}

/* ===== Footer (harmonisé, crème) ===== */
.lp-footer { border-top: 1px solid var(--border-subtle); background: var(--paper); }
.lp-footer-in { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 56px 32px 40px; display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 32px; }
@media (max-width: 820px) { .lp-footer-in { grid-template-columns: 1fr 1fr; row-gap: 36px; } .lp-footer .lp-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .lp-footer-in { grid-template-columns: 1fr; row-gap: 30px; } }
.lp-footer .wm { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.lp-footer .kc { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; box-sizing: border-box; border-radius: 7px; background: #FAF8F1; border: 1px solid #D9D3C4; box-shadow: 0 2px 0 #D9D3C4, inset 0 1px 0 #fff; font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: #161513; line-height: 1; }
.lp-footer .wm b { font-weight: 700; font-size: 18px; letter-spacing: -0.03em; color: var(--text-primary); }
.lp-footer .wm b i { font-style: normal; font-weight: 500; color: var(--text-tertiary); }
.lp-footer .tag { font-size: 14px; color: var(--text-tertiary); line-height: 1.6; margin: 22px 0 0; max-width: 280px; }
.lp-footer .ch { font-size: 12px; text-transform: uppercase; letter-spacing: var(--tracking-caps, 0.08em); color: var(--text-muted); font-weight: 600; margin-bottom: 14px; }
.lp-footer .col a { display: block; font-size: 14px; color: var(--text-secondary); text-decoration: none; margin-bottom: 10px; }
.lp-footer .col a:hover { color: var(--text-primary); }
.lp-footer .fmail { display: inline-block; font-size: 14px; color: var(--text-secondary); text-decoration: none; margin: 20px 0 0; transition: color .18s var(--ease-standard, ease); }
.lp-footer .fmail:hover { color: var(--text-primary); }
.lp-footer .fsoc { display: flex; gap: 10px; margin: 18px 0 0; }
.lp-footer .fs-ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; box-sizing: border-box; border: 1px solid var(--border-default); border-radius: 10px; color: var(--text-muted); transition: color .18s var(--ease-standard, ease), border-color .18s var(--ease-standard, ease), background .18s var(--ease-standard, ease); }
.lp-footer .fs-ic:hover { color: var(--text-primary); border-color: var(--border-strong); background: var(--surface-hover); }
.lp-footer-base { max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 32px 40px; display: flex; justify-content: space-between; gap: 16px; color: var(--text-muted); font-size: 13px; flex-wrap: wrap; }
.lp-foot-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.lp-footer-base a { color: var(--text-muted); text-decoration: none; }
.lp-footer-base a:hover { color: var(--text-primary); }

/* Responsive (audit 07/07). Nav tablette (721-1100) : « Se connecter »
   wrappait ; on garde logo + liens + CTA compact. Desktop > 1100 inchangé. */
@media (max-width: 1100px) {
  .mnav-login { display: none; }
  .mnav-cta-pre { display: none; }
}
/* Gouttières footer alignées sur les sections mobiles (22px). */
@media (max-width: 720px) {
  .lp-footer-in { padding-left: 22px; padding-right: 22px; }
  .lp-footer-base { padding-left: 22px; padding-right: 22px; }
}
/* Footer mobile aéré : APRÈS la règle de base .lp-footer .tag (même
   spécificité, l'ordre décide — placé tôt, l'override serait du code mort). */
@media (max-width: 560px) {
  .lp-footer .tag { margin-top: 18px; }
}