/* Page vidéo, d'après la maquette video.html (`.toast` renommé `.arche-toast`,
 * déjà pris par Bootstrap). */
/* ===== Page détail vidéo ===== */
.watch{background:var(--arche-dark);color:var(--arche-white);padding-top:calc(var(--header-h) + 28px);padding-bottom:88px;position:relative}
.watch::before{content:"";position:absolute;inset:0 0 auto 0;height:520px;background:radial-gradient(60% 100% at 50% 0%,rgba(194,132,0,.16),rgba(35,35,35,0) 70%);pointer-events:none}
.crumbs{position:relative;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,250,.5);margin-bottom:22px}
.crumbs a{transition:color .2s var(--ease-out)}
.crumbs [aria-current]{color:rgba(250,250,250,.85);max-width:64ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs i{font-style:normal;opacity:.4}
@media (hover:hover){.crumbs a:hover{color:var(--arche-aube)}}

.player{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#111;border:1px solid rgba(250,250,250,.1);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.player img{transition:transform .8s var(--ease-out)}
.player::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(35,35,35,.7) 0%,rgba(35,35,35,0) 45%);pointer-events:none;transition:opacity .3s var(--ease-out)}
.player.playing::after{opacity:0}
.player-btn{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:none;border:0;cursor:pointer;color:var(--arche-dark)}
.player-btn .disc{position:relative;width:92px;height:92px;border-radius:50%;background:var(--arche-aube);display:grid;place-items:center;transition:transform .25s var(--ease-out),background-color .2s var(--ease-out)}
.player-btn .disc::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(194,132,0,.55);animation:ring 2.4s var(--ease-out) infinite}
@keyframes ring{0%{transform:scale(.92);opacity:.9}70%,100%{transform:scale(1.18);opacity:0}}
@media (hover:hover){.player:hover img{transform:scale(1.025)}.player-btn:hover .disc{transform:scale(1.07);background:#D79500}}
.player-btn:active .disc{transform:scale(.96)}
.player-dur{position:absolute;z-index:2;left:20px;bottom:18px;font-size:13px;font-weight:600;letter-spacing:.06em;background:rgba(35,35,35,.82);padding:5px 12px;border-radius:999px;font-variant-numeric:tabular-nums}

.v-title{font-size:clamp(26px,2.8vw,42px);font-weight:800;font-stretch:120%;text-transform:uppercase;line-height:1.04;letter-spacing:-.005em;margin:14px 0 18px;max-width:22ch}
.v-meta{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;color:rgba(250,250,250,.62)}
.v-meta span{display:inline-flex;align-items:center;gap:9px}
.v-meta svg{width:17px;height:17px;color:var(--arche-aube)}
.v-meta b{color:var(--arche-white);font-weight:600;font-variant-numeric:tabular-nums}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:22px 0;margin-top:26px;border-block:1px solid rgba(250,250,250,.1)}
.actions .lbl{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,250,.5);margin-right:6px}
.round{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(250,250,250,.2);background:transparent;color:var(--arche-white);cursor:pointer;transition:transform .16s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),background-color .2s var(--ease-out)}
.round svg{width:17px;height:17px}
.round:active{transform:scale(.93)}
@media (hover:hover){.round:hover{border-color:var(--arche-aube);color:var(--arche-aube)}}
.btn-embed{height:44px;padding:0 20px;font-size:13px;margin-left:auto}
.about{padding-top:30px;max-width:68ch}
.about h2{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--arche-aube);margin:0 0 12px;display:flex;gap:12px;align-items:center}
.about h2::before{content:"";width:28px;height:1px;background:var(--arche-aube)}
.about p{font-size:18px;font-weight:300;line-height:1.65;color:rgba(250,250,250,.8);margin:0}
.side{position:sticky;top:calc(var(--header-h) + 24px)}
.rank.sm{grid-template-columns:40px 112px 1fr}
.rank.sm .n{font-size:24px}
.rank.sm .t{font-size:14px}

/* Boîte de dialogue « Intégrer » */
dialog.embed{width:min(620px,calc(100vw - 32px));padding:0;border:1px solid var(--arche-aube);border-radius:20px;background:var(--arche-dark);color:var(--arche-white);box-shadow:0 40px 100px rgba(0,0,0,.6)}
dialog.embed::backdrop{background:rgba(20,20,20,.7);backdrop-filter:blur(6px)}
dialog.embed[open]{animation:pop .22s var(--ease-out)}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
dialog.embed header{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 6px}
dialog.embed h2{font-size:18px;font-weight:800;font-stretch:118%;text-transform:uppercase;margin:0}
dialog.embed .body{padding:12px 24px 24px}
dialog.embed p{color:rgba(250,250,250,.6);font-size:14px;margin:0 0 16px}
dialog.embed textarea{width:100%;height:116px;resize:none;background:rgba(250,250,250,.05);border:1px solid rgba(250,250,250,.14);border-radius:12px;color:rgba(250,250,250,.9);font:13px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace;padding:14px 16px}
dialog.embed textarea:focus{outline:none;border-color:var(--arche-aube)}
.arche-toast{position:fixed;left:50%;bottom:28px;z-index:80;transform:translate(-50%,16px);opacity:0;pointer-events:none;background:var(--arche-white);color:var(--arche-dark);font-size:14px;font-weight:600;padding:12px 22px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.35);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out)}
.arche-toast.on{opacity:1;transform:translate(-50%,0)}


