/*
 * Skin Light: modern skin inspired by IcyBlue.
 * Plain CSS (custom properties, grid, flex), no script, light and dark themes, print rules.
 * The menu opens with a checkbox on small screens (see Menu/menu.xsl).
 */

/* ---------- Colors ---------- */
:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #1d2733;
	--muted: #566678;
	--link: #0a4fa3;
	--link-hover: #072f66;
	--panel: #f4f9ff;
	--panel-2: #ecf4ff;
	--strong: #c0dcff;
	--line: #bcd3ef;
	--accent: #660000;
	--h2: #b8470a;
	--h3: #006600;
	--h4: #006666;
	--top-1: #3a72c4;
	--top-2: #1e4f9c;
	--on-top: #ffffff;
	--shadow: 0 .1rem .6rem rgba(0, 30, 80, .18);
	--radius: .6rem;
	--menu-width: 15rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #10151c;
		--fg: #e4eaf2;
		--muted: #9fb0c3;
		--link: #8db9ff;
		--link-hover: #c4dcff;
		--panel: #172130;
		--panel-2: #1c2a3d;
		--strong: #2a4468;
		--line: #33496a;
		--accent: #ffb199;
		--h2: #ffae7a;
		--h3: #8fd68f;
		--h4: #7fd6d6;
		--top-1: #27487c;
		--top-2: #142a4e;
		--shadow: 0 .1rem .6rem rgba(0, 0, 0, .5);
	}
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	overflow-wrap: break-word;
}

img, video, iframe, svg { max-width: 100%; height: auto; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

:focus-visible {
	outline: .15rem solid var(--link);
	outline-offset: .15rem;
}

h1, h2, h3, h4, h5, h6 { line-height: 1.25; margin: 1.4em 0 .5em; }
h1 { color: var(--accent); font-size: clamp(1.5rem, 1.1rem + 2vw, 2.1rem); margin-top: .2em; }
h2 { color: var(--h2); font-size: 1.5rem; }
h3 { color: var(--h3); font-size: 1.25rem; }
h4 { color: var(--h4); font-size: 1.1rem; }
h5, h6 { color: var(--muted); font-size: 1rem; }

p, ul, ol, dl, blockquote { margin: .8em 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 1.5rem 0; }

table { border-collapse: collapse; max-width: 100%; }
th, td { padding: .3rem .6rem; vertical-align: top; }
th { text-align: left; }

/* ---------- Page layout ---------- */
.site {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas: "top" "menu" "main" "foot";
	min-height: 100vh;
	min-height: 100dvh;
}

.topbar { grid-area: top; }
.menuwrap { grid-area: menu; }
.site > main { grid-area: main; padding: 1rem; min-width: 0; }
.sitefoot { grid-area: foot; }

@media (min-width: 52rem) {
	.site {
		grid-template-columns: var(--menu-width) minmax(0, 1fr);
		grid-template-rows: auto 1fr auto;
		grid-template-areas: "top top" "menu main" "foot foot";
	}
	.site > main { padding: 1.5rem clamp(1rem, 3vw, 3rem); }
	.menuwrap {
		align-self: start;
		position: sticky;
		top: 0;
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
	}
}

/* ---------- Top bar ---------- */
.topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .5rem 1rem;
	padding: .5rem 1rem;
	background: linear-gradient(var(--top-1), var(--top-2));
	color: var(--on-top);
	box-shadow: var(--shadow);
}

.brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	color: var(--on-top);
	text-decoration: none;
	font-size: 1.15rem;
	font-weight: 700;
}
.brand:hover { color: var(--on-top); }
.brand img { flex: none; }

.tools {
	display: flex;
	align-items: center;
	gap: .5rem 1rem;
	flex-wrap: wrap;
}
.tools a, .tools summary, .tools .user { color: var(--on-top); }

.languages { display: flex; gap: .3rem; }
.languages a { display: block; padding: .5rem .3rem; line-height: 0; }
.languages img { display: block; border: 1px solid rgba(255, 255, 255, .6); border-radius: .15rem; }

.session { display: flex; gap: .7rem; align-items: center; font-size: .95rem; }
.session a { padding: .5rem 0; }
.session .user { font-weight: 700; }

