/* Bibliothèque d'Exercices - Royale Entente Roy - thème sombre inspiré de Le Banc */

:root {
	--be-bg: #0c1526;
	--be-panel: #131f37;
	--be-panel-alt: #182746;
	--be-border: #263758;
	--be-text: #e7ebf3;
	--be-text-muted: #8b93a7;
	--be-accent: #f2a93b;
	--be-accent-hover: #e0972a;
	--be-accent-2: #2fd48a;
	--be-danger: #e8615a;
}

.be-app { max-width: 1300px; margin: 0 auto; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--be-text); background: var(--be-bg); border-radius: 10px; }
.be-app * { box-sizing: border-box; }
.be-app, .be-app input, .be-app textarea, .be-app select, .be-app button { color: var(--be-text); }
.be-app { padding: 16px 20px; }
.be-login-wall { padding: 24px; background: #3a2c0f; border: 1px solid var(--be-accent); border-radius: 6px; color: var(--be-text); }
.be-loading { padding: 40px; text-align: center; color: var(--be-text-muted); }

.be-app-topbar { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.be-app-body { display: flex; gap: 18px; align-items: flex-start; }
.be-app-sidebar { flex: 0 0 190px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 12px; background: var(--be-panel); border: 1px solid var(--be-border); border-radius: 10px; padding: 10px; }
.be-sidebar-link { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 6px; color: var(--be-text); text-decoration: none; font-size: 13.5px; }
.be-sidebar-link:hover { background: var(--be-panel-alt); }
.be-sidebar-link.active { background: rgba(242,169,59,.14); color: var(--be-accent); font-weight: 600; }
.be-sidebar-badge { margin-left: auto; background: var(--be-accent); color: #16130a; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center; }
.be-app-view { flex: 1; min-width: 0; }

@media (max-width: 780px) {
	.be-app-body { flex-direction: column; }
	.be-app-sidebar { flex-direction: row; flex-wrap: wrap; width: 100%; position: static; }
	.be-sidebar-link { flex: 1 1 auto; justify-content: center; }
}

/* Plein écran de toute l'application (façon Le Banc), activé par défaut */
body.be-app-fullscreen-lock { overflow: hidden; }
.be-app.be-app-fullscreen-active { position: fixed; inset: 0; z-index: 999998; max-width: none; margin: 0; padding: 16px 24px; overflow-y: auto; border-radius: 0; }

/* Barre d'actions */
.be-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.be-toolbar input[type="search"] { flex: 1 1 220px; padding: 9px 12px; border: 1px solid var(--be-border); border-radius: 6px; font-size: 14px; background: var(--be-panel); color: var(--be-text); }
.be-toolbar input[type="search"]::placeholder { color: var(--be-text-muted); }
.be-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--be-accent); background: var(--be-accent); color: #16130a; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; }
.be-btn:hover { background: var(--be-accent-hover); }
.be-btn.be-btn-secondary { background: var(--be-panel-alt); color: var(--be-text); border-color: var(--be-border); font-weight: 500; }
.be-btn.be-btn-secondary:hover { background: var(--be-border); }
.be-btn.be-btn-danger { background: transparent; color: var(--be-danger); border-color: var(--be-danger); font-weight: 500; }
.be-btn.be-btn-danger:hover { background: rgba(232,97,90,.12); }
.be-btn.be-btn-small { padding: 5px 10px; font-size: 12.5px; }
.be-btn:disabled { opacity: .5; cursor: not-allowed; }
.be-back-link { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; margin-bottom: 12px; border-radius: 6px; background: var(--be-panel-alt); border: 1px solid var(--be-border); color: var(--be-text); font-size: 13px; text-decoration: none; }
.be-back-link:hover { background: var(--be-border); border-color: var(--be-accent); }

/* Filtres */
.be-filters { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; padding: 12px 14px; background: var(--be-panel); border: 1px solid var(--be-border); border-radius: 8px; }
.be-filter-group { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 10px; }
.be-filter-group strong { flex: 0 0 auto; width: 140px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--be-text-muted); padding-top: 6px; }
.be-filter-group .be-filter-chips { flex: 1 1 auto; min-width: 0; max-width: none; }
.be-filter-chips { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; max-width: 320px; }
.be-chip { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--be-border); background: var(--be-panel-alt); color: var(--be-text); font-size: 12.5px; cursor: pointer; user-select: none; }
.be-chip.active { background: var(--be-accent); color: #16130a; border-color: var(--be-accent); font-weight: 600; }
.be-chip-sub { font-size: 11.5px; opacity: .85; border-style: dashed; }
.be-theme-group { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; vertical-align: top; }
.be-theme-children-row { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 16px; }

/* Grille de cartes */
.be-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.be-card { border: 1px solid var(--be-border); border-radius: 10px; overflow: hidden; background: var(--be-panel); cursor: pointer; display: flex; flex-direction: column; transition: box-shadow .15s ease, border-color .15s ease; }
.be-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.35); border-color: var(--be-accent); }
.be-card-thumb { height: 130px; background: #2f8f4e; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.be-card-thumb svg { width: 100%; height: 100%; }
/* Une image de couverture (photo/screenshot) peut être verticale : "cover" couperait
   l'essentiel d'un screenshot en portrait. On affiche l'image entière (contain), sur un
   fond neutre plutôt que le vert du terrain qui n'a pas de sens ici. */
.be-card-thumb-photo { background: #0d1b2a; }
.be-card-thumb-cover-img { width: 100%; height: 100%; object-fit: contain; }
.be-card-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.be-card-title { font-weight: 600; font-size: 15px; margin: 0; }
.be-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.be-tag { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: var(--be-panel-alt); color: #9fc3ff; }
.be-card-footer { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; color: var(--be-text-muted); margin-top: auto; }
.be-card-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.be-card-footer-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.be-fav-star { cursor: pointer; font-size: 16px; }
.be-fav-star.active { color: var(--be-accent); }

/* Détail exercice */
.be-detail-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.be-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.be-detail-pitch { max-width: 720px; margin: 0 auto 16px; }
.be-detail-pitch svg { width: 100%; height: auto; display: block; border-radius: 6px; }
.be-detail-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }
.be-detail-photos img { max-height: 180px; border-radius: 6px; }
.be-detail-video { margin: 12px 0; }
.be-detail-video iframe { width: 100%; max-width: 640px; aspect-ratio: 16/9; border: 0; border-radius: 6px; }
.be-detail-cover { margin: 12px 0; }
.be-detail-cover img { max-width: 640px; max-height: 480px; width: auto; height: auto; border-radius: 8px; display: block; margin: 0 auto; object-fit: contain; }
.be-video-link-block { margin: 12px 0; }
.be-video-link-block .be-btn { background: #e74c3c; border-color: #e74c3c; }
.be-comments { margin-top: 24px; border-top: 1px solid var(--be-border); padding-top: 16px; }
.be-comment { padding: 10px 0; border-bottom: 1px solid var(--be-border); }
.be-comment strong { display: block; font-size: 13.5px; color: #9fc3ff; }
.be-comment-form textarea { width: 100%; min-height: 70px; padding: 8px; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel); }

/* Bandeau matériel pleine largeur au-dessus du terrain : icône + nom par élément,
   sélecteur de terrain juste à côté. */
.be-editor-shell { display: flex; flex-direction: column; gap: 12px; }
.be-material-bar { background: var(--be-panel); border: 1px solid var(--be-border); border-radius: 8px; padding: 10px 12px; }
.be-material-bar-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.be-material-bar-row { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; }
.be-material-btn { display: flex; align-items: center; gap: 7px; border: 1px solid var(--be-border); border-radius: 8px; background: var(--be-panel-alt); padding: 6px 12px 6px 6px; cursor: pointer; font-size: 13px; }
.be-material-btn span { white-space: nowrap; }
.be-material-btn.active { border-color: var(--be-accent); border-width: 2px; background: rgba(242,169,59,.12); }
.be-material-manage-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #9fc3ff; }
.be-field-select-wrap { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; border: 2px solid var(--be-accent); border-radius: 8px; padding: 6px 10px; background: rgba(242,169,59,.08); }
.be-field-select-wrap label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--be-accent); font-weight: 700; white-space: nowrap; }
.be-field-select-wrap select { min-width: 160px; font-weight: 600; }

/* Barre flèches + texte libre, juste sous le bandeau matériel */
.be-arrow-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--be-border); }
.be-arrow-bar-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--be-text-muted); font-weight: 700; }
.be-arrow-style-pill { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--be-border); background: var(--be-panel-alt); color: var(--be-text); font-size: 13px; cursor: pointer; }
.be-arrow-style-pill.active { border-color: var(--be-accent-2); border-width: 2px; background: rgba(47,212,138,.14); font-weight: 600; }

