/* ------------------------------------------------------------------ */
/* Espace Client Orée Numérique — thème "Nova"                        */
/* Deuxième variante premium/futuriste, à l'opposé d'"Aurora" (sombre  */
/* et néon) : ici un habillage clair et holographique — dégradés       */
/* iridescents cyan → violet → rose, verre dépoli lumineux, titre en   */
/* dégradé animé, bouton à effet "brillance" au survol. Se charge      */
/* après style.css et ne redéfinit que l'apparence — mêmes classes,    */
/* même structure HTML/JS, tout reste fonctionnel à l'identique.       */
/* ------------------------------------------------------------------ */

.oree-ec {
	/* Palette : blanc nacré + dégradé iridescent cyan/violet/rose */
	--oree-ink: #1c1a35;
	--oree-primary: #7c5cff;
	--oree-primary-dark: #5b3df0;
	--oree-primary-light: #a78bfa;
	--oree-accent: #ec4899;
	--oree-accent-light: #f7a8cf;
	--oree-bg: #f3f1fd;
	--oree-surface: rgba(255, 255, 255, 0.68);
	--oree-border: rgba(139, 92, 246, 0.16);
	--oree-text: #211f3d;
	--oree-text-soft: #6a6688;
	--oree-text-faint: #9995b3;
	--oree-success: #0fb981;
	--oree-success-bg: rgba(15, 185, 129, 0.12);
	--oree-warning: #f59e0b;
	--oree-warning-bg: rgba(245, 158, 11, 0.12);
	--oree-danger: #ef4463;
	--oree-danger-bg: rgba(239, 68, 99, 0.12);
	--oree-radius-lg: 26px;
	--oree-radius-md: 16px;
	--oree-radius-sm: 12px;
	--oree-shadow-sm: 0 1px 3px rgba(92, 61, 240, 0.08);
	--oree-shadow-md: 0 12px 32px rgba(92, 61, 240, 0.12);
	--oree-shadow-lg: 0 34px 80px rgba(92, 61, 240, 0.18), 0 0 0 1px rgba(139, 92, 246, 0.06);

	background: linear-gradient(160deg, #fbfaff 0%, #f2eeff 45%, #eef6ff 100%);
	border-color: rgba(139, 92, 246, 0.14);
	animation: oree-ec-nova-in 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

@keyframes oree-ec-nova-in {
	from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
	to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Liseré supérieur iridescent, en balayage continu */
.oree-ec::before {
	background: linear-gradient(90deg, #22d3ee, #7c5cff 33%, #ec4899 66%, #22d3ee 100%);
	background-size: 300% 100%;
	animation: oree-ec-flow 8s linear infinite;
	height: 5px;
}
@keyframes oree-ec-flow {
	to { background-position: -300% 0; }
}

/* Halo pastel ambiant, très doux, derrière le contenu */
.oree-ec::after {
	content: "";
	position: absolute;
	inset: -18%;
	z-index: -1;
	background:
		radial-gradient(520px 340px at 8% 6%, rgba(34, 211, 238, 0.14), transparent 60%),
		radial-gradient(460px 340px at 95% 20%, rgba(236, 72, 153, 0.12), transparent 60%),
		radial-gradient(500px 380px at 60% 100%, rgba(124, 92, 255, 0.14), transparent 60%);
	filter: blur(4px);
	animation: oree-ec-nova-drift 18s ease-in-out infinite alternate;
	pointer-events: none;
}
@keyframes oree-ec-nova-drift {
	from { transform: translate(0, 0) scale(1); }
	to { transform: translate(-2%, 2%) scale(1.06); }
}

/* -------------------- Connexion -------------------- */
.oree-ec-login {
	background: rgba(255, 255, 255, 0.78);
	backdrop-filter: blur(22px);
	-webkit-backdrop-filter: blur(22px);
	border: 1px solid rgba(139, 92, 246, 0.14);
	box-shadow: 0 34px 80px rgba(92, 61, 240, 0.18);
	animation: oree-ec-nova-in 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
.oree-ec-login::before {
	background: linear-gradient(90deg, #22d3ee, #7c5cff 50%, #ec4899);
	background-size: 300% 100%;
	animation: oree-ec-flow 8s linear infinite;
	height: 5px;
}
.oree-ec-login h2 {
	background: linear-gradient(90deg, #5b3df0, #ec4899 60%, #22d3ee);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: oree-ec-text-shift 6s ease-in-out infinite;
}
@keyframes oree-ec-text-shift {
	0%, 100% { background-position: 0% center; }
	50% { background-position: 100% center; }
}
.oree-ec-login input[type="text"],
.oree-ec-login input[type="password"],
.oree-ec-login input[type="email"] {
	background: rgba(255, 255, 255, 0.7);
	border-color: rgba(139, 92, 246, 0.16);
	color: #211f3d;
}
.oree-ec-login input[type="text"]:focus,
.oree-ec-login input[type="password"]:focus,
.oree-ec-login input[type="email"]:focus {
	border-color: #7c5cff;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.16);
}
.oree-ec-login .button.button-primary,
.oree-ec-login input[type="submit"] {
	background: linear-gradient(135deg, #22d3ee, #7c5cff 55%, #ec4899);
	color: #fff;
	box-shadow: 0 12px 28px rgba(124, 92, 255, 0.32);
}
.oree-ec-login .button.button-primary:hover,
.oree-ec-login input[type="submit"]:hover {
	filter: none;
	box-shadow: 0 16px 34px rgba(124, 92, 255, 0.4);
}
.oree-ec-lost-password { color: var(--oree-text-soft); }
.oree-ec-lost-password a { color: #7c5cff; }

/* -------------------- Notice (staff / aucun espace) -------------------- */
.oree-ec-notice {
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-color: rgba(139, 92, 246, 0.14);
}
.oree-ec-notice a { color: #7c5cff; }

/* -------------------- Sélecteur multi-projets -------------------- */
.oree-ec-switcher { background: rgba(255, 255, 255, 0.35); border-bottom-color: var(--oree-border); }
.oree-ec-switcher-toggle { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(8px); }
.oree-ec-switcher-toggle:hover { box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.28), var(--oree-shadow-md); }
.oree-ec-switcher-menu { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.oree-ec-switcher-item:hover,
.oree-ec-switcher-item.active { background: rgba(124, 92, 255, 0.1); }

/* -------------------- En-tête : titre en dégradé animé -------------------- */
.oree-ec-title {
	background: linear-gradient(90deg, #5b3df0, #ec4899 55%, #22d3ee);
	background-size: 200% auto;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: oree-ec-text-shift 7s ease-in-out infinite;
}

/* -------------------- Onglets -------------------- */
.oree-ec-tabs { background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: var(--oree-border); }
.oree-ec-tab { color: var(--oree-text-soft); transition: color 0.15s, background 0.15s, box-shadow 0.2s, transform 0.15s; }
.oree-ec-tab:hover { color: var(--oree-primary); background: rgba(124, 92, 255, 0.08); }
.oree-ec-tab.active {
	color: #fff;
	background: linear-gradient(135deg, #7c5cff, #ec4899);
	box-shadow: 0 6px 18px rgba(124, 92, 255, 0.35);
	transform: translateY(-1px);
}

.oree-ec-panel.active { animation: oree-ec-fade-in 0.35s cubic-bezier(0.19, 1, 0.22, 1); }
@keyframes oree-ec-fade-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

/* -------------------- Messagerie -------------------- */
.oree-ec-messages { background: rgba(255, 255, 255, 0.35); }
.oree-ec-messages::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); }
.oree-ec-msg { box-shadow: 0 4px 16px rgba(92, 61, 240, 0.08); }
.oree-ec-msg-mine { background: linear-gradient(135deg, #7c5cff, #ec4899); color: #fff; }
.oree-ec-msg-theirs { background: rgba(255, 255, 255, 0.75); }
.oree-ec-message-form textarea { background: rgba(255, 255, 255, 0.6); border-color: var(--oree-border); color: var(--oree-text); }
.oree-ec-message-form textarea:focus { border-color: #7c5cff; background: #fff; box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14); }
.oree-ec-attach-label:hover { color: var(--oree-primary); }

/* -------------------- Boutons : dégradé + brillance au survol -------------------- */
.oree-ec-btn, .oree-ec-message-form button, .oree-ec-upload-form button {
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #22d3ee, #7c5cff 60%, #ec4899);
	color: #fff;
	box-shadow: 0 10px 26px rgba(124, 92, 255, 0.3);
}
.oree-ec-btn::after, .oree-ec-message-form button::after, .oree-ec-upload-form button::after {
	content: "";
	position: absolute;
	top: 0; left: -60%;
	width: 40%; height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	transition: left 0.6s ease;
}
.oree-ec-btn:hover, .oree-ec-message-form button:hover, .oree-ec-upload-form button:hover {
	filter: none;
	box-shadow: 0 14px 32px rgba(124, 92, 255, 0.38);
}
.oree-ec-btn:hover::after, .oree-ec-message-form button:hover::after, .oree-ec-upload-form button:hover::after { left: 130%; }
.oree-ec-btn-secondary { background: rgba(255, 255, 255, 0.6); color: var(--oree-text); border: 1px solid var(--oree-border); box-shadow: none; }
.oree-ec-btn-secondary::after { display: none; }
.oree-ec-btn-secondary:hover { background: rgba(255, 255, 255, 0.85); box-shadow: none; }

/* -------------------- Visio -------------------- */
.oree-ec-visio-frame iframe { border-color: var(--oree-border); box-shadow: var(--oree-shadow-md); }

/* -------------------- Cahier des charges -------------------- */
.oree-ec-cdc-doc { background: rgba(255, 255, 255, 0.4); }
.oree-ec-cdc-pdf-link a:hover { background: rgba(124, 92, 255, 0.08); }

/* -------------------- Stockage / listes -------------------- */
.oree-ec-doc-list li { border-bottom-color: var(--oree-border); }

/* -------------------- Kanban -------------------- */
.oree-ec-kanban-col { background: rgba(255, 255, 255, 0.35); }
.oree-ec-kanban-item { background: rgba(255, 255, 255, 0.7); }

/* -------------------- Jalons -------------------- */
.oree-ec-jalon.en_cours::before { box-shadow: 0 0 0 4px rgba(124, 92, 255, 0.2), 0 0 16px rgba(124, 92, 255, 0.4); }
.oree-ec-jalon.termine::before { box-shadow: 0 0 12px rgba(15, 185, 129, 0.4); }

/* -------------------- Coffre-fort -------------------- */
.oree-ec-credential-secret { background: rgba(255, 255, 255, 0.7); }

/* -------------------- Maintenance & statut -------------------- */
.oree-ec-site-statut-card.ok { border-color: rgba(15, 185, 129, 0.25); }
.oree-ec-site-statut-card.attention { border-color: rgba(245, 158, 11, 0.28); }
.oree-ec-site-statut-card.probleme { border-color: rgba(239, 68, 99, 0.28); }
.oree-ec-dot-attention, .oree-ec-dot-probleme { animation: oree-ec-dot-pulse 1.8s ease-in-out infinite; }
@keyframes oree-ec-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* -------------------- Tickets -------------------- */
.oree-ec-ticket-card { background: rgba(255, 255, 255, 0.45); }
.oree-ec-ticket-card:hover { box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.24), var(--oree-shadow-md); transform: translateY(-2px); }
.oree-ec-ticket-detail { background: rgba(255, 255, 255, 0.5); }
.oree-ec-ticket-detail-messages p { background: rgba(255, 255, 255, 0.75); }
.oree-ec-ticket-back:hover { color: var(--oree-primary); }
.oree-ec-ticket-reply-form textarea,
.oree-ec-new-ticket-form input,
.oree-ec-new-ticket-form select,
.oree-ec-new-ticket-form textarea {
	background: rgba(255, 255, 255, 0.6);
	color: var(--oree-text);
}
.oree-ec-new-ticket-form input:focus,
.oree-ec-new-ticket-form select:focus,
.oree-ec-new-ticket-form textarea:focus {
	border-color: #7c5cff;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.14);
}

/* -------------------- Rendez-vous -------------------- */
.oree-ec-creneau-item { background: rgba(255, 255, 255, 0.4); }
.oree-ec-creneau-item:hover { box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.2), var(--oree-shadow-md); }

/* -------------------- Facturation -------------------- */
.oree-ec-facture-item { background: rgba(255, 255, 255, 0.4); }

/* -------------------- Avis de clôture -------------------- */
.oree-ec-avis-banner {
	background: linear-gradient(150deg, rgba(236, 72, 153, 0.12), rgba(34, 211, 238, 0.1));
	border-color: rgba(139, 92, 246, 0.18);
}
.oree-ec-avis-banner::after { background: radial-gradient(circle, rgba(124, 92, 255, 0.22), transparent 70%); }
.oree-ec-avis-banner p { color: var(--oree-ink); }
.oree-ec-star { color: rgba(139, 92, 246, 0.22); }
.oree-ec-star.active, .oree-ec-star:hover { color: #f59e0b; text-shadow: 0 0 10px rgba(245, 158, 11, 0.4); }
.oree-ec-avis-form textarea { background: rgba(255, 255, 255, 0.6); border-color: rgba(139, 92, 246, 0.16); color: var(--oree-text); }

/* Confort clavier */
.oree-ec a:focus-visible,
.oree-ec button:focus-visible {
	outline: 2px solid rgba(124, 92, 255, 0.55);
	outline-offset: 2px;
}

/* Respect des préférences de réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
	.oree-ec,
	.oree-ec-login,
	.oree-ec::before,
	.oree-ec::after,
	.oree-ec-login::before,
	.oree-ec-login h2,
	.oree-ec-title,
	.oree-ec-panel.active,
	.oree-ec-dot-attention,
	.oree-ec-dot-probleme {
		animation: none !important;
	}
}