/* ==========================================================================
   Fondations : palette, dimensions partagées et normalisation minimale
   ========================================================================== */
:root {
	color-scheme: dark;
	--bg: #061326;
	--surface: #0a1c34;
	--surface-raised: #102947;
	--surface-hover: #14375d;
	--text: #f4f8ff;
	--muted: #9bb0c7;
	--line: #1f4268;
	--blue: #00a3e0;
	--red: #f07196;
	--green: #3cddbf;
	--violet: #9b64c8;
	--signal: #64d7fa;
	--kpmg-blue: #00338d;
	--cobalt: #0046fa;
	--spectrum: #122345;
	--purple: #7213a6;
	--pink: #cb0093;
	--radius: 18px;
	--shadow: 0 24px 80px rgba(0, 0, 0, .28);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background:
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
		var(--bg);
	background-size: 48px 48px;
	color: var(--text);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

button,
input,
select {
	font: inherit;
}

/* Les listes natives ouvertes gardent un contraste lisible en thème sombre. */
select option,
select optgroup {
	background-color: #111820;
	color: #fff;
}

a {
	color: inherit;
}

.icon-library {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* Les icônes sont des <symbol> SVG locaux : aucune police ou requête externe. */
svg {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ==========================================================================
   Structure principale et en-tête du dashboard
   ========================================================================== */
.page-shell {
	width: min(1560px, calc(100% - 56px));
	margin: 0 auto;
	padding: 40px 0 32px;
}

.hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(24px, 2.4vw, 36px);
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) + 8px);
	background:
		radial-gradient(circle at 90% 0%, rgba(0, 70, 250, .28), transparent 38%),
		radial-gradient(circle at 0% 100%, rgba(60, 221, 191, .1), transparent 34%),
		linear-gradient(135deg, #0a1c34, #07182e);
	box-shadow: var(--shadow);
}

.hero::after {
	position: absolute;
	z-index: -1;
	top: -60px;
	right: clamp(24px, 8vw, 120px);
	width: 220px;
	height: 220px;
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 50%;
	box-shadow: 0 0 0 42px rgba(255, 255, 255, .018), 0 0 0 84px rgba(255, 255, 255, .012);
	content: "";
}

.hero__topline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: clamp(22px, 2.5vw, 30px);
}

.eyebrow,
.service-status,
.section-number {
	margin: 0;
	font-size: .72rem;
	font-weight: 750;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.eyebrow,
.service-status {
	display: flex;
	align-items: center;
	gap: 9px;
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.eyebrow {
	color: var(--signal);
}

.eyebrow span {
	width: 22px;
	height: 1px;
	background: currentColor;
}

.service-status {
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--muted);
	letter-spacing: .08em;
}

.service-status span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(97, 214, 155, .12);
}

.config-button {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 7px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #18212a;
	color: #c5cfd4;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .02em;
	cursor: pointer;
	transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}

.config-button svg {
	width: 16px;
	height: 16px;
}

.config-button:hover,
.config-button:focus-visible {
	border-color: var(--signal);
	background: #202b35;
	color: var(--signal);
}

.config-button:focus-visible {
	outline: 2px solid rgba(232, 255, 101, .3);
	outline-offset: 2px;
}

.logout-form {
	margin: 0;
}

.logout-button {
	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease;
}

.logout-button svg {
	width: 16px;
	height: 16px;
}

.logout-button:hover,
.logout-button:focus-visible {
	border-color: var(--red);
	color: var(--red);
}

.hero__copy {
	max-width: 900px;
	margin-bottom: clamp(18px, 2vw, 24px);
}

h1 {
	margin: 0 0 12px;
	font-size: clamp(2.5rem, 4.2vw, 4.4rem);
	font-weight: 760;
	letter-spacing: -.065em;
	line-height: .9;
}

h1 em {
	color: var(--green);
	font-family: Georgia, "Times New Roman", serif;
	font-weight: 400;
}

#profile-label {
	transition: color .3s ease;
}

#profile-label[data-weekday="0"] { color: #ff8f8f; }
#profile-label[data-weekday="1"] { color: #74b9ff; }
#profile-label[data-weekday="2"] { color: #61d69b; }
#profile-label[data-weekday="3"] { color: #e8ff65; }
#profile-label[data-weekday="4"] { color: #ffbd75; }
#profile-label[data-weekday="5"] { color: #ff8fd1; }
#profile-label[data-weekday="6"] { color: #c8a7ff; }

.hero__copy > p {
	max-width: 900px;
	margin: 0;
	color: var(--muted);
	font-size: clamp(1rem, 1.8vw, 1.24rem);
	line-height: 1.6;
}

/* ==========================================================================
   Recherche unifiée ServiceNow dans le bandeau principal
   ========================================================================== */
.search {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(190px, 210px) minmax(200px, 1fr) minmax(230px, 270px) auto;
	align-items: stretch;
	max-width: 1220px;
	border: 1px solid #394651;
	border-radius: 14px;
	background: #f3f5f2;
	box-shadow: 0 16px 50px rgba(0, 0, 0, .32);
}

.search.search--without-target {
	grid-template-columns: auto minmax(190px, 210px) minmax(260px, 1fr) auto;
}

.search select[hidden] {
	display: none;
}

.search:focus-within {
	outline: 3px solid rgba(232, 255, 101, .22);
	border-color: var(--signal);
}

.search__icon {
	display: grid;
	place-items: center;
	padding-left: 20px;
	color: #53616a;
}

.search input,
.search select {
	min-width: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: #10161b;
}