/* Éditeur terrain */
.be-editor-layout { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.be-editor-toolbox { width: 260px; flex: 0 0 260px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.be-toolbox-section { border: 1px solid var(--be-border); background: var(--be-panel); border-radius: 8px; padding: 10px; }
.be-toolbox-section h4 { margin: 0 0 8px; font-size: 12.5px; text-transform: uppercase; color: var(--be-text-muted); }
.be-tool-btn { display: block; width: 100%; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel-alt); padding: 8px; cursor: pointer; font-size: 13px; }
.be-tool-btn.active { border-color: var(--be-accent-2); border-width: 2px; background: rgba(47,212,138,.12); }
.be-color-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.be-color-swatch { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--be-panel); box-shadow: 0 0 0 1px var(--be-border); cursor: pointer; }
.be-color-swatch.active { box-shadow: 0 0 0 2px var(--be-accent); }
.be-anim-row { display: flex; align-items: center; gap: 6px; background: var(--be-panel-alt); border: 1px solid var(--be-border); border-radius: 6px; padding: 5px 8px; cursor: grab; }
.be-anim-handle { color: var(--be-text-muted); font-size: 12px; }
.be-anim-label { font-size: 12.5px; }
.be-anim-step { border: 1px solid var(--be-border); border-radius: 8px; padding: 6px; display: flex; gap: 8px; transition: border-color .15s, background .15s; }
.be-anim-step-over { border-color: var(--be-accent); background: rgba(242,169,59,.08); }
.be-anim-step-badge { background: var(--be-accent); color: #16130a; font-weight: 700; border-radius: 50%; width: 22px; height: 22px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 2px; }
.be-anim-step-rows { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.be-anim-split { margin-left: auto; cursor: pointer; color: var(--be-text-muted); font-size: 12px; padding: 2px 4px; }
.be-anim-split:hover { color: var(--be-accent); }
.be-ball-summary-row { display: flex; align-items: center; gap: 8px; background: var(--be-panel-alt); border: 1px solid var(--be-border); border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }
.be-ball-summary-zone { margin-left: auto; color: var(--be-text-muted); font-size: 11.5px; }
.be-anim-highlight {
	filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 8px #f2a93b) drop-shadow(0 0 8px #f2a93b);
	animation: be-anim-pulse 0.7s ease-in-out infinite alternate;
}
@keyframes be-anim-pulse {
	from { filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 4px #f2a93b) drop-shadow(0 0 4px #f2a93b); }
	to { filter: drop-shadow(0 0 2px #ffffff) drop-shadow(0 0 16px #f2a93b) drop-shadow(0 0 16px #f2a93b); }
}
.be-arrow-size-row { display: flex; gap: 6px; margin-top: 4px; }
.be-size-btn { flex: 1; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel-alt); color: var(--be-text); padding: 5px 4px; cursor: pointer; font-size: 11.5px; }
.be-size-btn.active { border-color: var(--be-accent); background: rgba(242,169,59,.15); font-weight: 600; }
.be-editor-canvas-wrap { flex: 1 1 600px; min-width: 0; }
.be-canvas-zoom-bar { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.be-arrow-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; font-size: 12px; color: var(--be-text-muted); }
.be-arrow-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.be-arrow-legend-item svg { flex: 0 0 auto; }
.be-pitch-container { position: relative; width: 100%; border-radius: 8px; overflow: hidden; border: 2px solid #14361f; background: #2f8f4e; }
.be-pitch-svg-wrap { position: relative; transform-origin: 0 0; }
.be-text-inline-input {
	position: absolute;
	transform: translate(-50%, -50%);
	background: rgba(13,27,42,.55);
	border: none;
	border-bottom: 2px solid var(--be-accent);
	outline: none;
	text-align: center;
	font-weight: 700;
	font-family: inherit;
	padding: 1px 4px;
	border-radius: 2px;
	min-width: 3ch;
	z-index: 5;
	caret-color: var(--be-accent);
}
.be-text-inline-input::placeholder { color: rgba(255,255,255,.5); font-weight: 400; }
.be-pitch-svg-wrap svg { display: block; width: 100%; height: auto; }
.be-shape-el { cursor: grab; }
.be-text-el { cursor: grab; }
/* La sélection est désormais très visible : anneau/cadre amber animé dessiné directement
   dans le SVG (voir be-editor.js), plus ce filtre en renfort. */
.be-shape-el.selected circle:first-child, .be-shape-el.selected polygon { filter: drop-shadow(0 0 3px #f2a93b) drop-shadow(0 0 3px #f2a93b); }
.be-text-el.selected text { filter: drop-shadow(0 0 3px #f2a93b); }
.be-shape-el text { pointer-events: none; }
.be-arrow-el { cursor: pointer; }
.be-arrow-handle { fill: #ffffff; stroke: var(--be-accent); stroke-width: 0.3; cursor: grab; }
.be-editor-hint { font-size: 12px; color: var(--be-text-muted); margin-top: 8px; line-height: 1.4; }
.be-editor-side-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.be-editor-side-fields label { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 3px; color: var(--be-text-muted); }
.be-editor-side-fields input, .be-editor-side-fields textarea, .be-editor-side-fields select { width: 100%; padding: 7px 9px; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel-alt); color: var(--be-text); }

/* Filet de sécurité : tout contrôle natif (select, range...) dans l'app doit rester lisible
   même hors de .be-editor-side-fields (bug identifié : le <select> "Terrain" de l'éditeur
   n'était pas couvert par la règle ci-dessus et affichait du texte invisible). */
.be-app select { background: var(--be-panel-alt); color: var(--be-text); border: 1px solid var(--be-border); border-radius: 6px; padding: 6px 8px; }
.be-app select option { background: var(--be-panel-alt); color: var(--be-text); }
.be-app input[type="range"] { accent-color: var(--be-accent); width: 100%; }
.be-app input[type="text"], .be-app input[type="url"], .be-app input[type="number"], .be-app textarea { background: var(--be-panel-alt); color: var(--be-text); border: 1px solid var(--be-border); border-radius: 6px; }
/* Sans ceci, l'icône native du sélecteur de date reste sombre sur notre fond sombre et
   devient quasi invisible/impossible à cliquer, obligeant à retaper la date à la main. */
.be-app input[type="date"] { background: var(--be-panel-alt); color: var(--be-text); border: 1px solid var(--be-border); border-radius: 6px; padding: 7px 9px; color-scheme: dark; }
.be-toolbox-section textarea { width: 100%; padding: 6px 8px; font-size: 13px; font-family: inherit; }

/* Sections du formulaire de création/édition d'exercice */
.be-form-section { border: 1px solid var(--be-border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; background: var(--be-panel); }
.be-form-section h4 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--be-accent); }
.be-form-section .be-editor-side-fields { margin-top: 12px; }
.be-form-count { color: var(--be-text-muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 12px; }

/* Mise en page deux colonnes (contenu principal / métadonnées), comme l'éditeur d'article WP */
.be-exercise-form-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.be-form-main label, .be-form-sidebar label { font-size: 12.5px; font-weight: 600; display: block; margin-bottom: 6px; color: var(--be-text-muted); }
.be-form-title-label { margin-bottom: 4px; }
.be-form-title-input { width: 100%; font-size: 20px; font-weight: 600; background: transparent; border: none; border-bottom: 2px solid var(--be-accent); color: var(--be-text); padding: 4px 0 8px; margin-bottom: 4px; outline: none; border-radius: 0; }
.be-form-main textarea { width: 100%; background: var(--be-panel-alt); border: 1px solid var(--be-border); border-radius: 6px; color: var(--be-text); padding: 10px; font-size: 13px; }
.be-form-media-block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--be-border); }
.be-form-media-block input { padding: 8px 10px; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel-alt); color: var(--be-text); }
.be-form-sidebar input[type="search"] { width: 100%; padding: 6px 10px; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel-alt); color: var(--be-text); font-size: 12.5px; }

@media (max-width: 900px) {
	.be-exercise-form-grid { grid-template-columns: 1fr; }
}

/* Séances */
.be-seance-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--be-border); border-radius: 6px; margin-bottom: 6px; background: var(--be-panel); }
.be-seance-item-row .be-drag-handle { cursor: grab; color: var(--be-text-muted); }
.be-seance-item-row input[type="number"] { width: 70px; padding: 5px 7px; border: 1px solid var(--be-border); border-radius: 5px; background: var(--be-panel-alt); color: var(--be-text); }
.be-seance-total { font-weight: 700; margin: 10px 0; }

/* Plein écran d'un schéma isolé (bouton "Plein écran" sur le détail) */
.be-fullscreen-overlay { position: fixed; inset: 0; background: var(--be-bg); z-index: 999999; display: flex; flex-direction: column; }
.be-fullscreen-overlay .be-fullscreen-topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 18px; color: var(--be-text); }
.be-fullscreen-overlay .be-fullscreen-body { flex: 1; overflow: auto; padding: 20px; display: flex; align-items: center; justify-content: center; }
.be-fullscreen-overlay .be-detail-pitch { max-width: 900px; width: 100%; }

/* Page Rôles */
.be-roles-table { width: 100%; max-width: 720px; border-collapse: collapse; background: var(--be-panel); border: 1px solid var(--be-border); border-radius: 8px; overflow: hidden; }
.be-roles-table th, .be-roles-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--be-border); font-size: 13.5px; }
.be-roles-table th { color: var(--be-text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }
.be-roles-table tr:last-child td { border-bottom: none; }
.be-roles-row-self { background: rgba(242,169,59,.1); }
.be-roles-table select { padding: 5px 8px; border: 1px solid var(--be-border); border-radius: 5px; background: var(--be-panel-alt); color: var(--be-text); }
.be-role-saved { color: var(--be-accent-2); font-weight: 700; margin-left: 6px; }

.be-taxo-create-row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.be-taxo-create-row input[type="text"] { flex: 1 1 140px; min-width: 0; }
.be-taxo-create-row select { flex: 1 1 160px; min-width: 0; }

.be-sort-wrap { display: inline-flex; align-items: center; gap: 6px; background: var(--be-panel-alt); border: 1px solid var(--be-border); border-radius: 6px; padding: 4px 8px; }
.be-sort-wrap label { font-size: 11.5px; color: var(--be-text-muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.be-sort-wrap select { border: none; background: transparent; padding: 2px 0; max-width: 200px; }

/* Constructeur de séance : phases + glisser-déposer + matériel auto-généré */
.be-phase-block { background: var(--be-panel); border: 1px solid var(--be-border); border-radius: 10px; padding: 12px; }
.be-phase-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.be-phase-name-input { flex: 1; background: transparent; border: none; color: var(--be-accent); font-weight: 700; font-size: 14px; padding: 3px 0; }
.be-phase-minutes { font-size: 12px; color: var(--be-text-muted); white-space: nowrap; }
.be-phase-delete { cursor: pointer; font-size: 13px; padding: 2px 5px; }
.be-phase-dropzone { display: flex; flex-direction: column; gap: 6px; min-height: 16px; border-radius: 6px; transition: background .15s; }
.be-phase-dropzone.be-dropzone-active { background: rgba(242,169,59,.08); }
.be-seance-exo-card { display: flex; align-items: center; gap: 8px; background: var(--be-panel-alt); border: 1px solid var(--be-border); border-radius: 8px; padding: 8px 10px; cursor: grab; }
.be-seance-exo-card a { color: var(--be-text); font-size: 13px; text-decoration: underline; text-decoration-color: var(--be-border); }
.be-seance-exo-card input[type="number"] { width: 46px; padding: 3px 5px; font-size: 12px; }
.be-seance-item-remove { cursor: pointer; color: var(--be-text-muted); padding: 2px 4px; }
.be-seance-item-remove:hover { color: var(--be-danger); }
.be-quickadd-panel { display: none; margin-top: 8px; background: var(--be-bg); border: 1px solid var(--be-border); border-radius: 8px; padding: 10px; }
.be-quickadd-panel input[type="search"] { width: 100%; padding: 6px 8px; font-size: 12.5px; margin-bottom: 8px; }
.be-quickadd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.be-quickadd-chip { background: var(--be-panel-alt); border: 1px solid var(--be-border); border-radius: 999px; padding: 3px 10px; font-size: 11px; cursor: pointer; }
.be-quickadd-results { max-height: 240px; overflow-y: auto; }
.be-quickadd-result { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.be-quickadd-result:hover { background: var(--be-panel-alt); }

/* Calendrier des séances */
.be-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; font-size: 11.5px; text-transform: uppercase; color: var(--be-text-muted); text-align: center; }
.be-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.be-cal-cell { min-height: 84px; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel); padding: 6px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.be-cal-cell-empty { background: transparent; border: none; }
.be-cal-today { border-color: var(--be-accent); border-width: 2px; }
.be-cal-daynum { font-size: 12px; color: var(--be-text-muted); font-weight: 600; }
.be-cal-item { display: block; font-size: 11px; background: rgba(242,169,59,.15); color: var(--be-text); border-radius: 4px; padding: 2px 5px; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.be-cal-item:hover { background: rgba(242,169,59,.3); }
@media (max-width: 700px) {
	.be-cal-cell { min-height: 56px; }
	.be-cal-weekdays span:nth-child(n+6) { display: none; }
}

/* Onglets de variantes (détail + éditeur) */
.be-variant-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 12px; border-bottom: 1px solid var(--be-border); padding-bottom: 10px; }
.be-variant-tab-wrap { display: inline-flex; align-items: center; gap: 3px; }
.be-variant-tab { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--be-border); background: var(--be-panel-alt); color: var(--be-text); font-size: 13px; cursor: pointer; }
.be-variant-tab.active { background: var(--be-accent); color: #16130a; border-color: var(--be-accent); font-weight: 600; }
.be-variant-tab-add { border-style: dashed; color: var(--be-accent); }
.be-variant-tab-action { font-size: 11px; color: var(--be-text-muted); cursor: pointer; padding: 2px 3px; }
.be-variant-tab-action:hover { color: var(--be-accent); }
.be-variant-editing-badge { background: rgba(242,169,59,.12); border: 1px solid var(--be-accent); border-radius: 6px; padding: 8px 12px; font-size: 13px; margin-bottom: 14px; max-width: 700px; }

/* Constructeur de rôles */
.be-roles-cards { display: flex; flex-direction: column; gap: 12px; }
.be-role-card { border: 1px solid var(--be-border); border-radius: 8px; padding: 12px 14px; background: var(--be-panel-alt); }
.be-role-card-new { border-style: dashed; margin-top: 10px; }
.be-role-name-input { width: 100%; max-width: 320px; font-size: 14px; font-weight: 600; padding: 6px 9px; border: 1px solid var(--be-border); border-radius: 6px; background: var(--be-panel); color: var(--be-text); margin-bottom: 10px; }
.be-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.be-perm-check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; }
.be-perm-check input { accent-color: var(--be-accent); }
.be-role-card-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

/* Dépôt de photos (upload natif REST, sans médiathèque WordPress) */
.be-photo-dropzone { border: 1.5px dashed var(--be-border); border-radius: 8px; padding: 18px 14px 14px; margin-top: 6px; transition: border-color .15s ease, background .15s ease; overflow: visible; }
.be-photo-dropzone.be-dropzone-active { border-color: var(--be-accent); background: rgba(242,169,59,.06); }
.be-cover-dropzone { border: 1.5px dashed var(--be-border); border-radius: 8px; padding: 14px; margin-top: 6px; transition: border-color .15s ease, background .15s ease; }
.be-cover-dropzone:focus { outline: none; border-color: var(--be-accent-2); }
.be-cover-dropzone.be-dropzone-active { border-color: var(--be-accent); background: rgba(242,169,59,.06); }
.be-photo-thumb { position: relative; display: inline-block; margin: 6px 8px 6px 0; overflow: visible; }
.be-photo-thumb img { display: block; max-height: 90px; border-radius: 5px; }
.be-photo-remove-btn { position: absolute; top: -8px; right: -8px; z-index: 2; border-radius: 50%; border: 2px solid var(--be-bg); background: var(--be-danger); color: #fff; width: 22px; height: 22px; line-height: 18px; cursor: pointer; font-size: 13px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }

@media (max-width: 700px) {
	.be-editor-layout { flex-direction: column; }
	.be-editor-toolbox { width: 100%; flex-basis: auto; position: static; }
}