@charset "UTF-8";
/* =========================================================================
   CENTRE DE RADIOLOGIE FATH — Portail Web Horos
   Design system moderne · bleu #1050A0 / vert #00B050 (charte du logo)
   ========================================================================= */

:root {
	/* --- Chartre / couleurs (modifiables) --- */
	--fath-blue: #1050A0;
	--fath-blue-dark: #0B3A78;
	--fath-green: #00B050;
	--fath-green-dark: #008C40;
	--fath-light: #F1F6FB;
	--brand-gradient: linear-gradient(115deg, var(--fath-blue) 0%, #0A6FBF 55%, var(--fath-green) 100%);

	/* --- Neutres --- */
	--bg: #EDF2F7;
	--surface: #FFFFFF;
	--ink: #1C2B3A;
	--muted: #5E7185;
	--line: #E2EAF3;

	/* --- Formes & ombres --- */
	--radius: 14px;
	--radius-sm: 9px;
	--shadow-sm: 0 1px 2px rgba(18, 45, 80, .06), 0 2px 6px rgba(18, 45, 80, .06);
	--shadow-md: 0 4px 16px rgba(18, 45, 80, .10);
	--shadow-lg: 0 12px 32px rgba(18, 45, 80, .16);
	--pad: 16pt;

	--font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	font-size: 13pt;
	line-height: 1.55;
	background: var(--bg);
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(0, 176, 80, .22);
}

img {
	border: 0;
}

/* Liens : soulignement au survol seul, couleurs FATH */
a {
	color: var(--fath-blue);
	text-decoration: none;
}

a:hover {
	color: var(--fath-green-dark);
	text-decoration: underline;
}

*:focus-visible {
	outline: 2px solid var(--fath-green);
	outline-offset: 2px;
	border-radius: 3pt;
}

/* Barre laterale de defilement discrete */
::-webkit-scrollbar { width: 10pt; height: 10pt; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #C6D4E2; border-radius: 8pt; border: 2pt solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #A9BCD0; }

/* =========================================================================
   EN-TETE
   ========================================================================= */

#header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	padding: 0;
	margin: 0;
	font-weight: normal;
	border-bottom: none;
}

#brandbar {
	height: 5pt;
	background: var(--brand-gradient);
}

#headerinner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12pt;
	padding: 8pt var(--pad) 9pt var(--pad);
}

#brand {
	display: flex;
	align-items: center;
	min-width: 0;
}

#brandlink {
	display: flex;
	align-items: center;
	text-decoration: none;
}

#brandlogo {
	height: 46pt;
	width: auto;
	display: block;
	filter: drop-shadow(0 1pt 2pt rgba(11, 58, 120, .18));
	transition: transform .18s ease;
}

#brandlink:hover #brandlogo {
	transform: scale(1.04);
}

#brandtitles {
	line-height: 1.15;
	margin-left: 11pt;
	min-width: 0;
}

#brandname {
	font-size: 14.5pt;
	font-weight: 800;
	color: var(--fath-blue);
	letter-spacing: .3pt;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#brandtagline {
	font-size: 7.5pt;
	font-weight: 600;
	color: var(--fath-green-dark);
	text-transform: uppercase;
	letter-spacing: 1.7pt;
}

/* Titre de page cote (token serveur, masque : nos pages ont leurs propres titres) */
#pagetitle {
	display: none;
}

/* Zone utilisateur */
#headertools {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

#userbox {
	margin: 0;
	padding: 0;
	position: static;
	top: auto;
	float: none;
	font-family: var(--font);
	font-size: 9.5pt;
	background: var(--fath-light);
	border: 1pt solid var(--line);
	border-radius: 999pt;
	box-shadow: none;
}

#userbox * {
	display: inline;
	font-size: 9.5pt;
}

#userbox .text {
	margin: 0;
	padding: 5pt 10pt 5pt 12pt;
	border-right: none;
	color: var(--muted);
	white-space: nowrap;
}

