/* AEGIS IA Core CSS with Modern Variables */
/* $VER: core.css [ AEGIS IA skin ] v2.3 - 18.09.2026 - padding des <button> sans !important : un plugin qui pose ses propres métriques (boutons-icônes du connecteur LLM) doit pouvoir gagner par spécificité */
/* Part of the Beam Reactor web engines by Treveur Bretaudiere 2004-2025 */

/* ========================================================================
   CSS VARIABLES - AEGIS IA theming system
   ======================================================================== */

:root {
	--key1: #00d4ff;
	--key2: #0099cc;

	/* AEGIS Primary colors */
	--primary-color: #00d4ff;
	--primary-hover: #00b8e6;
	--primary-glow: rgba(0, 212, 255, 0.3);
	--secondary-color: #0099cc;

	/* Background colors - Dark cyber theme */
	--body-bg-start: #05080f;
	--body-bg-middle: #0a0f1e;
	--body-bg-end: #0a0f1e;
	--card-bg: #0f1829;
	--frame-bg: #141d2e;
	--bubble-bg: #1a2332;
	--sidebar-bg: #070b14;
	--right-menu-bg: #0f1829;
	--right-menu-border: #1a2332;

	/* Member zone specific */
	--member-card-light: #1a2332;

	/* Text colors */
	--text-primary: #e8f4f8;
	--text-secondary: #b8d4e0;
	--text-muted: #6b8694;
	--text-gray: #8ba5b3;

	/* Link colors - Cyan AEGIS theme */
	--link-color: #FFFFFF;
	--link-hover: #22ffea;
	--link-visited: #77aacc;

	/* Border & Shadow */
	--border-color: #1a3a4a;
	--border-dark: #0a1a24;
	--border-cyan: #00d4ff;
	--shadow-inset: rgba(0, 0, 0, 0.4);
	--shadow-default: rgba(0, 212, 255, 0.1);

	/* UI Elements */
	--badge-bg: #ff4444;
	--badge-glow: rgba(255, 68, 68, 0.6);
	--warning-color: #ff4444;
	--success-color: #00ff88;

	/* Layout */
	--sidebar-width: 305px;
	--content-margin-left: 320px;
	--border-radius: 8px;
	--border-radius-small: 6px;
	--border-radius-tiny: 4px;

	/* Shadows & Glows */
	--shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	--shadow-hover: 0 6px 20px rgba(0, 212, 255, 0.2);
	--text-shadow: rgba(0, 212, 255, 0.5) 0 0 8px;
	--link-glow: 0 0 10px rgba(0, 212, 255, 0.6);
	--card-glow: 0 0 20px rgba(0, 212, 255, 0.1);

	/* Monospaced fonts */
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Source Code Pro',
			   'IBM Plex Mono', 'Inconsolata', Menlo, Monaco, Consolas, monospace;

}

/* ========================================================================
   BASE STYLES
   ======================================================================== */

*:not(dialog) {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: linear-gradient(135deg, var(--body-bg-start) 0%, var(--body-bg-middle) 50%, var(--body-bg-end) 100%);
	color: var(--text-primary);
	font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	min-height: 100vh;
}

/* ========================================================================
   TYPOGRAPHY
   ======================================================================== */

h1, h2, h3, h4, h5, h6 {
	color: var(--primary-color);
	font-weight: 600;
	margin: 0.2em 0 0.2em;
}

h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.1em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }

p {
	margin: 0.9em 0;
	color: var(--text-secondary);
}

strong, b {
	font-weight: 600;
}

em, i {
	color: var(--text-secondary);
	font-style: italic;
}

code {
	background: var(--frame-bg);
	color: var(--primary-color);
	padding: 2px 6px;
	border-radius: var(--border-radius-tiny);
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
}

pre {
	background: var(--frame-bg);
	color: var(--text-primary);
	padding: 15px;
	border-radius: var(--border-radius-small);
	border-left: 4px solid var(--primary-color);
	overflow-x: auto;
	margin: 1em 0;
}

pre code {
	background: none;
	padding: 0;
}

blockquote {
	border-left: 4px solid var(--primary-color);
	padding-left: 20px;
	margin: 1em 0;
	color: var(--text-secondary);
	font-style: italic;
}

hr {
	border: none;
	border-top: 2px solid var(--border-color);
	margin: 2em 0;
}

/* ========================================================================
   LINKS
   ======================================================================== */

a {
	color: var(--link-color);
	text-decoration: none;
	transition: all 0.3s ease;
	position: relative;
}

