.yf-hero-visuel{touch-action:pan-y pinch-zoom;isolation:isolate;background:#06213a!important}
.yf-hero-visuel .yf-hero-photos{opacity:1!important}
.yf-hero-visuel .yf-hero-photo{display:none!important}
.yf-hero-visuel .ym-background{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1!important;transition:transform 1s ease;z-index:0}
.yf-hero-visuel:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(3,22,38,.84),rgba(3,22,38,.68) 40%,rgba(3,22,38,.27) 68%,rgba(3,22,38,.88))!important}
.yf-focus-hero{position:relative;z-index:2!important;max-width:1000px!important;padding:24px 24px 35px!important}
.yf-marketing{width:100%;text-align:left;min-height:400px}
.ym-modes{display:flex;width:min(420px,100%);margin:0 auto 25px;padding:4px;border:1px solid #ffffff60;border-radius:30px;background:#092c41e0}
.ym-modes button{flex:1;min-height:44px;border:0;border-radius:26px;background:transparent;color:#fff;font:600 13px Manrope,Arial,sans-serif}
.ym-modes button[aria-pressed=true]{background:#fff;color:#0b2a40}
.ym-steps{display:flex;gap:15px;margin:0 0 26px}
.ym-steps button{flex:1;min-height:44px;color:#fff;border:0;border-top:2px solid #ffffff60;background:transparent;font:600 14px Manrope,Arial,sans-serif}
.ym-steps button[aria-pressed=true]{border-color:#9be5f2;color:#a2edf6}
.yf-marketing .ym-title{color:#fff!important;font:600 clamp(34px,6vw,66px)/1.08 Manrope,Arial,sans-serif!important;letter-spacing:-1.6px!important;margin:0 0 20px!important;text-align:left!important;text-shadow:0 2px 20px #00182760}
.ym-title em{font-family:Georgia,serif;font-weight:400;color:#a4e9f4}
.ym-lead{font:500 16px/1.65 Manrope,Arial,sans-serif!important;color:#fff!important;max-width:700px;margin:0!important}
.yf-focus-hero .yf-home-publish-bar{order:3;width:100%;margin:25px 0 0!important}
.yf-focus-hero .yf-home-needs-btn{display:none!important}
.yf-focus-hero .yf-home-publish-btn{width:100%;justify-content:center;font-size:16px!important;min-height:58px}
.yf-focus-hero .yf-search-launch{margin:25px 0 0!important;width:100%;font-size:16px!important;min-height:74px}
.yf-focus-hero .yf-search-launch-end{display:none!important}
.ym-film{margin-top:20px;border-radius:20px;padding:18px;background:#f5f8fa;color:#0c3047;box-shadow:var(--ombre);max-width:520px}
.ym-film-label,.ym-film-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px}
.ym-film-label{color:#547489;text-transform:uppercase;letter-spacing:1px}
.ym-stage{min-height:225px;padding:20px 0}
.ym-stage h2{font:700 22px/1.2 Manrope,Arial,sans-serif;margin:0 0 13px;color:#123a53}
.ym-ui{border:1px solid #dbe8ee;border-radius:14px;background:#fff;padding:17px;display:grid;gap:12px;font-size:14px}
.ym-ui strong{font-size:18px;line-height:1.35;color:#133952}
.ym-ui .ym-pill{justify-self:start;padding:7px 12px;border-radius:25px;background:#e4f7ee;color:#1d7559;font-weight:700}
.ym-ui .ym-money{font-size:28px;color:#156387;font-weight:700}
.ym-ui p{font-size:13px;line-height:1.55;margin:0;color:#4f6c7e}
.ym-film-controls button{min-height:44px;border:0;border-radius:12px;padding:8px 14px;background:#123c56;color:#fff;font:600 13px Manrope,Arial,sans-serif}
.ym-count{color:#4b7088}
.ym-progress{height:3px;background:#dce9ef;margin-top:12px}
.ym-progress span{display:block;height:100%;background:#219fc0;transition:width .5s}
.ym-stage.ym-enter{animation:ymEnter .65s cubic-bezier(.2,.8,.2,1)}
@keyframes ymEnter{from{transform:translateX(20px) scale(.96);opacity:.3}to{transform:none;opacity:1}}
@media(max-width:600px){.yf-marketing{min-height:365px}.yf-focus-hero{padding:22px 20px 30px!important}.ym-film{padding:16px}.ym-title{overflow-wrap:normal}.ym-lead{font-size:15px!important}}
@media(prefers-reduced-motion:reduce){.ym-stage.ym-enter{animation:none}.ym-progress span,.ym-background{transition:none}}

html body.yf-premium-home .hero-inner.yf-focus-hero{z-index:2!important}
html body .hero.yf-hero-visuel .ym-background{display:block!important;z-index:0!important}
html body .hero.yf-hero-visuel .yf-hero-photos{z-index:0!important}
html body.yf-premium-home .hero .hero-inner.yf-focus-hero{z-index:2!important}

html body.yf-premium-home .hero.yf-hero-visuel:after{display:block!important}
html body.yf-premium-home .hero.yf-hero-visuel .yf-home-needs-btn{display:none!important}
html body.yf-premium-home .hero.yf-hero-visuel .yf-home-publish-btn{color:#fff!important;border-color:#ffffff70!important;min-height:58px}
/* V2.042 — étape 04 : le tutoriel du menu, joué dans le hero. */
.ym-tuto{margin:22px auto 0;max-width:460px;width:100%}
.ym-tuto[hidden]{display:none!important}
.yf-hero-visuel[data-ym-step="3"] .yf-search-launch,.yf-hero-visuel[data-ym-step="3"] .yf-home-publish-bar{margin-top:18px!important}
/* V2.042 — HERO PLUS BAS SUR MOBILE : on doit voir les cartes des villes
   sans faire défiler. Marges, titre et paragraphe resserrés. */
@media(max-width:760px){
  body.yf-premium-home .hero.yf-hero-visuel{padding:18px 0 18px!important;min-height:0!important}
  .yf-focus-hero{padding:8px 18px 14px!important}
  .yf-marketing{min-height:0!important}
  .ym-modes{margin:0 auto 14px!important}
  .ym-modes button{min-height:38px!important;font-size:13px!important}
  .ym-steps{gap:10px!important;margin:0 0 14px!important}
  .ym-steps button{min-height:30px!important;font-size:13px!important}
  .yf-marketing .ym-title{font-size:clamp(28px,8vw,34px)!important;letter-spacing:-1px!important;margin:0 0 10px!important}
  .ym-lead{font-size:14.5px!important;line-height:1.5!important;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .yf-focus-hero .yf-search-launch{margin:14px 0 0!important;min-height:58px!important;font-size:15px!important}
  .yf-focus-hero .yf-home-publish-bar{margin:14px 0 0!important}
  .yf-focus-hero .yf-home-publish-btn{min-height:50px!important;font-size:15px!important}
  .ym-tuto{margin-top:14px!important}
  .tp-voile.tp-inline{height:min(520px,66vh)!important}
}

/* V2.050 — bouton « Mes besoins » en verre, centré sous la recherche (mode client). */
.yf-focus-hero .ym-besoins{align-self:center;display:flex;width:max-content;max-width:100%;box-sizing:border-box;align-items:center;justify-content:center;gap:9px;margin:14px auto 0;min-height:46px;padding:0 24px;border:1px solid rgba(255,255,255,.38);border-radius:999px;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.08));-webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);color:#fff;font:700 15px Manrope,Arial,sans-serif;text-decoration:none;transition:background .2s,border-color .2s}
.yf-focus-hero .ym-besoins:hover{background:linear-gradient(135deg,rgba(255,255,255,.3),rgba(255,255,255,.12));border-color:rgba(255,255,255,.6)}
.yf-focus-hero .ym-besoins i{font-size:15px;opacity:.9}
.yf-focus-hero .ym-besoins .yf-nav-badge{position:static;margin-left:2px;box-shadow:none}
.yf-focus-hero .ym-besoins .yf-nav-badge[hidden]{display:none}
/* V2.050 — le bas du hero est droit, comme le haut. */
html body .hero.yf-hero-visuel,html body.yf-premium-home .hero.yf-hero-visuel,html body:has(#yfShowcaseSections) .hero.yf-hero-visuel{border-radius:0!important}
