.watch-main {
	max-width: 1100px; /* correspond à la largeur du player */
	margin: 28px auto;
	padding: 0 12px;
	box-sizing: border-box;
	color: #d7dbe0;
}

/* Wrapper du player : occupe toute la largeur du .watch-main */
.watch-player-wrap {
	position: relative;
	width: 100%;
	display: block;
	margin-bottom: 14px;
}

/* Video : s'assure qu'elle occupe 100% de la largeur du wrapper */
.watch-video {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
	background: #000;
	box-shadow: 0 8px 40px rgba(0,0,0,0.6);
	border: 1px solid #232627;
}

/* Fix: s'assurer que .watch-main n'hérite pas du padding bootstrap et que meta suit exactement la largeur du player */
.container.watch-main {
    max-width: 1100px;
    margin: 28px auto;
    padding-left: 0;   /* REMOVE container side padding */
    padding-right: 0;  /* REMOVE container side padding */
    box-sizing: border-box;
}

/* Meta doit occuper la même largeur que le player */
.watch-meta {
    width: 100%;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 0 6px; /* léger padding interne si nécessaire */
}

/* Header meta : titre à gauche, actions collées en haut à droite */
.watch-meta-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* align items to top so buttons sit at the top of the line */
    gap: 12px;
    width: 100%;
}

/* Titre : gros, en majuscules comme sur la capture */
.watch-title {
    margin: 0;
    font-size: 2rem;           /* plus visible */
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    flex: 1 1 auto;
    word-break: break-word;
}

/* Actions : collées en haut à droite, pas d'alignement vertical centré */
.watch-actions {
    display: flex;
    align-items: flex-start; /* keep buttons at top */
    gap: 10px;
    flex-shrink: 0;
    margin-left: 12px;
}

/* Boutons compacts */
.btn-download-compact,
.btn-share-compact {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 700;
	white-space: nowrap;
	box-sizing: border-box;
}

/* Style visuel */
.btn-download-compact {
	background: #fff;
	color: #111;
	border: none;
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.btn-share-compact {
	background: rgba(255,255,255,0.04);
	color: #d1d5db;
	border: 1px solid rgba(255,255,255,0.04);
}

/* Texte des boutons (cachable sur petits écrans) */
.btn-text {
	display: inline-block;
}

/* Feedback copié (discret à droite) */
.watch-share-feedback {
	margin-left: 6px;
	padding: 6px 10px;
	border-radius: 8px;
	font-size: 0.92rem;
	background: rgba(255,255,255,0.02);
	color: #dfffe6;
	opacity: 0;
	transition: opacity .18s ease;
}

/* Ligne de feedback sous la header (message "Lien copié") */
.watch-feedback-row {
	width: 100%;
	box-sizing: border-box;
	margin-top: 8px; /* espace entre header et message */
	/* aligne le message à droite sous les boutons */
	text-align: right;
}

/* Nouvelle ligne contenant stats (gauche) et feedback (droite) */
.watch-submeta-row {
    display: flex;
    align-items: center;
    justify-content: space-between; /* stats à gauche, feedback à droite */
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    /* empêche les éléments internes de forcer le passage à la ligne */
    min-width: 0;
}

/* La partie "stats" garde son comportement existant */
.watch-submeta {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #bfc7d5;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0; /* permet de se compresser */
}

/* Feedback positionné à droite mais peut se repositionner en responsive */
.watch-feedback-row {
    text-align: right;
    min-width: 0; /* permet au conteneur d'être compressé correctement */
}

/* Apparence du message */
.watch-share-feedback {
    display: inline-block;
    background: rgba(255,255,255,0.04);
    color: #dfffe6;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.95rem;
    opacity: 0;
    transition: opacity 0.16s ease;
}

/* Topbar : logo à gauche et bouton à droite (aligné sur la largeur du player) */
.watch-topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    box-sizing: border-box;
    padding: 0 6px;
}