.skinselect { position: relative; font-size: .95rem; }
.skinselect summary { cursor: pointer; padding: .5rem 0; list-style: none; }
.skinselect summary::-webkit-details-marker { display: none; }
.skinselect summary::after { content: " \25BE"; }
.skinselect ul {
	position: absolute;
	right: 0;
	z-index: 10;
	min-width: 9rem;
	margin: 0;
	padding: .3rem 0;
	list-style: none;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
.skinselect li a {
	display: block;
	padding: .6rem 1rem;
	color: var(--link);
	text-decoration: none;
}
.skinselect li a:hover { background: var(--strong); }
.skinselect li a[aria-current] { font-weight: 700; }

/* ---------- Menu ---------- */
.menuwrap {
	background: var(--panel);
	border-bottom: 1px solid var(--line);
}
@media (min-width: 52rem) {
	.menuwrap {
		border-bottom: 0;
		border-right: 1px solid var(--line);
		margin: 0;
	}
}

.skip {
	position: absolute;
	left: -999px;
	top: 0;
	z-index: 20;
	padding: .6rem 1rem;
	background: var(--bg);
	color: var(--link);
}
.skip:focus { left: .5rem; top: .5rem; }

.navtoggle {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.navbutton {
	display: flex;
	align-items: center;
	gap: .6rem;
	min-height: 3rem;
	padding: 0 1rem;
	font-weight: 700;
	color: var(--accent);
	background: var(--panel-2);
	cursor: pointer;
	user-select: none;
}
.navbutton::before { content: "\2630"; font-size: 1.4rem; line-height: 1; }
.navtoggle:checked + .navbutton::before { content: "\2715"; }
.navtoggle:focus-visible + .navbutton { outline: .15rem solid var(--link); outline-offset: -.2rem; }

.menu { display: none; }
.navtoggle:checked ~ .menu { display: block; }

.menu ul { list-style: none; margin: 0; padding: 0; }
.menu a, .menu .current {
	display: block;
	padding: .75rem 1rem;
	font-weight: 700;
	text-decoration: none;
	color: var(--accent);
	border-top: 1px solid var(--line);
}
.menu a:hover { background: var(--strong); color: var(--accent); }
.menu a[aria-current] { background: var(--panel-2); }
.menu .current { background: var(--strong); }

.menu .submenu { background: var(--bg); }
.menu .submenu a, .menu .submenu .current {
	padding-left: 1.8rem;
	font-size: .92em;
	font-weight: 400;
	color: var(--link);
}
.menu .submenu .submenu a, .menu .submenu .submenu .current { padding-left: 2.6rem; }
.menu .submenu .current { color: var(--fg); font-weight: 700; }

@media (min-width: 52rem) {
	.navbutton { display: none; }
	.menu { display: block; }
	.menu > ul > li:first-child > a, .menu > ul > li:first-child > .current { border-top: 0; }
}

/* ---------- Content ---------- */
.pageContent { max-width: 62rem; margin: 0 auto; }
.pageContent a.presentation {
	display: block;
	margin: 1rem 0;
	color: inherit;
	text-decoration: none;
}

.slideshow {
	display: flex;
	gap: .75rem;
	max-width: 600px;
	margin: 1rem auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: thin;
	border-radius: var(--radius);
}
.slideshow img {
	flex: 0 0 100%;
	scroll-snap-align: center;
	aspect-ratio: 2 / 1;
	object-fit: cover;
	border-radius: var(--radius);
}

/* Local style of the home page (styleindex.css): keep it inside small screens */
.affiche { max-width: 100% !important; }

.pictures_frame {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: 1rem 0;
}
figure { margin: 0; }
.picture { text-align: center; font-size: .9rem; }
.picture img, .polaroid img { display: block; margin: 0 auto; }
.framed img {
	border: .35rem solid var(--panel);
	border-radius: .25rem;
	box-shadow: var(--shadow);
}
.polaroid {
	display: inline-block;
	max-width: 100%;
	margin: .5rem;
	padding: .5rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	text-align: center;
	vertical-align: top;
}
.polaroid img { border: 0; box-shadow: none; }
.polaroid figcaption { padding-top: .4rem; font-size: .9rem; }

.alignleft { float: left; margin: 0 1rem .5rem 0; }
.alignright { float: right; margin: 0 0 .5rem 1rem; }
.aligncenter { display: block; margin: .5rem auto; }
@media (max-width: 35rem) {
	.alignleft, .alignright { float: none; display: block; margin: .5rem auto; }
}

/* Boxes (guest book, news, links...) */
.zone {
	margin: 1rem 0;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}
.zone .head, .zone .foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .2rem 1rem;
	padding: .5rem .9rem;
	background: var(--strong);
	font-weight: 700;
}
.zone .foot { font-weight: 400; font-size: .9rem; }
.zone .head a:not([href]), .zone .foot a:not([href]) { color: inherit; text-decoration: none; }
.zone .head_center, .zone .foot_center { margin: 0 auto; }
.zone .content { padding: .7rem .9rem; }
.zone .content > :first-child { margin-top: 0; }
.zone .content > :last-child { margin-bottom: 0; }
.zone .actions { padding: 0 .9rem .7rem; }
.zone .actions form { display: inline-block; margin-right: .5rem; }
.zone.expired { opacity: .65; }
.zone p.message { margin: .5rem .9rem; }

.dynpicture { margin: 1rem 0; text-align: center; }

/* Page navigation */
.Navi {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 1rem 0;
}
.Navi a, .Navi .NaviNbPage {
	min-width: 2.75rem;
	padding: .55rem .8rem;
	text-align: center;
	border: 1px solid var(--line);
	border-radius: .4rem;
}
.Navi a { background: var(--panel); text-decoration: none; font-weight: 700; }
.Navi a:not([href]) { opacity: .4; }
.Navi a[href]:hover { background: var(--strong); }
.Navi .NaviNbPage { border-color: transparent; }

/* ---------- Forms ---------- */
form { margin: 1rem 0; }
fieldset {
	margin: .8rem 0;
	padding: .6rem .9rem .9rem;
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
legend { padding: 0 .4rem; font-weight: 700; }
label { display: inline-block; margin: .3rem 0; }

input, textarea, select, button {
	font: inherit;
	color: inherit;
	max-width: 100%;
}
input:not([type]), input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="tel"], input[type="date"], input[type="number"], textarea, select {
	width: 100%;
	max-width: 36rem;
	padding: .55rem .7rem;
	background: var(--bg);
	border: 1px solid var(--line);
	border-radius: .4rem;
}
textarea { min-height: 8rem; max-width: 100%; }
input[type="checkbox"], input[type="radio"] { width: 1.2rem; height: 1.2rem; vertical-align: middle; }

button, input[type="submit"], input[type="button"] {
	min-height: 2.75rem;
	padding: .5rem 1.2rem;
	color: #fff;
	background: var(--top-2);
	border: 0;
	border-radius: .4rem;
	cursor: pointer;
	font-weight: 700;
}
button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: var(--top-1); }

