/* SECTION: TOKENS — Design tokens globaux
 * Cas d'usage: ces variables structurent l'identite visuelle (surfaces, texte, accent, focus)
 * de toutes les pages EvalCode. */
:root {
	--bulma-family-primary: Fira Sans, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
	--bulma-family-secondary: Fira Sans, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
	--bulma-family-code: Fira Mono, Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;

	color-scheme: light;

	--ec-bg: #f6f8fc;
	--ec-surface: #ffffff;
	--ec-surface-soft: #eef4ff;
	--ec-surface-alt: #f5f7fb;
	--ec-surface-hover: #f1f6ff;
	--ec-surface-selected: #e8f0ff;
	--ec-border: #d7dfec;
	--ec-border-strong: #b9c5da;
	--ec-border-soft: #dfe6fb;
	--ec-border-list: #e4e9fb;
	--ec-border-translucent: rgba(215, 223, 236, 0.8);
	--ec-text: #172136;
	--ec-text-muted: #5c6f90;
	--ec-text-inverse: #ffffff;
	--ec-primary-surface-text: var(--ec-text-inverse);
	--ec-link-surface-text: var(--ec-text-inverse);
	--ec-info-surface-text: var(--ec-text-inverse);
	--ec-success-surface-text: var(--ec-text-inverse);
	--ec-danger-surface-text: var(--ec-text-inverse);
	--ec-dark-surface-text: var(--ec-text-inverse);
	--ec-text-subtle: #888888;
	--ec-accent: #2563eb;
	--ec-accent-strong: #1e40af;
	--ec-accent-soft: rgba(37, 99, 235, 0.10);
	--ec-link: #4f46e5;
	--ec-danger: #c7374e;
	--ec-danger-strong: #af2f45;
	--ec-danger-soft: rgba(199, 55, 78, 0.10);
	--ec-success: #0f766e;
	--ec-focus: rgba(37, 99, 235, 0.24);
	--ec-page-glow: #e5efff;
	--ec-page-glow-transparent: rgba(234, 242, 255, 0);
	--ec-navbar-start: #ffffff;
	--ec-navbar-end: #f1f5fb;
	--ec-info-header: #3f4fbe;
	--ec-info-body-bg: #edf2ff;
	--ec-info-body-border: #b9c5f3;
	--ec-info-body-text: #25315f;
	--ec-primary-message-header: #1e3a8a;
	--ec-primary-message-body-bg: #eaf2ff;
	--ec-primary-message-body-border: #bdd3ff;
	--ec-primary-message-body-text: #1f3b75;
	--ec-control-bg: #ffffff;
	--ec-control-border: #dbdbdb;
	--ec-control-border-focus: hsl(229, 53%, 53%);
	--ec-control-focus-ring: hsla(229, 53%, 53%, 0.25);
	--ec-divider: #dbdbdb;
	--ec-overlay: rgba(10, 10, 10, 0.28);
	--ec-shadow-soft: rgba(10, 10, 10, 0.16);
	--ec-shadow-surface: rgba(27, 50, 80, 0.08);
	--ec-shadow-inset: rgba(10, 10, 10, 0.05);
	--ec-selection: rgba(0, 120, 215, 0.35);
	--ec-tristate-active-bg: #485fc7;
	--ec-tristate-active-border: #485fc7;
	--ec-primary-btn-bg: #2563eb;
	--ec-primary-btn-border: #1d4ed8;
	--ec-primary-btn-bg-hover: #1d4ed8;
	--ec-primary-btn-border-hover: #1e40af;
	--ec-primary-btn-bg-active: #1e40af;
	--ec-primary-btn-border-active: #1e3a8a;
	--ec-success-btn-bg: #0f766e;
	--ec-success-btn-border: #0e6861;
	--ec-success-btn-bg-hover: #0e6861;
	--ec-success-btn-border-hover: #0f5c56;
	--ec-success-btn-bg-active: #0f5c56;
	--ec-success-btn-border-active: #124b47;
	--ec-danger-btn-bg: #c7374e;
	--ec-danger-btn-border: #af2f45;
	--ec-danger-btn-bg-hover: #af2f45;
	--ec-danger-btn-border-hover: #94293b;
	--ec-danger-btn-bg-active: #94293b;
	--ec-danger-btn-border-active: #782232;
	--ec-link-btn-bg: #4f46e5;
	--ec-link-btn-border: #4338ca;
	--ec-link-btn-bg-hover: #4338ca;
	--ec-link-btn-border-hover: #3730a3;
	--ec-link-btn-bg-active: #3730a3;
	--ec-link-btn-border-active: #312e81;
	--ec-page-margin-inline: 2.25rem;
	--ec-page-margin-block: 1.25rem;
	--ec-radius-sm: 0.35rem;

	--bulma-radius-small: var(--ec-radius-sm);
	--bulma-radius: var(--ec-radius-sm);
	--bulma-body-background-color: var(--ec-bg);
	--bulma-body-color: var(--ec-text);
	--bulma-code-background: var(--ec-surface-soft);
	--bulma-scheme-h: 218deg;
	--bulma-scheme-s: 39%;
	--bulma-scheme-main-l: 100%;
	--bulma-scheme-main-bis-l: 98%;
	--bulma-scheme-main-ter-l: 96%;
	--bulma-background-l: 98%;
	--bulma-border-weak-l: 93%;
	--bulma-border-l: 88%;
	--bulma-text-h: 221deg;
	--bulma-text-s: 40%;
	--bulma-text-l: 15%;
	--bulma-text-weak-l: 46%;
	--bulma-text-strong-l: 15%;
	--bulma-text-title-l: 15%;
	--bulma-focus-h: 243deg;
	--bulma-focus-s: 75%;
	--bulma-focus-l: 59%;
	--bulma-focus-shadow-alpha: 0.24;
	--bulma-primary-h: 221deg;
	--bulma-primary-s: 83%;
	--bulma-primary-l: 53%;
	--bulma-link-h: 243deg;
	--bulma-link-s: 75%;
	--bulma-link-l: 59%;
	--bulma-info-h: 232deg;
	--bulma-info-s: 50%;
	--bulma-info-l: 50%;
	--bulma-success-h: 175deg;
	--bulma-success-s: 77%;
	--bulma-success-l: 26%;
	--bulma-warning-h: 32deg;
	--bulma-warning-s: 95%;
	--bulma-warning-l: 44%;
	--bulma-danger-h: 350deg;
	--bulma-danger-s: 57%;
	--bulma-danger-l: 50%;
}

.theme-dark,
[data-theme="dark"] {
	color-scheme: dark;

	--ec-bg: #0b1220;
	--ec-surface: #111a2b;
	--ec-surface-soft: #16233a;
	--ec-surface-alt: #19253b;
	--ec-surface-hover: #1f304d;
	--ec-surface-selected: #1a2942;
	--ec-border: #25344d;
	--ec-border-strong: #35506f;
	--ec-border-soft: #22314a;
	--ec-border-list: #20314d;
	--ec-border-translucent: rgba(83, 111, 149, 0.45);
	--ec-text: #e7eefc;
	--ec-text-muted: #95a8c7;
	--ec-text-subtle: #7f92b3;
	--ec-accent: #6aa5ff;
	--ec-accent-strong: #93beff;
	--ec-accent-soft: rgba(106, 165, 255, 0.18);
	--ec-link: #8f83ff;
	--ec-danger: #ea6a7d;
	--ec-danger-strong: #ff95a4;
	--ec-danger-soft: rgba(234, 106, 125, 0.18);
	--ec-success: #2bb4a6;
	--ec-focus: rgba(106, 165, 255, 0.35);
	--ec-page-glow: #152542;
	--ec-page-glow-transparent: rgba(21, 37, 66, 0);
	--ec-navbar-start: #0f1728;
	--ec-navbar-end: #162238;
	--ec-info-header: #6f85ff;
	--ec-info-body-bg: #182449;
	--ec-info-body-border: #334a82;
	--ec-info-body-text: #dbe5ff;
	--ec-primary-message-header: #2d4f96;
	--ec-primary-message-body-bg: #122241;
	--ec-primary-message-body-border: #31538d;
	--ec-primary-message-body-text: #d7e4ff;
	--ec-control-bg: #0f1a2b;
	--ec-control-border: #31455f;
	--ec-control-border-focus: #6aa5ff;
	--ec-control-focus-ring: rgba(106, 165, 255, 0.30);
	--ec-divider: #31455f;
	--ec-overlay: rgba(4, 8, 16, 0.66);
	--ec-shadow-soft: rgba(0, 0, 0, 0.45);
	--ec-shadow-surface: rgba(0, 0, 0, 0.24);
	--ec-shadow-inset: rgba(0, 0, 0, 0.22);
	--ec-selection: rgba(106, 165, 255, 0.30);
	--ec-tristate-active-bg: #6f85ff;
	--ec-tristate-active-border: #6f85ff;
	--ec-primary-btn-bg: #6aa5ff;
	--ec-primary-btn-border: #5b97f2;
	--ec-primary-btn-bg-hover: #5b97f2;
	--ec-primary-btn-border-hover: #4a86e3;
	--ec-primary-btn-bg-active: #4a86e3;
	--ec-primary-btn-border-active: #93beff;
	--ec-success-btn-bg: #2bb4a6;
	--ec-success-btn-border: #249a8e;
	--ec-success-btn-bg-hover: #249a8e;
	--ec-success-btn-border-hover: #1d8278;
	--ec-success-btn-bg-active: #1d8278;
	--ec-success-btn-border-active: #5dd2c7;
	--ec-danger-btn-bg: #ea6a7d;
	--ec-danger-btn-border: #d85b6d;
	--ec-danger-btn-bg-hover: #d85b6d;
	--ec-danger-btn-border-hover: #bf4d5e;
	--ec-danger-btn-bg-active: #bf4d5e;
	--ec-danger-btn-border-active: #ff9dad;
	--ec-link-btn-bg: #8f83ff;
	--ec-link-btn-border: #7d72ea;
	--ec-link-btn-bg-hover: #7d72ea;
	--ec-link-btn-border-hover: #695fcd;
	--ec-link-btn-bg-active: #695fcd;
	--ec-link-btn-border-active: #b2aaff;

	--bulma-body-background-color: var(--ec-bg);
	--bulma-body-color: var(--ec-text);
	--bulma-code-background: var(--ec-surface-soft);
	--bulma-scheme-h: 220deg;
	--bulma-scheme-s: 33%;
	--bulma-scheme-main-l: 12%;
	--bulma-scheme-main-bis-l: 14%;
	--bulma-scheme-main-ter-l: 17%;
	--bulma-background-l: 10%;
	--bulma-border-weak-l: 20%;
	--bulma-border-l: 28%;
	--bulma-text-h: 220deg;
	--bulma-text-s: 50%;
	--bulma-text-l: 88%;
	--bulma-text-weak-l: 73%;
	--bulma-text-strong-l: 96%;
	--bulma-text-title-l: 96%;
	--bulma-focus-h: 246deg;
	--bulma-focus-s: 100%;
	--bulma-focus-l: 76%;
	--bulma-focus-shadow-alpha: 0.30;
	--bulma-primary-h: 216deg;
	--bulma-primary-s: 100%;
	--bulma-primary-l: 71%;
	--bulma-link-h: 246deg;
	--bulma-link-s: 100%;
	--bulma-link-l: 76%;
	--bulma-info-h: 231deg;
	--bulma-info-s: 100%;
	--bulma-info-l: 72%;
	--bulma-success-h: 174deg;
	--bulma-success-s: 61%;
	--bulma-success-l: 44%;
	--bulma-danger-h: 351deg;
	--bulma-danger-s: 75%;
	--bulma-danger-l: 67%;
}