.search input {
	padding: 19px 18px;
	font-size: 1.05rem;
}

.search input::placeholder {
	color: #778188;
}

.search select {
	width: auto;
	margin: 10px 0;
	padding: 0 38px 0 16px;
	border-left: 1px solid #cbd2d3;
	color: #3e4a51;
	font-size: .92rem;
	cursor: pointer;
}

.search button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 6px;
	padding: 0 20px;
	border: 0;
	border-radius: 9px;
	background: #111820;
	color: #fff;
	font-weight: 720;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.search button:hover {
	background: var(--signal);
	color: #111820;
}

.search button svg {
	width: 18px;
	height: 18px;
}

.search__message {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	margin: 0;
	color: #ff9b94;
	font-size: .86rem;
}

.search-hint {
	margin: 18px 0 0;
	color: #6f7e87;
	font-size: .82rem;
}

kbd {
	padding: 2px 7px;
	border: 1px solid #394650;
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #18212a;
	color: #c8d1d5;
	font-family: inherit;
}

/* ==========================================================================
   Grille métier et cartes de raccourcis
   ========================================================================== */
.tool-grid {
	display: grid;
	grid-template-columns: repeat(24, minmax(0, 1fr));
	align-items: start;
	gap: 24px;
	margin-top: 24px;
}

.tool-card {
	--accent: var(--blue);
	position: relative;
	overflow: hidden;
	padding: 28px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(17, 24, 32, .94);
}

.tool-card::before {
	position: absolute;
	top: 0;
	right: 24px;
	left: 24px;
	height: 2px;
	background: var(--accent);
	content: "";
}

.tool-card--incidents {
	--accent: var(--red);
	grid-column: span 9;
}

/* ==========================================================================
   Variantes des cartes métier et recherche de projets
   ========================================================================== */
.tool-card--tickets {
	grid-column: span 7;
	align-self: stretch;
}

.tool-card--projects {
	--accent: var(--violet);
	--project-row-height: 58px;
	--project-row-gap: 8px;
	--project-reserve: calc(var(--project-row-height) + var(--project-row-gap));
	grid-column: span 14;
	overflow: visible;
	padding-bottom: calc(28px + var(--project-reserve));
}

.tool-card--projects:has(.project-menu[open]) {
	padding-bottom: 28px;
}

.tool-card--docs {
	--accent: var(--green);
	grid-column: span 8;
	align-self: stretch;
}

.tool-card--docs .link-list {
	grid-template-columns: 1fr;
}

.tool-card--sites {
	--accent: var(--blue);
	grid-column: span 10;
}

.tool-card--projects,
.tool-card--sites {
	align-self: stretch;
}

.tool-card__header {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 26px;
}

.section-icon {
	display: grid;
	flex: 0 0 46px;
	width: 46px;
	height: 46px;
	place-items: center;
	border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--accent);
}

.section-number {
	margin-bottom: 4px;
	color: var(--accent);
	font-size: .64rem;
}

h2 {
	margin: 0;
	font-size: 1.22rem;
	letter-spacing: -.02em;
}

.link-list {
	display: grid;
	gap: 12px;
}

.link-list--split {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tool-link {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr) 18px;
	align-items: center;
	gap: 12px;
	min-height: 74px;
	padding: 13px 14px;
	border: 1px solid transparent;
	border-radius: 11px;
	background: var(--surface-raised);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.tool-link:hover {
	transform: translateY(-2px);
	border-color: #40505c;
	background: var(--surface-hover);
}

.tool-link:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 2px;
}

.tool-link--wide {
	grid-column: 1 / -1;
}

.tool-link__icon {
	display: grid;
	width: 38px;
	height: 38px;
	place-items: center;
	border-radius: 9px;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	color: var(--accent);
}

.tool-link__icon svg {
	width: 19px;
	height: 19px;
}

.tool-link strong,
.tool-link small {
	display: block;
}

.tool-link strong {
	overflow: hidden;
	font-size: .9rem;
	line-height: 1.25;
	text-overflow: ellipsis;
}

.tool-link small {
	margin-top: 4px;
	color: var(--muted);
	font-size: .72rem;
	line-height: 1.25;
}

.tool-link__arrow {
	width: 16px;
	height: 16px;
	color: #586771;
	transition: transform .18s ease, color .18s ease;
}

.tool-link:hover .tool-link__arrow {
	transform: translateX(3px);
	color: var(--text);
}

/* ==========================================================================
   Pied de page commun
   ========================================================================== */
.page-shell > footer {
	padding: 26px 4px 0;
	color: #62717a;
	font-size: .76rem;
	text-align: center;
}

.page-shell > footer p {
	margin: 0;
}

.page-shell > footer a:hover,
.page-shell > footer a:focus-visible {
	color: var(--signal);
}

.page-shell > footer span {
	margin: 0 8px;
	color: #3b4851;
}

.page-shell > footer a {
	color: #8c9aa2;
	text-decoration: none;
}

.page-shell > footer a:hover,
.page-shell > footer a:focus-visible {
	color: var(--signal);
}

/* ==========================================================================
   Page de changelog et archives des versions
   ========================================================================== */
.changelog-shell {
	width: min(1120px, calc(100% - 48px));
}

.changelog-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 18px;
	color: var(--muted);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.changelog-nav a {
	color: var(--text);
	text-decoration: none;
}

.changelog-nav a:hover,
.changelog-nav a:focus-visible {
	color: var(--signal);
}

