/* me-video.css — 2026-10-20
   Vidéos YouTube : vignettes « facade » (aucune iframe avant le clic), lightbox pour les liens texte,
   lien « Voir comment ça marche » avec bouton play. youtube-nocookie.com, chargement au clic uniquement. */

/* ---------- vignette ---------- */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:var(--blue-950,#0b2431);box-shadow:0 18px 44px rgba(11,36,49,.18);cursor:pointer;text-decoration:none;color:#fff;isolation:isolate}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.yt:hover img,.yt:focus-visible img{transform:scale(1.04)}
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,36,49,0) 62%,rgba(11,36,49,.42) 100%);pointer-events:none}
.yt-play{position:absolute;z-index:2;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;background:var(--yellow,#ffe93d);display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.35);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.yt-play::before{content:"";margin-left:5px;border-left:21px solid var(--yellow-ink,#4a3d00);border-top:12px solid transparent;border-bottom:12px solid transparent}
.yt:hover .yt-play,.yt:focus-visible .yt-play{transform:scale(1.08)}
.yt:focus-visible{outline:3px solid var(--yellow,#ffe93d);outline-offset:3px}
.yt-dur{position:absolute;z-index:2;right:12px;bottom:12px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:rgba(11,36,49,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:5px 9px;border-radius:8px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3}
.yt--sm .yt-play{width:52px;height:52px;margin:-26px 0 0 -26px}
.yt--sm .yt-play::before{border-left-width:16px;border-top-width:9px;border-bottom-width:9px;margin-left:4px}

/* légende + étiquette au-dessus */
.yt-card{display:flex;flex-direction:column;gap:12px;min-width:0}
.yt-lbl{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-sans,inherit);font-size:13px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--blue-800,#144a68)}
.yt-lbl i{width:10px;height:10px;border-radius:50%;background:var(--oc,var(--yellow,#ffe93d));box-shadow:0 0 0 4px color-mix(in srgb,var(--oc,var(--yellow,#ffe93d)) 22%,transparent)}
.yt-cap{margin:0;font-family:var(--font-display,inherit);font-size:16px;font-weight:800;line-height:1.3;letter-spacing:-.01em;color:var(--blue-950,#0b2431)}
.on-dark .yt-lbl,.pb-night .yt-lbl{color:var(--yellow,#ffe93d)}
.on-dark .yt-cap,.pb-night .yt-cap{color:#fff}

/* ---------- lien « Voir comment ça marche » avec bouton play ---------- */
.hero-play{margin:16px 0 0}
.hero-play a,.hero-play-link{display:inline-flex;align-items:center;gap:11px;color:#fff;font-weight:800;text-decoration:none}
.hp-ico{flex:none;width:38px;height:38px;border-radius:50%;background:var(--yellow,#ffe93d);display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.28);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.hp-ico::before{content:"";margin-left:3px;border-left:12px solid var(--yellow-ink,#4a3d00);border-top:7px solid transparent;border-bottom:7px solid transparent}
.hero-play a:hover .hp-ico,.hero-play-link:hover .hp-ico{transform:scale(1.1)}
.hp-txt{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.hp-dur{font-size:12.5px;font-weight:700;opacity:.8}

/* ---------- lightbox ---------- */
.yt-lb{border:0;padding:0;background:transparent;max-width:min(960px,92vw);width:100%;overflow:visible}
.yt-lb::backdrop{background:rgba(11,36,49,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.yt-lb-box{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.yt-lb-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-lb-close{position:absolute;top:-18px;right:-18px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--yellow,#ffe93d);color:var(--yellow-ink,#4a3d00);font:800 24px/1 var(--font-display,inherit);cursor:pointer;box-shadow:0 10px 24px rgba(0,0,0,.35)}
.yt-lb-close:hover{transform:scale(1.06)}
@media(max-width:720px){.yt-lb-close{top:-54px;right:0}}

/* ---------- section accueil « En 30 secondes » ---------- */
#videos-30s .sec-head.row .sec-sub{margin:0;max-width:440px;color:var(--muted,#4a6675);font-size:16px;line-height:1.55}
#videos-30s .yt-grid{align-items:start}
@media(max-width:900px){#videos-30s .yt-grid{grid-template-columns:1fr}}

/* ---------- section pro « Vos locaux, en vidéo » ---------- */
.pb-videos{background:#fff}
.pb-videos-grid{display:grid;grid-template-columns:.9fr 1.3fr;gap:56px;align-items:center}
.pb-videos-copy p{margin:16px 0 26px;font-size:18px;line-height:1.65;color:var(--muted,#4a6675);max-width:460px}
.pb-videos-list{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:900px){.pb-videos-grid{grid-template-columns:1fr;gap:34px}.pb-videos-list{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.yt img,.yt-play,.hp-ico{transition:none}}