:root
{
	--ocean-deep: #032b3f;
	--ocean: #0a4d68;
	--ocean-light: #0f8b8d;
	--coral: #ff6b35;
	--coral-dark: #e04e1a;
	--sand: #fff6ea;
	--ink: #0d2430;
	--muted: #5a7480;

	/* Bootstrap 5 theme overrides -> recolors .btn-primary, links, focus rings, etc. */
	--bs-primary: #ff6b35;
	--bs-primary-rgb: 255, 107, 53;
	--bs-link-color: #e04e1a;
	--bs-link-color-rgb: 224, 78, 26;
	--bs-link-hover-color: #0a4d68;
	--bs-link-hover-color-rgb: 10, 77, 104;
	--bs-body-font-family: "Inter", "Trebuchet MS", "Bitstream Vera Sans-Serif", sans-serif;
	--bs-border-radius: 10px;
	--bs-border-radius-sm: 8px;
	--bs-border-radius-lg: 14px;
}

body
{
	color: var(--ink);
	font-size: 11pt;
	font-family: "Inter", "Trebuchet MS", "Bitstream Vera Sans-Serif", sans-serif;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	background-color: var(--sand);
}

h1, h2, h3, h4, .title, .masthead-title
{
	font-family: "Poppins", "Trebuchet MS", sans-serif;
}

#background
{
	background-color: var(--sand);
}

a, a:visited
{
	text-decoration: none;
	color: var(--coral-dark);
}

a:hover
{
	text-decoration: none;
	color: var(--ocean);
}

#frame
{
	max-width: 1400px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 0px 10px;
	box-sizing: border-box;
	color: inherit;
	text-align: left;
	display: grid;
	grid-template-columns: 1fr;
	/* Mobile: single column, main content ("page") before the sidebar ("leftmenu")
	   regardless of their order in the PHP markup, since grid areas can reorder freely. */
	grid-template-areas:
		"header"
		"topmenu"
		"page"
		"leftmenu"
		"footer";
}

@media (min-width: 768px)
{
	#frame
	{
		/* Desktop: sidebar back to the left, next to the content. */
		grid-template-columns: 25% 75%;
		grid-template-areas:
			"header header"
			"topmenu topmenu"
			"leftmenu page"
			"footer footer";
		column-gap: 10px;
	}
}

/************* header ****************/

#header
{
	grid-area: header;
	width: 100%;
	margin-top: 10px;
	border-radius: 16px;
	background: radial-gradient(circle at 15% 20%, var(--ocean-light) 0%, var(--ocean) 45%, var(--ocean-deep) 100%);
	box-shadow: 0 10px 26px rgba(3, 43, 63, 0.25);
	overflow: hidden;
}

.masthead
{
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 18px 26px;
	color: #fff;
}

/* Le lien qui enveloppe le logo ne doit pas devenir lui-même l'item flex
   (il n'a pas les règles de taille de .masthead-logo, ça casserait la mise
   en page) : display:contents le retire de la boîte, laissant l'<img> à
   l'intérieur se comporter comme un enfant direct de .masthead. */
.masthead > a
{
	display: contents;
}

.masthead-logo
{
	height: 74px;
	width: auto;
	flex: 0 0 auto;
	filter: drop-shadow(0 4px 10px rgba(3, 43, 63, 0.35));
}