.changelog-hero,
.release,
.legacy-history {
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) + 4px);
	background: rgba(17, 24, 32, .96);
}

.changelog-hero {
	padding: clamp(28px, 6vw, 64px);
	background:
		radial-gradient(circle at 90% 0%, rgba(182, 163, 255, .18), transparent 34%),
		radial-gradient(circle at 0% 100%, rgba(232, 255, 101, .08), transparent 34%),
		var(--surface);
}

.changelog-heading {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	margin-top: clamp(46px, 8vw, 92px);
}

.changelog-heading h1 {
	margin-bottom: 16px;
}

.changelog-heading p {
	max-width: 690px;
	margin: 0;
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.6;
}

.version-badge {
	flex: 0 0 auto;
	padding: 9px 13px;
	border: 1px solid rgba(232, 255, 101, .3);
	border-radius: 999px;
	background: rgba(232, 255, 101, .08);
	color: var(--signal);
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.release,
.legacy-history {
	margin-top: 18px;
	padding: clamp(24px, 5vw, 48px);
}

.release--current {
	border-top-color: var(--signal);
}

.release__header,
.legacy-release header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.release__header {
	margin-bottom: 28px;
}

.release__header .section-number,
.legacy-history__header .section-number {
	margin-bottom: 6px;
	color: var(--signal);
}

.release__header h2,
.legacy-history__header h2 {
	font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.release__header time,
.legacy-release time,
.legacy-release header > span {
	color: var(--muted);
	font-size: .82rem;
}

.change-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.change-group {
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface-raised);
}

.change-group--wide {
	grid-column: 1 / -1;
}

.change-group h3,
.legacy-release h3 {
	margin: 0;
	font-size: 1rem;
}

.change-group ul,
.legacy-release ul {
	margin: 16px 0 0;
	padding-left: 20px;
	color: #aeb9bf;
	font-size: .88rem;
	line-height: 1.65;
}

.change-group li + li,
.legacy-release li + li {
	margin-top: 7px;
}

.change-group code,
.legacy-history code {
	padding: 2px 5px;
	border-radius: 4px;
	background: #0b1116;
	color: #d8e0e3;
	font-size: .86em;
}

.legacy-history__header {
	max-width: 760px;
	margin-bottom: 30px;
}

.legacy-history__header > p:last-child {
	margin: 14px 0 0;
	color: var(--muted);
	line-height: 1.6;
}

.legacy-list {
	display: grid;
	gap: 12px;
}

.legacy-release {
	padding: 20px 22px;
	border-left: 2px solid #41515c;
	background: rgba(24, 33, 42, .7);
}

.legacy-release:first-child {
	border-left-color: var(--violet);
}

/* ==========================================================================
   Fenêtre modale de configuration personnelle
   ========================================================================== */
.config-dialog {
	width: min(620px, calc(100% - 28px));
	max-height: calc(100vh - 28px);
	padding: 0;
	overflow: auto;
	border: 1px solid #33414b;
	border-radius: 20px;
	background: #111820;
	color: var(--text);
	box-shadow: 0 30px 100px rgba(0, 0, 0, .65);
}

.config-dialog::backdrop {
	background: rgba(4, 7, 10, .76);
	backdrop-filter: blur(8px);
}

.config-form {
	padding: 28px;
}

.config-form__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.config-form__header .section-number {
	margin-bottom: 7px;
	color: var(--signal);
}

.config-form__header h2 {
	font-size: 1.7rem;
}

.dialog-close {
	display: grid;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	place-items: center;
	padding: 0 0 3px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--surface-raised);
	color: var(--muted);
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}

.dialog-close:hover,
.dialog-close:focus-visible {
	border-color: var(--red);
	color: var(--text);
}

.config-help {
	max-width: 500px;
	margin: 18px 0 24px;
	color: var(--muted);
	font-size: .92rem;
	line-height: 1.55;
}

.config-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.config-fields label,
.config-fields label > span {
	display: block;
}

.config-fields label > span {
	margin-bottom: 8px;
	color: #c4cdd2;
	font-size: .88rem;
	font-weight: 650;
}

.config-fields__wide {
	grid-column: 1 / -1;
}

.config-fields input {
	width: 100%;
	min-height: 48px;
	padding: 11px 13px;
	border: 1px solid #34424c;
	border-radius: 10px;
	outline: 0;
	background: #0c1217;
	color: var(--text);
	font-size: .96rem;
}

.config-fields input:focus {
	border-color: var(--signal);
	box-shadow: 0 0 0 3px rgba(232, 255, 101, .1);
}

.config-error {
	min-height: 20px;
	margin: 14px 0 0;
	color: #ff9b94;
	font-size: .86rem;
}

.config-form__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}

.button-primary,
.button-secondary {
	min-height: 44px;
	padding: 10px 16px;
	border-radius: 9px;
	font-weight: 720;
	cursor: pointer;
}

.button-primary {
	border: 1px solid var(--signal);
	background: var(--signal);
	color: #10161b;
}

.button-secondary {
	border: 1px solid var(--line);
	background: transparent;
	color: var(--muted);
}

.button-primary:hover,
.button-secondary:hover {
	filter: brightness(1.08);
}

/* ==========================================================================
   Pages d'authentification : connexion, inscription, installation, mot de passe
   ========================================================================== */
.auth-page {
	display: grid;
	min-height: 100vh;
	place-items: center;
	padding: 24px;
}

.auth-shell {
	width: min(100%, 470px);
}