/* Petit logo en haut à gauche */
.watch-logo-small {
    height: 48px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Bouton "Ouvrir Clipzy" — reprend style btn-panel + ajustements */
.watch-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    font-weight: 600;
}

/* Assure que la largeur de la meta = largeur du player */
.watch-main { max-width: 1100px; margin: 28px auto; padding: 0 12px; box-sizing: border-box; }
.watch-player-wrap { width: 100%; margin-bottom: 14px; }

/* Force les stats sur une seule ligne, sans retour à la ligne */
.watch-submeta {
    display: flex;
    flex-wrap: nowrap;           /* empêche le retour à la ligne */
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
    color: #bfc7d5;
    font-size: 0.95rem;
    overflow: hidden;            /* évite d'étendre la ligne hors conteneur */
    white-space: nowrap;
}

/* Empêcher les éléments longs de casser la mise en page */
.watch-submeta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;               /* permet l'ellipsis */
}

/* Si une valeur est très longue, tronquer proprement */
.watch-submeta span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Responsive : sur petits écrans, autoriser le wrapping pour éviter overflow */
@media (max-width: 600px) {
    .watch-submeta {
        flex-wrap: wrap;
        gap: 8px;
        white-space: normal;
    }
}

/* Ajustements responsive */
@media (max-width: 600px) {
    .watch-topbar { padding: 0 8px; gap: 8px; }
    .watch-logo-small { height: 40px; }
    .watch-open-btn { padding: 7px 10px; font-size: .95rem; }

	/* FORCER ligne : titre à gauche, actions à droite */
	.watch-meta-header {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px;
		width: 100%;
	}

	/* Actions restent à droite, ne prennent pas toute la largeur */
	.watch-actions {
		width: auto !important;
		justify-content: flex-end !important;
		margin-left: 12px !important;
		flex-shrink: 0;
	}

	/* Conserver le texte des boutons sur mobile */
	.btn-text {
		display: inline-block !important;
	}

	/* Feedback ("Lien copié") reste sur la même ligne à droite */
	.watch-submeta-row {
		flex-wrap: nowrap !important;
	}

	.watch-feedback-row {
		margin-left: auto !important;
		width: auto !important;
		text-align: right !important;
	}

	/* Stats : reste en une seule ligne (tronque si besoin) */
	.watch-submeta {
		flex-wrap: nowrap !important;
		white-space: nowrap !important;
		overflow: hidden;
	}
}

/* Si l'espace vient à manquer : réduire la largeur et cacher le texte */
@media (max-width: 480px) {
	.watch-overlay-actions { right: 8px; bottom: 8px; gap: 6px; }
	.btn-download-compact, .btn-share-compact { padding: 7px 8px; gap: 6px; }
	.btn-text { display: none; } /* n'affiche que les icônes */
	.watch-logo { height: 44px; top: 8px; }
}

/* Si écran medium, garder texte mais éviter overflow */
@media (max-width: 767.98px) and (min-width: 481px) {
	.btn-text { display: inline-block; }
	.watch-overlay-actions { right: 10px; bottom: 10px; }
}

/* Responsive */
@media (max-width: 991.98px) {
	.watch-main { margin: 24px 12px; }
	.watch-title { font-size: 1.2rem; }
	.btn-download, .btn-outline-light { padding: 8px 10px; font-size: .95rem; }
}

@media (max-width: 767.98px) {
	.watch-logo { height: 48px; margin-bottom: 10px; }
	.watch-meta-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.watch-actions {
		width: 100%;
		justify-content: flex-start;
	}
	.btn-download, .btn-outline-light { padding: 8px 10px; font-size: .95rem; }
}

/* Override final pour forcer stats + feedback sur la même ligne */
.watch-submeta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    /* empêche les éléments internes de forcer le passage à la ligne */
    min-width: 0;
}

.watch-submeta {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #bfc7d5;
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    min-width: 0; /* permet de se compresser */
}

