:root{
  --np-shell-max:1360px;
  --np-blue:#1f3a5f;
  --np-accent:#2f7d5a;
  --np-card:#ffffff;
  --np-text:#1e293b;
  --np-muted:#5f6b7f;
  --np-bg:#f8f2e6;
  --np-cream-dark:#f3e7d1;
  --np-cream-mid:#f7efdf;
  --np-cream-light:#fbf6ea;
  --np-border:rgba(31,58,95,.14);
  --np-shadow-soft:0 8px 22px rgba(15,23,42,.10);
  --np-shadow-card:0 10px 26px rgba(15,23,42,.08);
  --radius:18px;

  --faq-text:rgba(30,41,59,.96);
  --faq-muted:rgba(71,85,105,.92);
  --faq-border:rgba(31,58,95,.18);
  --faq-shadow:0 12px 30px rgba(15,23,42,.08);
  --faq-accent:#2f7d5a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body.np-marketing-page{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  padding:24px;
  background:transparent;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--np-text);
  line-height:1.55;
}

.np-bg-banner{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-color:var(--np-bg);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='noStitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E") repeat,
    radial-gradient(circle at top left, var(--np-cream-dark) 0%, var(--np-cream-light) 100%);
  background-size:180px 180px, auto;
}

.np-bg-banner::before{
  content:none;
}

.np-bg-banner::after{
  content:none;
}

.header-shell,.mc-shell,.faq-wrap{
  position:relative;
  z-index:1;
}

.header-shell{
  width:100%;
  max-width:var(--np-shell-max);
  margin:0 auto;
}

.np-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:4px;
  padding:14px 18px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid var(--np-border);
  box-shadow:var(--np-shadow-soft);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:sticky;
  top:10px;
  z-index:10;
}

.np-header-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.np-logo{
  width:190px;
  height:54px;
  position:relative;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  line-height:0;
  flex:0 0 auto;
}
.np-logo-img{
  position:relative;
  inset:auto;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
}

.np-hero-punch{
  margin:0;
  font-size:15px;
  letter-spacing:.04em;
  text-transform:uppercase;
  font-weight:850;
  color:var(--np-blue);
  white-space:nowrap;
}
.np-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:flex-end;
}

.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  font-weight:550;
  font-size:15px;
  transition:transform .15s ease, filter .2s ease, background-color .2s ease, border-color .2s ease;
  border:1px solid var(--np-border);
  background:#ffffff;
  color:var(--np-blue);
}

