/* QTouch — en-tête commun des sections de l'espace annonceur (lib/pagehead/pagehead.js).
   Carte blanche : icône · rubrique · titre · sous-titre · action(s), puis une ligne de chiffres clés.
   Les anciens titres et la carte d'aide orange ne sont masqués que si la couche est active (body.qph-on).
   La page impose ses propres tailles aux h1/p : d'où les !important sur la typographie de la carte. */

.qph{position:relative;margin:26px 48px 0;padding:22px 24px 0;background:#fff;border:1px solid #EEF1F4;border-radius:20px;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 32px -24px rgba(15,23,42,.18);overflow:hidden;font-family:inherit;box-sizing:border-box;
  animation:qphIn .28s ease both}
.qph::before{content:"";position:absolute;right:-140px;top:-170px;width:460px;height:360px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(249,115,22,.13),rgba(249,115,22,0))}
.qph::after{content:"";position:absolute;right:-70px;top:-120px;width:270px;height:270px;border-radius:50%;pointer-events:none;
  border:1px solid rgba(249,115,22,.14);box-shadow:0 0 0 34px rgba(249,115,22,.035)}
@keyframes qphIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.qph-main{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding-bottom:20px}
.qph-ic{width:48px;height:48px;border-radius:14px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,#F97316,#EA580C);box-shadow:0 10px 20px -8px rgba(234,88,12,.55)}
.qph-ic svg{width:22px;height:22px}
.qph-txt{flex:1;min-width:0}
header.qph .qph-eyebrow{margin:0 0 3px!important;font-size:10.5px!important;line-height:1.3!important;font-weight:800!important;letter-spacing:.9px!important;text-transform:uppercase;color:#EA580C!important}
header.qph .qph-title{margin:0!important;padding:0!important;font-size:28px!important;line-height:1.15!important;font-weight:800!important;letter-spacing:-.6px!important;color:#0F172A!important;font-family:inherit!important}
header.qph .qph-sub{margin:5px 0 0!important;padding:0!important;font-size:13.5px!important;line-height:1.5!important;font-weight:500!important;color:#64748B!important;max-width:720px;letter-spacing:0!important}

.qph-acts{position:relative;z-index:1;display:flex;align-items:center;gap:10px;flex:none}
header.qph .qph-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:12px;margin:0;
  font:inherit;font-size:13px;font-weight:800;letter-spacing:-.1px;white-space:nowrap;cursor:pointer;border:1px solid transparent;
  transition:transform .15s,box-shadow .15s,border-color .15s,background .15s}
.qph-btn svg{width:15px;height:15px;flex:none}
header.qph .qph-btn.pri{color:#fff;background:linear-gradient(135deg,#F97316,#EA580C);box-shadow:0 10px 20px -10px rgba(234,88,12,.7)}
header.qph .qph-btn.pri:hover{transform:translateY(-1px);box-shadow:0 14px 24px -10px rgba(234,88,12,.75)}
header.qph .qph-btn.gh{color:#0F172A;background:#fff;border-color:#E5E7EB}
header.qph .qph-btn.gh:hover{border-color:#CBD5E1;background:#F8FAFC}
.qph-btn:focus-visible{outline:2px solid #F97316;outline-offset:2px}

.qph-stats{position:relative;z-index:1;display:flex;margin:0 -24px;border-top:1px solid #F1F5F9;background:linear-gradient(180deg,#FCFCFD,#FAFBFC);
  overflow-x:auto;scrollbar-width:none}
.qph-stats::-webkit-scrollbar{display:none}
.qph-stat{flex:1 1 0;min-width:150px;padding:13px 24px 15px;display:flex;flex-direction:column;gap:2px;border-left:1px solid #F1F5F9}
.qph-stat:first-child{border-left:0}
.qph-stat .k{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#94A3B8;white-space:nowrap}
.qph-stat b{font-size:20px;line-height:1.2;font-weight:800;letter-spacing:-.4px;color:#0F172A;white-space:nowrap}
.qph-stat em{font-style:normal;font-size:11.5px;font-weight:700;color:#64748B;white-space:nowrap}
.qph-stat em.up{color:#16A34A}
.qph-live{width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,.18);animation:qphPulse 1.8s ease-in-out infinite}
@keyframes qphPulse{50%{box-shadow:0 0 0 5px rgba(34,197,94,.08)}}

/* ---------- anciens en-têtes remplacés ---------- */
body.qph-on .ann-section-help{display:none!important}
body.qph-on #screen-campaigns .cmpo-hd{display:none!important}
body.qph-on #screen-inbox > div:not(.qph) > h1:first-child{display:none}
body.qph-on #screen-billing > .app-topbar,
body.qph-on #screen-prefs > .app-topbar,
body.qph-on #screen-smartmatch > .app-topbar,
body.qph-on #screen-brandlib > .app-topbar,
body.qph-on #screen-news > .app-topbar{display:none!important}
body.qph-on #screen-prefs .prefs-sub{display:none}
body.qph-on #screen-personas > .app-content > .psn-section-hd:first-child{display:none!important}
body.qph-on #screen-smartmatch .sm-hero,
body.qph-on #screen-brandlib .bl-hero,
body.qph-on #screen-news .news-page-hero{display:none!important}
body.qph-on #screen-camp .cve-clipzi-head{display:none}
body.qph-on #screen-reports .perf-page{padding:30px 48px 48px}
body.qph-on #screen-reports .perf-head-title{display:none}
body.qph-on #screen-reports .perf-head{justify-content:flex-end}

/* ---------- mobile ---------- */
@media (max-width:768px){
  .qph{margin:14px 16px 0;padding:18px 16px 0;border-radius:18px}
  .qph-main{flex-wrap:wrap;align-items:flex-start;gap:12px 14px;padding-bottom:16px}
  .qph-ic{width:42px;height:42px;border-radius:12px}
  .qph-ic svg{width:20px;height:20px}
  .qph-txt{flex:1 1 calc(100% - 60px)}
  header.qph .qph-title{font-size:22px!important;letter-spacing:-.4px!important}
  header.qph .qph-sub{font-size:13px!important}
  .qph-acts{width:100%;gap:8px}
  header.qph .qph-btn{flex:1 1 auto;min-width:0;padding:0 14px;gap:7px}
  /* secondaires : carré icône seule (libellé en title/aria-label) pour laisser toute la ligne à l'action principale */
  header.qph .qph-acts .qph-btn.gh:not(:only-child){flex:0 0 42px;width:42px;padding:0}
  header.qph .qph-acts .qph-btn.gh:not(:only-child) .qph-bl{display:none}
  /* chiffres clés : grille 2 colonnes (avant : bande qui défilait, 2e chiffre coupé au bord) */
  .qph-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -16px;overflow:visible}
  .qph-stat{min-width:0;padding:12px 16px 14px}
  .qph-stat:nth-child(odd){border-left:0}
  .qph-stat:nth-child(n+3){border-top:1px solid #F1F5F9}
  .qph-stat:last-child:nth-child(odd){grid-column:1 / -1}
  .qph-stat .k,.qph-stat b,.qph-stat em{overflow:hidden;text-overflow:ellipsis}
  .qph-stat b{font-size:18px}
  body.qph-on #screen-reports .perf-page{padding:20px 16px 40px}
}

/* ---------- thème sombre ---------- */
[data-theme="dark"] .qph{background:#111827;border-color:#1F2937}
[data-theme="dark"] header.qph .qph-title,[data-theme="dark"] .qph-stat b{color:#F9FAFB!important}
[data-theme="dark"] .qph-stats{background:#0F172A;border-color:#1F2937}
[data-theme="dark"] .qph-stat{border-color:#1F2937}
[data-theme="dark"] header.qph .qph-btn.gh{background:#1F2937;border-color:#374151;color:#F9FAFB}

/* 2026-09-16 (Steeve) : dans l'éditeur d'une créa, l'en-tête « My creatives » ne sert à rien → masqué */
:has(> #cveCampsSection.cve-editor-mode) > header.qph,
:has(#cveCampsSection.cve-editor-mode) > header.qph{display:none}