.auth-card {
	position: relative;
	overflow: hidden;
	padding: clamp(26px, 6vw, 46px);
	border: 1px solid var(--line);
	border-radius: 24px;
	background:
		radial-gradient(circle at 100% 0%, rgba(92, 184, 255, .14), transparent 36%),
		var(--surface);
	box-shadow: var(--shadow);
}

.auth-card::before {
	position: absolute;
	top: 0;
	right: 42px;
	left: 42px;
	height: 2px;
	background: var(--signal);
	content: "";
}

.auth-mark {
	display: grid;
	width: 54px;
	height: 54px;
	margin-bottom: 34px;
	place-items: center;
	border: 1px solid rgba(232, 255, 101, .36);
	border-radius: 14px;
	background: rgba(232, 255, 101, .08);
	color: var(--signal);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.7rem;
	font-style: italic;
}

.auth-card h1 {
	margin: 18px 0 12px;
	font-size: clamp(2.5rem, 8vw, 4rem);
	letter-spacing: -.055em;
	line-height: 1;
}

.auth-intro {
	margin: 0 0 26px;
	color: var(--muted);
	font-size: .96rem;
	line-height: 1.55;
}

.auth-notice,
.auth-error {
	margin: 0 0 18px;
	padding: 11px 13px;
	border-radius: 9px;
	font-size: .88rem;
	line-height: 1.45;
}

.auth-notice {
	border: 1px solid rgba(97, 214, 155, .25);
	background: rgba(97, 214, 155, .08);
	color: #9ce8c1;
}

.auth-error {
	border: 1px solid rgba(255, 107, 97, .28);
	background: rgba(255, 107, 97, .08);
	color: #ffaaa4;
}

.auth-form {
	display: grid;
	gap: 17px;
}

.auth-form label,
.auth-form label > span {
	display: block;
}

.auth-form label > span {
	margin-bottom: 8px;
	color: #c4cdd2;
	font-size: .9rem;
	font-weight: 650;
}

.auth-form input {
	width: 100%;
	min-height: 50px;
	padding: 11px 13px;
	border: 1px solid #34424c;
	border-radius: 10px;
	outline: 0;
	background: #0c1217;
	color: var(--text);
}

.auth-form input:focus {
	border-color: var(--signal);
	box-shadow: 0 0 0 3px rgba(232, 255, 101, .1);
}

.auth-form small {
	display: block;
	margin-top: 7px;
	color: #75838b;
	font-size: .78rem;
}

.auth-form .button-primary {
	width: 100%;
	margin-top: 5px;
}

.config-button,
.icon-button {
	text-decoration: none;
}