.masthead-title
{
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.masthead-tagline
{
	font-size: 12px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: rgba(255,255,255,0.8);
	margin-top: 4px;
}

@media (min-width: 576px)
{
	.masthead-logo
	{
		height: 96px;
	}

	.masthead-title
	{
		font-size: 28px;
	}
}

/************* topMenu (Bootstrap navbar) ****************/

#topMenu
{
	grid-area: topmenu;
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(3, 43, 63, 0.94);
	border: none;
	border-radius: 12px;
	margin-top: 10px;
	margin-bottom: 10px;
	box-shadow: 0 8px 20px rgba(3, 43, 63, 0.18);
}

@media (min-width: 992px)
{
	/* Sans ça, .navbar-nav (flex) ne fait que la largeur de son contenu au
	   lieu de remplir .navbar-collapse : .ms-lg-auto sur "Espace membres"
	   n'a alors aucun espace libre à l'intérieur du <ul> pour pousser vers
	   la droite (margin-left:auto se résout à 0, constaté en test). */
	#topMenu .navbar-nav
	{
		width: 100%;
	}
}

#topMenu .navbar-toggler
{
	border-color: rgba(255,255,255,0.45);
}

#topMenu .navbar-nav > li.nav-item
{
	/* Without this, each .nav-link sticks to the top of its row instead of
	   centering, since <li> itself isn't a flex container by default. */
	display: flex;
	align-items: center;
}

#topMenu .nav-link
{
	color: rgba(255,255,255,0.85);
	font-weight: 500;
	border-radius: 8px;
	padding: 10px 14px;
	transition: background 0.15s ease, color 0.15s ease;
}

#topMenu .nav-link:hover,
#topMenu .nav-link:focus,
#topMenu .nav-link.show
{
	color: #FFF;
	background: rgba(255,255,255,0.12);
}

#topMenu .navbar-nav > li.nav-item:last-child > .nav-link
{
	background: var(--coral);
	color: #fff;
	font-weight: 600;
	border-radius: 999px;
	padding: 10px 18px;
	margin: 4px 2px;
}

#topMenu .navbar-nav > li.nav-item:last-child > .nav-link:hover
{
	background: var(--coral-dark);
	color: #fff;
}

#topMenu .dropdown-menu
{
	font-size: 11pt;
	border: none;
	border-radius: 12px;
	padding: 8px;
	margin-top: 6px;
	box-shadow: 0 14px 30px rgba(3, 43, 63, 0.22);
	--bs-dropdown-link-active-bg: var(--ocean);
}

#topMenu .dropdown-item
{
	border-radius: 8px;
	padding: 8px 12px;
	color: var(--ink);
}

#topMenu .dropdown-item:hover,
#topMenu .dropdown-item:focus
{
	background: var(--sand);
	color: var(--coral-dark);
}

/***************** page ******************/

#page
{
	grid-area: page;
	margin: 10px 0px 10px 0px;
	text-align: justify;
	font-family: "Inter", "Trebuchet MS", "Bitstream Vera Sans-Serif", sans-serif;
	font-size: 10pt;
	min-width: 0;
}

.title
{
	font-size:15pt;
	font-weight:600;
	color: var(--ocean-deep);
	margin-bottom: 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--coral);
}

.text
{
	text-align: justify;
	padding: 18px 20px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 14px;
	background: #ffffff;
	border: none;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(3, 43, 63, 0.08);
	overflow-wrap: break-word;
	/* Scrolls here, not on the table itself: a table with its own overflow-x
	   loses its ability to stretch to 100% when its content is narrow (it
	   shrink-wraps instead). Scrolling the whole card keeps both cases working. */
	overflow-x: auto;
}

.text::after
{
	content: "";
	display: block;
	clear: both;
}