a:hover {
	color: var(--link-hover);
	text-shadow: var(--link-glow);
}

a:visited {
	color: var(--link-visited);
}

a:active {
	color: var(--primary-hover);
}

/* ========================================================================
   LISTS
   ======================================================================== */

ul, ol {
	margin: 1em 0;
	padding-left: 2em;
	color: var(--text-secondary);
}

li {
	margin: 0.5em 0;
}

ul.nobullet, ol.nobullet {
	list-style: none;
	padding-left: 0;
}

/* ========================================================================
   LAYOUT - CONTAINER
   ======================================================================== */

#container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 20px;
}

.middle {
	margin: 20px 0;
}

/* ========================================================================
   HEADER / TITLE
   ======================================================================== */

#title {
	margin-bottom: 20px;
	box-shadow: var(--shadow);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
}

#title img {
	max-height: 60px;
	width: auto;
	filter: drop-shadow(0 0 10px var(--primary-glow));
}

/* ========================================================================
   NAVIGATION
   ======================================================================== */

#navigator {
	display: flex;
	align-items: center;
}

#navigator ul {
	display: flex;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

#navigator li {
	margin: 0;
}

#navigator a {
	display: block;
	padding: 10px 20px;
	background: var(--frame-bg);
	color: var(--text-primary);
	border-radius: var(--border-radius-small);
	border: 1px solid var(--border-dark);
	transition: all 0.3s ease;
	font-weight: 500;
}

#navigator a:hover {
	background: var(--primary-color);
	color: var(--body-bg-start);
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary-color);
}

/* Active menu item */
#navigator a:contains("▸") {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border-color: var(--primary-color);
	box-shadow: var(--card-glow);
}

#navigator-aegis {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
	background: linear-gradient(135deg, var(--body-bg-middle) 0%, var(--body-bg-start) 100%);
	border-bottom: 2px solid #00d4ff;
}

.aegis-logo-container {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.aegis-logo-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	text-decoration: none;
}

#aegis-main-logo {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}

.aegis-logo-text {
	color: var(--text-primary);
	font-size: 1.5rem;
	font-weight: 700;
}

.aegis-nav-menu {
	list-style: none;
	display: flex;
	gap: 2rem;
	margin: 0;
	padding: 0;
}

.aegis-nav-menu a {
	color: #00d4ff;
	text-decoration: none;
	transition: color 0.3s;
	font-weight: 500;
}

.aegis-nav-menu a:hover {
	color: var(--text-primary);
}


/* ========================================================================
   FRAMES (SECTIONS)
   ======================================================================== */

.frame {
	background: var(--frame-bg);
	border-radius: var(--border-radius-small);
	padding: 25px;
	margin: 20px 0;
	border: 1px solid var(--border-color);
	box-shadow: inset 0 0 15px var(--shadow-inset);
}

.frame h2:first-child,
.frame h3:first-child {
	margin-top: 0;
}

div.frameLine
{
	-moz-border-radius: var(--border-radius-tiny);
	/* border:-4px; */
	background-color: var(--frame-bg);
	margin:4px;
	padding: 14px 24px 14px 24px;
	box-shadow: inset 0 0 8px var(--shadow-inset);
	-moz-box-shadow: inset 0 0 8px var(--shadow-inset);
	-webkit-box-shadow: inset 0 0 8px var(--shadow-inset);
}


div.frameTitle {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	padding: 12px 20px;
	border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
	font-weight: 600;
	font-size: 1.2em;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
	border: 1px solid var(--primary-color);
	border-bottom: none;
}

div.frameTitle h3 {
	color: white !important;
}

div.frameLine {
	background: var(--frame-bg);
	padding: 25px;
	border: 1px solid var(--border-color);
	border-top: none;
	border-radius: 0 0 var(--border-radius-small) var(--border-radius-small);
	overflow: auto;
}

/* Images alignées DANS frameLine */
div.frameLine img.alignleft {
	float: left;
	margin: 0 20px 15px 0;
	clear: left;
	font-size: initial !important; /* Annule l'héritage */
}

div.frameLine img.alignright {
	float: right;
	margin: 0 0 15px 20px;
	clear: right;
	font-size: initial !important;
}

div.frameLine img.aligncenter {
	display: block;
	margin: 15px auto;
	clear: both;
	font-size: initial !important;
}


/* ========================================================================
   SIDEBARS
   ======================================================================== */