.icon-button {
	display: grid;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	place-items: center;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.icon-button:hover,
.icon-button:focus-visible {
	border-color: var(--green);
	background: rgba(60, 221, 191, .08);
	color: var(--green);
}

.icon-button svg {
	width: 16px;
	height: 16px;
}

.tool-card--tickets {
	--accent: var(--blue);
}

.tool-card--incidents {
	--accent: var(--pink);
}

.tool-card--projects {
	--accent: var(--violet);
}

.tool-card--docs {
	--accent: var(--green);
}

.tool-card--sites {
	--accent: var(--blue);
}

.project-main-links {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Les projets suivis utilisent <details> : survol souris, focus clavier et clic tactile. */
.featured-projects {
	margin-top: 18px;
}

.project-board {
	--project-columns: 4;
	display: grid;
	grid-template-columns: repeat(var(--project-columns), minmax(0, 1fr));
	align-items: start;
	gap: var(--project-row-gap);
	margin-top: 8px;
}

/* Le menu ajoute sa rangée à l'ouverture ; la réserve se trouve sous Actions CCT. */
.project-board--ready {
	position: relative;
	grid-template-rows: repeat(var(--project-rows), var(--project-row-height));
}

.project-board--ready .project-menu {
	position: static;
}

.project-board--ready .project-menu summary {
	height: var(--project-row-height);
}

.project-board--ready .project-menu__links {
	position: absolute;
	top: calc(var(--project-panel-row) * (var(--project-row-height) + var(--project-row-gap)));
	right: 0;
	left: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	height: var(--project-row-height);
	margin: 0;
	padding: 3px;
}

.project-board--ready .project-menu__links a {
	min-width: 0;
	padding: 3px 8px;
}

.project-board--ready .project-menu__links a:only-child {
	grid-column: 1 / -1;
}

.project-board--ready .project-menu[open] .project-menu__links {
	animation: project-menu-reveal .12s ease .18s backwards;
}

.featured-projects__label {
	display: flex;
	grid-column: 1 / -1;
	align-items: center;
	margin: 0;
	padding: 0 0 2px;
	color: var(--violet);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.project-menu {
	position: relative;
	min-width: 0;
}

.project-menu summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 58px;
	padding: 11px 12px;
	border: 1px solid rgba(155, 100, 200, .25);
	border-radius: 10px;
	background: linear-gradient(135deg, rgba(114, 19, 166, .16), rgba(0, 51, 141, .12));
	font-size: .78rem;
	line-height: 1.2;
	font-weight: 700;
	list-style: none;
	cursor: pointer;
	transition: border-color .18s ease, transform .18s ease;
}

.project-menu summary::-webkit-details-marker {
	display: none;
}

.project-menu summary:hover,
.project-menu summary:focus-visible,
.project-menu[open] summary {
	border-color: var(--violet);
	outline: 0;
}

.project-menu .project-link__arrow {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: var(--violet);
	transition: transform .18s ease;
}

.project-menu:hover .project-link__arrow,
.project-menu:focus-within .project-link__arrow,
.project-menu[open] .project-link__arrow {
	transform: rotate(90deg);
}

.project-link__label {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 9px;
}

.project-link__label > span:last-child,
.project-link__label small {
	display: block;
}

.project-link__label small {
	margin-top: 3px;
	color: var(--muted);
	font-size: .62rem;
	font-weight: 550;
}

.project-link__icon {
	display: grid;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	place-items: center;
	border: 1px solid rgba(200, 167, 255, .34);
	border-radius: 8px;
	background: rgba(155, 100, 200, .14);
	color: #c8a7ff;
}

.project-link__icon svg {
	width: 16px;
	height: 16px;
}

.project-menu .project-link__icon {
	flex-basis: 30px;
	width: 30px;
	height: 30px;
}

.project-menu .project-link__label {
	gap: 9px;
}

.project-menu__links {
	display: none;
	gap: 6px;
	min-width: 0;
	margin-top: 8px;
	padding: 8px;
	border: 1px solid rgba(155, 100, 200, .5);
	border-radius: 12px;
	background: #102947;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}

/* Le panneau reste dans la grille : les lignes suivantes lui laissent la place. */
.project-menu[open] .project-menu__links {
	display: grid;
	animation: project-menu-reveal .16s ease;
}

@keyframes project-menu-reveal {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

.project-menu__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: rgba(155, 100, 200, .08);
	text-decoration: none;
}

.project-menu__links a:hover,
.project-menu__links a:focus-visible {
	border-color: rgba(200, 167, 255, .55);
	background: rgba(155, 100, 200, .18);
	outline: 0;
}

.project-menu__links strong,
.project-menu__links small {
	display: block;
}

.project-menu__links strong {
	font-size: .76rem;
}

.project-menu__links small {
	margin-top: 2px;
	color: var(--muted);
	font-size: .62rem;
}

.project-menu__links svg {
	flex: 0 0 13px;
	width: 13px;
	height: 13px;
	color: #c8a7ff;
}

.project-actions {
	display: grid;
	grid-template-columns: 1fr;
	align-items: stretch;
	gap: 8px;
	margin-top: 8px;
}

.project-actions .featured-projects__label {
	width: auto;
	padding: 2px 0;
}

.project-actions a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 50px;
	padding: 9px 12px;
	border: 1px solid rgba(155, 100, 200, .25);
	border-radius: 10px;
	background: rgba(114, 19, 166, .08);
	font-size: .8rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}

.project-actions a:hover,
.project-actions a:focus-visible {
	transform: translateY(-2px);
	border-color: var(--violet);
}

.project-actions a > span,
.project-actions small {
	display: block;
}

.project-actions .project-link__label {
	display: flex;
}

.project-actions small {
	margin-top: 3px;
	color: var(--muted);
	font-size: .68rem;
	font-weight: 500;
}

.project-actions .project-link__arrow {
	flex: 0 0 14px;
	width: 14px;
	height: 14px;
	color: var(--violet);
}

/* ==========================================================================
   Ressources spécialisées sous la grille principale
   ========================================================================== */
.resource-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 24px;
	margin-top: 24px;
}

.resource-card--marketplace {
	--accent: var(--violet);
	grid-column: span 8;
}

.resource-card--graphics {
	--accent: var(--pink);
	grid-column: span 4;
}

.resource-card--cmdb {
	--accent: var(--green);
	grid-column: span 7;
}

.resource-card--sccm {
	--accent: var(--blue);
	grid-column: span 5;
}

.resource-card .tool-card__header {
	margin-bottom: 18px;
}

/* Champs dynamiques de groupes utilisés dans la configuration personnelle. */
.field-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.field-heading > span,
.support-group-row label > span {
	color: #c4d5e6;
	font-size: .88rem;
	font-weight: 650;
}

.button-mini {
	padding: 6px 9px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface-raised);
	color: var(--green);
	font-size: .72rem;
	font-weight: 750;
	cursor: pointer;
}

.support-groups-field > small {
	display: block;
	margin-top: 8px;
	color: #758ca4;
	font-size: .75rem;
}

#support-groups {
	display: grid;
	gap: 9px;
}

.support-group-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40px;
	align-items: end;
	gap: 8px;
}

.support-group-row:only-child {
	grid-template-columns: 1fr;
}

.support-group-row label > span {
	display: block;
	margin-bottom: 5px;
	font-size: .72rem;
}

.group-remove {
	display: grid;
	height: 48px;
	place-items: center;
	border: 1px solid #613b50;
	border-radius: 10px;
	background: rgba(203, 0, 147, .08);
	color: var(--red);
	font-size: 1.3rem;
	cursor: pointer;
}

.button-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.auth-form__split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.auth-switch {
	margin: 22px 0 0;
	color: var(--muted);
	font-size: .84rem;
	text-align: center;
}

.auth-switch a {
	color: var(--green);
	font-weight: 750;
}

/* ==========================================================================
   Administration des invitations et des comptes utilisateurs
   ========================================================================== */
.admin-shell {
	width: min(1180px, calc(100% - 32px));
	margin: 0 auto;
	padding: 42px 0;
}

.admin-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 26px;
}

.admin-header h1 {
	margin: 16px 0 10px;
	font-size: clamp(2.4rem, 6vw, 4.8rem);
}

.admin-header > div > p:last-child,
.admin-panel p {
	margin: 0;
	color: var(--muted);
}

.temporary-password {
	margin-bottom: 18px;
	padding: 20px;
	border: 1px solid rgba(60, 221, 191, .35);
	border-radius: 14px;
	background: rgba(60, 221, 191, .07);
}