/* Audience cumulée (vues Arche + plateformes) */
.audience{margin-top:30px;border:1px solid rgba(250,250,250,.12);border-radius:20px;background:linear-gradient(180deg,rgba(250,250,250,.045),rgba(250,250,250,.02));overflow:hidden}
.audience-top{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:18px 28px;padding:26px 28px}
.audience .kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(250,250,250,.55);display:flex;align-items:center;gap:12px;margin-bottom:10px}
.audience .kicker::before{content:"";width:28px;height:1px;background:var(--arche-aube)}
.audience .total{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 16px}
.audience .total .big-num{font-size:clamp(44px,5vw,68px)}
.audience .total span:not(.big-num){font-size:18px;font-weight:300;color:rgba(250,250,250,.78)}
.toggle{flex:none;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(250,250,250,.25);background:transparent;color:var(--arche-white);font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:transform .16s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),background-color .2s var(--ease-out)}
.toggle svg{transition:transform .3s var(--ease-out)}
.toggle[aria-expanded=true]{border-color:var(--arche-aube);color:var(--arche-aube)}
.toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.toggle:active{transform:scale(.97)}
@media (hover:hover){.toggle:hover{border-color:var(--arche-aube);color:var(--arche-aube)}}
.collapse-x{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease-out)}
.collapse-x.open{grid-template-rows:1fr}
.collapse-x>div{overflow:hidden;min-height:0}
.split{display:flex;height:8px;border-radius:999px;overflow:hidden;background:rgba(250,250,250,.08);margin:0 28px}
.split i{display:block;height:100%;transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease-out) .08s}
.collapse-x.open .split i{transform:scaleX(1)}
.split .a{background:var(--arche-aube)}.split .y{background:rgba(250,250,250,.75)}
.sources{display:grid;grid-template-columns:repeat(2,1fr);margin-top:22px;border-top:1px solid rgba(250,250,250,.1)}
.source{display:flex;align-items:center;gap:16px;padding:20px 28px}
.source+.source{border-left:1px solid rgba(250,250,250,.1)}
.source .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-weight:800;font-size:15px;border:1px solid rgba(250,250,250,.2)}
.source.arche .ic{color:var(--arche-aube);border-color:rgba(194,132,0,.6)}
.source small{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(250,250,250,.5);margin-bottom:2px}
.source b{font-size:22px;font-weight:800;font-stretch:112%;font-variant-numeric:tabular-nums}
.source em{font-style:normal;font-size:13px;color:rgba(250,250,250,.5);margin-left:8px;font-weight:400}
.sync{padding:14px 28px;border-top:1px solid rgba(250,250,250,.08);font-size:13px;color:rgba(250,250,250,.45);text-align:right}
.about .more-btn{margin-top:14px;background:none;border:0;padding:0;font:inherit;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--arche-aube);cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.about .more-btn:active{transform:scale(.97)}
.about .full p+p{margin-top:16px}
.about .tags{margin-top:18px!important;color:var(--arche-aube);font-size:15px}
@media (max-width:575.98px){.audience-top{flex-wrap:wrap}.sources{grid-template-columns:1fr}.source+.source{border-left:0;border-top:1px solid rgba(250,250,250,.1)}.audience-top{padding:22px}}
.more{background:var(--arche-white)}
@media (max-width:991.98px){.side{position:static;margin-top:20px}.btn-embed{margin-left:0}.player-btn .disc{width:72px;height:72px}.watch{padding-bottom:64px}}

/* ---- Compléments d'intégration ---- */
/* Pictos ArcheIcons (pleins) dans les boutons ronds et les sources d'audience. */
.round .arche-social-icon,.source .ic .arche-social-icon{width:17px;height:17px;fill:currentColor}
/* Autant de colonnes que de plateformes (2 à 4), une seule sur mobile. */
.sources{grid-template-columns:repeat(var(--n,2),1fr)}
@media (max-width:575.98px){.sources{grid-template-columns:1fr}}
/* Vidéo verticale : proportions natives, hauteur bornée, centrée. */
.player--portrait{aspect-ratio:var(--ratio);max-height:78vh;margin-inline:auto}
.side-title{margin:0 0 16px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--arche-aube)}
.brands-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(250,250,250,.5);white-space:nowrap}