/* SECTION: SHELL — Fond de page et chrome global
 * Cas d'usage: appliques au layout principal pour donner une ambiance lisible
 * et differencier contenu et chrome de navigation. */
html,
body {
	background: radial-gradient(circle at 5% -16%, var(--ec-page-glow) 0%, var(--ec-page-glow-transparent) 42%), var(--ec-bg);
	color: var(--ec-text);
	min-height: 100%;
}

.ec-shell {
	min-height: 100vh;
}

/* `.ec-main-navbar`: barre persistante qui distingue clairement le chrome du contenu
 * sans prendre le dessus sur les écrans pédagogiques. */
.ec-main-navbar {
	background: linear-gradient(100deg, var(--ec-navbar-start) 0%, var(--ec-navbar-end) 100%) !important;
	border-bottom: 1px solid var(--ec-border);
	box-shadow: 0 1px 0 var(--ec-shadow-inset), 0 0.35rem 1rem var(--ec-shadow-surface);
	position: sticky;
	top: 0;
	z-index: 40;
}

.ec-main-navbar .ec-account-menu {
	display: block;
}

.ec-account-menu>summary {
	list-style: none;
	cursor: pointer;
}

.ec-account-menu>summary::-webkit-details-marker {
	display: none;
}

.ec-account-menu[open]>.navbar-dropdown {
	display: block;
}

/* `.ec-brand`: mot-symbole plus dense pour donner un point d'ancrage visuel
 * à gauche de la navigation, sans dépendre d'un logo graphique. */
.ec-brand {
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--ec-accent-strong) !important;
}

.ec-main-navbar .navbar-item,
.ec-main-navbar .navbar-link {
	transition: background-color 0.16s ease, color 0.16s ease;
}

.ec-main-navbar .navbar-start>.navbar-item:hover,
.ec-main-navbar .navbar-start>.navbar-item:focus-visible,
.ec-main-navbar .navbar-link:hover,
.ec-main-navbar .navbar-link:focus-visible {
	background-color: var(--ec-accent-soft);
	color: var(--ec-accent-strong);
}

.ec-main-navbar .navbar-start>.navbar-item.is-active {
	background-color: var(--ec-accent-soft);
	box-shadow: inset 0 -2px 0 var(--ec-accent);
	color: var(--ec-accent-strong);
	font-weight: 600;
}

.ec-main-navbar .navbar-start>.navbar-item:focus-visible,
.ec-main-navbar .navbar-link:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: -2px;
}

@media screen and (min-width: 1024px) {
	.ec-account-menu>summary {
		box-sizing: border-box;
		height: 100%;
	}

	.ec-main-navbar .navbar-end .navbar-item.has-dropdown {
		position: relative;
	}

	.ec-main-navbar .navbar-end .navbar-item.has-dropdown .navbar-dropdown {
		left: auto !important;
		right: 0 !important;
		min-width: 18rem !important;
		width: max-content !important;
		max-width: calc(100vw - 1.5rem) !important;
	}

	.ec-main-navbar .navbar-end .navbar-item.has-dropdown .navbar-dropdown .navbar-item {
		white-space: nowrap;
	}
}

.ec-navbar-dropdown-form {
	display: block;
	margin: 0;
	padding: 0;
}