.temporary-password code {
	display: inline-block;
	max-width: 100%;
	margin: 10px 0;
	padding: 10px 14px;
	border-radius: 8px;
	background: #020b17;
	color: var(--green);
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.temporary-password p:last-child {
	margin: 0;
	color: #b4c9d9;
	font-size: .84rem;
}

.admin-panel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
}

.admin-panel .section-number {
	margin-bottom: 6px;
	color: var(--green);
}

.admin-panel h2 {
	margin-bottom: 7px;
}

.invitation-panel .section-number {
	color: #c8a7ff;
}

.invitation-list {
	margin-bottom: 18px;
	padding: 22px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
}

.invitation-list > header,
.invitation-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.invitation-list > header {
	margin-bottom: 16px;
}

.invitation-list .section-number {
	margin-bottom: 6px;
	color: #c8a7ff;
}

.invitation-count {
	display: grid;
	min-width: 36px;
	height: 36px;
	place-items: center;
	border: 1px solid rgba(200, 167, 255, .35);
	border-radius: 999px;
	background: rgba(155, 100, 200, .12);
	color: #c8a7ff;
	font-weight: 850;
}

.invitation-row {
	padding: 14px 0;
	border-top: 1px solid var(--line);
}

.invitation-row code {
	color: #c8a7ff;
	font-size: .92rem;
	font-weight: 750;
}

.invitation-row p,
.empty-state {
	margin: 5px 0 0;
	color: var(--muted);
	font-size: .8rem;
}

.empty-state {
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.registration-control,
.switch {
	display: flex;
	align-items: center;
	gap: 12px;
}

.switch {
	cursor: pointer;
}

.switch input {
	position: absolute;
	opacity: 0;
}

.switch > span {
	position: relative;
	width: 50px;
	height: 28px;
	border: 1px solid #3d5670;
	border-radius: 999px;
	background: #17283b;
}

.switch > span::after {
	position: absolute;
	top: 4px;
	left: 4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #8292a2;
	content: "";
	transition: transform .18s ease, background-color .18s ease;
}

.switch input:checked + span {
	border-color: var(--green);
	background: rgba(60, 221, 191, .14);
}

.switch input:checked + span::after {
	transform: translateX(22px);
	background: var(--green);
}

.user-list {
	display: grid;
	gap: 10px;
}

.user-row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--surface);
}

.user-row--disabled {
	opacity: .58;
}

.user-avatar {
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--kpmg-blue), var(--purple));
	font-size: 1.1rem;
	font-weight: 850;
}

.user-title,
.user-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.user-title h2 {
	font-size: 1rem;
}

.user-identity p {
	margin: 5px 0 0;
	color: var(--muted);
	font-size: .78rem;
}

.role-badge,
.reset-badge {
	padding: 4px 7px;
	border-radius: 999px;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
}

.role-badge {
	background: rgba(0, 163, 224, .15);
	color: var(--signal);
}

.reset-badge {
	background: rgba(240, 113, 150, .14);
	color: #ff9bb8;
}

.user-actions form {
	margin: 0;
}

.button-danger {
	border-color: rgba(240, 113, 150, .35);
	color: #ff9bb8;
}

.delete-confirmation {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 18px;
	padding: 18px;
	border: 1px solid rgba(240, 113, 150, .42);
	border-radius: 14px;
	background: rgba(240, 113, 150, .08);
}

.delete-confirmation h2 {
	margin: 4px 0 6px;
	font-size: 1.15rem;
}

.delete-confirmation p:last-child {
	margin: 0;
	color: var(--muted);
	font-size: .86rem;
}

.delete-confirmation__actions {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	gap: 10px;
}

.delete-confirmation__actions form {
	margin: 0;
}

.button-delete {
	border-color: #f07196;
	background: #f07196;
	color: #10161b;
}

/* Texte accessible aux lecteurs d'écran, masqué uniquement visuellement. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   Adaptation responsive : grand portable, tablette puis mobile
   ========================================================================== */
@media (max-width: 1380px) {
	.tool-grid {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	}

	.tool-card--tickets {
		grid-column: 1;
		grid-row: 1;
	}

	.tool-card--incidents {
		grid-column: 2;
		grid-row: 1;
	}

	.tool-card--projects {
		grid-column: 1 / -1;
		grid-row: 3;
	}

	.tool-card--docs {
		grid-column: 1 / -1;
		grid-row: 2;
	}

	.tool-card--docs .link-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tool-card--sites {
		grid-column: 1 / -1;
		grid-row: 4;
	}

	.project-board {
		--project-columns: 4;
	}

	.resource-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.resource-card--marketplace,
	.resource-card--graphics,
	.resource-card--cmdb,
	.resource-card--sccm {
		grid-column: auto;
	}
}