#leftmenu, #rightmenu {
	background: var(--sidebar-bg);
	border-radius: var(--border-radius-small);
	padding: 20px;
	margin: 20px 0;
	border: 1px solid var(--border-dark);
	box-shadow: var(--shadow);
}

#leftmenu h3, #rightmenu h3 {
	color: var(--primary-color);
	font-size: 1.1em;
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--border-cyan);
}

#leftmenu ul, #rightmenu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#leftmenu li, #rightmenu li {
	margin: 8px 0;
}

#leftmenu a, #rightmenu a {
	display: block;
	padding: 8px 12px;
	background: var(--frame-bg);
	border-radius: var(--border-radius-tiny);
	border: 1px solid var(--border-dark);
	transition: all 0.3s ease;
}

#leftmenu a:hover, #rightmenu a:hover {
	background: var(--primary-color);
	color: var(--body-bg-start);
	border-color: var(--primary-color);
	transform: translateX(5px);
}

/* ========================================================================
   FOOTER
   ======================================================================== */

#footercloser {
	color: var(--text-muted);
	background: var(--card-bg);
	border-radius: var(--border-radius);
	padding: 30px;
	margin: 20px 0;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow);
	text-align: center;
}

#footercloser p {
	text-align: center;
	margin: 0.5rem auto;
}

footer a {
	color: var(--primary-color);
}

#bottom {
	text-align: center;
	padding: 20px;
	color: var(--text-muted);
	font-size: 0.9em;
}

.shop-footer {
	background: rgba(0, 0, 0, 0.3);
	border-top: 2px solid var(--primary-color);
	margin-top: 22px;
	padding: 40px 0 8px 0;
	text-align: center;
	background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 153, 204, 0.05) 100%);
	border-radius: 12px;
	margin-bottom: 15px;
}

.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 40px;
	margin: 0 auto;
	padding: 0 20px;
}

.footer-col h4 {
	color: #00d4ff;
	margin: 0 0 20px 0;
	font-size: 18px;
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.footer-col ul li {
	margin-bottom: 12px;
}

.footer-col ul li a {
	color: var(--primary-color);
	text-decoration: none;
	transition: color 0.2s;
}

.footer-col ul li a:hover {
	color: #00d4ff;
}

.newsletter-form {
	display: flex;
	gap: 10px;
	margin: 1.5em auto !important;
	max-width: 500px; /* ou la largeur que tu veux */
}
.newsletter-form input {
	flex: 1;
	padding: 12px;
	background: rgba(255,255,255,0.1);
	border: 1px solid var(--primary-color);
	border-radius: 4px;
	color: #fff;
	max-width: 330px;
}

.newsletter-form button {
	padding: 12px 24px;
	background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
	color: #000;
	border: none;
	border-radius: 4px;
	font-weight: bold;
	cursor: pointer;
}

.footer-logo {
	width: 120px;
	margin-bottom: 15px;
}

.footer-bottom {
	text-align: center;
	padding: 20px;
	margin-top: 40px;
	border-top: 1px solid rgba(255,255,255,0.1);
	font-size: 14px;
}

@media (max-width: 1024px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 768px) {
	.hero-section h1 {
		font-size: 32px;
	}

	.families-grid {
		grid-template-columns: 1fr;
	}

	.products-table {
		font-size: 14px;
	}

	.products-table th,
	.products-table td {
		padding: 10px 8px;
	}

	.footer-grid {
		grid-template-columns: 1fr;
	}
}


/* ========================================================================
   FORMS
   ======================================================================== */

form {
	margin: 1.5em 0;
}

label {
	display: block;
	color: var(--text-primary);
	font-weight: 500;
	margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
	padding: 12px 15px;
	background: var(--frame-bg);
	color: var(--text-primary);
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius-small);
	font-size: 1em;
	transition: all 0.3s ease;
	font-family: inherit;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 15px var(--primary-glow);
	background: var(--card-bg);
}

textarea {
	resize: vertical;
	min-height: 120px;
}

input[type="button"],
button {
	padding: 13px 20px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border: none;
	border-radius: var(--border-radius-small);
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
}

input[type="submit"],
button {
	padding: 13px 20px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border: none;
	border-radius: var(--border-radius-small);
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
}

input[type="submit"]:active,
input[type="button"]:active,
button:active {
	transform: translateY(0);
}

input[type="checkbox"],
input[type="radio"] {
	margin-right: 8px;
	accent-color: var(--primary-color);
}

.form-group {
	margin-bottom: 20px;
}

.form-row {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
}

.form-row .form-group {
	flex: 1;
	min-width: 250px;
}

