/* =====================================================================
   TIARC Lounge — design « app store », aligné sur la charte de tiarc.be
   Couleurs : teal #1e829e · orange #e27013 · fond clair #dae2ee
   ===================================================================== */

:root {
	--lounge-teal: #1e829e;
	--lounge-teal-dark: #16637a;
	--lounge-orange: #e27013;
	--lounge-bg: #f2f5fa;
	--lounge-bg-accent: #dae2ee;
	--lounge-ink: #0d1b21;
	--lounge-card-radius: 18px;
}

body {
	background: var(--lounge-bg);
}

/* --- Hero (page catalogue) --- */
.lounge-hero {
	background: linear-gradient(135deg, var(--lounge-teal) 0%, var(--lounge-teal-dark) 70%);
	color: #fffffd;
	border-radius: var(--lounge-card-radius);
	padding: 3rem 2.5rem;
	margin: 0 auto 2.5rem;
	max-width: 1100px;
	position: relative;
	overflow: hidden;
}
.lounge-hero::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
}
.lounge-hero h1 {
	color: #fffffd;
	font-size: clamp(1.8rem, 4vw, 2.8rem);
	margin: 0 0 0.6rem;
	font-weight: 600;
}
.lounge-hero p {
	color: #eaf4f7;
	max-width: 560px;
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
}

/* --- Catalogue : grille de cartes façon app store --- */
.lounge-catalog, .lounge-espace { max-width: 1100px; margin: 0 auto; }
.lounge-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.5rem;
}
.lounge-card {
	background: #fff;
	border: 1px solid rgba(13, 27, 33, 0.06);
	border-radius: var(--lounge-card-radius);
	padding: 1.5rem;
	box-shadow: 0 2px 10px rgba(13, 27, 33, 0.05);
	display: flex;
	flex-direction: column;
	margin-bottom: 1.5rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.lounge-grid .lounge-card { margin-bottom: 0; }
.lounge-grid .lounge-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(13, 27, 33, 0.12);
}