.action_result, p.message, .message {
	margin: 1rem 0;
	padding: .6rem .9rem;
	background: var(--panel-2);
	border-left: .3rem solid var(--link);
	border-radius: .3rem;
}

/* ---------- Gallery (replaces root/spc/gallery/stylegallery.css) ---------- */
/* Thumbnails: a grid that follows the width of the screen */
.polarzone {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 1rem;
	margin: 1.2rem 0;
}
.polarzone .spacer { display: none; }
.polarzone .polaroid {
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	text-align: left;
}
.polarzone .polaroid a.photo { display: block; overflow: hidden; border-radius: var(--radius); box-shadow: var(--shadow); }
/* reserved ratio: the layout does not jump when the pictures are loaded */
.polarzone .polaroid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .25s ease;
}
.polarzone .polaroid a.photo:hover img, .polarzone .polaroid a.photo:focus-visible img { transform: scale(1.05); }
.polarzone .polaroid figcaption { padding: .4rem .1rem 0; font-size: .92rem; }
.polarzone .polaroid .title { color: var(--accent); }
.polaroid .actions { padding: .3rem 0 0; }
.polaroid .actions form { display: inline-block; margin: .2rem .4rem .2rem 0; }

/* One picture: the whole width available (the grid of the thumbnails does not apply) */
.photo_one .polarzone { display: block; margin: 1rem 0; }
.photo_one .polarzone .polaroid { width: 100%; margin: 0; text-align: center; }
.photo_one .polarzone .polaroid a.photo { display: block; box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.photo_one .polarzone .polaroid img {
	width: 100%;
	height: auto;
	max-height: 85vh;
	aspect-ratio: auto;
	object-fit: contain;
	background: var(--panel);
	transform: none;
}
.photo_one .polarzone .polaroid figcaption { padding-top: .6rem; font-size: 1rem; text-align: center; }
.photo_one .polaroid figcaption > br:first-child { display: none; }

/* List of the galleries: banner with the titles as buttons */
.cont_kateimg {
	display: flex;
	align-items: flex-end;
	min-height: clamp(14rem, 40vw, 22rem);
	margin: 1.2rem 0;
	overflow: hidden;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	background: linear-gradient(transparent 40%, rgba(0, 0, 0, .55)), url("../../../root/spc/gallery/__pictures__/SPC_00012.jpg") center / cover no-repeat;
}
.cont_photos {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	width: 100%;
	padding: 1rem;
}
a.title_kate {
	padding: .6rem 1.1rem;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 2rem;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
a.title_kate:hover, a.title_kate:focus-visible { color: #fff; background: rgba(255, 255, 255, .35); }

/* ---------- Footer ---------- */
.sitefoot {
	padding: 1rem;
	text-align: center;
	font-size: .85rem;
	color: var(--muted);
	background: var(--panel);
	border-top: 1px solid var(--line);
}
.sitefoot p { margin: 0; }

/* ---------- Motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
	.slideshow { scroll-behavior: auto; }
}

@media print {
	:root { color-scheme: light; --bg: #fff; --fg: #000; --accent: #000; --h2: #000; --h3: #000; --h4: #000; --link: #000; }
	.site { display: block; }
	.topbar, .menuwrap, .sitefoot, .Navi, .actions, .skip { display: none !important; }
	.site > main { padding: 0; }
	.zone, .framed img, .polaroid { box-shadow: none; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}