#userbox a {
	color: var(--fath-blue);
	font-weight: 700;
	text-decoration: none;
}

#userbox a:hover {
	color: var(--fath-green-dark);
}

#userbox button {
	display: inline-block;
	background: var(--brand-gradient);
	color: #fff;
	border: none;
	border-radius: 999pt;
	padding: 5pt 13pt;
	margin: 2pt;
	font-size: 9.5pt;
	font-weight: 600;
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}

#userbox button:hover {
	filter: brightness(1.08);
	transform: translateY(-1pt);
}

/* =========================================================================
   SOUS-TITRE / FIL D'ARIANE
   ========================================================================= */

#subheader {
	margin: 0;
	padding: 10pt var(--pad) 0 var(--pad);
	line-height: 1.4;
	font-size: 10.5pt;
}

#subheader a.back, #subheader a.foreward {
	display: inline-flex;
	align-items: center;
	background: var(--surface);
	border: 1pt solid var(--line);
	border-radius: 999pt;
	padding: 3pt 11pt 3pt 8pt;
	margin: 0 4pt 4pt 0;
	color: var(--fath-blue);
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

#subheader a.back:hover, #subheader a.foreward:hover {
	border-color: var(--fath-green);
	color: var(--fath-green-dark);
	transform: translateX(-1pt);
	text-decoration: none;
}

a.back:before {
	content: url(images/chevron_left.png);
	vertical-align: -30%;
	margin-right: 4pt;
	padding: 0;
}

a.foreward:after {
	content: url(images/chevron_right.png);
	vertical-align: -30%;
	margin-right: 4pt;
	padding: 0;
}

/* =========================================================================
   CONTENU — cartes
   ========================================================================= */

#content {
	margin: 14pt auto 24pt auto;
	padding: 0 var(--pad);
	max-width: 1100pt;
}

#content > div {
	margin: 0 0 14pt 0;
	padding: 14pt 16pt;
	background: var(--surface);
	border: 1pt solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}

/* Conteneur transparent (carte de connexion seule, sans carte englobante) */
#content > div.nocard {
	background: none;
	border: none;
	box-shadow: none;
	padding: 0;
}

#content > div > div {
	margin: 6pt 0 6pt 0;
}

#content > div > div.noleftmargin {
	margin: 6pt 0 6pt 0;
	padding: 0;
}

#content > div > .title {
	margin: 2pt 0 10pt 0;
	padding: 0;
	font-size: 12pt;
	font-weight: 800;
	color: var(--fath-blue);
	letter-spacing: .2pt;
}

/* Accent barre sous le titre (n'empeche pas le retour a la ligne) */
#content > div > .title::after {
	content: "";
	display: block;
	width: 44pt;
	height: 3pt;
	margin-top: 6pt;
	border-radius: 2pt;
	background: var(--brand-gradient);
}

#content > div > .title.separated {
	margin-top: 4pt;
}

/* =========================================================================
   RECHERCHE REPLIABLE (details/summary — fonctionne sans JavaScript)
   ========================================================================= */

.searchpanel > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10pt;
	margin: 0;
	padding: 10pt 12pt;
	background: var(--surface);
	border: 1pt solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
	font-size: 11pt;
	font-weight: 700;
	color: var(--fath-blue);
	transition: border-color .15s ease, box-shadow .15s ease;
}

.searchpanel > summary::-webkit-details-marker {
	display: none;
}

.searchpanel > summary:hover {
	border-color: var(--fath-green);
	box-shadow: var(--shadow-md);
}

.searchpanel > summary::after {
	content: "\25BE";
	flex: 0 0 auto;
	font-size: 12pt;
	line-height: 1;
	color: var(--fath-green-dark);
	transition: transform .18s ease;
}

.searchpanel[open] > summary::after {
	transform: rotate(180deg);
}

.searchpanel[open] > summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom-color: transparent;
}