/* Deux lignes avant que les largeurs minimales de la recherche ne débordent. */
@media (min-width: 821px) and (max-width: 1180px) {
	.search {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.search.search--without-target {
		grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto;
	}

	.search input {
		grid-column: 2 / 4;
		grid-row: 1;
	}

	.search button {
		grid-column: 4;
		grid-row: 1;
	}

	.search select {
		grid-row: 2;
		margin: 0 14px;
		padding: 14px 6px;
		border-top: 1px solid #d3d8d9;
		border-left: 0;
	}

	#search-mode { grid-column: 1 / 3; }
	#search-target { grid-column: 3 / 5; }
	.search--without-target #search-mode { grid-column: 1 / 5; }
}

@media (max-width: 820px) {
	.page-shell {
		width: min(100% - 24px, 680px);
		padding-top: 12px;
	}

	.hero {
		padding: 24px;
	}

	.hero__topline {
		align-items: flex-start;
		flex-direction: column;
		margin-bottom: 36px;
	}

	.hero__actions {
		width: 100%;
		flex-wrap: wrap;
	}

	.search {
		grid-template-columns: auto 1fr;
	}

	.search.search--without-target {
		grid-template-columns: auto 1fr;
	}

	.search select {
		grid-column: 1 / -1;
		width: auto;
		margin: 0 14px;
		padding: 14px 6px;
		border-top: 1px solid #d3d8d9;
		border-left: 0;
	}

	#search-mode {
		grid-row: 2;
	}

	#search-target {
		grid-row: 3;
	}

	.search--without-target button {
		grid-row: 3;
	}

	.search button {
		grid-column: 1 / -1;
		grid-row: 4;
		min-height: 50px;
	}

	.search-hint {
		display: none;
	}

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

	.tool-card--tickets,
	.tool-card--incidents,
	.tool-card--projects,
	.tool-card--docs,
	.tool-card--sites {
		grid-column: auto;
		grid-row: auto;
	}

	.tool-card--docs .link-list {
		grid-template-columns: 1fr;
	}

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

	.project-board {
		--project-columns: 2;
	}

	.project-actions {
		grid-template-columns: 1fr;
	}

	.featured-projects__label,
	.project-actions .featured-projects__label {
		width: auto;
		padding: 2px 0;
	}

	.admin-header,
	.admin-panel,
	.invitation-row,
	.delete-confirmation {
		align-items: stretch;
		flex-direction: column;
	}

	.registration-control {
		justify-content: space-between;
	}

	.user-row {
		grid-template-columns: 44px minmax(0, 1fr);
	}

	.user-actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}

	.changelog-shell {
		width: min(100% - 24px, 680px);
	}

	.changelog-heading {
		align-items: flex-start;
		flex-direction: column;
	}

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

	.change-group--wide {
		grid-column: auto;
	}
}

@media (max-width: 520px) {
	.project-board {
		--project-columns: 1;
	}

	.hero__topline {
		align-items: flex-start;
	}

	.service-status {
		font-size: .58rem;
	}

	.hero__actions {
		align-items: center;
		justify-content: flex-end;
		flex-wrap: wrap;
	}

	.config-button span {
		display: none;
	}

	.config-button {
		width: 34px;
		justify-content: center;
		padding: 0;
	}

	h1 {
		font-size: clamp(2.6rem, 16vw, 4rem);
	}

	.tool-card {
		padding: 20px 14px 14px;
	}

	.tool-card--projects {
		padding-bottom: calc(14px + var(--project-reserve));
	}

	.tool-card--projects:has(.project-menu[open]) {
		padding-bottom: 14px;
	}

	.link-list--split {
		grid-template-columns: 1fr;
	}

	.tool-link--wide {
		grid-column: auto;
	}

	.page-shell > footer span {
		display: none;
	}

	.page-shell > footer p {
		display: grid;
		gap: 4px;
	}

	.config-form {
		padding: 22px 18px;
	}

	.config-fields {
		grid-template-columns: 1fr;
	}

	.config-fields__wide {
		grid-column: auto;
	}

	.config-form__actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.project-main-links,
	.auth-form__split {
		grid-template-columns: 1fr;
	}

	.user-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.user-actions .button-secondary {
		width: 100%;
	}

	.delete-confirmation__actions {
		align-items: stretch;
		flex-direction: column-reverse;
	}

	.delete-confirmation__actions .button-link,
	.delete-confirmation__actions .button-delete {
		width: 100%;
		text-align: center;
	}
}

/* Respecte le choix système des personnes sensibles aux animations. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-delay: 0ms !important;
	}
}

/* ==========================================================================
   Accès et page dédiée aux rapports Power BI
   ========================================================================== */
.reports-launch {
	--accent: var(--signal);
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 18px;
	margin-top: 24px;
	padding: 18px 20px;
	border: 1px solid color-mix(in srgb, var(--signal) 38%, var(--line));
	border-radius: var(--radius);
	background:
		linear-gradient(110deg, rgba(0, 70, 250, .16), transparent 42%),
		rgba(10, 28, 52, .94);
	box-shadow: 0 14px 42px rgba(0, 0, 0, .18);
	text-decoration: none;
	transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.reports-launch:hover {
	transform: translateY(-2px);
	border-color: var(--signal);
	background-color: var(--surface-raised);
}

.reports-launch:focus-visible {
	outline: 2px solid var(--signal);
	outline-offset: 3px;
}

.reports-launch__icon,
.reports-heading__icon {
	display: grid;
	place-items: center;
	border: 1px solid rgba(100, 215, 250, .32);
	background: rgba(100, 215, 250, .1);
	color: var(--signal);
}

.reports-launch__icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
}

.reports-launch__copy,
.reports-launch__copy strong,
.reports-launch__copy small {
	display: block;
}

.reports-launch__copy .section-number {
	margin-bottom: 5px;
	color: var(--signal);
}

.reports-launch__copy strong {
	font-size: 1.04rem;
}

.reports-launch__copy small {
	margin-top: 4px;
	color: var(--muted);
	font-size: .78rem;
	line-height: 1.4;
}

.reports-launch__action {
	display: flex;
	align-items: center;
	gap: 9px;
	color: var(--signal);
	font-size: .78rem;
	font-weight: 750;
}