/* Chaque élément peut se compresser et tronquer proprement */
.watch-submeta span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Feedback collé à droite sur la même ligne */
.watch-feedback-row {
    display: flex;
    align-items: center;
    margin-left: auto;   /* pousse à l'extrême droite de la ligne */
    justify-content: flex-end;
    min-width: 0;        /* permet compression si espace réduit */
    width: auto !important;   /* annule width:100% défini plus haut */
    max-width: 50%; /* sécurité pour éviter débordement ; ajuster si besoin */
}

/* Message "Lien copié" */
.watch-share-feedback {
    display: inline-block;
    opacity: 0;
    transition: opacity 0.16s ease;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive : si écran étroit, on empile proprement */
@media (max-width: 600px) {
    .watch-submeta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .watch-feedback-row {
        margin-left: 0;
        width: 100% !important;
        text-align: left;
    }
}

/* === Overrides finaux: stats (gauche) + feedback (droite) sur UNE SEULE LIGNE === */
.watch-submeta-row {
	/* ligne unique sans retour */
	display: flex !important;
	align-items: center;
	flex-wrap: nowrap !important;
	gap: 12px;
	width: 100%;
	min-width: 0;
}

.watch-submeta-row > .watch-submeta {
	display: flex !important;
	flex: 1 1 auto !important; /* prend tout l'espace dispo */
	align-items: center;
	gap: 14px;
	white-space: nowrap !important;
	overflow: hidden;
	min-width: 0;
}

.watch-submeta-row > .watch-submeta > span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.watch-submeta-row > .watch-feedback-row {
	/* pousse à droite, annule width:100% et marges précédentes */
	display: flex !important;
	align-items: center;
	justify-content: flex-end;
	margin-left: auto !important;
	width: auto !important;
	min-width: 0;
	text-align: right !important;
	margin-top: 0 !important;
}

/* Même en mobile: rester sur une seule ligne */
@media (max-width: 600px) {
	.watch-submeta-row { flex-wrap: nowrap !important; }
	.watch-submeta { white-space: nowrap !important; }
	.watch-feedback-row { width: auto !important; margin-left: auto !important; text-align: right; }
	.watch-share-feedback { display: inline-block !important; }
}

/* Ajout de padding côté mobile. Insérer ce bloc dans le fichier (de préférence à la fin des règles @media existantes). */
@media (max-width: 600px) {
    /* Remet un padding latéral global pour le conteneur sur mobile */
    .container.watch-main {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* Ajoute un léger padding autour du player pour éviter qu'il touche les bords */
    .watch-player-wrap {
        padding-left: 8px;
        padding-right: 8px;
        box-sizing: border-box;
    }

    /* Réduit légèrement le rayon sur petit écran pour l'esthétique */
    .watch-video {
        border-radius: 10px;
    }
}

/* Footer fixe en bas de page */
.site-fixed-copyright {
	position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    z-index: 99999;
    color: #c7ced6;
    text-align: center;
    padding: 8px 12px;
    font-size: 0.9rem;
}

/* Sur petits écrans, réduire la hauteur/padding pour éviter masquage excessif */
@media (max-width: 600px) {
	.site-fixed-copyright { padding: 6px 10px; font-size: 0.85rem; }
}

/* Si besoin : pas d'interférence avec le contenu principal (ajuster bottom spacing) */
@media (min-width: 0) {
	/* Optionnel : ajoutez un padding-bottom au container principal si le footer masque du contenu */
	.container.watch-main { padding-bottom: 52px; } /* ajuster si nécessaire */
}

/* Tentative pour masquer le bouton "more/options" du contrôle natif (WebKit / Chromium) */
video::-webkit-media-controls-button[aria-label="More"],
video::-webkit-media-controls-button[aria-label="Plus"],
video::-webkit-media-controls-button[aria-label="More options"],
video::-webkit-media-controls-panel > .pip,
video::-webkit-media-controls-panel > .overflow-button {
    display: none !important;
}

/* Empêche le menu contextuel sur la vidéo (fallback visuel) */
.watch-video { -webkit-user-select: none; user-select: none; }