/* ========================================================================
   TABLES
   ======================================================================== */

table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
	background: var(--frame-bg);
	border-radius: var(--border-radius-small);
	overflow: hidden;
	box-shadow: var(--shadow);
}

th {
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	padding: 14px;
	text-align: left;
	font-weight: 600;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--border-dark);
	color: var(--text-secondary);
}

tr:hover {
	background: var(--card-bg);
}

tr:last-child td {
	border-bottom: none;
}

/* Alternating rows */
tbody tr:nth-child(even) {
	background: var(--bubble-bg);
}

/* ========================================================================
   BUTTONS & BADGES
   ======================================================================== */

.btn {
	display: inline-block;
	padding: 10px 24px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	border-radius: var(--border-radius-small);
	font-weight: 600;
	text-align: center;
	transition: all 0.3s ease;
	border: none;
	cursor: pointer;
}

.btn:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
}

.btn-secondary {
	background: var(--frame-bg);
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
}

.btn-danger {
	background: linear-gradient(135deg, #ff4444, #cc0000);
}

.btn-success {
	background: linear-gradient(135deg, var(--success-color), #00cc66);
}

.badge {
	display: inline-block;
	padding: 4px 10px;
	background: var(--badge-bg);
	color: white;
	border-radius: var(--border-radius-tiny);
	font-size: 0.85em;
	font-weight: 600;
	box-shadow: 0 0 10px var(--badge-glow);
}

.badge-primary {
	background: var(--primary-color);
	color: var(--body-bg-start);
}

.badge-success {
	background: var(--success-color);
	color: var(--body-bg-start);
}

/* ========================================================================
   CARDS & BUBBLES
   ======================================================================== */

.card {
	background: var(--card-bg);
	border-radius: var(--border-radius);
	padding: 25px;
	margin: 20px 0;
	border: 1px solid var(--border-color);
	box-shadow: var(--shadow);
	transition: all 0.3s ease;
}

.card:hover {
	box-shadow: var(--card-glow);
	transform: translateY(-5px);
	border-color: var(--primary-color);
}

.bubble {
	background: var(--bubble-bg);
	border-radius: var(--border-radius-small);
	padding: 15px 20px;
	margin: 15px 0;
	border-left: 4px solid var(--primary-color);
	box-shadow: inset 0 0 10px var(--shadow-inset);
}

/* ========================================================================
   UTILITY CLASSES
   ======================================================================== */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }

.mb-1 { margin-bottom: 10px; }
.mb-2 { margin-bottom: 20px; }
.mb-3 { margin-bottom: 30px; }

.p-1 { padding: 10px; }
.p-2 { padding: 20px; }
.p-3 { padding: 30px; }

.hidden { display: none; }
.visible { display: block; }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { justify-content: center; align-items: center; }
.gap-1 { gap: 10px; }
.gap-2 { gap: 20px; }
.gap-3 { gap: 30px; }

/* ========================================================================
   GRID SYSTEM
   ======================================================================== */

.grid {
	display: grid;
	gap: 20px;
	margin: 20px 0;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ========================================================================
   AEGIS SPECIFIC COMPONENTS
   ======================================================================== */

.aegis-hero {
	text-align: center;
	padding: 60px 20px;
	background: linear-gradient(135deg, var(--card-bg), var(--frame-bg));
	border-radius: var(--border-radius);
	margin: 30px 0;
	border: 2px solid var(--primary-color);
	box-shadow: var(--card-glow);
}

.aegis-hero h1 {
	font-size: 3em;
	margin-bottom: 20px;
}

.aegis-hero h2 {
	color: var(--text-secondary);
	font-weight: 400;
	margin-bottom: 15px;
}

.aegis-hero .tagline {
	color: var(--text-muted);
	font-size: 1.1em;
}

.aegis-cta {
	display: inline-block;
	padding: 15px 40px;
	background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
	color: white;
	font-size: 1.2em;
	font-weight: 600;
	border-radius: var(--border-radius);
	transition: all 0.3s ease;
	box-shadow: var(--shadow);
	margin: 10px;
}

.aegis-cta:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-hover);
}

.stat-card {
	background: var(--card-bg);
	border-radius: var(--border-radius);
	padding: 30px;
	text-align: center;
	border: 2px solid var(--border-cyan);
	transition: all 0.3s ease;
}

.stat-card:hover {
	box-shadow: var(--card-glow);
	transform: translateY(-5px);
}

.stat-number {
	font-size: 3em;
	color: var(--primary-color);
	font-weight: 700;
	text-shadow: var(--text-shadow);
}