.ec-navbar-dropdown-submit {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.ec-main-navbar .navbar-dropdown .navbar-item:hover,
.ec-main-navbar .navbar-dropdown .navbar-item:focus-visible {
	background: var(--ec-accent-soft);
	color: var(--ec-accent-strong);
}

/* `.ec-page-header`: hero partagé des pages. Le conteneur porte la marge externe,
 * le `.hero-body` est volontairement sans padding horizontal pour aligner le texte
 * exactement sur le bord du contenu situé en dessous. */
.ec-page-header {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	margin: 0.95rem var(--ec-page-margin-inline) 0;
	overflow: visible;
}

/* `.ec-page`: helper simple pour les blocs pleine largeur qui doivent partager
 * la même marge horizontale que le hero de page. */
.ec-page {
	margin-left: var(--ec-page-margin-inline);
	margin-right: var(--ec-page-margin-inline);
}

/* `.columns.ec-page`: variante pour les grilles Bulma, compensant la gouttière
 * native des colonnes afin que le premier et le dernier contenu restent alignés
 * avec les autres blocs de page. */
.columns.ec-page {
	margin-left: calc(var(--ec-page-margin-inline) - 0.75rem);
	margin-right: calc(var(--ec-page-margin-inline) - 0.75rem);
	margin-top: var(--ec-page-margin-block);
	margin-bottom: 0;
}

/* Ces blocs réutilisent la même marge verticale que les pages pour éviter la prolifération
 * de `mt-*` locaux, qui finit sinon par produire des rythmes incohérents. */
.hero.ec-page,
.block.ec-page,
.message.ec-page,
.section.ec-page {
	margin-top: var(--ec-page-margin-block);
	margin-bottom: 0;
}

/* `.ec-page-shell`: wrapper neutre pour les pages composées de plusieurs zones
 * (titre + tabs + colonnes) sans réintroduire de marge interne parasite. */
.ec-page-shell {
	margin: var(--ec-page-margin-block) var(--ec-page-margin-inline);
}

.ec-page-shell.is-top-only {
	margin-top: 0;
}

.ec-page-shell>.columns {
	margin-top: 0;
	margin-bottom: 0;
}

.ec-single-column-shell {
	padding: 0;
}

.ec-single-column-body {
	width: 100%;
}

.ec-single-column-content {
	margin: 0;
	padding: 0;
}

.hero.ec-page-header .hero-body {
	padding: 0.5rem 0;
}

.ec-page-header .title {
	margin-bottom: 0.15rem;
	color: var(--ec-text);
}

.ec-page-header .subtitle {
	color: var(--ec-text-muted);
}

.ec-assessment-result-hero {
	margin-bottom: var(--bulma-block-spacing);
}

.ec-page-header:is(.is-primary, .is-link, .is-info, .is-success, .is-warning, .is-danger) .title,
.ec-page-header:is(.is-primary, .is-link, .is-info, .is-success, .is-warning, .is-danger) .subtitle {
	color: var(--ec-text-inverse);
}

/* SECTION: COMPONENTS — Cartes, panneaux et hierarchie de contenu
 * Cas d'usage: toutes les surfaces encadrées partagent exactement la même apparence
 * (ombre discrète, coins peu arrondis, bord léger). */
.ec-card,
.message,
.ec-message,
.panel,
.ec-panel {
	background: var(--ec-surface);
	border: 1px solid var(--ec-border);
	border-radius: var(--ec-radius-sm);
	box-shadow: 0 1px 2px var(--ec-shadow-surface);
	overflow: hidden;
}

/* `.panel-heading`: hauteur minimale commune, conservée dans les panneaux flex. */
.panel-heading {
	background-color: var(--ec-surface-alt);
	background-image: none;
	border-bottom: 1px solid var(--ec-border);
	font-weight: 700;
	color: var(--ec-text);
	border-radius: var(--ec-radius-sm) var(--ec-radius-sm) 0 0;
	padding: 0.4rem 0.85rem;
	min-height: 3.05rem;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.panel-heading .buttons {
	margin-bottom: 0;
	align-items: center;
}

.panel-heading .checkbox {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
}

.panel-heading .checkbox input {
	margin-top: 0;
}

.panel-heading> :first-child {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/** Les éléments suivants sont pour tronquer le texte dans un panel heading avec une icônte à gauche et des boutons à droite */
.panel-heading>.icon-text {
	display: flex;
	flex: 1;
	min-width: 0;
}

.panel-heading>.icon-text>.icon,
.ec-panel .panel-block .panel-icon,
.ec-panel .ec-panel-heading-tools {
	flex: 0 0 auto;
}

.ec-panel .panel-heading>.icon-text>span:last-child,
.ec-panel .panel-block .ec-tree-item-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ec-panel .panel-block {
	display: flex;
	align-items: center;
}



/* `.panel-block`: on neutralise explicitement les coins arrondis hérités pour empêcher
 * l'apparition de fonds arrondis parasites sur le dernier élément actif d'une liste. */
.panel-block {
	border-bottom-color: var(--ec-border-soft);
	border-radius: 0;
}

.panel-block:last-child {
	border-bottom: 0;
	border-radius: 0;
}

/* `.ec-login-form`: carte de formulaire de connexion reprenant la surface commune
 * tout en ajoutant un padding confortable. */
.ec-login-form {
	padding: 1.1rem 1.25rem;
}

.message-body {
	overflow-wrap: anywhere;
}

/* Les actions d'une colonne d'aide étroite gardent leur libellé complet. */
.message-body .button {
	max-width: 100%;
	height: auto;
	white-space: normal;
}

/* SECTION: FEATURE-SPECIFIC — Ergonomie edition
 * Cas d'usage: clarifier le scan des formulaires, separer les blocs de configuration
 * et garder les actions principales facilement reperables en bas de formulaire. */
.ec-edit-form-stack {
	display: grid;
	gap: 0.95rem;
}

.ec-edit-panel {
	overflow: hidden;
}

/* `.ec-edit-actions`: barre d'actions collée en bas pour limiter les allers-retours verticaux
 * dans les formulaires longs, surtout sur les pages d'édition. */
.ec-edit-actions {
	position: sticky;
	bottom: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--ec-surface) 94%, var(--ec-accent) 6%);
	padding: 0.55rem 0.75rem;
	border-top: 1px solid var(--ec-border-soft);
	border-bottom: 1px solid var(--ec-border-soft);
	border-radius: 0;
	box-shadow: 0 -0.25rem 0.8rem var(--ec-shadow-inset);
	display: flex;
	gap: 0.75rem;
}

.ec-panel-footer .ec-edit-actions {
	position: static;
	background: transparent;
	padding: 0;
	border: 0;
	box-shadow: none;
}

/* SECTION: LAYOUT — Layout maitre/detail et hauteur disponible
 * Cas d'usage: partager un canevas simple avec liste a gauche et panneau de detail a droite. */

.ec-master-detail {
	align-items: stretch;
}

.ec-master-detail>.column {
	display: flex;
	flex-direction: column;
	min-height: 0;
	min-width: 0;
}

.ec-master-detail>.column>.panel,
.ec-master-detail>.column>.message,
.ec-master-detail>.column>form {
	width: 100%;
	margin-bottom: 0;
}

.ec-page-no-scroll {
	--ec-page-fixed-offset: 12.5rem;
	--ec-page-fixed-offset-extra: 0rem;
	height: calc(100dvh - (var(--ec-page-fixed-offset) + var(--ec-page-fixed-offset-extra)));
	min-height: calc(100dvh - (var(--ec-page-fixed-offset) + var(--ec-page-fixed-offset-extra)));
	overflow: hidden;
}

.ec-page-no-scroll.is-with-extra-top-row {
	--ec-page-fixed-offset-extra: 8.6rem;
}

/* Standard no-scroll pages adapt automatically to hero height.
 * This avoids per-view classes when the subtitle is omitted. */
.ec-page-header+.columns.ec-page.ec-page-no-scroll:not(.is-with-tabs):not(.is-with-breadcrumb) {
	--ec-page-fixed-offset: 11.1rem;
}

.ec-page-header:has(.subtitle)+.columns.ec-page.ec-page-no-scroll:not(.is-with-tabs):not(.is-with-breadcrumb) {
	--ec-page-fixed-offset: 12.5rem;
}

.ec-page-no-scroll.is-with-tabs {
	--ec-page-fixed-offset: 15.05rem;
}

.ec-page-no-scroll.is-with-breadcrumb {
	--ec-page-fixed-offset: 17.1rem;
}

.ec-page-no-scroll.is-with-result-info {
	--ec-page-fixed-offset: 19.9rem;
}

.columns.ec-page.ec-page-breadcrumb-row {
	margin-top: 0.4rem;
	margin-bottom: 0.3rem;
}

.columns.ec-breadcrumb-row {
	margin-top: 0.35rem;
	margin-bottom: 0.3rem;
}

.ec-page-no-scroll>.column {
	height: 100%;
	min-height: 0;
}

.ec-column-fill {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.ec-column-scroll {
	display: flex;
	flex-direction: column;
	gap: 0.95rem;
	overflow-y: auto;
	min-height: 0;
}

.ec-column-scroll>.message {
	flex-shrink: 0;
	margin-bottom: 0;
}

.ec-panel-fill {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
	margin-bottom: 0;
}

/* Garder la priorité sur `.panel:not(:last-child)` de Bulma, même lorsqu'un
 * champ caché CSRF est ajouté après le panneau à la soumission du formulaire. */
.panel.ec-panel-fill {
	margin-bottom: 0;
}

/* Variante pour les formulaires places sous un panel-heading: occuper uniquement
 * l'espace restant sans depasser la hauteur du panel parent. */
.ec-panel-fill>form.ec-panel-fill {
	flex: 1 1 auto;
	height: auto;
}

/* Classe explicite pour les panels pleine hauteur avec contenu scrollable.
 * Usage: appliquer `ec-panel-to-bottom` au panel et garder un bloc interne `ec-panel-scroll`. */
.ec-panel-to-bottom {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.ec-panel-to-bottom>.ec-panel-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.ec-panel-scroll {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.panel-block.ec-panel-scroll {
	display: block;
	align-items: stretch;
}

.panel-block.ec-panel-scroll+.panel-block.ec-panel-footer {
	border-top: 1px solid var(--ec-border-soft);
}

.panel-block.ec-panel-scroll:has(+ .panel-block.ec-panel-footer) {
	border-bottom: 0;
}

.ec-panel-footer {
	flex: 0 0 auto;
	margin-top: auto;
	border-top: 1px solid var(--ec-border-soft);
	background: var(--ec-surface);
	position: relative;
	z-index: 1;
	padding: 0.65rem 0.75rem;
	border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
}

/* `.panel-block:last-child` neutralise les rayons des blocs de liste ; le footer
 * est une surface visuelle du panel et doit conserver ses coins inférieurs. */
.panel-block.ec-panel-footer {
	border-bottom-left-radius: var(--ec-radius-sm);
	border-bottom-right-radius: var(--ec-radius-sm);
}

.ec-edit-panel>.ec-panel-scroll {
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.7rem 0.75rem;
}

.ec-master-list {
	--ec-master-list-padding-block: 0.38rem;
	--ec-master-list-padding-inline: 0.55rem;
	--ec-master-list-gap: 0.55rem;
}

.ec-master-list.ec-master-list-relaxed {
	--ec-master-list-padding-block: 0.58rem;
	--ec-master-list-padding-inline: 0.72rem;
	--ec-master-list-gap: 0.62rem;
}

.ec-master-list-item,
.ec-master-list-link {
	display: flex;
	align-items: center;
	gap: var(--ec-master-list-gap, 0.55rem);
	min-width: 0;
	width: 100%;
	color: inherit;
	background: transparent;
	border-radius: 0;
}

.ec-master-list-item {
	margin: 0;
	border-left: 0.2rem solid transparent;
	border-bottom: 1px solid var(--ec-border-list);
	padding: var(--ec-master-list-padding-block, 0.38rem) var(--ec-master-list-padding-inline, 0.55rem);
	transition: background-color 0.16s ease, border-left-color 0.16s ease, box-shadow 0.16s ease;
}

.ec-master-list-item:not(.is-active):hover,
.ec-master-list-item:not(.is-active):has(> .ec-master-list-link:hover),
.ec-master-list-item:not(.is-active):has(> .ec-master-list-link:focus-visible) {
	background: var(--ec-surface-hover);
	color: inherit;
}

.ec-master-list-link:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: -2px;
}

.ec-master-list-item.is-active {
	background: var(--ec-surface-selected);
	border-left-color: var(--ec-accent);
	box-shadow: inset 0 1px 0 var(--ec-accent-soft), inset 0 -1px 0 var(--ec-accent-soft);
}

.ec-master-list-link {
	padding: var(--ec-master-list-padding-block, 0.38rem) var(--ec-master-list-padding-inline, 0.55rem);
	flex: 1 1 auto;
}

.ec-master-list-text {
	display: inline-flex;
	align-items: baseline;
	gap: 0.32rem;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
}

.ec-master-list-title,
.ec-master-list-meta {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ec-master-list-title {
	font-weight: 600;
}

.ec-master-list-meta {
	color: var(--ec-text-muted);
}

.ec-master-list-badges {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	flex: 0 0 auto;
	white-space: nowrap;
	margin-left: auto;
	color: var(--ec-text-muted);
	justify-content: flex-end;
}

.ec-master-list-tools {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 0.1rem;
	padding: 0 0.15rem;
	border-left: 1px solid var(--ec-border-translucent);
	background: transparent;
}

.ec-inline-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: auto;
	height: auto;
	min-width: 1.9rem;
	padding: 0.25rem 0.38rem;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	background: transparent;
	color: var(--ec-text-muted) !important;
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
}

.ec-inline-icon-button:hover,
.ec-inline-icon-button:focus-visible {
	background: transparent !important;
	color: var(--ec-text-muted) !important;
}

.ec-inline-icon-button-primary:hover,
.ec-inline-icon-button-primary:focus-visible {
	background: var(--ec-accent-soft) !important;
	color: var(--ec-accent-strong) !important;
}

.ec-inline-icon-button-danger:hover,
.ec-inline-icon-button-danger:focus-visible {
	background: var(--ec-danger-soft) !important;
	color: var(--ec-danger-strong) !important;
}

.ec-inline-icon-button .icon,
.ec-inline-icon-button i,
.icon.ec-inline-icon-button i {
	pointer-events: none;
}

.ec-detail-empty-state {
	max-width: 34rem;
}

.ec-files-browser-left,
.ec-files-browser-right {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.ec-files-preview-panel,
.ec-files-panel {
	width: 100%;
}

#user-files-browser {
	overflow: hidden;
	min-height: 0;
}

.panel-compact .panel-block.ec-files-browser-actions {
	display: block;
	margin-top: auto;
	border-top: 1px solid var(--ec-border);
	background: var(--ec-surface);
	padding: 1.25rem 1.35rem !important;
}

.ec-files-browser-actions>form+form {
	margin-top: 0.9rem;
}

.ec-files-browser-actions .field:last-child {
	margin-bottom: 0;
}

.ec-files-browser-actions .file .file-cta {
	padding-inline: 0.85rem;
}

.ec-files-browser-actions form[enctype="multipart/form-data"] .field.is-grouped {
	flex-wrap: nowrap;
}

.ec-files-browser-actions form[enctype="multipart/form-data"] .field.is-grouped > .control.is-expanded {
	min-width: 0;
}

.ec-files-browser-actions form[enctype="multipart/form-data"] .field.is-grouped > .control:not(.is-expanded) {
	flex: 0 0 auto;
}

.ec-files-browser-actions form[enctype="multipart/form-data"] .file,
.ec-files-browser-actions form[enctype="multipart/form-data"] .file-label,
.ec-files-browser-actions form[enctype="multipart/form-data"] .file-name {
	min-width: 0;
}

.ec-files-browser-actions form[enctype="multipart/form-data"] .file-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ec-files-preview-panel {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	min-height: 0;
}

.ec-files-preview-body {
	padding: 1rem;
}

.ec-files-preview-body-editor {
	padding: 0 !important;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.ec-files-preview-body-editor>.is-scrollable-content,
.ec-files-preview-body-editor>.is-scrollable-content>.scrollable-content {
	flex: 1 1 auto;
	min-height: 0;
}

.ec-files-preview-body-editor>.is-scrollable-content>.scrollable-content {
	display: flex;
	overflow: hidden;
}

.ec-files-preview-editor {
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	min-height: 0;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.ec-files-preview-body-editor .editor-ace.ec-files-preview-editor {
	height: 100% !important;
}

.ec-files-browser-right .ec-edit-form-stack {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

.ec-files-preview-panel .panel-heading .field.has-addons {
	margin-bottom: 0;
	min-width: min(22rem, 45vw);
}

#user-files-picker-modal .modal-card-body {
	padding-bottom: 0 !important;
}

#user-files-picker-modal .columns.ec-master-detail {
	height: 100%;
	min-height: 0;
	margin-top: 0;
	margin-bottom: 0;
}

#submission_file_preview_.editor-ace,
#user_file_editor_contents_.editor-ace {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

@media screen and (max-width: 768px) {

	.ec-page-no-scroll,
	.ec-page-no-scroll.is-with-tabs,
	#user-files-browser.ec-page {
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.ec-master-list-link {
		gap: 0.5rem;
	}

	.ec-master-list-badges {
		margin-left: 0;
	}

	.ec-page-no-scroll>.column,
	#user-files-browser>.column,
	#database-files-browser>.column,
	.ec-files-preview-panel,
	.ec-files-browser-right .ec-edit-form-stack {
		height: auto;
	}

	.ec-files-preview-panel .panel-heading .field.has-addons {
		min-width: 0;
	}
}

.ec-edit-notification {
	margin-bottom: 0;
	border: 0;
	/*background: var(--ec-surface-soft); ne va pas si on veut pouvoir mettre aussi un is-error is-info */
	padding: 0.3rem 0.5rem;
}

.ec-notification {
	border-radius: var(--ec-radius-sm);
}

.breadcrumb.ec-card {
	padding: 0.52rem 0.9rem;
	margin-bottom: 0;
}

.breadcrumb.ec-card ul {
	flex-wrap: wrap;
}

/* SECTION: FEATURE-SPECIFIC — Resultats et rapports
 * Cas d'usage: presentation des resultats d'evaluation et rapports tabulaires
 * avec un contraste plus net et une lecture plus confortable. */
/* `.ec-report-wrap`: conteneur des tableaux. Le padding a été retiré pour que les
 * tableaux s'alignent exactement avec les tabs et les autres surfaces. */
.ec-report-wrap {
	padding: 0;
	min-width: 0;
	overflow-x: hidden;
}

/* Synthèse : centrer les en-têtes fusionnés sur toute la hauteur des deux lignes. */
.table-container .table thead th[rowspan] {
	vertical-align: middle;
}

.table.ec-status-load-table :is(th, td) {
	border: 0;
}

.ec-report-table {
	width: 100%;
	table-layout: fixed;
	margin-bottom: 0;
	background: var(--ec-surface);
}

/* Rapports : réserver la largeur aux questions et opérations ; dimensionner les
 * colonnes de notes, d'état et de correction selon leur contenu. */
.ec-report-table .ec-report-col-number:not([align]) {
	width: 3.5rem;
	text-align: center;
}

@media screen and (min-width: 769px) {
	.ec-report-table :is(.ec-report-col-mark, .ec-report-col-result) {
		width: 4.5rem;
	}

	.ec-report-table .ec-report-col-state {
		width: 3.5rem;
	}

	.ec-report-table-status .ec-report-col-question {
		width: 34%;
	}

	.ec-report-table-manual .ec-report-col-manual-item {
		width: 11rem;
	}

	.ec-report-table-manual .ec-report-col-manual-action {
		width: 11rem;
	}
}

@media screen and (min-width: 1200px) {
	.ec-report-table-manual .ec-report-col-manual-item {
		width: 15rem;
	}
}

.ec-report-table thead th {
	padding: 0.48rem 0.6rem;
	font-size: 0.78rem;
	letter-spacing: 0.035em;
}

.ec-report-table thead tr.is-info>th {
	background-color: var(--ec-info-header);
	color: var(--ec-text-inverse) !important;
}

.ec-report-table tbody tr {
	transition: background-color 0.14s ease;
}

.ec-report-table tbody tr:hover {
	background-color: var(--ec-surface-hover);
}

.ec-report-table tfoot tr {
	font-weight: 700;
}

.ec-report-table th,
.ec-report-table td {
	padding: 0.45rem 0.6rem;
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ec-report-table .is-flex {
	min-width: 0;
	flex-wrap: wrap;
}

.ec-report-table .ec-report-action-title-line {
	flex: 1 1 auto;
	min-width: 0;
}

.ec-database-list-item {
	transition: background-color 0.16s ease, color 0.16s ease;
}

.ec-database-list-item:hover,
.ec-database-list-item:focus-visible {
	background-color: var(--ec-surface-hover) !important;
	color: var(--ec-text) !important;
}

.ec-database-list-item:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: -2px;
}

.ec-report-table :is(th, td)[rowspan],
.ec-report-table tfoot :is(th, td),
.ec-report-table :is(.ec-report-col-manual-item, .ec-report-col-state, .ec-report-col-manual-action) {
	vertical-align: middle;
}

.ec-report-table :is(.ec-report-col-mark, .ec-report-col-result) {
	white-space: nowrap;
}

.ec-report-table .ec-report-col-mark {
	text-align: right;
}

.ec-report-table :is(.ec-report-col-result, .ec-report-col-manual-item, .ec-report-col-state, .ec-report-col-manual-action) {
	text-align: center;
}

.ec-report-table :is(.ec-report-col-result, .ec-report-col-state) .icon {
	justify-content: center;
}

.ec-report-action-details {
	display: block;
}

/* Le détail est un message unique qui contient plusieurs couples header/body.
 * Le rayon doit être porté par le conteneur externe et seulement par ses extrémités,
 * afin d'éviter deux coins inférieurs concurrents sur le dernier bloc. */
.ec-report-action-details>.message {
	--bulma-message-radius: var(--ec-radius-sm);
	--bulma-message-body-radius: 0;
	border-radius: var(--ec-radius-sm);
	overflow: hidden;
}

.ec-report-action-details>.message> :is(.message-header, .message-body) {
	border-radius: 0;
}

.ec-report-action-details>.message>.message-header:first-child {
	border-radius: var(--ec-radius-sm) var(--ec-radius-sm) 0 0;
}

.ec-report-action-details>.message>.message-body:last-child {
	border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
}

.ec-report-action-details summary {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	cursor: pointer;
	color: inherit;
	list-style: none;
	white-space: normal;
	max-width: 100%;
	width: 100%;
	box-sizing: border-box;
	border-radius: var(--ec-radius-sm);
	padding: 0.15rem 0.25rem;
	transition: background-color 0.14s ease, color 0.14s ease;
}

.ec-report-action-details summary:hover,
.ec-report-action-details summary:focus-visible {
	background-color: var(--bulma-scheme-main-bis);
	color: var(--ec-accent-strong);
}

.ec-report-action-details summary:focus-visible {
	outline: 2px solid var(--ec-accent);
	outline-offset: -2px;
}

.ec-report-action-title-line {
	display: block;
	min-width: 0;
}

.ec-report-action-label {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

@media screen and (max-width: 768px) {
	.ec-report-action-details summary {
		flex-wrap: wrap;
	}

	.ec-report-action-details summary .ec-report-action-label {
		flex-basis: 100%;
	}
}

.ec-report-action-details summary::-webkit-details-marker {
	display: none;
}

.ec-report-action-details summary::marker {
	display: none;
}

.ec-report-action-detail-content {
	border-left: 3px solid var(--bulma-info);
}

.ec-report-action-detail+.ec-report-action-detail {
	margin-top: 0.75rem;
}

.ec-report-llm-verdict .message-body,
.ec-report-llm-verdict .message-body p {
	font-weight: 400;
}

/* `.ec-report-manual-cell-inner`: conteneur flex interne d'une cellule de note manuelle
 * (tabs de dérogation + champ de saisie). Évite le style inline `gap`. */
.ec-report-manual-cell-inner {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* `.ec-report-score-input`: champ de saisie de note compacte dans le rapport manuel. */
.ec-report-score-input {
	width: 3.5rem;
	min-height: 2rem;
	text-align: right;
	background-color: var(--ec-control-bg);
	border-color: var(--ec-control-border);
}

/* SECTION: COMPONENTS — Composants de liste arborescente
 * Cas d'usage: conserver la compatibilite des vues historiques tout en les alignant
 * sur les variantes generiques `ec-master-list-*`. */
.ec-tree-item {
	gap: var(--ec-master-list-gap, 0.55rem);
}

/* SECTION: BULMA OVERRIDES — Actions, messages et infos
 * Cas d'usage: garder la semantique Bulma (`is-primary`, `is-info`) tout en l'alignant
 * sur la palette froide et un contraste stable avec les surfaces du theme. */

/* Coins uniformes sur tous les boutons — défini une seule fois ici, catégoriquement.
 * Le faible rayon garde un rendu moderne et technique, plus cohérent avec l'outil. */
.button {
	border-radius: var(--ec-radius-sm);
}

/* Confirmation temporaire dans un bouton : le libellé initial garde sa taille.
 * Le fragment serveur renouvelle l'ID du message pour relancer l'animation. */
.ec-save-feedback {
	position: relative;
}

.ec-save-feedback-label,
.ec-save-feedback-success {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
}

.ec-save-feedback-success {
	position: absolute;
	inset: calc(-1 * var(--bulma-button-border-width));
	border: var(--bulma-button-border-width) solid var(--ec-success-btn-border);
	border-radius: inherit;
	background: var(--ec-success-btn-bg);
	color: var(--ec-text-inverse);
	pointer-events: none;
	visibility: hidden;
	animation: ec-save-confirmation 2s step-end;
}

@keyframes ec-save-confirmation {
	from {
		visibility: visible;
	}

	to {
		visibility: hidden;
	}
}

.button.is-primary:not(.is-light) {
	--ec-btn-bg: var(--ec-primary-btn-bg);
	--ec-btn-border: var(--ec-primary-btn-border);
	--ec-btn-bg-hover: var(--ec-primary-btn-bg-hover);
	--ec-btn-border-hover: var(--ec-primary-btn-border-hover);
	--ec-btn-bg-active: var(--ec-primary-btn-bg-active);
	--ec-btn-border-active: var(--ec-primary-btn-border-active);
}

.button.is-success:not(.is-light) {
	--ec-btn-bg: var(--ec-success-btn-bg);
	--ec-btn-border: var(--ec-success-btn-border);
	--ec-btn-bg-hover: var(--ec-success-btn-bg-hover);
	--ec-btn-border-hover: var(--ec-success-btn-border-hover);
	--ec-btn-bg-active: var(--ec-success-btn-bg-active);
	--ec-btn-border-active: var(--ec-success-btn-border-active);
}

.button.is-danger:not(.is-light) {
	--ec-btn-bg: var(--ec-danger-btn-bg);
	--ec-btn-border: var(--ec-danger-btn-border);
	--ec-btn-bg-hover: var(--ec-danger-btn-bg-hover);
	--ec-btn-border-hover: var(--ec-danger-btn-border-hover);
	--ec-btn-bg-active: var(--ec-danger-btn-bg-active);
	--ec-btn-border-active: var(--ec-danger-btn-border-active);
}

.button.is-link:not(.is-light) {
	--ec-btn-bg: var(--ec-link-btn-bg);
	--ec-btn-border: var(--ec-link-btn-border);
	--ec-btn-bg-hover: var(--ec-link-btn-bg-hover);
	--ec-btn-border-hover: var(--ec-link-btn-border-hover);
	--ec-btn-bg-active: var(--ec-link-btn-bg-active);
	--ec-btn-border-active: var(--ec-link-btn-border-active);
}

:is(.button.is-primary, .button.is-link, .button.is-success, .button.is-danger):not(.is-light) {
	background-color: var(--ec-btn-bg);
	border-color: var(--ec-btn-border);
	color: var(--ec-text-inverse);
	border-radius: var(--ec-radius-sm);
}

:is(.button.is-primary, .button.is-link, .button.is-success, .button.is-danger):not(.is-light):is(:hover, .is-hovered) {
	background-color: var(--ec-btn-bg-hover);
	border-color: var(--ec-btn-border-hover);
	color: var(--ec-text-inverse);
}

:is(.button.is-primary, .button.is-link, .button.is-success, .button.is-danger):not(.is-light):is(:focus-visible, .is-focused, :active, .is-active) {
	background-color: var(--ec-btn-bg-active);
	border-color: var(--ec-btn-border-active);
	color: var(--ec-text-inverse);
}

/* Les variantes `is-light` doivent rester des actions secondaires ; elles ne doivent
 * pas être recolorées comme les boutons sémantiques pleins ci-dessus. */
.button.is-link.is-light {
	background-color: var(--ec-accent-soft);
	border-color: var(--ec-border-strong);
	color: var(--ec-accent-strong);
}

.button.is-link.is-light:hover,
.button.is-link.is-light.is-hovered {
	background-color: color-mix(in srgb, var(--ec-accent-soft) 72%, var(--ec-accent) 28%);
	border-color: var(--ec-accent);
	color: var(--ec-accent-strong);
}

.button.is-link.is-light:focus-visible,
.button.is-link.is-light.is-focused,
.button.is-link.is-light:active,
.button.is-link.is-light.is-active {
	background-color: color-mix(in srgb, var(--ec-accent-soft) 55%, var(--ec-accent) 45%);
	border-color: var(--ec-accent-strong);
	color: var(--ec-accent-strong);
}

/* Les variantes de `message` restent sémantiques Bulma, mais recolorées pour conserver
 * la même palette froide que le reste de l'application. */
.message.is-info .message-header {
	background-color: var(--ec-info-header);
	color: var(--ec-text-inverse);
}

.message.is-info .message-body {
	background-color: var(--ec-info-body-bg);
	border-color: var(--ec-info-body-border);
	color: var(--ec-info-body-text);
}

.message.is-success .message-header,
.message.is-danger .message-header {
	color: var(--ec-text-inverse);
}

/* Surfaces sémantiques foncées : la couleur du texte se pilote ici via variables,
 * puis s'applique aux conteneurs eux-mêmes et aux cellules héritant d'une ligne
 * `.is-*` dans les tableaux. */
:is(.hero, .notification, .tag, .table tr, .table :is(th, td)).is-primary:not(.is-light) {
	--ec-semantic-surface-text-current: var(--ec-primary-surface-text);
}

:is(.hero, .notification, .tag, .table tr, .table :is(th, td)).is-link:not(.is-light) {
	--ec-semantic-surface-text-current: var(--ec-link-surface-text);
}

:is(.hero, .notification, .tag, .table tr, .table :is(th, td)).is-info:not(.is-light) {
	--ec-semantic-surface-text-current: var(--ec-info-surface-text);
}

:is(.hero, .notification, .tag, .table tr, .table :is(th, td)).is-success:not(.is-light) {
	--ec-semantic-surface-text-current: var(--ec-success-surface-text);
}

:is(.hero, .notification, .tag, .table tr, .table :is(th, td)).is-danger:not(.is-light) {
	--ec-semantic-surface-text-current: var(--ec-danger-surface-text);
}

:is(.hero, .notification, .tag, .table tr, .table :is(th, td)).is-dark:not(.is-light) {
	--ec-semantic-surface-text-current: var(--ec-dark-surface-text);
}

:is(.hero, .notification, .tag, .table tr, .table :is(th, td)):is(.is-primary, .is-link, .is-info, .is-success, .is-danger, .is-dark):not(.is-light),
.table tr:is(.is-primary, .is-link, .is-info, .is-success, .is-danger, .is-dark):not(.is-light)> :is(th, td) {
	color: var(--ec-semantic-surface-text-current) !important;
}

:is(.hero, .notification, .table tr, .table :is(th, td)):is(.is-primary, .is-link, .is-info, .is-success, .is-danger, .is-dark):not(.is-light) :is(.title, .subtitle, p, strong, a, span, code, .icon),
.table tr:is(.is-primary, .is-link, .is-info, .is-success, .is-danger, .is-dark):not(.is-light)> :is(th, td) :is(.title, .subtitle, p, strong, a, span, code, .icon) {
	color: inherit !important;
}

/* SECTION: COMPONENTS — Onglets de navigation secondaire
 * Cas d'usage: même rendu pour les tabs database et les tabs du panneau de test.
 * Les wrappers `.ec-db-tabs` et `.edit-test-tabs` portent seulement l'espacement local. */
.ec-db-tabs,
.edit-test-tabs {
	background: transparent;
	border: 0;
	padding: 0;
	margin-bottom: 0.85rem;
}

.ec-db-tabs-actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
}

.ec-db-tabs>.tabs,
.edit-test-tabs>.tabs {
	margin-bottom: 0;
}

.ec-db-tabs-action-form {
	margin: 0;
	display: flex;
	align-items: center;
}

.ec-copy-field .control.is-expanded {
	min-width: 0;
}

.ec-db-tabs .tabs ul,
.edit-test-tabs .tabs ul {
	align-items: stretch;
	flex-wrap: wrap;
	flex-shrink: 1;
	min-width: 0;
}

.ec-db-tabs .tabs a,
.edit-test-tabs .tabs a {
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: center;
}

.ec-db-tabs .tabs li.ec-db-tabs-action {
	margin-left: auto;
	display: flex;
	align-items: center;
	padding: 0 0 0.55rem 0.9rem;
}

.ec-db-tabs-actions-standalone {
	justify-content: flex-end;
	margin-bottom: 0.85rem;
}

.ec-db-progress-modal {
	z-index: 45;
}

.ec-db-progress-modal .modal-card {
	width: min(32rem, calc(100vw - 1.5rem));
	max-width: 32rem;
}

.ec-db-progress-modal .modal-card-body {
	background: radial-gradient(circle at 8% -22%, var(--ec-page-glow) 0%, var(--ec-page-glow-transparent) 42%), var(--ec-bg);
}

.ec-db-progress-modal .progress {
	margin-bottom: 0.75rem;
}

.ec-db-tabs .tabs li.is-active a,
.edit-test-tabs .tabs li.is-active a {
	border-bottom-color: var(--ec-accent);
	color: var(--ec-accent);
	font-weight: 600;
}

@media (max-width: 768px) {
	.ec-db-tabs .tabs li.ec-db-tabs-action {
		margin-left: 0;
		padding: 0.35rem 0 0;
		width: 100%;
	}

	.ec-db-tabs .tabs li.ec-db-tabs-action .button,
	.ec-db-tabs-actions-standalone .button {
		width: 100%;
	}
}

/* Sélecteurs segmentés : conserver le style toggle existant. */
.tabs.is-toggle.ec-segmented a,
.tabs.is-toggle.ec-segmented li:first-child a,
.tabs.is-toggle.ec-segmented li:last-child a {
	border-radius: var(--ec-radius-sm);
}

/* `.ec-tree-item-name`: autorise les retours à la ligne sur les identifiants longs,
 * afin d'éviter les débordements dans les arbres ou listes profondes. */
.ec-tree-item-name {
	flex-grow: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ec-tree-indent {
	flex: 0 0 auto;
	display: block;
	width: 1em;
	height: 1px;
}

.ec-cluster {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ec-cluster-md {
	gap: 1rem;
}

.ec-nowrap {
	flex-wrap: nowrap;
}

.ec-align-middle {
	vertical-align: middle !important;
}

.ec-preformatted {
	padding: 0;
	background: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Panel d'assessment sans detail: supprimer l'effet de "double traits" verticaux en pied. */
.panel>.panel-heading:last-child {
	border-bottom: 0;
	border-radius: var(--ec-radius-sm);
}

/* Evaluate: uniformiser le widget fichier avec les autres champs (fond blanc). */
/* Le widget Bulma de fichier est explicitement blanchi pour ressembler à un champ normal,
 * sinon il ressort trop par rapport aux autres contrôles. */
.file.has-name .file-label,
.file.has-name .file-cta,
.file.has-name .file-name {
	background: var(--ec-control-bg);
}

.file.has-name .file-cta {
	border-color: var(--ec-border);
}

/* Message primaire modernise pour la colonne "Consignes". */
.message.is-primary .message-header {
	background-color: var(--ec-primary-message-header);
	color: var(--ec-text-inverse);
}

.message.is-primary .message-body {
	background-color: var(--ec-primary-message-body-bg);
	border-color: var(--ec-primary-message-body-border);
	color: var(--ec-primary-message-body-text);
}

/* Evaluate results: garder la meme largeur visuelle pour tableau et log. */
#assessment_results .ec-eval-results-block {
	width: 100%;
	max-width: 100%;
}

#assessment_results .ec-eval-results-block .ec-report-wrap {
	padding: 0.0rem;
}

.message-body pre {
	background: var(--ec-surface-alt);
	color: inherit;
}

.message-body pre code {
	background: transparent;
	color: inherit;
}

/* SECTION: BULMA OVERRIDES — Formulaires et interactions
 * Cas d'usage: focus visible et lisibilite coherente des champs sur les formulaires d'edition/evaluation. */
.field .label {
	color: var(--ec-text);
	font-size: 0.92rem;
	font-weight: 600;
}

.field .help {
	color: var(--ec-text-muted);
}

:is(.input, .textarea, .select select) {
	transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

:is(.input, .textarea, .select select):hover {
	border-color: var(--ec-border-strong);
}

.select select:focus-visible,
:is(.input, .textarea, .button, .navbar-item, .navbar-link, .panel-block, .ec-focusable):focus-visible {
	outline: none;
	box-shadow: 0 0 0 0.18rem var(--ec-focus) !important;
	border-color: var(--ec-accent) !important;
}

.select select:focus:not(:focus-visible),
:is(.input, .textarea, .button, .navbar-item, .navbar-link, .panel-block, .ec-focusable):focus:not(:focus-visible) {
	box-shadow: none !important;
}

.select select {
	background-color: var(--ec-control-bg);
	border-color: var(--ec-control-border);
	color: var(--ec-text);
	border-radius: var(--ec-radius-sm) !important;
}

.navbar-item:active,
.navbar-link:active,
.panel-block:active,
.ec-tree-item:active {
	box-shadow: none !important;
	outline: none !important;
}

/* `.ec-control-offset`: helper d'indentation des champs de configuration. */
.ec-control-offset {
	margin-left: 1em;
}

/* Variante utilitaire pour empiler verticalement le contenu d'un panel-block sans wrapper local. */
.panel-block.is-vertical {
	flex-direction: column;
	align-items: stretch;
}

/* SECTION: COMPONENTS — Sélecteurs radio segmentés. */
.ec-segmented-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ec-segmented-label {
	display: block;
	cursor: pointer;
	padding: 0.5em 1em;
	border: 1px solid var(--ec-control-border);
	background-color: var(--ec-control-bg);
	margin-bottom: 0;
	user-select: none;
	min-width: 7rem;
	text-align: center;
}

.ec-segmented li:first-child .ec-segmented-label {
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.ec-segmented li:last-child .ec-segmented-label {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.ec-segmented-input:checked+.ec-segmented-label {
	background-color: var(--ec-tristate-active-bg);
	border-color: var(--ec-tristate-active-border);
	color: var(--ec-text-inverse);
	position: relative;
	z-index: 1;
}

.ec-segmented-input:focus-visible+.ec-segmented-label {
	outline: 2px solid var(--ec-control-border);
	outline-offset: 2px;
}

.ec-segmented-input:disabled+.ec-segmented-label {
	cursor: default;
	opacity: 0.6;
}

/* Tristates plus petits dans les tableaux de rapport */
.ec-report-table .ec-segmented {
	margin-bottom: 0;
	min-width: 0;
	display: flex;
	justify-content: center;
}

.ec-report-table .ec-segmented ul {
	border-bottom: 0;
	justify-content: center;
}

.ec-report-table .ec-segmented-label {
	min-width: 0;
	padding: 0.35rem 0.55rem;
	line-height: 1;
	min-height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ec-report-table .ec-segmented-input:disabled+.ec-segmented-label {
	cursor: default;
	opacity: 0.8;
}

/* Largeur volontairement généreuse pour les aides contextuelles AST, afin d'éviter
 * des infobulles étroites difficiles à lire sur des explications techniques. */
.dropdown-tooltip .dropdown-menu {
	min-width: 30rem;
	max-width: 40rem;
}

/* SECTION: FEATURE-SPECIFIC — TomSelect
 * Cas d'usage: harmoniser TomSelect avec les champs Bulma, y compris dans la modale index AST. */
.optgroup-header {
	font-size: 0.8rem;
	text-align: center;
}

.ts-dropdown .ts-option-id {
	width: 20%;
	flex: 0 0 20%;
	text-align: right;
	text-overflow: clip;
	white-space: nowrap;
	overflow: hidden;
	font-family: var(--bulma-family-primary);
	color: var(--ec-text-subtle);
	margin-right: 0.5em;
}

.ts-control .ts-option-id {
	width: auto;
	flex: 0 0 auto;
	white-space: nowrap;
	overflow: hidden;
}

/* Diagnostics structurés : listes par fichier, repères de gravité et détails natifs.
 * Ce pattern reste utilisable par les autres rapports d'analyse de code. */
.ec-diagnostics {
	min-width: 0;
}

.ec-diagnostic-summary,
.ec-diagnostic-file-heading,
.ec-diagnostic-heading {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.8rem;
}

.ec-diagnostic-summary {
	justify-content: space-between;
}

.ec-diagnostic-summary .tags {
	margin-bottom: 0;
}

.ec-diagnostic-file-heading {
	font-weight: 600;
	font-size: 1rem;
	margin-bottom: 0.75rem;
	overflow-wrap: anywhere;
}

.ec-diagnostic-file-heading>span:first-child {
	font-family: var(--bulma-family-code);
	min-width: 0;
}

.ec-diagnostic-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.ec-diagnostic {
	padding: 0.8rem 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.ec-diagnostic+.ec-diagnostic {
	border-top: 1px solid var(--ec-border-soft);
}

.ec-diagnostic:first-child {
	padding-top: 0;
}

.ec-diagnostic:last-child {
	padding-bottom: 0;
}

.ec-diagnostic-message {
	white-space: pre-wrap;
	margin: 0.45rem 0;
}

.ec-diagnostic-location {
	font-size: 0.85rem;
	color: var(--ec-text-muted);
}

.ec-diagnostic-detail {
	font-size: 0.9rem;
	margin-top: 0.45rem;
}

.ec-diagnostic-detail>summary {
	cursor: pointer;
	color: var(--ec-text-muted);
}

.ec-diagnostic-trace {
	list-style: decimal;
	padding-left: 1.3rem;
	margin-top: 0.5rem;
}

.ec-diagnostic-technical {
	margin-top: 0;
	background: var(--ec-surface-soft);
}

.ec-diagnostic-technical>div {
	margin-top: 0.75rem;
}

.ec-diagnostics pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* `.ec-llm-content`: zone de rendu LLM dans la vue résultat.
 * Les tableaux y sont forcés à rester dans la largeur du panneau pour éviter
 * toute coupure latérale sans introduire de scroll horizontal local. */
.ec-llm-content table {
	width: 100% !important;
	max-width: 100%;
	table-layout: fixed;
}

.ec-llm-content :is(th, td) {
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ec-llm-content :is(ul, ol) {
	margin: 0 0 0.7rem 1.2rem;
}

.ec-text-file-reference {
	color: inherit !important;
	text-decoration: none !important;
	transition: text-decoration-color 120ms ease;
}

.ec-text-file-reference:hover,
.ec-text-file-reference:focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 0.12em;
}

.ec-text-file-modal-card {
	width: min(96vw, 80rem);
}

.ec-text-file-modal-body {
	display: flex;
	min-height: 0;
	overflow: hidden;
}

.ec-text-file-editor {
	flex: 1 1 auto;
	width: 100%;
	min-height: 0;
	height: 100% !important;
}

@media screen and (max-width: 768px) {
	.ec-text-file-modal-card {
		width: 96vw;
	}
}

.ec-llm-meta-block {
	border-top: 1px solid var(--ec-border-soft);
	background: var(--ec-surface-soft);
}

.ec-llm-meta-block .table {
	margin-bottom: 0;
	font-size: 0.86rem;
}

.ec-llm-meta-block :is(th, td) {
	vertical-align: top;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.ec-llm-meta-block th {
	width: 34%;
	color: var(--ec-text-muted);
}

.ts-option-row {
	display: flex;
	align-items: center;
	min-width: 0;
	font-family: var(--bulma-family-primary);
}

.ts-option-id {
	display: block;
	text-align: right;
	align-self: center;
}

.ts-option-sep {
	display: inline-block;
	width: 1px;
	height: 1.2em;
	background: var(--ec-divider);
	margin: 0 0.75em;
	vertical-align: middle;
}

.ts-option-name {
	flex: 1 1 auto;
	min-width: 0;
	text-align: left;
}

.ts-dropdown {
	margin-top: 0 !important;
	z-index: 70;
	background-color: var(--ec-control-bg);
	border: 1px solid var(--ec-control-border);
	border-radius: 0 0 var(--ec-radius-sm) var(--ec-radius-sm);
	overflow: hidden;
	box-shadow: 0 0.75rem 1.5rem var(--ec-shadow-soft);
	color: var(--ec-text);
}

.ts-control {
	background-color: var(--ec-control-bg);
	border: 1px solid var(--ec-control-border);
	border-radius: var(--ec-radius-sm);
	padding: 0 0.75em;
	font-size: 1rem;
	font-family: var(--bulma-family-primary);
	height: auto;
	min-height: 2.25em;
	box-shadow: none;
	transition: border 0.2s ease-in-out, box-shadow 0.2s;
	display: flex;
	align-items: center;
	color: var(--ec-text);
}

.ts-wrapper .ts-control,
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control,
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi.input-active .ts-control {
	background: var(--ec-control-bg) !important;
	border-color: var(--ec-control-border) !important;
	border-radius: var(--ec-radius-sm) !important;
	box-shadow: none !important;
	color: var(--ec-text) !important;
}

.ts-wrapper .ts-control>input,
.ts-wrapper .ts-control .ts-option-row,
.ts-wrapper .ts-control .ts-option-name,
.ts-wrapper .ts-control .ts-option-id {
	background: transparent !important;
	color: var(--ec-text) !important;
	text-shadow: none !important;
}

.ts-wrapper.single .ts-control>.item {
	background: transparent !important;
	color: var(--ec-text) !important;
}

.ts-dropdown .option {
	display: block;
}

.ts-dropdown .option.ts-option-row {
	display: flex;
	align-items: center;
}

.ts-wrapper.single .ts-control .item.ts-option-row {
	flex: 1 1 auto;
	min-width: 0;
}

.ts-wrapper.single .ts-control .ts-option-name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ts-wrapper.single .ts-control>input {
	left: -10000px;
	opacity: 0;
	position: absolute;
	width: 1px !important;
	min-width: 0 !important;
}

.ts-wrapper.single.input-active .ts-control>input {
	left: auto;
	opacity: 1;
	position: static;
	width: auto !important;
	min-width: 4ch !important;
	flex: 1 1 auto;
}

.ts-wrapper.multi .ts-control {
	align-items: flex-start;
	padding: 0.25rem 0.5rem 0;
}

.ts-wrapper.multi .ts-control>.item {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	margin: 0 0.35rem 0 0.35rem;
	padding: 0 0.5rem;
	background: var(--ec-surface-selected) !important;
	border: 1px solid var(--ec-control-border);
	border-radius: 0.25rem;
	color: var(--ec-text) !important;
	line-height: 1.4;
	font-size: 0.9rem;
	box-shadow: none;
}

.ts-wrapper.multi .ts-control>.item.ts-option-row {
	width: auto;
	max-width: 100%;
	flex: 0 1 auto;
}

.ts-wrapper.multi .ts-control>input {
	flex: 0 0 auto;
	margin: 0 0 0.35rem 0 !important;
	min-width: 4ch !important;
}

.ts-wrapper.multi .ts-control .ts-option-name {
	white-space: nowrap;
	overflow: visible;
	text-overflow: clip;
}

.ts-control,
.ts-control input,
.ts-dropdown,
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .create,
.ts-dropdown .no-results {
	background-color: var(--ec-control-bg);
	color: var(--ec-text);
}

.ts-wrapper.single .ts-control .item {
	background-color: var(--ec-control-bg);
	color: var(--ec-text);
}

.ts-control input::placeholder {
	color: var(--ec-text-muted);
}

.ts-dropdown .active,
.ts-dropdown .option.active,
.ts-dropdown .option:hover {
	background-color: var(--ec-surface-hover);
	color: var(--ec-text);
}

.ts-dropdown .selected,
.ts-dropdown .option.selected {
	background-color: var(--ec-surface-selected);
	color: var(--ec-text);
}

/* `js-tomselect`: force le composant JS à suivre la largeur du flux normal,
 * même si la librairie injecte des largeurs inline. */
.js-tomselect {
	width: 100% !important;
}

/* TomSelect doit pouvoir dépasser des panels et cartes sans être masqué par leur cadre.
 * On ouvre uniquement les conteneurs qui hébergent effectivement un TomSelect,
 * puis on donne au wrapper actif un plan supérieur au contenu voisin. */
@supports selector(.panel:has(.ts-wrapper)) {
	:is(.ec-card, .panel, .ec-panel, .panel-block, .panel-block.is-vertical, .field, .control):has(.ts-wrapper):not(.ec-panel-scroll) {
		overflow: visible;
	}
}

.ts-wrapper {
	position: relative;
	z-index: 5;
}

.ts-wrapper.dropdown-active {
	z-index: 30;
}

/* `.small`: style utilisé dans la description d'un noeud ast. */
.small {
	font-stretch: condensed;
	opacity: 0.6;
}

.small::before,
.small::after {
	content: "\00a0";
}

/* SECTION: FEATURE-SPECIFIC — Ace editor
 * Cas d'usage: harmoniser les zones de code avec les champs standards. */
.editor-ace {
	font-family: var(--bulma-family-code) !important;
	font-size: 14px;
	height: 10em;
	border: 1px solid var(--ec-control-border) !important;
	border-radius: var(--ec-radius-sm) !important;
	box-shadow: inset 0 0.0625em 0.125em var(--ec-shadow-inset) !important;
}

.editor-ace:not(.ace_editor) {
	background-color: var(--ec-control-bg) !important;
	color: var(--ec-text) !important;
}

.editor-ace.ace_editor:focus-within {
	border-color: var(--ec-control-border-focus) !important;
	box-shadow: 0 0 0 0.125em var(--ec-control-focus-ring) !important;
}

.editor-ace .ace_selection {
	background: var(--ec-selection) !important;
}

/* Composites AST : surface interne sans ombre ni arrondi. */
#ast_node_editor .ec-ast-composite {
	border-radius: 0;
	box-shadow: none;
	border: 1px solid var(--ec-border);
	padding: 0.75rem 1rem;
	background: transparent;
}

.ec-result-card {
	margin: 0.75rem 0;
}

.ec-result-card-header {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--ec-border);
	background: var(--ec-surface-alt);
}

.ec-result-card-title {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 1rem;
	font-weight: 700;
}

.ec-result-card-icon {
	display: flex;
	align-items: center;
	padding: 0.75rem 1rem;
}

.ec-result-card-content {
	padding: 1.5rem;
}

/* Les groupes radio tri-state de l'éditeur AST doivent garder le même fond que les champs
 * standards, même lorsqu'ils sont placés dans un panneau coloré. */
#ast_node_editor .ec-segmented-input:not(:checked)+.ec-segmented-label {
	background-color: var(--ec-control-bg);
	border-color: var(--ec-border-strong);
}

#assessment_results .ec-eval-results-block+.ec-eval-results-block {
	margin-top: var(--ec-page-margin-block);
}

/* SECTION: COMPONENTS — Panels scrollables et modales AST
 * Cas d'usage: editeur AST avec panneaux a defilement interne et dropdowns debordants. */
.panel-compact .panel-block {
	padding: 0.25em 0.50em !important;
	min-height: auto !important;
}

.is-scrollable-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
}

.is-scrollable-content .scrollable-content {
	overflow-y: auto;
}

.is-scrollable-content .panel-block {
	flex-shrink: 0;
}

.ec-modal-trigger {
	cursor: pointer;
}

.ec-modal-dialog {
	animation: ecModalFadeIn 0.16s ease-out;
}

.ec-modal-dialog .modal-background {
	background: color-mix(in srgb, var(--ec-overlay) 88%, #0b2a54 12%);
}

.ec-modal-dialog-card {
	border: 1px solid var(--ec-border);
	box-shadow: 0 1.1rem 2.2rem var(--ec-shadow-soft);
	overflow: hidden;
	min-width: min(44rem, calc(100vw - 1.5rem));
	border-radius: var(--ec-radius-sm);
}

.ec-modal-dialog .modal-card-head {
	border-bottom: 1px solid var(--ec-border);
	background: linear-gradient(110deg, color-mix(in srgb, var(--ec-surface) 78%, var(--ec-accent) 22%) 0%, var(--ec-surface) 54%);
	padding: 1.15rem 1.25rem;
	border-start-start-radius: 0;
	border-start-end-radius: 0;
}

.modal .modal-card-head {
	padding: 1.15rem 1.25rem;
}

.ec-modal-dialog .modal-card-title {
	font-weight: 600;
	font-size: 1.22rem;
}

.ec-modal-dialog .modal-card-body {
	background: radial-gradient(circle at 9% -24%, var(--ec-page-glow) 0%, var(--ec-page-glow-transparent) 48%), var(--ec-bg);
	padding-top: 1.35rem;
	padding-bottom: 1.35rem;
}

.ec-modal-dialog .modal-card-foot {
	border-top: 1px solid var(--ec-border);
	background: color-mix(in srgb, var(--ec-surface) 90%, var(--ec-accent) 10%);
	padding: 0.95rem 1.25rem;
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.ec-modal-dialog .modal-card>form {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.modal .modal-card-foot {
	padding: 0.95rem 1.25rem;
}

.ec-modal-dialog.ec-modal-variant-danger .modal-card-head {
	background: linear-gradient(110deg, color-mix(in srgb, var(--ec-surface) 72%, #7f1d1d 28%) 0%, var(--ec-surface) 56%);
}

.ec-modal-dialog.ec-modal-variant-info .modal-card-head {
	background: linear-gradient(110deg, color-mix(in srgb, var(--ec-surface) 74%, #0c4a6e 26%) 0%, var(--ec-surface) 56%);
}

@keyframes ecModalFadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.modal-card.modal-is-not-scrollable {
	overflow: visible !important;
	width: 98vw;
	height: 90vh;
	max-width: 98vw;
	max-height: 90vh;
}

.modal-card.modal-is-not-scrollable :is(.modal-card-body, .modal-card-foot) {
	background: radial-gradient(circle at 5% -16%, var(--ec-page-glow) 0%, var(--ec-page-glow-transparent) 45%), var(--ec-bg);
}

.modal-card.modal-is-not-scrollable .columns {
	height: 100%;
}

.modal-card.modal-is-not-scrollable .column {
	display: flex;
	flex-direction: column;
}

.ec-modal-index-dialog,
.ec-modal-body-index,
.ec-modal-body-index .control,
.ec-modal-body-index .ts-wrapper {
	overflow: visible;
}

.ec-modal-body-index .ts-dropdown .ts-option-id {
	width: 3.5em;
	flex: 0 0 3.5em;
}

/* SECTION: FEATURE-SPECIFIC — Test panel overlay
 * Cas d'usage: panneau lateral des tests rapides. */
.edit-test-overlay {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: flex;
	justify-content: flex-end;
}

.edit-test-backdrop {
	position: absolute;
	inset: 0;
	background: var(--ec-overlay);
}

/* `.edit-test-sheet`: panneau latéral large, mais pas plein écran par défaut.
 * Le choix d'un sheet plutôt qu'une modale centrée laisse visible le contexte éditorial. */
.edit-test-sheet {
	position: relative;
	width: min(75vw, 1200px);
	height: 100vh;
	background: var(--ec-surface);
	box-shadow: -1rem 0 2rem var(--ec-shadow-soft);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.edit-test-sheet-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--ec-control-border);
	background: var(--ec-surface);
	flex-shrink: 0;
}

.edit-test-sheet-body {
	padding: 1rem 1.25rem 1.5rem;
	overflow-y: auto;
	flex: 1;
}

#edit-test-panel .edit-test-tab-panel {
	display: none !important;
	width: 100%;
	padding: 0.75rem 1rem 1rem;
}

#edit-test-panel .edit-test-tabs {
	padding: 0.75rem 1rem 0;
}

#edit-test-panel .edit-test-tabs .tabs {
	margin-bottom: 0;
}

#edit-test-panel .edit-test-tab-panel.is-active {
	display: block !important;
}

#edit-test-panel .edit-test-tab-panel .table-container {
	width: 100%;
	overflow-x: auto;
}

/* SECTION: LAYOUT — Responsive desktop-first
 * Cas d'usage: garder la priorite desktop tout en rendant mobile utilisable. */
@media screen and (max-width: 1023px) {
	:root {
		--ec-page-margin-inline: 0.8rem;
		--ec-page-margin-block: 0.8rem;
	}

	.ec-main-navbar .navbar-menu {
		display: block;
	}

	.ec-main-navbar .navbar-start {
		display: flex;
		flex-wrap: wrap;
	}

	.ec-page-header {
		margin-top: var(--ec-page-margin-block);
	}

	/* La navbar sur plusieurs lignes ne permet plus un calcul de hauteur fixe. */
	.columns.ec-page.ec-page-no-scroll,
	.columns.ec-page.ec-page-no-scroll>.column {
		height: auto;
		min-height: 0;
		overflow: visible;
	}

	.hero.ec-page-header .hero-body {
		padding: 0.46rem 0;
	}

	.edit-test-sheet {
		width: 100vw;
	}

	.edit-test-launch-button {
		left: 1rem;
		bottom: 1rem;
	}
}

@media screen and (max-width: 768px) {

	/* L'en-tête AST garde le titre et les actions visibles sur petit écran. */
	#ast_node_editor .panel-heading {
		flex-wrap: wrap;
	}

	#ast_node_editor .panel-heading>.ec-tree-item-name {
		flex-basis: 100%;
	}

	.ec-edit-actions {
		flex-wrap: wrap;
	}

	.ec-edit-actions>.control.is-expanded {
		flex: 1 1 100%;
	}

	.ec-edit-actions>.control:not(.is-expanded) {
		flex: 1 1 0;
	}

	.ec-edit-actions>.control:not(.is-expanded) .button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}

	/* Aucun mouvement : conserver le temps de lecture de la confirmation. */
	.ec-save-feedback-success {
		animation-duration: 2s !important;
	}
}