@charset "UTF-8";

:root {
	--gtroph-sidebar-width: 240px; /* Cette valeur par défaut prendra automatiquement celle du portail s'il est activé */
	--gtroph-spacing-block: 4px;
	--adherent-contrast-color: #fff;
	--nonadherent-bg-color: #fff;
}

/* Mise en page générale
*****************************************************************************/
.gtroph-wrapper {
	display: flex;
	gap: 10px;
	padding-top: 10px;
}

.gtroph-sidebar {
	width: var(--gtroph-sidebar-width);
	flex-shrink: 0;
}

.gtroph-board {
	flex: 1;
	min-width: 0;
}

/* Utilitaires
*****************************************************************************/
.text-center {
	text-align: center;
}

.text-end {
	text-align: end;
}

.float-end {
	float: inline-end;
}

/* Menu principal (sidebar)
*****************************************************************************/
.gtroph-menu-item {
	padding: 5px;
	font-size: 1.1em;
}

.gtroph-menu-item.active a,
.gtroph-menu-item.active span {
	opacity: .85;
	text-decoration: underline dotted;
	text-underline-offset: .2em;
}

.gtroph-sidebar .forabg,
#portal-left .forabg,
#portal-right .forabg {
	margin-bottom: var(--gtroph-spacing-block);
}

.gtroph-sidebar ul.topiclist dt {
	padding: 0 0 2px;
	white-space: nowrap;
	margin-top: 0;
	margin-bottom: 0;
}

/* Surcharge de la spécificité des styles */
.gtroph-sidebar ul.topiclist li.header dt {
	width: 100%;
}

.g-icon {
	padding: 0 2px 0;
}

/* Menu principal déroulant (responsive)
*****************************************************************************/
.gtroph-dropdown-menu {
	display: none;
	position: absolute;
	right: 0;
	margin: .4em .5em 0;
	z-index: 2;
}

.gtroph-block .dropdown-trigger {
	color: #fff;

	& .icon {
		font-size: 1.4em;
	}
}

li.dropdown-section-title,
li.dropdown-section-title + li {
	border: 0;
}

.dropdown-section-title h3 {
	margin: 0.4em 0 0.2em 0.2em;
	color: inherit;
	text-transform: none;
}

.gtroph-dropdown-menu .active > span {
	display: block;
	padding: 5px;
}

/* Blocs de contenu
*****************************************************************************/
.gtroph-block {
	position: relative;
}

.gtroph-block-content {
	--gtroph-block-content-spacing: 5px;
	padding: 10px var(--gtroph-block-content-spacing);
	border-radius: 0;
	width: auto;
	float: none;
}

.gtroph-block-header {
	font-size: 1.2em;
}

ul.topiclist dt.gtroph-block-header {
	margin-right: 0;
}

.gtroph-block-header h2 {
	color: inherit;
	font-size: inherit;
	margin: inherit;
	font-weight: inherit;
	font-family: inherit;
}

.gtroph-block-content .content {
	font-size: 1.1em;
	padding: 0 .5em;
	border-radius: 7px;
}

.gtroph-tabs {
	margin-top: 0;
}

.gtroph-block-content .content h3 {
	margin: 1em 0;
}

.gtroph-block-content .content h4 {
	font-size: 1.1em;
}

.gtroph-block-content .content p {
	font-size: inherit;
}

/* Listes de liens (liens utiles, partenaires, aquariums, etc.)
---------------------------------------------------------------------------- */
.liens-item:not(:first-of-type) {
	margin-top: 3em;
}

.liens-body {
	display: flex;
	gap: 1em 3em;
	align-items: center;
	margin: 1em 0 3em 3em;
	flex-wrap: wrap;

	@media (max-width: 576px) {
		flex-direction: column;
		align-items: flex-start;
	}
}

.liens-img img {
	box-shadow: 8px 8px 10px #666;
}

.liens-info {
	font-size: 1.2em;
}

/* Tables
*****************************************************************************/
.gtroph-table {
	text-align: left;
	overflow-x: auto;
}

.gt-short {
	width: 5%;
}

.gt-name {
	width: 10%;
}

.gt-adress {
	width: 30%;
}

.gt-city {
	width: 10%;
}

.gt-mail {
	width: 20%;
}

.gt-username,
.gt-tel {
	width: 10%
}

/* Archive des adhérents
*****************************************************************************/
td.compt {
	font-weight: bold;
	text-align: center;
}

.adherent {
	color: var(--adherent-contrast-color);
	padding: 0;
	text-align: center;
	border-radius: 0;
	border: none;
}

.nonadherent {
	background: var(--nonadherent-bg-color);
}

/* Listes Conseil d'administration et adhérents
*****************************************************************************/
.has-card ul.topiclist li.header dt {
	text-align: initial;
}

.post-card {
	display: flex;
	flex-direction: row;
	gap: var(--gtroph-block-content-spacing);
}

.user-photo-container {
	min-width: 120px;
	text-align: center;
}

.user-photo-container img {
	--image-max-width: 98px;
	--image-max-height: 114px;
	object-fit: scale-down;
}

.user-info {
	flex: 1;
}

.user-info li {
	list-style: none;
	margin-bottom: 0.5em;
}

.user-info div {
	margin-left: 1em;
}

.user-function {
	font-weight: bold;
	font-size: 1.2em;
}

.user-send-pm .icon {
	font-size: 1.4em;
}

/* Page adhesions et renouvellements
*****************************************************************************/
.gtroph_page_public_adhesion_renouvellement {
	--image-max-width: 158px;
	--image-max-height: 216px;
}

/* Page aquariums publics
*****************************************************************************/
.gtroph_page_public_aquariums_publics {
	--image-max-width: 200px;
	--image-max-height: 120px;
}

/* Page revues FFA
*****************************************************************************/
.gtroph_page_adherents_revue_ffa {
	--image-max-width: 160px;
	--image-max-height: 229px;
}

/* Divers
*****************************************************************************/
/* Pour limiter la largeur d'affichage d'une image,
 * déclarer le style sur la balise <img>
 * Exemple : <img style="--image-max-width: 400px;">
 */
.gtroph-wrapper:not(.gtroph_page_adherents_photos_congres) img {
	width: 100%;
	height: auto;
	max-width: var(--image-max-width, none);
	max-height: var(--image-max-height, none);
}

/* Pour limiter la largeur d'affichage d'une iframe,
 * déclarer le style sur la balise <iframe>
 * Exemple : <iframe style="--iframe-max-width: 400px;">
 */
.gtroph-page iframe {
	width: 100%;
	height: auto;
	max-width: var(--iframe-max-width, none);
	aspect-ratio: var(--iframe-aspect-ratio-width, 16) / var(--iframe-aspect-ratio-height, 9);
}

/* Slideshow
---------------------------------------------------------------------------- */
.gtroph-slideshow img {
	width: 100%;
	height: auto;
	aspect-ratio: 1170 / 340;
	/* Fallback fluid scaling */
	max-height: clamp(150px, calc(150px + 190 * ((100vw - 320px) / 276)), 340px);
	object-fit: cover;
}

/* Damaïo tweak
---------------------------------------------------------------------------- */
.damaio .gtroph-wrapper .header {
	padding: 5px 5px 0 5px;
}

.damaio .gtroph-wrapper .header dd {
	padding-bottom: 4px;
}

/* Media Queries
---------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.gtroph-page .gtroph-sidebar {
		display: none;
	}

	.gtroph-dropdown-menu {
		display: block;
	}
}