.btn:hover{transform:translateY(-1px);filter:brightness(1.02)}
.btnPrimary{background:#e8f4ee;border-color:rgba(47,125,90,.30);color:#1f5f45}
.btnGhost{background:#edf2f8;border-color:rgba(31,58,95,.24);color:var(--np-blue)}
.btnOrder{background:#e1f1e9;border-color:rgba(47,125,90,.35);color:#1f5f45}
.btnFaq{background:#edf2f8;border-color:rgba(31,58,95,.24);color:var(--np-blue)}
.btnFonction{background:#edf2f8;border-color:rgba(31,58,95,.24);color:var(--np-blue)}
.btnConcept{background:#edf2f8;border-color:rgba(31,58,95,.24);color:var(--np-blue)}

/* mirar-contenu.php */
.mc-shell{
  width:100%;
  max-width:var(--np-shell-max);
  display:flex;
  flex-direction:column;
  gap:18px;
  margin:0 auto;
  padding:18px 0 40px;
}

.mc-hero{
  background:#ffffff;
  border:1px solid var(--np-border);
  border-radius:20px;
  padding:26px 28px;
  box-shadow:var(--np-shadow-soft);
}

.mc-hero h1{margin:0 0 8px;font-size:32px;letter-spacing:-.4px;color:var(--np-blue)}
.mc-hero p{margin:0;color:var(--np-muted);font-size:15px}
.mc-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}

.mc-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,58,95,.16);
  background:rgba(31,58,95,.05);
  color:var(--np-blue);
  font-weight:600;
  font-size:12px;
}

.mc-layout{display:grid;grid-template-columns:260px 1fr;gap:24px}
.mc-side{position:sticky;top:90px;align-self:start}

.mc-nav{
  background:#ffffff;
  border:1px solid var(--np-border);
  border-radius:16px;
  padding:12px;
  box-shadow:var(--np-shadow-card);
}

.mc-nav a{
  display:block;
  padding:10px 12px;
  margin-bottom:6px;
  border-radius:10px;
  text-decoration:none;
  color:#1f2a44;
  font-weight:600;
  transition:background .2s ease, color .2s ease;
}

.mc-nav a:hover{background:rgba(31,58,95,.08);color:var(--np-blue)}
.mc-nav a.active{background:rgba(31,58,95,.12);color:var(--np-blue)}

.mc-content{display:flex;flex-direction:column;gap:18px}

.mc-card{
  background:var(--np-card);
  border:1px solid var(--np-border);
  border-radius:18px;
  padding:24px;
  box-shadow:var(--np-shadow-card);
}

.mc-card h2{margin:0 0 10px;font-size:22px;color:var(--np-blue)}
.mc-card p{margin:0 0 10px;color:#1f2a44}
.mc-card ul{margin:0;padding-left:18px;color:#1f2a44}
.mc-card li{margin-bottom:6px}
.mc-section{scroll-margin-top:120px}

.footer{
  width:100%;
  max-width:var(--np-shell-max);
  margin:0 auto 24px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  color:#24415f;
  font-size:13px;
  border-radius:18px;
  border:1px solid rgba(31,58,95,.18);
  background:#ffffff;
  box-shadow:var(--np-shadow-soft);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  position:relative;
  z-index:1;
}

.footer a{color:inherit;text-decoration:none}
.footer a:hover{text-decoration:underline}
.footerLinks{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}

/* faq.php */
.faq-wrap{
  width:100%;
  max-width:var(--np-shell-max);
  margin:18px auto;
  padding:18px 18px 60px;
  border-radius:18px;
  background:#ffffff;
  border:1px solid var(--faq-border);
  color:var(--faq-text);
  box-shadow:var(--faq-shadow);
}

.faq-wrap header{margin-bottom:18px}
.faq-wrap h1{margin:14px 0 8px;font-size:clamp(1.8rem,2.6vw,2.4rem);letter-spacing:-.02em;color:var(--np-blue)}
.faq-wrap .sub{margin:0 0 18px;color:var(--faq-muted);max-width:75ch}

.faq{
  border:1px solid var(--faq-border);
  border-radius:16px;
  overflow:hidden;
  background:#ffffff;
  box-shadow:none;
}

.faq details{
  border-top:1px solid var(--faq-border);
  background:#ffffff;
}

.faq details:first-child{border-top:0}

.faq summary{
  list-style:none;
  cursor:pointer;
  padding:18px;
  user-select:none;
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:650;
  letter-spacing:-.01em;
}

.faq summary::-webkit-details-marker{display:none}
.faq .q{flex:1;font-size:1.05rem}

.faq .icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid var(--faq-border);
  background:rgba(47,125,90,.08);
  color:var(--faq-accent);
  flex:0 0 auto;
  font-weight:800;
}

.faq .chev{
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  border:1px solid var(--faq-border);
  background:rgba(31,58,95,.05);
  color:var(--faq-muted);
  flex:0 0 auto;
  transition:transform .18s ease;
}

.faq .icon svg,
.faq .chev svg{
  width:18px;
  height:18px;
  display:block;
}

.faq details[open] .chev{transform:rotate(180deg)}

.faq .a{
  padding:0 18px 18px;
  color:var(--faq-muted);
  max-width:92ch;
}

.faq .a p{margin:10px 0 0}
.faq .a ul{margin:10px 0 0 18px}
.faq .a li{margin:6px 0}

.toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:16px 0 18px;
}

.faq-btn{
  border:1px solid var(--faq-border);
  background:#ffffff;
  color:var(--faq-text);
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:.98rem;
}

.faq-btn:hover{background:rgba(31,58,95,.05)}
.faq-btn:active{transform:translateY(1px)}

/* concept.php */
.concept-wrap{
  width:100%;
  max-width:var(--np-shell-max);
  margin:24px auto 40px;
  padding:0;
  position:relative;
  z-index:1;
}

.concept-card{
  background:#ffffff;
  border:1px solid var(--faq-border);
  color:var(--faq-text);
  box-shadow:var(--faq-shadow);
}

.concept-card h1{
  margin:0 0 8px;
  font-size:clamp(1.9rem,3vw,2.5rem);
  letter-spacing:-.02em;
  color:var(--np-blue);
}

.concept-card h2{
  margin:0 0 18px;
  font-size:clamp(1.1rem,1.9vw,1.35rem);
  color:var(--faq-muted);
  font-weight:650;
}

.concept-card p{
  margin:0 0 12px;
  color:var(--faq-text);
  font-size:1.03rem;
  line-height:1.72;
}

/* mirar-templates.php */
.templates-wrap{
  width:100%;
  max-width:var(--np-shell-max);
  margin:24px auto 40px;
  position:relative;
  z-index:1;
}

.templates-card{
  background:#ffffff;
  border:1px solid var(--faq-border);
  color:var(--faq-text);
  box-shadow:var(--faq-shadow);
}

.templates-card h1{
  margin:0 0 8px;
  font-size:clamp(1.9rem,3vw,2.5rem);
  letter-spacing:-.02em;
  color:var(--np-blue);
}

.templates-card .templates-sub{
  margin:0 0 18px;
  color:var(--faq-muted);
  max-width:78ch;
}

.templates-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.templates-item{
  border-radius:14px;
  padding:16px;
  border:1px solid rgba(31,58,95,.14);
  background:#ffffff;
}

.templates-item h3{
  margin:0 0 8px;
  font-size:1.1rem;
  color:var(--np-blue);
}

.templates-item p{
  margin:0 0 14px;
  color:var(--faq-muted);
}

@media (max-width:1100px){
  .mc-layout{grid-template-columns:1fr}
  .mc-side{position:relative;top:auto}
  .templates-grid{grid-template-columns:1fr}
}

@media (max-width:700px){
  body.np-marketing-page{padding:16px}
  .np-header{flex-direction:column;align-items:flex-start}
  .np-header-brand{width:100%}
  .np-hero-punch{display:none}
  .mc-hero h1{font-size:26px}
  .footer{
    flex-direction:column;
    gap:10px;
  }
  .footerLinks{justify-content:flex-start}
}