.reports-launch__action svg {
	width: 17px;
	height: 17px;
	transition: transform .18s ease;
}

.reports-launch:hover .reports-launch__action svg {
	transform: translateX(3px);
}

.reports-shell {
	width: min(1540px, calc(100% - 48px));
}

.reports-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 3vw, 44px);
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) + 8px);
	background:
		radial-gradient(circle at 92% 4%, rgba(0, 70, 250, .3), transparent 34%),
		radial-gradient(circle at 4% 100%, rgba(60, 221, 191, .1), transparent 30%),
		linear-gradient(135deg, #0a1c34, #07182e);
	box-shadow: var(--shadow);
}

.reports-nav,
.report-panel__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}

.reports-nav {
	margin-bottom: clamp(34px, 5vw, 64px);
}

.reports-back,
.report-external {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--muted);
	font-size: .78rem;
	font-weight: 750;
	text-decoration: none;
	transition: color .18s ease;
}

.reports-back:hover,
.reports-back:focus-visible,
.report-external:hover,
.report-external:focus-visible {
	color: var(--signal);
}

.reports-back svg,
.report-external svg {
	width: 17px;
	height: 17px;
}

.reports-count {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	color: var(--muted);
	font-size: .72rem;
	font-weight: 750;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.reports-count span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 0 4px rgba(60, 221, 191, .12);
}

.reports-heading {
	display: flex;
	align-items: center;
	gap: clamp(18px, 3vw, 30px);
}

.reports-heading__icon {
	flex: 0 0 clamp(66px, 7vw, 92px);
	width: clamp(66px, 7vw, 92px);
	height: clamp(66px, 7vw, 92px);
	border-radius: 24px;
}

.reports-heading__icon svg {
	width: 42%;
	height: 42%;
}

.reports-heading h1 {
	margin-top: 12px;
}

.reports-heading > div > p:last-child {
	max-width: 760px;
	margin: 0;
	color: var(--muted);
	font-size: clamp(.95rem, 1.4vw, 1.12rem);
	line-height: 1.55;
}

.reports-notice {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	max-width: 940px;
	margin-top: 30px;
	padding: 13px 15px;
	border: 1px solid rgba(100, 215, 250, .2);
	border-radius: 12px;
	background: rgba(100, 215, 250, .06);
	color: var(--muted);
}

.reports-notice svg {
	flex: 0 0 19px;
	width: 19px;
	height: 19px;
	margin-top: 1px;
	color: var(--signal);
}

.reports-notice p {
	margin: 0;
	font-size: .8rem;
	line-height: 1.55;
}

.reports-notice strong {
	color: var(--text);
}

.reports-index {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 24px;
}

.reports-index a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(6, 19, 38, .5);
	color: var(--muted);
	font-size: .75rem;
	font-weight: 700;
	text-decoration: none;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.reports-index a:hover,
.reports-index a:focus-visible {
	border-color: var(--signal);
	background: rgba(100, 215, 250, .08);
	color: var(--text);
}

.reports-index span,
.report-number {
	color: var(--signal);
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.report-stack {
	display: grid;
	gap: 22px;
	margin-top: 22px;
}

.report-panel {
	scroll-margin-top: 18px;
	padding: clamp(18px, 2vw, 28px);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: rgba(10, 28, 52, .94);
	box-shadow: 0 20px 54px rgba(0, 0, 0, .18);
}

.report-panel__header {
	margin-bottom: 17px;
}

.report-number {
	margin: 0 0 5px;
}

.report-panel h2 {
	font-size: clamp(1.08rem, 1.6vw, 1.38rem);
}

.report-external {
	flex: 0 0 auto;
	padding: 8px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
}

.report-external:hover,
.report-external:focus-visible {
	border-color: var(--signal);
}

.powerbi-frame {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 1px solid rgba(155, 176, 199, .24);
	border-radius: 12px;
	background:
		linear-gradient(115deg, rgba(255, 255, 255, .03), transparent 42%),
		#061326;
}

.powerbi-frame::before {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #60748b;
	content: "Chargement du rapport Power BI…";
	font-size: .78rem;
	transform: translate(-50%, -50%);
}

.powerbi-frame iframe {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}

@media (max-width: 820px) {
	.reports-launch {
		grid-template-columns: 46px minmax(0, 1fr);
	}

	.reports-launch__icon {
		width: 46px;
		height: 46px;
	}

	.reports-launch__action {
		grid-column: 2;
	}

	.reports-shell {
		width: min(100% - 24px, 680px);
	}

	.reports-heading {
		align-items: flex-start;
	}

	.powerbi-frame {
		min-height: 580px;
		aspect-ratio: auto;
	}
}

@media (max-width: 520px) {
	.reports-launch {
		padding: 14px;
	}

	.reports-launch__action {
		font-size: .72rem;
	}

	.reports-nav,
	.report-panel__header,
	.reports-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.reports-count {
		align-self: flex-start;
	}

	.reports-heading__icon {
		flex-basis: 58px;
		width: 58px;
		height: 58px;
		border-radius: 17px;
	}

	.reports-heading h1 {
		font-size: clamp(2.35rem, 14vw, 3.35rem);
	}

	.reports-index {
		align-items: stretch;
		flex-direction: column;
	}

	.reports-index a {
		border-radius: 10px;
	}

	.report-external {
		align-self: stretch;
		justify-content: center;
	}

	.powerbi-frame {
		min-height: 540px;
	}
}