/* ============================================================
   QTouch — page publique (qtouch-public.html) : passe de finition "fluide et clair", toutes vues.
   Chargé en dernier (après advertiser.css et venue-licence.css). Classes nouvelles : pp- ;
   le reste est scopé (#top = hero, .hiw, sections des vues). Les en-têtes de la vue annonceur
   ne sont pas touchés ; les vues venue / licence prennent la même échelle de titres.
   ============================================================ */
:root{--pp-o:#F97316;--pp-o2:#EA580C;--pp-ink:#0F172A;--pp-h2:clamp(30px,3.4vw,46px);--pp-sec:clamp(64px,7vw,96px)}

/* ---------- 1. une seule couleur d'action sur les 3 vues (Communauté garde son rose) ---------- */
body[data-cat="venue"],body[data-cat="brand"]{--accent:#F97316;--accent-d:#EA580C;--accent-soft:rgba(249,115,22,.10)}
body[data-cat="venue"] .hero-title em,body[data-cat="brand"] .hero-title em{color:#FB923C}

/* ---------- 2. défilement doux ; les ancres s'arrêtent sous la barre flottante ---------- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html{scroll-padding-top:84px}

/* ---------- 3. hero : formulaire en pilule, bouton orange, mobile empilé ---------- */
#top .hero-title{text-wrap:balance}
#top form{align-items:center;gap:6px;padding:6px;border-radius:999px;background:rgba(15,23,42,.72);border-color:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#top form input{align-self:stretch;border-radius:999px;padding:14px 22px}
#top form button[type="submit"]{min-height:48px;padding:0 26px;border-radius:999px;background:linear-gradient(135deg,#F97316,#EA580C);box-shadow:0 10px 24px -8px rgba(234,88,12,.6);font-weight:800;transition:transform .2s,box-shadow .2s}
#top form button[type="submit"]:hover{filter:none;transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(234,88,12,.72)}
#top form button[type="submit"]:focus-visible,#top form input:focus-visible{outline:2px solid #FB923C;outline-offset:2px}
@media(max-width:780px){
  #top{min-height:0}
  #top > div.relative{padding:56px 22px 72px}
  #top form{flex-direction:column;align-items:stretch;padding:8px;border-radius:20px}
  #top form input{border-radius:14px;padding:14px 16px}
  #top form button[type="submit"]{width:100%;border-radius:14px}
}

/* ---------- 4. rangée "comment ça marche" : 3 cartes lisibles ---------- */
.hiw{padding:44px 36px 36px}
.hiw-grid{gap:18px}
.hiw-step{gap:14px;padding:18px 20px;border-radius:18px;background:#fff;border:1px solid #EEF0F4;box-shadow:0 1px 2px rgba(15,23,42,.03);transition:border-color .2s,box-shadow .2s,transform .2s}
.hiw-step:hover{border-color:#FED7B5;box-shadow:0 16px 32px -20px rgba(234,88,12,.4);transform:translateY(-2px)}
.hiw-ic{width:40px;height:40px;margin-top:0;border-radius:12px;background:#FFF4EC;color:#EA580C;display:grid;place-items:center}
.hiw-ic svg{width:19px;height:19px}
.hiw-body{color:#475569}
.hiw-body b{font-size:15.5px;font-weight:800;color:#0F172A}
@media(max-width:900px){.hiw{padding:26px 18px 18px}.hiw-grid{gap:10px}.hiw-step{padding:14px 16px}}

/* ---------- 5. même échelle de titres et même rythme sur venue / licence ---------- */
body[data-cat="venue"] :is(section.vfeat5,section.adp-how,section.adp-plug,section.venue-block,section.pub-plans-section) h2,
body[data-cat="brand"] :is(section.pop-lic,section.lpDual,section.ljn,section.lbp,section.pub-plans-section) h2{font-size:var(--pp-h2) !important;letter-spacing:-.034em !important;line-height:1.06 !important}
body[data-cat="venue"] :is(section.vfeat5,section.adp-how,section.venue-block,section.pub-plans-section),
body[data-cat="brand"] :is(section.pop-lic,section.lpDual,section.ljn,section.lbp,section.pub-plans-section){padding-top:var(--pp-sec) !important;padding-bottom:var(--pp-sec) !important}

/* ---------- 6. boutons : un orange principal, un secondaire ---------- */
.pp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;font-family:inherit;font-size:14px;font-weight:800;letter-spacing:-.1px;line-height:1.1;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s}
.pp-btn{border:0;color:#fff;background:linear-gradient(135deg,#F97316,#EA580C);box-shadow:0 10px 24px -10px rgba(234,88,12,.65)}
.pp-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(234,88,12,.75)}
.pp-btn:focus-visible{outline:2px solid #F97316;outline-offset:3px}
/* boutons existants alignés sur ces deux styles (même hauteur, même arrondi) */
:is(.plan-card-cta,.adp-plug-cta,.mkstk-cta,.btn-show-more,.lbp-cta,.lpDual-card-cta,.vplug-cta){min-height:48px;border-radius:999px !important}
section.adp-plug .adp-plug-cta{background:linear-gradient(135deg,#F97316,#EA580C) !important;color:#fff !important;border:0 !important;box-shadow:0 10px 24px -10px rgba(234,88,12,.65) !important}
.plan-card.featured .plan-card-cta{background:linear-gradient(135deg,#F97316,#EA580C) !important;color:#fff !important;border:0 !important;box-shadow:0 10px 24px -10px rgba(234,88,12,.65) !important}
.plan-card:not(.featured) .plan-card-cta{background:#fff !important;color:#0F172A !important;border:1.5px solid #E2E8F0 !important;box-shadow:none !important}
.plan-card:not(.featured) .plan-card-cta:hover{border-color:#0F172A !important;transform:translateY(-1px)}

/* ---------- 7. FAQ : "Pas trouvé votre réponse ?" = démo (principal) + e-mail (secondaire) ---------- */
body section.faq-sec .faq-sec-h .faq-help.pp-help{flex-direction:column;align-items:flex-start;gap:12px;padding:20px;border-radius:20px;background:#FFF7F0;border:1px solid #FED7B5;box-shadow:none}
.faq-help.pp-help .faq-help-ic{width:42px;height:42px;background:#fff;color:#EA580C;box-shadow:none}
.faq-help.pp-help .faq-help-ic::before{display:none;animation:none}
body section.faq-sec .faq-sec-h .faq-help.pp-help h3{flex:none;margin:0;font-size:17px;font-weight:900;letter-spacing:-.3px}
.pp-help-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
@media(max-width:520px){.pp-help-actions > *{flex:1 1 100%}}

/* ---------- 8. offres annonceur : sans le sélecteur annuel / mensuel (aucun prix n'en dépend) ---------- */
#offres-annonceur .plans-sub{margin-bottom:40px}

/* ---------- 9. barre flottante des espaces (apparaît après le hero) ---------- */
.pp-bar-tab{border:0;background:transparent;color:rgba(255,255,255,.74);font-family:inherit;font-size:13px;font-weight:700;padding:9px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s}
.pp-bar-tab:hover{color:#fff;background:rgba(255,255,255,.08)}
.pp-bar-tab.on{background:#fff;color:#0F172A}
.pp-bar-cta{margin-left:4px;border:0;padding:9px 16px;border-radius:999px;background:linear-gradient(135deg,#F97316,#EA580C);color:#fff;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;white-space:nowrap}
@media(max-width:560px){.pp-bar-cta{display:none}.pp-bar-tab{padding:9px 12px;font-size:12.5px}}

/* ---------- 10. révélation au scroll (le script ajoute html.pp-rv-on ; sans script tout reste visible) ---------- */
html.pp-rv-on .pp-rv{opacity:0;transform:translate3d(0,20px,0)}
html.pp-rv-on .pp-rv.pp-in{opacity:1;transform:none;transition:opacity .6s ease var(--pp-d,0ms),transform .75s cubic-bezier(.2,.8,.2,1) var(--pp-d,0ms)}

/* ---------- 11. changement de vue : fondu court au lieu d'un saut ---------- */
html.pp-swap :is(#top,.connector,.hiw,section[class*="for-"],section[class*="not-"]){opacity:0 !important;transition:none !important}
html.pp-swap-in :is(#top,.connector,.hiw,section[class*="for-"],section[class*="not-"]){transition:opacity .34s ease}

/* ---------- 12. animations en boucle mises en pause hors écran ---------- */
section.pp-off,section.pp-off *{animation-play-state:paused !important}

/* ---------- 13. démos : mention "données d'exemple" (les chiffres de démo ne sont pas réels) ---------- */
.pp-demo-note{display:block;margin:10px 0 0;font-size:12px;font-weight:600;line-height:1.45;color:#64748B;text-align:center}
.df > .pp-demo-note{margin:-14px 0 16px;text-align:left}
.dmga-mod .pp-demo-note{margin:-4px 0 14px}

/* ---------- 13b. téléphone : boutons de l'en-tête (langue, menu) à 40 px — le style en ligne les fixait à 34 px ---------- */
@media (max-width:760px){
  .hdr .hdr-top .qt-lang-btn.menu-btn{width:40px !important;height:40px !important}
  .hdr .hdr-top .hdr-burger{width:40px;height:40px}
}

/* ---------- 14. téléphone : fenêtre liste d'attente QOYU — défile si plus haute que l'écran (320 px, paysage 360 px) ---------- */
body .qjp-ov{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
body .qjp-ov .qjp-pop{margin:auto}
body .qjp-ov .qjp-close{width:40px;height:40px;top:12px;right:12px}
@media (max-width:400px),(max-height:520px){body .qjp-ov .qjp-pop{padding:58px 20px 22px}body .qjp-ov .qjp-pop h3{font-size:22px}}

@media (prefers-reduced-motion:reduce){
  .hiw-step,.pp-btn{transition:none}
  html.pp-rv-on .pp-rv{opacity:1;transform:none}
}