/* owner-portal.v1.css · bannière « Espace propriétaire » (maquette A validée par Hillal le 23/10/2026).
   Chargée par l'accueil FR/EN (modèle C, où elle est le hero) et par Tarifs / Pricing (feuille commune site-c) :
   autonome, jetons locaux, aucune dépendance aux classes de l'une ou l'autre feuille.
   Le téléphone est décoratif (aria-hidden) ; une phrase .opb__sr le décrit aux lecteurs d'écran.
   Chiffres du téléphone : médianes publiques de /quartiers/jvc-studio-city/, libellées « Exemple ». */

.opb{--ink:#1F2A44;--acc:#FF7E15;--mut:#6b7280;--teal:#0f8b7d;--s:.6;
  position:relative;isolation:isolate;overflow:hidden;background:#0e1424;color:#fff;font-family:"Inter Tight",system-ui,sans-serif}
.opb *{box-sizing:border-box}
.opb__bg{position:absolute;inset:0;z-index:-2}
.opb__bg picture,.opb__bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.opb::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,20,36,.88) 0%,rgba(14,20,36,.72) 55%,rgba(14,20,36,.5) 100%)}
.opb__in{display:grid;grid-template-columns:1fr;gap:28px;align-items:center;max-width:1240px;margin:0 auto;padding:64px 16px 40px}
.opb__logo{display:block;width:104px;aspect-ratio:520/183;margin-bottom:28px;background:#fff;-webkit-mask:url(/brand/logo-wordmark.webp) left/contain no-repeat;mask:url(/brand/logo-wordmark.webp) left/contain no-repeat}
.opb :is(h1,h2).opb__h{margin:0;padding:0;font-family:inherit;font-weight:700;font-size:clamp(36px,4.6vw,64px);line-height:1.02;letter-spacing:-.03em;color:#fff;max-width:11em;text-wrap:balance}
.opb :is(h1,h2).opb__h::before{content:none;display:none}
.opb__p{margin:20px 0 28px;max-width:30em;font-size:18px;line-height:1.5;color:rgba(255,255,255,.86)}
.opb__btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:14px 24px;background:var(--acc);color:#1b1206;font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;border-radius:2px;transition:box-shadow .4s cubic-bezier(.16,1,.3,1)}
.opb__btn::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.opb__btn:hover::before{transform:none}
.opb__btn:hover{box-shadow:0 14px 30px -12px rgba(255,126,21,.7)}
.opb__btn span{display:inline-block;transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.opb__btn:hover span{transform:translateX(5px)}
.opb__btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.opb__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Téléphone : construit en HTML/CSS à taille fixe (300 x 620), mis à l'échelle par --s */
.opb__dev{position:relative;justify-self:center;width:calc(300px * var(--s) + 40px);height:calc(620px * var(--s) + 24px)}
.opb__ph{position:absolute;left:50%;top:50%;width:300px;height:620px;padding:11px;border-radius:46px;background:#0c0f17;box-shadow:0 40px 80px rgba(10,15,30,.45),inset 0 0 0 1.5px #3a3f4b;transform:translate(-50%,-50%) scale(var(--s));rotate:-4deg;color:var(--ink);font-family:inherit;line-height:1.3}
.opb__sc{position:relative;width:100%;height:100%;border-radius:36px;background:#f7f7f5;overflow:hidden;font-size:11px}
.opb__isl{position:absolute;top:9px;left:50%;width:90px;height:26px;margin-left:-45px;background:#0c0f17;border-radius:20px}
.opb__st{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 0;font-weight:600;font-size:12px}
.opb__bat{display:inline-flex;gap:3px;align-items:center}
.opb__bat i{width:4px;height:4px;border-radius:50%;background:currentColor}
.opb__bat b{width:18px;height:9px;margin-left:3px;border-radius:2px;background:currentColor}
.opb__hd{display:flex;justify-content:space-between;align-items:center;padding:20px 16px 4px}
.opb__hd b{font-size:17px;letter-spacing:-.01em}
.opb__av{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#E9E7E1;font-weight:600;font-size:11px}
.opb__dt{padding:0 16px;color:var(--mut);font-size:10.5px}
.opb__sec{padding:14px 16px 6px;font-weight:600;font-size:13.5px}
.opb__chips{display:flex;gap:5px;padding:0 16px 10px}
.opb__chips span{padding:4px 7px;border:1px solid #d9d9d6;border-radius:6px;font-size:9.5px}
.opb__chips .on{background:var(--ink);border-color:var(--ink);color:#fff}
.opb__card{margin:0 12px 8px;padding:12px;background:#fff;border:1px solid #e6e6e3;border-radius:12px}
.opb__k{color:var(--mut);font-size:10px}
.opb__v{margin-top:2px;font-size:24px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.opb__card svg{display:block;width:100%;height:70px}
.opb__row{display:flex;gap:8px;margin:0 12px 8px}
.opb__row .opb__card{flex:1;margin:0}
.opb__row .opb__v{font-size:17px}
.opb__row .opb__v--s{margin-top:6px;font-size:13px;white-space:normal}
.opb__stay{display:flex;gap:8px;align-items:center}
.opb__stay img{flex:none;width:44px;height:34px;border-radius:6px;object-fit:cover}
.opb__nav{position:absolute;left:12px;right:12px;bottom:12px;height:52px;display:flex;justify-content:space-around;align-items:center;background:#fff;border-radius:26px;box-shadow:0 4px 18px rgba(0,0,0,.08);font-size:9px;color:var(--mut);text-align:center}
.opb__nav i{display:block;width:16px;height:16px;margin:0 auto 3px;border:1.6px solid currentColor;border-radius:4px}
.opb__nav .on{color:var(--ink);font-weight:600}

/* Entrée du téléphone : légère, liée au défilement là où le navigateur le permet, coupée en mouvement réduit */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .opb__ph{animation:opbIn linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes opbIn{from{translate:0 48px;rotate:1deg}to{translate:0 0;rotate:-4deg}}
html.still .opb__ph{animation:none}

@media (min-width:600px){.opb{--s:.7}}
@media (min-width:900px){
  .opb{--s:.88}
  .opb::before{background:linear-gradient(90deg,rgba(14,20,36,.84) 0%,rgba(14,20,36,.58) 45%,rgba(14,20,36,.08) 75%)}
  .opb__in{grid-template-columns:minmax(0,1fr) auto;gap:48px;min-height:640px;padding:72px 40px}
  .opb__txt{padding-left:clamp(0px,4vw,56px)}
  .opb__logo{width:120px;margin-bottom:40px}
  .opb__p{font-size:19px;margin:22px 0 34px}
  .opb__dev{margin-right:clamp(0px,6vw,110px)}
}

/* Accueil FR/EN (décision Hillal du 23/10/2026) : la bannière est le hero de la page.
   La section porte aussi .hero .hero--home (stay.v1.css) : fond <picture> en LCP, parallaxe,
   entrée au chargement et seuil de l'en-tête plein viennent de stay-motion.js sans changement.
   Ordre mobile : titre, texte, bouton, téléphone, engagements ; en large, engagements sous le texte. */
.hero--opb{align-items:center;padding:112px 0 36px}
.hero--opb::before{content:none}
.hero--opb .hero__bg img{object-position:50% 30%}
.hero--opb .hero__shade{background:linear-gradient(180deg,rgba(14,20,36,.86) 0%,rgba(14,20,36,.74) 55%,rgba(14,20,36,.62) 100%)}
.hero--opb .wrap{max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
.hero--opb .opb__p{margin:16px 0 0;font-size:17px}
.hero--opb .act{margin-top:24px;gap:14px 28px}
.hero--opb .proof{margin-top:4px;gap:14px 32px;font-size:15px}
/* hero plus haut que l'écran sous 900px : le texte ne s'efface pas au défilement (styles inline de stay-motion.js) */
@media (max-width:899px){.hero--opb .wrap{opacity:1!important;transform:none!important}}
@media (max-width:599px){
  .hero--opb .proof{display:grid;grid-template-columns:1fr;gap:10px}
  .hero--opb .proof li{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline}
  .hero--opb .proof b{display:inline}
}
@media (min-width:900px){
  .hero--opb{min-height:100vh;min-height:100svh;padding:124px 0 48px}
  .hero--opb .hero__shade{background:linear-gradient(90deg,rgba(14,20,36,.86) 0%,rgba(14,20,36,.62) 45%,rgba(14,20,36,.14) 78%)}
  .hero--opb .wrap{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt dev" "proof dev";column-gap:48px;row-gap:0}
  .hero--opb .opb__txt{grid-area:txt;align-self:end;padding-left:0}
  .hero--opb .opb__dev{grid-area:dev;margin-right:clamp(0px,4vw,72px)}
  .hero--opb .proof{grid-area:proof;align-self:start;margin-top:44px;max-width:640px;font-size:16px}
  .hero--opb .opb__p{font-size:19px;margin-top:22px}
  .hero--opb .act{margin-top:32px}
}
@media (min-width:900px) and (max-height:820px){.hero--opb{--s:.78}}

/* barre d'actions mobile effacée pendant la bannière (js/owner-portal.js) */
.mobile-cta-bar{transition:transform .35s cubic-bezier(.16,1,.3,1)}
.mobile-cta-bar.is-off{transform:translateY(110%);pointer-events:none}
@media (prefers-reduced-motion:reduce){.mobile-cta-bar{transition:none}}