.text img
{
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

.text iframe
{
	/* width overrides the fixed HTML width="..." attribute on these embeds
	   (Google Maps/Calendar) so they fill the card instead of leaving a gap. */
	width: 100%;
	max-width: 100%;
	overflow: hidden;
}

.text table
{
	/* Stretches narrow tables to the card's width; wide ones still get their
	   natural layout and scroll via the card's own overflow-x (see .text above). */
	width: 100%;
}

.textfooter
{
	font-size:8pt;
	font-style:italic;
	color: var(--muted);
}

.footer
{
	grid-area: footer;
	color: rgba(255,255,255,0.8);
	padding: 18px 10px;
	font-family: "Inter", Arial, sans-serif;
	font-size: 8pt;
	text-align: center;
	background: var(--ocean-deep);
	border-radius: 16px 16px 0 0;
}

.footer a, .footer a:visited
{
	color: #fff;
	text-decoration: underline;
}

.footer a:hover
{
	text-decoration: underline;
	color: var(--coral);
}

.tablelist tr:nth-child(even) {
    background-color: var(--sand);
}

.tablelist tr:hover {
	background-color: rgba(15, 139, 141, 0.1);
}

#page table th
{
	background: var(--ocean-deep);
	color: #fff;
	padding: 8px 10px;
}

#page table td
{
	padding: 7px 10px;
}

/***************** buttons & forms (Bootstrap) ******************/

.btn
{
	border-radius: var(--bs-border-radius);
	font-weight: 500;
	/* Un vrai <button> a une hauteur intrinsèque légèrement plus grande qu'un
	   <a>/<input> avec le même padding/font-size (quirk du navigateur, pas de
	   Bootstrap : line-height calculé "normal" a un box de rendu différent
	   pour les form controls) — ex. le bouton "GO" plus haut que le bouton
	   d'édition (icône dans un <a>) sur membres.php?p=tools, alors que les
	   deux ont "btn-sm". line-height:1 aligne la hauteur de tous les .btn,
	   quel que soit l'élément HTML sous-jacent. */
	line-height: 1;
}

.form-control, .form-select
{
	border-radius: var(--bs-border-radius-sm);
}

.form-control:focus, .form-select:focus
{
	border-color: var(--ocean-light);
	box-shadow: 0 0 0 0.2rem rgba(15, 139, 141, 0.2);
}

/***************** left menu ******************/

#leftmenu
{
	grid-area: leftmenu;
	padding: 0px;
	width: 100%;
	min-width: 0;
	color: inherit;
	font-weight: bold;
	margin-top: 10px;
}

.menu
{
	background: #ffffff;
	border: none;
	border-radius: 14px;
	padding: 12px 14px;
	margin: 0px 0px 14px 0px;
	box-shadow: 0 8px 20px rgba(3, 43, 63, 0.07);
	color: var(--ocean-deep);
}

.menu img
{
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.menu iframe
{
	width: 100%;
	max-width: 100%;
	border: 0;
	/* The embed's own scrolling="no" attribute isn't reliably honored by modern
	   browsers; this suppresses the Google Calendar iframe's native scrollbar. */
	overflow: hidden;
}

.menu ul
{
	text-align: left;
	margin: 0px;
	padding-left: 0px;
	padding-top: 6px;
	padding-bottom: 2px;
}

.menu li
{
	list-style-type: none;
	border-top: 1px solid var(--sand);
}

.menu li a
{
	display: block;
	padding: 6px 4px;
	color: var(--ink);
	font-weight: 500;
}

.menu li a:hover
{
	color: var(--coral-dark);
}

.menu a[style*="color:blue"]
{
	color: var(--coral-dark) !important;
	font-weight: 600;
}

.menu ul ul
{
	text-align: left;
	margin: 0px;
	padding-left: 12px;
	border: 0px;
}

.menu ul ul li
{
	color: var(--ocean-light);
	background-color: inherit;
	list-style-type: circle;
	border: 0px;
	font-size: 10pt;
}

/* wikiedit */

/*.toolbar tr { background: ButtonFace; }*/
.toolbar .btn-, .toolbar  .btn-hover,  .toolbar .btn-active,
.toolbar .btn-pressed {
/*	background: ButtonFace;*/
	color: ButtonText;
	border: 1px solid ButtonFace;
	padding: 1px;
	margin: 0px;
	cursor: pointer;
}
.toolbar .btn- img  { width: 20px; height: 20px; }
.toolbar .btn-hover { border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight; }
.toolbar .btn-active,
.toolbar .btn-pressed { border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow; }
.toolbar .btn-pressed { background: ButtonHighlight; }
.editornamecss { background-color:#CCCCFF; font-size: 18px; padding: 0 10px; }