.searchpanel > .searchpanelbody {
	padding: 10pt 12pt 12pt 12pt;
	border: 1pt solid var(--line);
	border-top: none;
	border-bottom-left-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
	background: var(--surface);
}

#content ul, #content li {
	margin: 0;
	padding: 0;
}

#content a {
	color: var(--fath-blue);
	font-weight: 600;
}

#content a:hover {
	color: var(--fath-green-dark);
}

/* Listes d'etudes : lignes cliquables */
#content table.wide.fat a {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: color .12s ease;
}

#content table.wide.fat a:hover {
	text-decoration: none;
}

#content table.wide.fat a:hover .bigger {
	color: var(--fath-blue);
	text-decoration: underline;
}

.li0 { background-color: #F7FAFD; }
.li1 { background-color: #FFFFFF; }

#content table.wide.fat tr[class^="li"] {
	transition: background-color .12s ease;
}

#content table.wide.fat tr[class^="li"]:hover {
	background-color: var(--fath-light);
}

table.fat td {
	padding-top: 10pt;
	padding-bottom: 10pt;
}

table.fat td:first-child { padding-left: 12pt; }
table.fat td:last-child { padding-right: 12pt; }

.separated { margin-top: 12pt; }
.fat { padding: 10pt; }

/* =========================================================================
   BOUTONS
   ========================================================================= */

input[type=submit], button, .button {
	background: var(--brand-gradient);
	background-size: 140% 140%;
	color: #FFFFFF;
	border: none;
	border-radius: var(--radius-sm);
	padding: 7pt 16pt;
	font-family: var(--font);
	font-size: 10.5pt;
	font-weight: 700;
	letter-spacing: .2pt;
	cursor: pointer;
	box-shadow: var(--shadow-sm);
	transition: filter .15s ease, transform .12s ease, box-shadow .15s ease;
}

input[type=submit]:hover, button:hover, .button:hover {
	filter: brightness(1.07);
	transform: translateY(-1pt);
	box-shadow: var(--shadow-md);
}

input[type=submit]:active, button:active, .button:active {
	transform: translateY(0);
	filter: brightness(.97);
}

button:disabled, input[type=submit]:disabled {
	opacity: .45;
	filter: grayscale(.4);
	cursor: default;
	transform: none;
	box-shadow: none;
}

input[type=image] {
	cursor: pointer;
	transition: transform .12s ease, opacity .12s ease;
	border-radius: 6pt;
}

input[type=image]:hover {
	transform: scale(1.12);
}

.disabled {
	opacity: .4;
}

.disabled[onclick] {
	cursor: default;
}

/* =========================================================================
   FORMULAIRES
   ========================================================================= */

input[type=text], input[type=password], select, textarea {
	font-family: var(--font);
	font-size: 10.5pt;
	color: var(--ink);
	background: var(--surface);
	border: 1.2pt solid #CDD9E6;
	border-radius: var(--radius-sm);
	padding: 6pt 9pt;
	transition: border-color .15s ease, box-shadow .15s ease;
}

input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--fath-green);
	box-shadow: 0 0 0 3pt rgba(0, 176, 80, .15);
}

input::placeholder, textarea::placeholder {
	color: #9AAABB;
}

select {
	cursor: pointer;
}

input[type=checkbox], input[type=radio] {
	accent-color: var(--fath-blue);
	width: 13pt;
	height: 13pt;
	cursor: pointer;
}

.form {
	font-size: 10.5pt;
}

.form td {
	vertical-align: baseline;
	padding: 3pt 0;
}

.form > tbody > tr > td[colspan=2] {
	text-align: left;
	white-space: normal;
	padding-right: 0;
}

.form > tbody > tr > td:first-child {
	text-align: right;
	padding-right: 8pt;
	color: var(--muted);
	font-weight: 600;
	white-space: nowrap;
}

.basic td:first-child, .narrow {
	width: 2%;
}

.eq td, .eq td:first-child {
	width: 50%;
}