.stat-label {
	color: var(--text-secondary);
	font-size: 1.1em;
	margin-top: 10px;
}

.solution-card, .problem-card {
	background: var(--card-bg);
	border-radius: var(--border-radius);
	padding: 25px;
	border: 1px solid var(--border-color);
	transition: all 0.3s ease;
}

.solution-card:hover, .problem-card:hover {
	box-shadow: var(--card-glow);
	transform: translateY(-5px);
	border-color: var(--primary-color);
}

.solution-icon, .problem-icon {
	font-size: 2.5em;
	margin-bottom: 15px;
}

.solution-card h3, .problem-card h3 {
	margin-top: 0;
}

/* ========================================================================
   RESPONSIVE - TABLETS
   ======================================================================== */

@media screen and (max-width: 1024px) {
	:root {
		--sidebar-width: 100%;
		--content-margin-left: 0;
	}

	#title {
		flex-direction: column;
		text-align: center;
	}

	#navigator ul {
		justify-content: center;
	}

	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.grid-3 { grid-template-columns: repeat(2, 1fr); }

	.form-row {
		flex-direction: column;
	}

	.form-row .form-group {
		min-width: 100%;
	}
}

/* ========================================================================
   RESPONSIVE - MOBILE
   ======================================================================== */

@media screen and (max-width: 768px) {
	body {
		font-size: 14px;
	}

	#container {
		padding: 10px;
	}

	.middle {
		padding: 20px;
	}

	#title {
		padding: 15px;
	}

	#navigator ul {
		flex-direction: column;
		width: 100%;
	}

	#navigator a {
		width: 100%;
		text-align: center;
	}

	.frame {
		padding: 15px;
	}

	h1 { font-size: 2em; }
	h2 { font-size: 1.6em; }
	h3 { font-size: 1.3em; }

	.grid-2,
	.grid-3,
	.grid-4 {
		grid-template-columns: 1fr;
	}

	.aegis-hero {
		padding: 40px 15px;
	}

	.aegis-hero h1 {
		font-size: 2em;
	}

	.aegis-cta {
		display: block;
		margin: 10px 0;
	}

	table {
		font-size: 0.9em;
	}

	th, td {
		padding: 8px;
	}
}

@media screen and (max-width: 480px) {
	body {
		font-size: 13px;
	}

	#container {
		padding: 5px;
	}

	.middle {
		padding: 15px;
	}

	.frame {
		padding: 10px;
	}

	input[type="submit"],
	input[type="button"],
	button,
	.btn {
		width: 100%;
		padding: 12px;
	}
}

/* ========================================================================
   AEGIS NAVIGATION - RESPONSIVE FIXES
   Add this to your core.css file after the existing responsive sections
   ======================================================================== */

/* Tablet adjustments for AEGIS Navigation */
@media screen and (max-width: 1024px) and (min-width: 769px) {
	#navigator-aegis {
		padding: 1rem;
	}

	.aegis-nav-menu {
		gap: 1rem;
		flex-wrap: wrap;
		justify-content: center;
	}

	.aegis-nav-menu a {
		padding: 0.5rem 1rem;
		font-size: 0.9rem;
	}
}

/* Mobile adjustments for AEGIS Navigation */
@media screen and (max-width: 768px) {
	#navigator-aegis {
		flex-direction: column;
		padding: 1rem;
		gap: 1rem;
	}

	.aegis-logo-container {
		width: 100%;
		justify-content: center;
	}

	.aegis-nav-menu {
		flex-direction: column;
		width: 100%;
		gap: 0.5rem;
		align-items: stretch;
	}

	.aegis-nav-menu li {
		width: 100%;
	}

	.aegis-nav-menu a {
		display: block;
		padding: 0.75rem 1rem;
		width: 100%;
		text-align: center;
		border: 1px solid var(--border-color);
		background: var(--frame-bg);
		border-radius: var(--border-radius-tiny);
	}

	.aegis-nav-menu a:hover {
		background: var(--primary-color);
		color: var(--body-bg-start);
		border-color: var(--primary-color);
	}

	/* Active menu item styling on mobile */
	.aegis-nav-menu a:contains("▸") {
		background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
		color: white;
		border-color: var(--primary-color);
	}
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
	#navigator-aegis {
		padding: 0.75rem;
	}

	.aegis-logo-link {
		gap: 0.5rem;
	}

	#aegis-main-logo {
		width: 50px;
		height: 50px;
	}

	.aegis-logo-text {
		font-size: 1.25rem;
	}

	.aegis-nav-menu a {
		font-size: 0.9rem;
		padding: 0.65rem 0.75rem;
	}
}

