/* Paris by Brompton : vitrine des dernières vidéos */
.vids{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)}
.vid{position:relative;margin:0;background:var(--card);border-radius:18px;overflow:hidden;border-bottom:8px solid var(--accent);display:flex;flex-direction:column}
.vid.main{grid-column:1/-1}
.vid .frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vid .frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .play{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:pointer;display:block}
.vid .play:focus-visible{outline:4px solid #fff;outline-offset:-8px}
.vid .play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
.vid .play:hover img{transform:scale(1.04);filter:brightness(.85)}
.vid .play::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55))}
.vid .ico{position:absolute;z-index:2;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:0 6px 24px rgba(0,0,0,.4);transition:transform .2s}
.vid.main .ico{width:92px;height:92px;margin:-46px 0 0 -46px}
.vid .play:hover .ico{transform:scale(1.1)}
.vid .ico svg{width:34%;height:34%;fill:#fff;margin-left:6%}
.vid .badge{position:absolute;z-index:2;left:14px;top:14px;padding:4px 14px;border-radius:999px;background:#fff;color:#0e1a28;font:700 .85rem/1.6 var(--display);letter-spacing:.04em;text-transform:uppercase}
.vid figcaption{display:flex;gap:14px;align-items:flex-start;padding:16px 20px 18px}
.vid .num{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--hover-fg);font:700 1.1rem/1 var(--display)}
.vid h3{margin:0;font:700 1.2rem/1.25 var(--display)}
.vid.main h3{font-size:clamp(1.3rem,3vw,1.7rem)}
.vid .yt{display:inline-block;margin-top:6px;font-size:.95rem;color:var(--muted);font-weight:700}
.vid .yt:hover{color:var(--ink)}
@media (max-width:640px){.vids{grid-template-columns:1fr}.vid .ico{width:60px;height:60px;margin:-30px 0 0 -30px}.vid.main .ico{width:72px;height:72px;margin:-36px 0 0 -36px}}
@media (prefers-reduced-motion:reduce){.vid .play img,.vid .ico{transition:none}.vid .play:hover img{transform:none}}

/* hero avec logo */
.brom-hero{display:grid;grid-template-columns:1fr minmax(220px,360px);gap:clamp(20px,5vw,64px);align-items:center}
.brom-hero::before{display:none}
.brom-txt::before{content:"";display:block;width:92px;height:12px;border-radius:6px;background:var(--accent);margin-bottom:22px}
.brom-logo{position:relative;aspect-ratio:1;border-radius:50%;background:#eef2f4;box-shadow:0 0 0 10px var(--accent);display:grid;place-items:center;overflow:hidden;max-width:360px;justify-self:center;width:100%}
.brom-logo img{width:92%;height:92%;object-fit:contain;display:block}
.vid .ico{background:var(--accent)}
.vid .ico svg{fill:#14262b}
.vid .num{background:var(--accent);color:#14262b}
@media (max-width:760px){.brom-hero{grid-template-columns:1fr}.brom-logo{order:-1;max-width:96px;justify-self:start;margin:6px 0 0 6px;box-shadow:0 0 0 5px var(--accent)}}
.vid .yt{display:inline-flex;align-items:center;min-height:44px}