/* FormaSkills — chantier « drive » : lecteur YouTube / Vimeo durci, studio (vidéos Google Drive), administration.
   Jetons uniquement (--fs-*), propriétés logiques (RTL), point de rupture de l'échelle (720 px). */

/* ---------- Lecteur durci ---------- */
.eg{position:relative}
.eg .eg-frame{position:absolute;inset:0;z-index:1}
.eg .eg-frame iframe{width:100%;height:100%;display:block;border:0;background:var(--fs-video-mat)}
/* Marque du fournisseur hors champ (demande du client, 21/09/2026 : « c'est indiqué que c'est un youtube »).
   L'iframe déborde du cadre en haut et en bas : YouTube y centre la vidéo, entière, et place son titre, sa
   chaîne et son logo contre les bords de l'iframe — donc dans la partie masquée. */
.eg .eg-frame{overflow:hidden}
.eg .eg-frame iframe{position:absolute;inset-inline:0;inset-block-start:-64px;block-size:calc(100% + 128px)}
/* Fin de lecture : le fournisseur affiche ses suggestions de vidéos, on les recouvre. */
.eg .eg-frame::after{content:"";position:absolute;inset:0;background:var(--fs-video-mat);opacity:0;transition:opacity var(--fs-fast);pointer-events:none}
.eg.ended .eg-frame::after{opacity:1}
/* Calque transparent : les clics n'atteignent jamais le titre, le logo ou « Regarder sur YouTube ». */
.eg .eg-shield{position:absolute;inset:0;z-index:3;background:transparent;cursor:pointer}
.eg .watermark-layer{z-index:4}
.eg .eg-big{z-index:6}
.eg .eg-big:disabled{opacity:.55;cursor:progress}
.eg .eg-status{position:absolute;inset-inline:0;inset-block-start:var(--fs-space-md);margin:0 auto;inline-size:max-content;max-inline-size:90%;z-index:7;padding:6px 12px;border-radius:var(--fs-radius-md);background:var(--fs-overlay);color:var(--fs-on-solid);font-size:var(--fs-text-sm);text-align:center}
.eg .eg-status[hidden]{display:none}
.eg .eg-controls{position:absolute;inset-inline:0;inset-block-end:0;z-index:8;display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:10px 12px;color:var(--fs-on-solid);background:linear-gradient(to top,var(--fs-overlay),transparent);transition:opacity var(--fs-fast)}
.eg.playing:not(:hover):not(:focus-within) .eg-controls{opacity:0}
.eg .eg-controls .vp-btn{min-inline-size:var(--fs-target-min);min-block-size:var(--fs-target-min)}
.eg .eg-controls .vp-btn:disabled{opacity:.5;cursor:not-allowed}
.eg .eg-controls .ic{width:var(--fs-icon);height:var(--fs-icon)}
.eg .eg-seek{flex:1 1 160px;min-inline-size:120px;accent-color:var(--fs-primary);min-block-size:var(--fs-target-min)}
.eg .eg-vol{inline-size:80px;accent-color:var(--fs-on-solid);min-block-size:var(--fs-target-min)}
.eg .eg-speed{background:transparent;color:var(--fs-on-solid);border:1px solid var(--fs-dark-border-2);border-radius:var(--fs-radius-sm);min-block-size:var(--fs-target-min);padding-inline:6px;font-size:var(--fs-text-sm)}
.eg .eg-speed option{color:var(--fs-text)}
.eg :focus-visible{outline:var(--fs-focus-outline);outline-offset:var(--fs-focus-offset)}
.eg:fullscreen{border-radius:0;aspect-ratio:auto}
@media (max-width:720px){.eg .eg-controls{gap:2px;padding:8px}.eg .eg-seek{flex-basis:100%;order:-1}}

/* ---------- Studio : vidéos Google Drive ---------- */
.drive-add{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-block-start:10px}
.drive-add .hint .ic,.drive-badges .ic{width:var(--fs-icon-sm);height:var(--fs-icon-sm)}
.drive-badges{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-block-start:10px}
.drive-badges .hint{flex-basis:100%}
.drive-flag{margin-inline-start:6px}
.drive-flag .ic{width:var(--fs-icon-xs);height:var(--fs-icon-xs)}
.drive-modal{max-width:680px}
.drive-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-block-size:55vh;overflow:auto}
.drive-item{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);background:var(--fs-surface)}
.drive-item .pill-icon{inline-size:36px;block-size:36px;border-radius:var(--fs-radius-md);flex:none}
.drive-item-main{flex:1;min-inline-size:0;display:flex;flex-direction:column}
.drive-item-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drive-more{display:flex;justify-content:center;margin-block-start:8px}

/* ---------- Administration ---------- */
.drive-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.drive-kpi{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);background:var(--fs-surface-sunken)}
.drive-kpi strong{overflow-wrap:anywhere}
.drive-kpi .ic{width:var(--fs-icon-sm);height:var(--fs-icon-sm)}
.drive-fieldset{border:1px solid var(--fs-border);border-radius:var(--fs-radius-lg);padding:14px 16px;margin-block:0 16px}
.drive-fieldset legend{padding-inline:6px;font-weight:700}
.drive-code{overflow-wrap:anywhere;background:var(--fs-code-bg);color:var(--fs-code-text);padding:4px 8px;border-radius:var(--fs-radius-sm)}
.drive-limits{margin:6px 0 0;padding-inline-start:18px}

/* ---------- Fenêtre de connexion Google (21/09/2026) ---------- */
.drive-popup-body{background:var(--fs-bg);min-block-size:100vh}
.drive-popup{max-inline-size:520px;margin:0 auto;padding:var(--fs-space-lg) var(--fs-space-md);display:flex;flex-direction:column;gap:var(--fs-space-md)}
.drive-popup-head{display:flex;align-items:center;gap:12px}
.drive-popup-head .pill-icon{inline-size:40px;block-size:40px;border-radius:var(--fs-radius-md);flex:none}
.drive-steps{margin:0;padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-text-sm)}
.drive-steps a{font-weight:600;white-space:nowrap}
.drive-popup-form{display:flex;flex-direction:column;gap:4px}