/* En-tête de carte : icône « app » (initiale) + titre + badge canal */
.lounge-card header {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}
.lounge-card header::before {
	content: attr(data-initial);
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: linear-gradient(135deg, var(--lounge-teal), var(--lounge-teal-dark));
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
}
.lounge-card h3 {
	margin: 0;
	font-size: 1.12rem;
	color: var(--lounge-ink);
	flex: 1;
	line-height: 1.25;
}
.lounge-badge {
	font-size: 0.7em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.25em 0.7em;
	border-radius: 99px;
	background: #eee;
	white-space: nowrap;
}
.lounge-badge-stable { background: #e8f5e9; color: #1b5e20; }
.lounge-badge-beta { background: #fff3e0; color: #a35400; }
.lounge-badge-dev { background: #fdecea; color: #8a1f16; }

.lounge-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.35rem 0.9rem;
	margin: 1rem 0 0.6rem;
	padding: 0.9rem 0 0.3rem;
	border-top: 1px solid #eef1f6;
}
.lounge-meta div { display: flex; gap: 0.4rem; align-items: baseline; }
.lounge-meta dt { color: #8b98a5; font-size: 0.8em; }
.lounge-meta dd { margin: 0; font-size: 0.9em; font-weight: 600; color: var(--lounge-ink); }
.lounge-desc { color: #4c5a64; font-size: 0.92em; line-height: 1.5; }
.lounge-sha { font-size: 0.7em; color: #a5aeb6; word-break: break-all; }
.lounge-sha code { font-size: 1em; background: none; }

.lounge-card footer { margin-top: auto; padding-top: 0.8rem; }

/* --- Boutons pilule, charte TIARC --- */
.lounge-btn {
	display: inline-block;
	background: var(--lounge-teal);
	color: #fffffd !important;
	border: 0;
	border-radius: 999px;
	padding: 0.6rem 1.5rem;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s ease;
}
.lounge-btn:hover { background: var(--lounge-teal-dark); }
.lounge-btn-ghost {
	background: transparent;
	color: var(--lounge-teal) !important;
	border: 1.5px solid var(--lounge-teal);
}
.lounge-btn-ghost:hover { background: var(--lounge-bg-accent); }

/* --- Espace compte --- */
.lounge-auth-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; }
.lounge-card input[type=text], .lounge-card input[type=email], .lounge-card input[type=password],
.lounge-card select, .lounge-card textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #ccd5df;
	border-radius: 10px;
	background: #fbfcfe;
}
.lounge-card input:focus, .lounge-card select:focus, .lounge-card textarea:focus {
	outline: 2px solid var(--lounge-teal);
	border-color: var(--lounge-teal);
}
.lounge-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; }
.lounge-notice { border-radius: 12px; padding: 0.85rem 1.1rem; margin-bottom: 1.2rem; }
.lounge-error { background: #fdecea; color: #8a1f16; border: 1px solid #f5c6c0; }
.lounge-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #c8e6c9; }
.lounge-hello { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.lounge-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }

/* --- Logo TIARC (lien vers le site principal) --- */
.lounge-brand {
	position: fixed;
	top: 10px;
	left: 18px;
	z-index: 9999;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	text-decoration: none;
	background: #fff;
	border: 1px solid rgba(13, 27, 33, 0.1);
	border-radius: 999px;
	padding: 0.3rem 1rem 0.3rem 0.4rem;
	box-shadow: 0 2px 8px rgba(13, 27, 33, 0.08);
}
.admin-bar .lounge-brand { top: 42px; }
.lounge-brand img { height: 34px; width: 34px; object-fit: contain; border-radius: 50%; }
.lounge-brand span {
	font-weight: 700;
	color: var(--lounge-ink);
	letter-spacing: 0.02em;
	line-height: 1.05;
	display: flex;
	flex-direction: column;
	font-size: 0.92rem;
}
.lounge-brand span em {
	font-style: normal;
	font-weight: 600;
	color: var(--lounge-teal);
	font-size: 0.72em;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}
.lounge-brand:hover { border-color: var(--lounge-teal); }

/* --- Espace compte : vues connexion / inscription --- */
.lounge-auth-single { max-width: 560px; margin: 0 auto; }
.lounge-btn-block { width: 100%; text-align: center; }
.lounge-sep { border: 0; border-top: 1px solid #eef1f6; margin: 1.5rem 0; }
.lounge-register-cta { text-align: center; }
.lounge-consent { font-size: 0.92em; color: #4c5a64; }
.lounge-consent input { margin-right: 0.4rem; }

/* --- Navigation principale (rendue par le plugin) --- */
.lounge-nav {
	position: fixed;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 9998;
	display: flex;
	gap: 0.25rem;
	background: #fff;
	border: 1px solid rgba(13, 27, 33, 0.1);
	border-radius: 999px;
	padding: 0.25rem;
	box-shadow: 0 2px 8px rgba(13, 27, 33, 0.08);
	font-size: 0.9rem;
}
.admin-bar .lounge-nav { top: 46px; }
.lounge-nav a {
	padding: 0.35rem 1rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--lounge-ink);
	font-weight: 600;
	white-space: nowrap;
}
.lounge-nav a:hover { background: var(--lounge-bg-accent); color: var(--lounge-teal); }
.lounge-nav a.lounge-nav-current { background: var(--lounge-teal); color: #fff; }
@media (max-width: 860px) {
	.lounge-nav { position: static; transform: none; margin: 4.2rem auto 0.5rem; width: fit-content; }
}

/* --- Barre légale --- */
.lounge-legalbar {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 1rem 1.5rem;
	background: var(--lounge-ink);
	color: #9fb2bb;
	font-size: 0.85rem;
}
.lounge-legalbar a { color: #cfe0e6; text-decoration: none; }
.lounge-legalbar a:hover { color: #fff; text-decoration: underline; }

/* --- Sélecteur de langue (globe + dropdown) --- */
.lounge-lang {
	position: fixed;
	top: 14px;
	right: 18px;
	z-index: 9999;
	font-size: 0.88rem;
}
.admin-bar .lounge-lang { top: 46px; }
.lounge-lang summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 0.45em;
	background: #fff;
	border: 1px solid rgba(13, 27, 33, 0.1);
	border-radius: 999px;
	padding: 0.45em 1em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--lounge-ink);
	box-shadow: 0 2px 8px rgba(13, 27, 33, 0.08);
}
.lounge-lang summary::-webkit-details-marker { display: none; }
.lounge-lang-globe {
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>') no-repeat center / contain;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>') no-repeat center / contain;
}
.lounge-lang ul {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0.4rem 0;
	background: #fff;
	border: 1px solid rgba(13, 27, 33, 0.08);
	border-radius: 12px;
	box-shadow: 0 12px 30px rgba(13, 27, 33, 0.16);
	min-width: 180px;
	position: absolute;
	right: 0;
}
.lounge-lang li a {
	display: block;
	padding: 0.55rem 1.1rem;
	text-decoration: none;
	color: var(--lounge-ink);
}
.lounge-lang li a:hover { background: var(--lounge-bg-accent); color: var(--lounge-teal); }
.lounge-lang li.lounge-lang-current a { color: var(--lounge-orange); font-weight: 700; }