/* ========================================================================
   ALTERNATIVE: Hamburger Menu Version (Optional)
   Uncomment if you prefer a hamburger menu for mobile
   ======================================================================== */

@media screen and (max-width: 768px) {
	#navigator-aegis {
		flex-direction: column;
		padding: 0.5rem;  /* ← Réduit de 1rem à 0.5rem */
		gap: 0.25rem;	 /* ← Réduit de 1rem à 0.25rem */
	}

	.aegis-logo-container {
		width: 100%;
		justify-content: center;
		margin-bottom: 0.5rem;  /* ← Ajoute */
	}

	.aegis-nav-menu {
		flex-direction: column;
		width: 100%;
		gap: 0.25rem;  /* ← Réduit de 0.5rem à 0.25rem */
	}

	.aegis-nav-menu li {
		width: 100%;
	}

	.aegis-nav-menu a {
		display: block;
		padding: 0.5rem 0.75rem;  /* ← Réduit de 0.75rem à 0.5rem vertical */
		width: 100%;
		text-align: center;
		font-size: 0.85rem;  /* ← Réduit aussi */
	}
}

@media screen and (max-width: 480px) {
	#navigator-aegis {
		padding: 0.4rem;
	}

	.aegis-nav-menu {
		gap: 0.2rem;
	}

	.aegis-nav-menu a {
		font-size: 0.8rem;
		padding: 0.4rem 0.6rem;  /* ← Ultra compact */
	}

	.aegis-logo-text {
		font-size: 1.1rem;
	}

	#aegis-main-logo {
		width: 40px;   /* ← Plus petit */
		height: 40px;
	}
}
/* ========================================================================
   DIALOGS (br-dlg) — Native <dialog>, stylé par le skin via variables CSS
   Styles fournis ici, dialogs.js fournit seulement la structure + comportement.
   ======================================================================== */

dialog.br-dlg {
	background: var(--card-bg);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: 0;
	width: min(480px, 94vw);
	box-shadow: var(--shadow);
	font-family: inherit;
	animation: brDlgIn .2s cubic-bezier(.22,.61,.36,1) both;
}
dialog.br-dlg.br-dlg-wide { width: min(620px, 94vw); }

@keyframes brDlgIn {
	from { opacity: 0; transform: translateY(-14px) scale(.96); }
	to   { opacity: 1; transform: none; }
}

dialog.br-dlg::backdrop {
	background: rgba(0,0,0,.65);
	backdrop-filter: blur(2px);
}

.br-dlg-hd {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 24px 18px;
	border-bottom: 1px solid var(--border-color);
}

.br-dlg-ic {
	flex: 0 0 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	user-select: none;
}

.br-dlg-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-primary);
}

.br-dlg-close-btn {
	margin-left: auto;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: none;
	background: transparent;
	color: var(--text-muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s, color .15s;
	padding: 0;
}
.br-dlg-close-btn:hover { background: var(--frame-bg); color: var(--primary-color); }

.br-dlg-bd {
	padding: 20px 24px 22px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text-primary);
}
.br-dlg-bd p { margin: 0; color: var(--text-primary); }

.br-dlg-input {
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 9px 12px;
	font-size: 15px;
	font-family: inherit;
	background: var(--frame-bg);
	color: var(--text-primary);
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius-small);
	box-sizing: border-box;
	outline: none;
	transition: border-color .15s, box-shadow .15s;
}
.br-dlg-input:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 2px var(--primary-glow, rgba(0,0,0,.1));
}

.br-dlg-ft { padding: 10px 24px 22px; }

.br-dlg-ft-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
}

.br-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 9px 22px;
	border-radius: var(--border-radius-small);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: 14px;
	cursor: pointer;
	transition: filter .15s, transform .12s, box-shadow .15s;
	white-space: nowrap;
	min-width: 80px;
}
.br-btn:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.br-btn:hover  { box-shadow: var(--shadow-hover); }
.br-btn:active { transform: scale(.98); }

.br-btn-primary {
	background: var(--primary-color);
	color: var(--body-bg-start, #000);
	border-color: var(--primary-color);
	font-weight: 700;
}
.br-btn-secondary {
	background: var(--frame-bg);
	color: var(--text-secondary);
	border-color: var(--border-color);
}
.br-btn-secondary:hover { color: var(--primary-color); border-color: var(--primary-color); }