/* lp-header.css — en-tête collant des simulateurs à page de vente (.lp-header : marque + lien retour + CTA
   + bascule de thème). Source UNIQUE, chargée par <link> dans les 7 pages qui portent cet en-tête
   (audit-express-rentabilite, creances, ecommerce-*, expert-comptable-ecommerce). La cible de 44 px de la bascule de
   thème vit dans shared/theme-toggle.css (liée aussi par ces pages). Banc de rendu :
   scripts/qa-simulateurs-entete-mobile.mjs (npm run qa:simulateurs-entete).

   Audit du 04/11/2026 § 6 : sous ~700 px l'en-tête complet ne tient pas (CTA sur 3 lignes qui recouvre la
   marque, lien retour tronqué en « ← Expert… », bascule de thème à 38 px). Sous 720 px : CTA en libellé court
   sur une ligne (le libellé court est une sous-chaîne du nom accessible, WCAG 2.5.3), lien retour réduit à « ← »,
   cibles de 44 px. Au-dessus de 720 px rien ne change.

   Tous les sélecteurs sont préfixés .lp-header (ou #themeToggle) pour battre le CSS inline des pages quel que
   soit l'ordre de chargement. Les règles qui visent .lp-back / .sub / .lp-cta-court ne font rien sur une page
   qui n'a pas ces éléments (creances n'a ni lien retour ni sous-marque). */
.lp-header .lp-cta{white-space:nowrap}
.lp-header .lp-cta .lp-cta-court{display:none}

@media(max-width:720px){
  .lp-header .lp-nav{gap:8px}
  .lp-header .lp-mark{flex:none;white-space:nowrap}
  .lp-header span.lp-back{flex:none;margin-left:0!important;overflow:visible}
  .lp-header span.lp-back>a.lp-back{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;overflow:visible;font-size:1.25rem}
  .lp-header .lp-back-txt{display:none}
  .lp-header .lp-cta .lp-cta-long{display:none}
  .lp-header .lp-cta .lp-cta-court{display:inline}
  .lp-header .lp-cta{min-height:44px;padding:0 .7rem;font-size:.85rem}
}
/* Place disponible (mesuree) : marque + « e-com » + retour + CTA + bascule exigent ~412 px, sans « e-com » ~370 px,
   et ~345 px avec le CTA resserre ; en dessous, le lien retour (le logo mene a la meme page) cede sa place. */
@media(max-width:440px){.lp-header .lp-mark span.sub{display:none}}
@media(max-width:380px){
  .lp-header .lp-cta{padding:0 .6rem;font-size:.8rem}
  .lp-header #themeToggle{margin-left:0!important}
}
@media(max-width:350px){.lp-header span.lp-back{display:none}}