.basic textarea, .basic input[type=text], .basic input[type=password], .basic select[multiple=multiple] {
	background: var(--surface);
	border: 1.2pt solid #CDD9E6;
	font-family: var(--font);
	font-size: 10.5pt;
}

label {
	cursor: pointer;
}

.wide textarea, .wide input[type=text], .wide input[type=password], .wide select[multiple=multiple] {
	width: 100%;
}

form { padding: 0; margin: 0; }

/* Boites de recherche : champ + bouton alignes */
td form { display: inline-flex; gap: 6pt; align-items: center; }
td form input[type=text] { min-width: 180pt; }

/* =========================================================================
   TABLEAUX
   ========================================================================= */

table { border-collapse: collapse; }

.wide { width: 100%; }
.maxwide { max-width: 100%; }

.gray {
	color: var(--muted);
	font-weight: 500;
}

.centered { margin-left: auto; margin-right: auto; }
.top { vertical-align: top; }
.center { text-align: center; }
.middle { vertical-align: middle; }
.right { text-align: right; }
.compressed { line-height: 1.25; }
.indent { margin-left: 18pt; }
.smaller { font-size: 88%; }
.bigger { font-size: 108%; font-weight: 700; }
.italic { font-style: italic; }
.block { display: block; }

/* Liens de tri et pagination : pastilles */
#content td.right a, #content .gray.wide a {
	display: inline-block;
	padding: 2pt 9pt;
	margin: 1pt 2pt;
	background: var(--fath-light);
	border: 1pt solid var(--line);
	border-radius: 999pt;
	color: var(--fath-blue);
	font-size: 9.5pt;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease;
}

#content td.right a:hover, #content .gray.wide a:hover {
	background: #E1EFF9;
	border-color: var(--fath-blue);
	text-decoration: none;
}

.CurrentSortKey {
	background: var(--fath-blue) !important;
	color: #fff !important;
	border-color: var(--fath-blue) !important;
}

/* =========================================================================
   ERREURS / MESSAGES
   ========================================================================= */

.error {
	color: #C62828;
	font-weight: 600;
}

.message {
	background: #E9F7EF;
	border: 1pt solid #B7E4C9;
	border-left: 4pt solid var(--fath-green);
	color: #1B5E37;
	border-radius: var(--radius-sm);
	padding: 7pt 10pt;
	margin: 6pt 0;
	font-weight: 500;
}

/* =========================================================================
   PAGE DE CONNEXION
   ========================================================================= */

.logincard {
	display: block;
	position: relative;
	overflow: hidden;
	margin: 8pt auto 4pt auto;
	max-width: 330pt;
	background: var(--surface);
	border: 1pt solid var(--line);
	border-radius: var(--radius);
	padding: 16pt 18pt 14pt 18pt !important;
	text-align: center;
	box-shadow: var(--shadow-md);
}

/* Bandeau de marque en haut de la carte (arrondi preserve) */
.logincard::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4pt;
	background: var(--brand-gradient);
}

.logincard .form {
	width: 100%;
}

.logincard .form > tbody > tr > td {
	padding: 4pt 0;
}

.logincard .form > tbody > tr > td:first-child {
	text-align: left;
	color: var(--fath-blue-dark);
	width: 42%;
}

.logincard input[type=text], .logincard input[type=password] {
	width: 100%;
}

.logincard input[type=submit] {
	width: 100%;
	margin-top: 6pt;
	padding: 9pt 16pt;
}

.logincard a {
	font-size: 9.5pt;
	color: var(--muted);
}

.logincard a:hover {
	color: var(--fath-green-dark);
}

/* Message d'accueil (index) : hero centre */
#content > .welcome {
	margin: 4pt auto 10pt auto;
	text-align: center;
	max-width: 520pt;
}

#content > .welcome .title {
	border: none;
	width: auto;
	font-size: 17pt;
	margin: 4pt 0 6pt 0;
	padding: 0;
}

