/* ═════ HABILLAGE COMMUN — lien d'évitement, pied de page, message de la démo ═════
   Chargé par la landing (après landing.css) ET par toutes les pages vitrines hors landing (blog, pages légales,
   pages marketing : src/pages/layout.js, classe body.lq-chrome). Même HTML partout : landingV4.header()/footer().
   L'en-tête lui-même vit dans header.css.
   Aucune règle globale ici (pas de reset) : tout est scopé, pour ne rien changer aux pages qui le chargent. */

/* Polices de l'en-tête et du pied : déclarées ici aussi, pour les pages au <head> maison qui ne les chargent pas (même fichier, même cache) */
@font-face{font-family:Inter;src:url('/public/fonts/inter-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Fraunces;src:url('/public/fonts/fraunces-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

/* Jetons Atelier par défaut, posés UNIQUEMENT sur ces composants hors landing (sur la landing, ceux de la page s'appliquent) */
body.lq-chrome .skip,body.lq-chrome footer.foot,body.lq-chrome .demo-msg{
  --ink:#1F2A24;--bg:#F7F1E3;--muted:#56625B;--line:rgba(27,67,50,.16);--focus:#1B4332}

/* ── Lien d'évitement ── */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;font-weight:700;text-decoration:none}
.skip:focus{top:12px}

/* ── Pied de page ── */
footer.foot{padding:40px 0 56px;border-top:1px solid var(--line);font-size:.95rem}
footer.foot .in{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center}
footer.foot ul{display:flex;flex-wrap:wrap;gap:4px 8px;margin:0;padding:0;list-style:none}
footer.foot li{margin:0;list-style:none}
footer.foot li a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;text-decoration:underline;text-underline-offset:3px}
footer.foot p{margin:0;color:var(--muted)}
footer.foot .foot-more{width:100%}
footer.foot .foot-c{width:100%;font-size:.85rem}
footer.foot .foot-b .hd-logo{display:inline-block;vertical-align:middle;width:24px;height:24px;border-radius:6px}

/* ── Message de la démo (bouton « Essayer la démo ») ── */
html:not(.js) [data-demo]{display:none!important}
.demo-msg{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:90;transform:translate(-50%,12px);max-width:min(92vw,520px);padding:14px 20px;border-radius:14px;background:var(--ink);color:var(--bg);font-weight:600;font-size:.95rem;line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s var(--ease,ease),transform .2s var(--ease,ease)}
.demo-msg.on{opacity:1;transform:translate(-50%,0)}
body>svg[aria-hidden]{position:absolute;width:0;height:0;overflow:hidden}

/* ── Pages vitrines hors landing (l'en-tête y est fixe : voir header.css) ── */
html:has(body.lq-chrome){scroll-padding-top:80px}
body.lq-chrome footer.foot{background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,system-ui,sans-serif;line-height:1.6;margin-top:48px}
body.lq-chrome footer.foot>.in{width:min(100% - 32px,1200px);margin-inline:auto}
body.lq-chrome footer.foot{text-align:left}
body.lq-chrome footer.foot strong{color:inherit;font-weight:700}
body.lq-chrome footer.foot a{color:inherit;opacity:1}
body.lq-chrome footer.foot a:hover{color:var(--ink);text-decoration-thickness:2px}
body.lq-chrome footer.foot :focus-visible,body.lq-chrome .skip:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
html.paused body.lq-chrome *,html.paused body.lq-chrome *::before,html.paused body.lq-chrome *::after{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.demo-msg{transition:none}}