/* ============================================================================
   En-tête PUBLIC unique (views/partials/public_header.php) : accueil, piliers,
   blog, démo, à propos, auteur, pages légales, tarifs.

   Feuille AUTONOME, servie sans app.css ET sans landing.css : les valeurs sont
   les littéraux des tokens de landing.css, posés en variables locales sur
   .mp-header. Elle rend donc à l'identique sur les deux mondes visuels du site
   (landing et « Épure »), qui n'ont ni les mêmes tokens ni la même taille de
   base (html 14 px côté Épure) : tout est en px, rien n'hérite.
   Hauteur : 73 px ordinateur, 65 px téléphone (bordure comprise).
   ========================================================================= */

.mp-header {
  --mp-ink: rgb(17,24,39); --mp-ink-2: rgb(55,65,81); --mp-ink-3: rgb(107,114,128);
  --mp-line: rgb(229,231,235); --mp-line-strong: rgb(138,147,163);
  --mp-coral: rgb(255,107,82); --mp-coral-hover: rgb(232,81,58); --mp-coral-ink: rgb(218,31,0);
  --mp-wash: rgb(255,241,238); --mp-mist: rgb(247,248,250); --mp-paper: rgb(255,255,255);
  --mp-font: 'Inter', 'Inter Fallback', system-ui, -apple-system, sans-serif;
  --mp-font-display: 'Manrope', 'Inter', 'Inter Fallback', system-ui, sans-serif;
  --mp-gutter: 20px; --mp-z: 30;
  position: sticky; top: 0; z-index: var(--mp-z);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--mp-line);
  font-family: var(--mp-font); font-size: 15px; line-height: 1.4; color: var(--mp-ink);
  text-align: left; box-sizing: border-box;
}
.mp-header *, .mp-header *::before, .mp-header *::after { box-sizing: border-box; }
.mp-header ul { list-style: none; margin: 0; padding: 0; }
.mp-header a, .mp-header button { font-family: var(--mp-font); text-decoration: none; }
.mp-header [hidden] { display: none; }
.mp-header svg { display: block; }
/* Filet : une règle de type `nav` posée par une feuille de page ne doit jamais atteindre le menu. */
.mp-header nav { height: auto; z-index: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
.mp-header :focus-visible { outline: 3px solid var(--mp-coral-ink); outline-offset: 2px; border-radius: 6px; }

.mp-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; width: 100%; max-width: 1320px; margin: 0 auto;
  padding-inline: var(--mp-gutter);
}
@media (min-width: 768px) { .mp-header { --mp-gutter: 32px; } }
@media (min-width: 1024px) { .mp-header { --mp-gutter: 48px; } }

.mp-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--mp-ink); font-family: var(--mp-font-display); flex-shrink: 0; }
.mp-word { font-size: 18px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
@media (max-width: 599px) {
  .mp-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.mp-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mp-login { display: none; }

.mp-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent;
  background: var(--mp-coral); color: rgb(255,255,255); font-size: 15px; font-weight: 700; line-height: 1.2;
  text-align: center; cursor: pointer; white-space: nowrap;
  transition: background-color .12s cubic-bezier(.4,0,.2,1), transform .12s cubic-bezier(.4,0,.2,1);
}
.mp-cta:hover { background: var(--mp-coral-hover); color: rgb(255,255,255); transform: translateY(-1px); }
@media (max-width: 599px) { .mp-cta { font-size: 13px; padding: 0 12px; } }
@media (max-width: 399px) { .mp-cta { font-size: 12px; padding: 0 10px; } .mp-actions { gap: 6px; } .mp-inner { gap: 8px; } }

.mp-burger {
  display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid var(--mp-line-strong); border-radius: 10px; cursor: pointer;
}
.mp-burger__bar { display: block; width: 18px; height: 2px; background: var(--mp-ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.mp-burger[aria-expanded="true"] .mp-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mp-burger[aria-expanded="true"] .mp-burger__bar:nth-child(2) { opacity: 0; }
.mp-burger[aria-expanded="true"] .mp-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Téléphone : panneau pleine largeur sous la barre ───────────────────── */
.mp-links {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--mp-paper); border-bottom: 1px solid var(--mp-line);
  box-shadow: 0 12px 32px rgba(11,18,32,.10);
  max-height: calc(100vh - 64px); overflow-y: auto;
  padding: 8px var(--mp-gutter) 16px;
}
.mp-links[hidden] { display: none; }
.mp-list > li { border-bottom: 1px solid var(--mp-line); }
.mp-list > li:last-child { border-bottom: 0; }
.mp-link, .mp-trigger {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--mp-ink-2); font-size: 16px; font-weight: 600; text-align: left;
}
.mp-link:hover, .mp-trigger:hover { color: var(--mp-coral-ink); }
.mp-chev { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s; }
.mp-trigger[aria-expanded="true"] .mp-chev { transform: rotate(180deg); }
.mp-trigger[aria-expanded="true"] { color: var(--mp-ink); }

.mp-panel { padding: 0 0 12px; }
.mp-panel li + li { margin-top: 2px; }
.mp-entry { display: block; padding: 10px 12px; border-radius: 10px; min-height: 44px; color: var(--mp-ink); }
.mp-entry:hover { background: var(--mp-mist); }
.mp-et { display: block; font-size: 15px; font-weight: 600; color: var(--mp-ink); }
.mp-ed { display: block; margin-top: 1px; font-size: 14px; line-height: 1.4; color: var(--mp-ink-3); font-weight: 400; }
.mp-sep-login { display: block; }

/* ── Ordinateur ─────────────────────────────────────────────────────────── */
@media (min-width: 1040px) {
  .mp-inner { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); min-height: 72px; }
  .mp-actions { justify-self: end; gap: 16px; }
  .mp-burger { display: none; }
  .mp-login {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
    color: var(--mp-ink-2); font-weight: 600; font-size: 15px; cursor: pointer;
  }
  .mp-login:hover { color: var(--mp-coral-ink); text-decoration: underline; }
  .mp-links, .mp-links[hidden] {
    display: block; position: static; max-height: none; overflow: visible; padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .mp-list { display: flex; align-items: center; gap: 4px; }
  .mp-list > li { position: relative; border: 0; }
  .mp-link, .mp-trigger { width: auto; justify-content: center; gap: 6px; min-height: 44px; padding: 0 12px; font-size: 15px; border-radius: 8px; }
  .mp-trigger[aria-expanded="true"] { background: var(--mp-mist); }
  .mp-mobile-only { display: none; }
  .mp-panel {
    position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
    width: 380px; padding: 8px; background: var(--mp-paper);
    border: 1px solid var(--mp-line); border-radius: 16px;
    box-shadow: 0 2px 4px rgba(11,18,32,.04), 0 18px 44px rgba(11,18,32,.13);
  }
  .mp-panel[hidden] { display: none; }
  .mp-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .mp-entry { padding: 10px 14px; }
}


/* Lien d'authentification soustrait au crawl (src/ObfuscatedLink.php) : sans href, une ancre perd son curseur. */
.mp-header [data-oln] { cursor: pointer; }
.mp-header [aria-current="page"] { color: var(--mp-ink); }
@media (prefers-reduced-motion: reduce) {
  .mp-header *, .mp-header *::before, .mp-header *::after { transition: none !important; }
}