#content > .welcome .title::after {
	margin-left: auto;
	margin-right: auto;
}

#content > .welcome .gray {
	font-size: 11pt;
	line-height: 1.5;
}

/* Bloc texte simple (page "acces reserve") */
#content > div.block {
	text-align: center;
}

/* =========================================================================
   PAGE PRINCIPALE — raccourcis de parcours
   ========================================================================= */

.peopleStudyList, .timeFrameStudyList, .Album, .SmartAlbum {
	background: var(--fath-light) !important;
	border: 1pt solid var(--line);
	border-radius: var(--radius-sm);
	padding: 7pt 12pt 7pt 34pt !important;
	margin: 5pt 0;
	transition: border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.peopleStudyList:hover, .timeFrameStudyList:hover, .Album:hover, .SmartAlbum:hover {
	border-color: var(--fath-green);
	transform: translateX(2pt);
	box-shadow: var(--shadow-sm);
}

.timeFrameStudyList { background: url(images/clock.png) no-repeat 10pt center var(--fath-light) !important; }
.peopleStudyList { background: url(images/users.png) no-repeat 10pt center var(--fath-light) !important; }
.Album { background: url(images/album.png) no-repeat 10pt center var(--fath-light) !important; }
.SmartAlbum { background: url(images/smartAlbum.png) no-repeat 10pt center var(--fath-light) !important; }

#content > div > div.peopleStudyList,
#content > div > div.Album,
#content > div > div.SmartAlbum,
#content > div > div.timeFrameStudyList {
	margin-left: 0;
}

/* =========================================================================
   LIENS VERS IMAGES / APPLICATIONS (OsiriX, ZIP, Weasis)
   ========================================================================= */

.DownloadAsZIP, .OpenInWeasis {
	width: 36pt;
	height: 36pt;
	padding: 3pt 0 0 0;
}

td.narrow.middle a {
	display: inline-block;
	transition: transform .12s ease;
}

td.narrow.middle a:hover {
	transform: scale(1.18);
}

/* =========================================================================
   OVERLAY (images cles)
   ========================================================================= */

div#overlay {
	position: fixed;
	top: 0; bottom: 0;
	left: 0; right: 0;
	padding: 10pt;
	background: rgba(13, 32, 56, .78);
	backdrop-filter: blur(3pt);
	z-index: 200;
}

div#overlay > div {
	display: table;
	position: static;
	width: 100%;
	height: 100%;
}

div#overlay > div > div {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	width: 100%;
	cursor: pointer;
}

div#overlay img {
	background-image: url(images/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
	min-width: 50pt;
	min-height: 50pt;
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
}

div#overlay .smaller {
	color: #fff;
	margin-top: 8pt;
	font-weight: 600;
}

/* =========================================================================
   CHARGEMENT
   ========================================================================= */

.loading {
	background-image: url(/images/loading.gif);
	background-repeat: no-repeat;
	background-position: center center;
	min-height: 24pt;
}

/* =========================================================================
   PIED DE PAGE
   ========================================================================= */

#footer {
	border-top: none;
	margin: 0;
	padding: 14pt var(--pad) 18pt var(--pad);
	text-align: center;
	font-size: 9.5pt;
	background: var(--surface);
	box-shadow: 0 -1pt 0 var(--line);
}

#footerbrand {
	font-size: 10.5pt;
	color: var(--fath-blue);
	font-weight: 700;
	margin-bottom: 3pt;
}

#footer a {
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 2pt;
}

#footer a:hover {
	color: var(--fath-green-dark);
}

/* =========================================================================
   BARRE D'OUTILS (pages d'etude)
   ========================================================================= */

#top {
	width: 100%;
	margin: 6pt 0;
}

#top h1 {
	margin: 8pt 0 4pt 0;
	padding: 0;
}

#top a.back {
	background: url(images/chevron_left.png) no-repeat left center;
	padding-left: 16pt;
	margin-left: 1pt;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

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

	body {
		font-size: 12pt;
	}

	:root { --pad: 10pt; }

	#headerinner {
		flex-wrap: wrap;
		row-gap: 6pt;
		padding: 6pt var(--pad) 7pt var(--pad);
	}

	#brandlogo {
		height: 34pt;
	}

	#brandname {
		font-size: 11.5pt;
		white-space: normal;
	}

	#brandtagline {
		font-size: 6.5pt;
		letter-spacing: 1pt;
	}

	#userbox .text {
		display: none;
	}

	#userbox {
		background: transparent;
		border: none;
	}

	#content > div {
		padding: 11pt 12pt;
		border-radius: 10pt;
	}

	/* --- Recherche : champ + bouton sur une ligne, pleine largeur --- */
	td form { display: flex; width: 100%; gap: 6pt; }
	td form input[type=text] { flex: 1 1 auto; min-width: 0; }
	td form input[type=submit], td form button { width: auto; flex: 0 0 auto; }

	/* --- Formulaires : un champ par ligne, libelle au-dessus, pleine largeur --- */
	.form,
	.form > tbody,
	.form > tbody > tr,
	.form > tbody > tr > td {
		display: block;
		width: auto !important;
	}

	.form > tbody > tr > td {
		padding: 2pt 0;
	}

	.form > tbody > tr > td:first-child {
		text-align: left;
		padding: 8pt 0 1pt 0;
		white-space: normal;
	}

	.form input[type=text],
	.form input[type=password],
	.form select,
	.form textarea {
		width: 100%;
		box-sizing: border-box;
	}

	.form input[type=submit], .form button { width: 100%; }

	/* boutons poses directement dans une cellule (hors formulaire de recherche) */
	td > input[type=submit], td > button { width: 100%; }

	/* --- Recherche repliable : entete pleine largeur, cible confortable --- */
	.searchpanel > summary {
		font-size: 12pt;
		padding: 12pt;
	}

	/* --- Listes d'examens (tableaux .fat) : une carte par examen --- */
	#content table.wide.fat,
	#content table.wide.fat tbody,
	#content table.wide.fat tr,
	#content table.wide.fat td {
		display: block;
		width: auto !important;
	}

	#content table.wide.fat tr[class^="li"] {
		margin-bottom: 8pt;
		border: 1pt solid var(--line);
		border-radius: 10pt;
		background: var(--surface);
		box-shadow: var(--shadow-sm);
		overflow: hidden;
		text-align: right;
	}

	#content table.wide.fat td {
		text-align: left;
		padding: 3pt 12pt;
	}

	#content table.wide.fat td:first-child {
		padding-top: 9pt;
	}

	#content table.wide.fat td.right {
		text-align: left;
		padding-top: 0;
		color: var(--muted);
	}

	#content table.wide.fat td.narrow {
		display: inline-block;
		width: auto !important;
		padding: 4pt 2pt 6pt 2pt;
	}

	#content table.wide.fat td.narrow.middle a,
	#content table.wide.fat td.narrow.middle input[type=image] {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40pt;
		height: 40pt;
		padding: 4pt;
		box-sizing: border-box;
	}

	#content table.wide.fat .details {
		display: block;
		margin-top: 2pt;
	}

	#content table.wide.fat .indent {
		margin-left: 0;
	}

	/* --- Tri / pagination (tableaux .gray.wide) : empiles, alignes a gauche --- */
	#content table.wide.gray,
	#content table.wide.gray tbody,
	#content table.wide.gray tr,
	#content table.wide.gray td {
		display: block;
		width: auto !important;
	}

	#content table.wide.gray td {
		text-align: left;
		padding: 3pt 0;
	}

	.logincard {
		max-width: none;
	}

	.logincard .form > tbody > tr > td:first-child {
		width: auto;
	}

	.bigger { font-size: 104%; }
	.details { font-size: 90%; }
}

/* Accessibilite : mouvement reduit */
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
		scroll-behavior: auto !important;
	}
}