:root {
	--fw-regular: 400;
	--fw-bold: 600;
	--radius-theme: 3px;
}
html { height: 100%; -webkit-tap-highlight-color: transparent; -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none }
body { color: var(--color-txt); background: var(--color-bg-tone-2); margin: 0; padding: 0; font-family: 'Open Sans', Tahoma, Verdana, Arial, Helvetica; font-weight: 400; font-size: 14px }
td { font-size: 14px } /*debug mode => quirks mode*/
h1, .h1, h2, .h2, h3 { color: var(--color-brand); font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 400; margin: 2em 0 0.8em }
h1, .h1 { font-size: 1.6em }
h1 a:link, h1 a:visited { color: var(--color-brand); text-decoration: none }
h1 a:active, h1 a:hover { text-decoration: underline }
h1 img { vertical-align: middle; display: inline-block; width: 1em; height: 1em; overflow: hidden; filter: var(--color-tone-9-svg) }
.h-search { margin: -.15em 0.05em 0 0; filter: var(--color-brand-svg) }
.h-caret { margin: 0 -.1em }
.h-caret-end { margin-left: -.1em }
h2, .h2 { font-size: 1.3em }
.pg-accueil h2 { text-align: center; font-size: 1.8em }
h3 { font-size: 1.15em }
hr { margin: 1em 0; height: 1px; border: 0; border-top: 1px solid var(--color-tone-1) }
p { margin: 1em 0 }
p, li, td { line-height: 1.6em }
ul, ol { margin: 1em 0 1em 3em; padding: 0 }
ul { list-style-type: square }
li { margin: 0.6em 0; padding: 0 }
strong, b { font-weight: 700; filter: alpha(opacity=95); -moz-opacity: 0.95; opacity: 0.95 } /* b : compat old lang strg */
a:not(.smart-button):link, a:not(.smart-button):visited, summary { color: var(--color-txt-link); cursor: pointer }
a:not(.smart-button):active, a:not(.smart-button):hover, a:not(.smart-button).focus:focus, summary:hover { color: var(--color-txt-red) }
summary { display: inline-flex; align-items: center; list-style: none }
summary span { text-decoration: underline }
summary::-webkit-details-marker { display: none }
summary::before { content: ''; background: var(--url-select) no-repeat center/contain; width: .7em; height: .7em; margin-right: .6em; transition: transform 0.2s ease; display: inline-block; transform-origin: center }
details[open] summary::before { transform: rotate(180deg) }
.no_ul a { text-decoration: none }
.no_ul a:active, .no_ul a:hover, .no_ul a.focus:focus { text-decoration: underline }
img { border: 0; image-rendering: -webkit-optimize-contrast; image-rendering: optimizeQuality; max-width: 100%; height: auto }
h1:first-child, h2:first-child, h3:first-child, div:first-child, p:first-child, ul:first-child { margin-top: 0 }
div:last-child, p:last-child, ul:last-child  { margin-bottom: 0 }
td { vertical-align: top }
tbody:first-child > tr:first-child > td:first-child { border-top-left-radius: 3px } /* tbody : edit pg */
tbody:first-child > tr:first-child > td:last-child { border-top-right-radius: 3px }
tbody:last-child > tr:last-child > td:first-child { border-bottom-left-radius: 3px }
tbody:last-child > tr:last-child > td:last-child { border-bottom-right-radius: 3px }

/* border-box */
img, .ul-lb, .txt-img-txt, #corp, #corp_slim, #login, #temoignages-h li { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box }

.sortable { cursor: move }
.cadre { border-radius: 3px }
.italic { font-style: italic }
.uline { text-decoration: underline; cursor: pointer }
.nline { text-decoration: none }
.small { font-size: 0.9em }
.default { cursor: default }
.center { text-align: center }
.right { text-align: right }
.noindex { display: none }
.no-wrap { white-space: nowrap }
.transp { opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0) }

.txtref { font-size: .9em; color: var(--color-tone-9)!important; background: var(--color-bg-tone-2); white-space: nowrap; border-radius: 3px; padding: 0 .2em; display: inline-block; cursor: text }
.lightbox, .errorbox { margin: 1.5em 0;  background: var(--color-bg-brand-2); padding: 1em; border-radius: 6px; overflow:auto; color: var(--color-txt-bg) }
.lightbox2 { background: var(--color-bg-tone-1); color: var(--color-txt) }
.errorbox { background: var(--color-bg-red) }
.errorbox a:active, .errorbox a:hover { color: var(--color-txt) }
.lightbox ul, .errorbox ul { list-style-type: disc }
.lightbox .txtref, .errorbox .txtref { background: var(--color-tone-0) }
.erreurinfo::before { content: "» "; font-size: 1.6em }
.erreur, .erreurinfo { color: var(--color-txt-red) }
.valide { color: #6EB558 }
.erreur a:link, .erreurinfo a:link, .erreurinfo a:visited { color: var(--color-txt-red) }
.erreur a:active, .erreurinfo a:active, .erreurinfo a:hover { color: var(--color-txt-link) }
.pagination { word-spacing: 0.2em }
.pagination .on { color: var(--color-brand); font-weight: bold }
.altern-1 { padding: 4px; background: var(--color-bg-tone-2) }
.altern-2 { padding: 4px; background: var(--color-bg-tone-1) }
.altern-color > :nth-child(odd) { background: var(--color-bg-tone-2) }
.altern-color > :nth-child(even) { background: var(--color-bg-tone-1) }
.altern-color2 > :nth-child(4n+1),
.altern-color2 > :nth-child(4n+2) { background: var(--color-bg-tone-2) }
.altern-color2 > :nth-child(4n+3),
.altern-color2 > :nth-child(4n+4) { background: var(--color-bg-tone-1) }
.more::before { color: var(--color-brand); content: "»"; display: inline-block; font-size: 1.6em; margin-right: 0.2em; text-decoration:underline; font-weight: 600 }
.more::before { text-decoration:none } /* bug ie11 */
.clear { clear: both; display: block; height: 1px; overflow: hidden; margin: 0; padding: 0 }
.pseudo { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 400 }
.pseudo:link, .pseudo:visited { color: var(--color-brand) }
.pseudo:active, .pseudo:hover { color: var(--color-txt-red) }

/* IR */
.ir { margin: 0 auto; height: 5px; width: 59px; position: relative; background: repeating-linear-gradient(to right, var(--color-tone-5), var(--color-tone-5) 5px, var(--color-bg-ir) 5px, var(--color-bg-ir) 6px) }
.ir div { position: absolute; height: 100%; background: var(--color-bg-ir); right: 0 }
.ir9 div { width: 10% } .ir8 div { width: 20% } .ir7 div { width: 30% }
.ir6 div { width: 40% } .ir5 div { width: 50% } .ir4 div { width: 60% }
.ir3 div { width: 70% } .ir2 div { width: 80% } .ir1 div { width: 90% }
.ir0 div { width: 100% }

/* Image append */
.img-append { max-width: 100%; position: relative }

/* Image carrée preload responsive */
.img-o { max-width: 100%; overflow: hidden; position: relative }
.img-o div { padding-top: 100% }
.img-o img { display: block; position: absolute; top: 0 }
.img-o.l img { left: -1000%; right: -1000%; margin: 0 auto; height: 100%; max-width: none }
.img-o.p img { width: 100% }
.img-o img:first-child { z-index: 1 }

/* Tableaux */
.table { border-spacing: 0; border-collapse: collapse }
.table td { border: 1px solid var(--color-tone-0); padding: 0.45em }
.table100, .td100 { width: 100% }
.table-t { padding: .4em .5em; background: var(--color-bg-tone-2); font-weight: 600 }
.selects-list { border-collapse: collapse }
.selects-list td { padding: 0 0 3px }
.selects-list img { vertical-align: middle; width: 16px; height: 16px }

/* List Label / Action */
.lb-ac, .ul-ac { list-style-type: none; margin-left: 0 }
.lb-ac > li { margin: 15px 0; border-radius: 3px; overflow: hidden; } /* 12=>15px bug scroll touch punch*/
.ul-lb { height: 2.6em; line-height: 2.6em; float:left; background: var(--color-bg-tone-2); padding:0 10px }
.ul-lb-container { display: flex }
.ul-lb-wrap { overflow: hidden; white-space: nowrap; text-overflow: ellipsis }
.ul-lb-info { margin-left: 4px; cursor: auto }
.ul-ac { margin-top: 0; background: var(--color-bg-tone-1) }
.ul-ac li { height: 2.6em; line-height: 2.6em; margin: 0; display: inline-block; padding:0 9px }
.ul-ac li:last-child { padding-right: 0 }
.hlk { cursor: pointer }
.ul-center { text-align: center; margin: 0 }
.ul-center li { display: inline-block; margin: 0.3em 1em }

/* Header */
#wait { z-index: 10000000; position: fixed; top: 0; left:0; width: 100%; height: 100%; background: var(--tone-9-opa-1) } /* 9999999+2 */
#header { background: var(--color-bg-header); overflow: auto; position: sticky; top: 0; z-index: 9999999 }
#header > div { margin: 0 auto; width: 960px; max-width: 100% }
#savedata_ok { z-index: 10000000; position: fixed; top:20px; left: 50%; transform: translate(-50%, -50%); padding: 0.4em 0.5em; background: #fff; color: #555; font-size: 0.9em; white-space: nowrap; border-radius:0.2em; animation: fadeOut 1.2s ease 1.3s forwards } /* 9999999+1 */ /* light: --color-txt */
@keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } }
#logo img { float: left; display: block; margin: 6px 0; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(354deg) brightness(103%) contrast(103%) } /* #fff */
#lang_switch { float: right; padding: 1px 6px 2px; background: #fff; font-size: 11px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px }
#lang_switch a { text-decoration: none; color: #000 }
@media screen and (max-width: 329px) { #lang_switch { padding: 1px 2px } }
#menu { display: flex; justify-content: space-between; position: relative; padding-right: 6px }
#menu a { margin: 7px 0 0 20px; padding-bottom: 5px; line-height: 1em; font-weight: 600; text-decoration: none}
.menu_bt span, #hsl h1 a { background: var(--color-bg-header-btn); display: block; padding: 6px 11px; text-decoration: none; color: #fff!important; border-radius: 3px } /* light: --color-brand */
.menu_bt:hover span, #hsl h1 a:hover { background: var(--color-bg-header-btn-hover) } /* light: --color-bg-brand-5 */
.menu_lk { text-decoration: none; color: #fff!important }
.menu_lk span { display:block; border-top: 2px solid transparent; border-bottom: 2px solid #fff; line-height: 1.5em }
.menu_lk img { width: 0.9em; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(354deg) brightness(103%) contrast(103%) }
.menu_user { margin: 3px 0 0 20px!important; padding-bottom: 0!important }
#menu_user_down_div { position: relative }
.menu_user_img { width: 34px; border-radius: 5px }
#menu_user_down { position: absolute; right: 0; bottom: 0; background: #fff; display: inline-block; width: 1.2em; height: 1.2em; font-size: .6em; border-radius: 50%; line-height: 1em; z-index: 1 }
@media screen and (max-width: 550px) {
	.en #logo img { height: 21px; width: 107px; margin: 4px 0 4px 4px }
	.fr #logo img { height: 21px; width: 103px; margin: 4px 0 4px 4px }
	#menu { padding-right: 4px }
	#menu a { margin: 4.5px 0 0 10px; padding-bottom: 2px; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 400; font-size: 0.9em; white-space: nowrap }
	.menu_bt span { padding: 4px 5px }
	.menu_lk span { border-width: 1px; line-height: 1.4em }
	.menu_user { margin: 2px 0 0 10px!important }
	.menu_user_img { width: 25px }
	#sticky-pg-options { top: 29px!important }
}
#login-switch-2 { display: none }
@media screen and (max-width: 374px) {
	#login-switch-1 { display: none }
	#login-switch-2 { display: block; border: none }
	#login-switch-2 img { display: block; width: 1.58em }
}
@media screen and (max-width: 329px) { .en .menu_lk img { display: none } }
@media screen and (max-width: 315px) { .fr .menu_lk img { display: none } }

/* Footer */
#footer, #footer-infinite { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif }
#footer { padding:.9em 0; text-align: center }
#footer-btm { margin-top: -.3em; font-size: 0.85em }
#footer-infinite { margin: 1.6em 0 1em; font-size: 0.85em }
#footer p, #footer-infinite p { margin: 0.3em 0 }
#footer-btm, #footer-infinite, #footer-btm a , #footer-infinite a { color: var(--color-tone-5); text-decoration: none }
#footer-btm a:hover , #footer-infinite a:hover { color: var(--color-tone-9) }
.footer-brands { width: 1.1em; filter: var(--color-tone-5-svg); vertical-align: middle; position: relative; top: -.1em }
.footer-brands:hover { filter: var(--color-tone-9-svg) }
@media screen and (max-width: 409px) {
	#footer .sb-xs { font-size: .9em }
	#footer-btm p > span { display: block; visibility: hidden; margin-top: -1.4em }
}

/* Contact / Back Top */
#footer-contact-top { position: fixed; bottom: 6px; right: 6px; z-index: 1000; display: flex; gap: 6px; align-items: center }
#footer-contact-top div, #footer-contact-top a { display: inline-block; width: 28px; height: 28px; line-height: 30px; text-align: center }
#footer-contact-top div { background: var(--color-tone-9) }
#footer-contact-top div:hover { background: var(--color-tone-7) }
#footer-contact-top a { background: var(--color-brand) }
#footer-contact-top a:hover { background: var(--color-bg-brand-5) }
.bounce { animation: bounce .5s ease }
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
  40% { transform: translateY(-4px) }
  60% { transform: translateY(-2px) }
}
#footer-contact-top svg { color: var(--color-tone-0); margin-bottom: 1px }
@media screen and (max-width: 1100px) {
	#footer-contact-top { right: unset; left: 6px; flex-direction: row-reverse }
}

/* Corp */
#site { padding: 2em 0; background: var(--color-tone-0); box-sizing: border-box }
#site > div { margin: 0 auto; width: 960px; max-width:100% }
#corp_slim { width: 780px; margin: 0 auto; max-width:100% }

/* Accueil */
#hsl { background: var(--color-tone-0); margin-bottom: -0.5em }
#hsl > div { position: relative; max-width: 960px; margin: 0 auto }
#hsl-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-bg-tone-2) no-repeat; background-size: cover }
#hsl-wrap { height:-webkit-calc(37vh); height:-moz-calc(37vh); height:calc(37vh); min-height: 200px; position:relative }
#hsl-wrap > div { display: table; width: 100%; height: 100%; text-align: center }
#hsl-wrap > div > div { display: table-cell; vertical-align: middle; text-shadow: 0 0 8px rgb(0,0,0) }
#hsl h1 { margin: 0; font-family: 'Open Sans', Tahoma, Verdana, Arial, Helvetica; font-size: 1em } /* font-size: 1.2em */
#hsl h1 a { display: inline-block; background-color: rgba(68,68,68,.75); box-shadow: 0 0 10px rgba(0,0,0,0.4);  }
#hsl h2 { font-size: 43px; color: #fff; margin: 0 0 -2px } /* font-size: 50px */
#hsl h3 { font-size: 34px; color: #fff; margin: 0 0 12px } /* font-size: 40px */
#hsl-copyright { display: block; position: absolute; right: 5px; bottom: 0 }
#hsl-copyright a { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; color: #fff!important; text-decoration: none; text-shadow: 0 0 4px rgba(0, 0, 0, 1) } /* font-size: 1.2em */
#spotlight { 
	/*height: 474px;*/
	height: 237px;
	overflow: hidden;
	text-align: center
}
#spotlight ul { width: calc(100% + 12px); margin: 0 }
#spotlight li { margin: 0 12px 12px 0; display: inline-block; vertical-align: top }
#spotlight img { display: block }
@media screen and (max-width: 510px) { 
	#spotlight {
		height: auto;
	}
	#spotlight li {
	    width: calc(50% - 24px);
	}
	#spotlight li:nth-child(n+5) {
    	display:none;
	}
}
figure.csw {
	display: inline-block;
	width:33.33%;
	margin: .7em 0 0 0;
	text-align: center;
	position: relative;
	font-size: 1.2em;
}
figure.csw img {
	object-fit: cover;
	height: 100px;
	width: calc(100% - 1em);
	display: block;
	margin: 0 auto;
}
figure.csw figcaption {
	text-align: center;
	font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
	font-weight: 400;
	position: absolute;
	bottom: 0;
	left: .5em;
	width: calc(100% - 1em);
	z-index:3;
	background:-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.6)));
	background:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.6) 100%);
	background:-moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.6) 100%);
	background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #fff;
	line-height: 1.3em;
	text-shadow: 0 0 1px rgba(0,0,0,0.6);
}
@media screen and (max-width:767px) {
	figure.csw {
		width: calc(50% - 0.2em);
		display: inline-block;
	}	
}

.txt-img { display: block; position: relative; overflow:hidden }
.txt-img-bg, .txt-img-txt { position: absolute; bottom: 0; width: 100%; z-index:3 }
.txt-img-bg-top, .txt-img-txt-top { bottom: auto; top: 0 }
.txt-img-bg { height: 22px; background:-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0,0,0,0.6))); background:-webkit-linear-gradient(top, transparent 0%, rgba(0,0,0,0.6) 100%); background:-moz-linear-gradient(top, transparent 0%, rgba(0,0,0,0.6) 100%); background:linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.6) 100%) }
.txt-img-bg-top { background:-webkit-gradient(linear, left bottom, left top, from(transparent), to(rgba(0,0,0,0.6))); background:-webkit-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%); background:-moz-linear-gradient(bottom, transparent 0%, rgba(0,0,0,0.6) 100%); background:linear-gradient(to top, transparent 0%, rgba(0,0,0,0.6) 100%) }
.txt-img-txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-size: 0.9em; padding: 0 2px; line-height: 1.3em; text-shadow: 0 0 1px rgba(0,0,0,0.6); text-align: center }
.txt-img-txt .svg-inline--fa { font-size: 1em }

/* Bibliotheque list */
#biblio-list { list-style-type: none; margin:0; text-align: center }
#biblio-list li { display: inline-block; text-align: left; margin: 0.75em 2px; position: relative }
#biblio-list .txt-img { cursor: pointer }
#biblio-list .img-o { width: 112px; cursor: move }
@media screen and (max-width: 979px) { #biblio-list .img-o { width: 90px } }
@media screen and (max-width: 800px) { #biblio-list .img-o { width: 81px } }
.biblio-check, .biblio-link { z-index: 3; position: absolute; top: 0; width: 26px; height: 26px; cursor: pointer }
.biblio-link { right: 0 }
.biblio-check div, .biblio-link div { background: var(--color-tone-0) }
.biblio-check div { width: 1.65em; height: 1.65em }
.biblio-link div { width: 0.75em; height: 0.75em; float: right; text-align: right; line-height: 0.8em }
.biblio-check label::before { width: 1.5em!important; height: 1.5em!important; background-size: 1.5em 1.5em !important; margin: -0.5em 0 0 -0.1em }
.biblio-link .fa-long-arrow-right { display: block; width: 0.8em; height: 0.8em; color: var(--color-tone-5); margin: -0.15em -0.15em 0 0; transform: rotate(-45deg) }
#biblio-list .ui-sortable-helper .biblio-check, #biblio-list .ui-sortable-helper .biblio-link, #biblio-list .ui-sortable-helper .txt-img-txt, #biblio-list .ui-sortable-helper .txt-img-bg { display: none }

#biblio-list .erreur{
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(0%, -50%);
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.85);
	padding: .2em;
	text-align: center;
}

/* Temoignages */
#temoignages {
	list-style-type: none;
	margin: 0
}
#temoignages li,
#temoignages-h li {
	margin: 0 0;
	padding: 1.5em;
	overflow: auto;

	padding: 1em;
	display: flex;
	align-items: center;
}
#temoignages li{
	margin: 1.5em 0;
}

.tem-txt {
	overflow: auto;
	margin-top: 1em
}
#temoignages-h .hlk{
	text-decoration: underline;
}
#temoignages strong, #temoignages-h strong { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 400 }
#temoignages .img-o,
#temoignages-h .img-o {
	width: 150px;
	border-radius: 50%;
	margin-right: 1.5em
}
#temoignages .tem-txt,
#temoignages-h .tem-txt {
	width: calc(100% - 3em - 150px);
}
#temoignages-link,
#temoignages [id^=ttgb],
#temoignages-h [id^=ttgb] {
	float: right
}

/* Temoignages home */
#temoignages-h { list-style-type: none; margin: 0; overflow: auto; display: flex }
#temoignages-h li { padding: 1.5em; border: 1px solid var(--color-bg-tone-2); width: 474px; float: left }
#temoignages-h li:first-child { margin-right: 12px }
@media screen and (max-width: 980px) {
	#temoignages-h {
		display: list-item
	}
	#temoignages-h li {
		width: 100%
	}
	#temoignages-h li:first-child {
		margin-bottom: 1em
	}
}

@media screen and (max-width: 480px) {
	#temoignages .img-o,
	#temoignages-h .img-o{
		margin-right: 1em;
		width: 25%;
	}
	#temoignages .tem-txt,
	#temoignages-h .tem-txt{
		width: calc(75% - 1em);
	}
}

/* Recherche */
#headerb { display: flex; flex-direction: row }
#headerb-btns { margin-left: auto }
#annu-result { margin: 0; list-style-type: none; width: 100%; width: calc(100% + 2px) }
#annu-result li {  margin: 0 0 28px; display: block; float: left; width: 25% }
@media screen and (max-width: 665px) { #annu-result li { width: 33.33% } #annu-li7, #annu-li8 { display: none!important } }
@media screen and (max-width: 500px) { #annu-result li { width: 50% } #annu-li5, #annu-li6 { display: none!important }}
@media screen and (min-width: 980px) { .annu-result-home li { width: 33.33%!important } #annu-li7, #annu-li8 { display: none!important } }

.annu-div { text-align: center; padding-bottom: 59px; margin-right: 2px; position: relative; z-index: 1; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 400 }
.annu-div a { display: block; position: absolute; width: 100%; height: 100%; z-index: 2 }
.annu-div strong { display: block; position: absolute; width: 100%; bottom: 31px; font-weight: 400; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.annu-div .img-o { width: 200px; text-align: left; margin: 0 auto }
.annu-div .bot { position: absolute; width: 100%; bottom: 0 }
.annu-div p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 1.4em }
.annu-cat { color: var(--color-txt-link); font-size: 0.85em }
.annu-geo { color: var(--color-tone-5); font-size: 0.75em }
.annu-ir { height: 7px; padding-top: 4px }
.newbook { font-weight: 600; font-size: 0.7em; color: var(--color-brand); margin-top: -4px!important; text-align: center }
.isvisited, .fvisited { text-decoration: none }
.isvisited strong, .fvisited strong { color: var(--color-brand) }
a.isvisited:visited strong, a.fvisited strong { color: var(--color-tone-5) }
a.isvisited:hover strong, a.fvisited:hover strong { color: var(--color-txt-red) }
.ComboCheckBoxes div { overflow: auto }
.ComboCheckBoxes div div { float: left; margin-right: .5em }
.ComboCheckBoxes div div:last-child { margin-right: 0 }
.ComboCheckBoxes p { text-transform: uppercase; font-size: 9px; color: var(--color-tone-5); margin: 6px 0 }
#browse-cat { list-style-type: none }

/* Spotlight */
.img-j { float: left }
.img-j-lastrow, .img-j-lastrow ~ .img-j { display: none }
.img-j img { max-width: 100%; max-height: 100% }
#spotlight-search { overflow: auto; margin-bottom: -10px }

/* Login */
#login { max-width: 650px; margin: 0 auto }

/* Admin */
.disabled, a.disabled { color: var(--color-tone-5) }
label.disabled { cursor: default }
.disabled-pic { -moz-opacity: 0.40; opacity: 0.40; filter: alpha(opacity=40) }
[class^='help-'] { display: inline-block; width: 24px; height: 24px; vertical-align: bottom }
.help-link { background-image: var(--url-help-link) }
.help-image { background-image: var(--url-help-image) }
.help-media { background-image: var(--url-help-media) }

/* Admin Header */
#header_admin { margin-bottom: 1.6em }
#header_admin a { margin-right: 0.6em }
#sticky-wrapper { display: flex; align-items: flex-start }
/* sticky-bar scrollbar visible via js :has-scrol */
#sticky-bar { width: 220px; position: sticky; top: 60px; max-height: calc(100vh - 60px); overflow-y: hidden }
#sticky-bar.has-scroll:hover { overflow-y: auto; width: 228px; padding-right: 2px }
#sticky-bar::-webkit-scrollbar { width: 8px; background-color: var(--color-bg-tone-1) }
#sticky-bar::-webkit-scrollbar-thumb { background-color: var(--color-tone-2) }
@-moz-document url-prefix() { #sticky-bar:hover { scrollbar-width: thin } } /* Firefox thin = 8px */
.sticky-menu { list-style-type: none; margin: 1.2em 0 0; border-radius: 3px; background: var(--color-bg-tone-1); font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-size: 1.1em }
.sticky-menu li { margin: 0 }
.sticky-menu .sep { display: block!important; margin-top: .3em; padding-top: .36em; position: relative }
.sticky-menu .sep::before { content: ""; display: block!; width: 96%; height: 1px; background-color: var(--color-bg-tone-2); margin: 0 auto; position: absolute; top: 0; left: 0; right: 0 }
.sticky-menu a { display: block; padding: 0.13em 0.65em; text-decoration: none; border-radius: 3px; position: relative }
.sticky-menu a:hover { color: var(--color-txt-link); background: var(--color-bg-tone-2) }
.sticky-menu a.active { color: var(--color-txt-link); background: var(--color-bg-brand-2) }
.sticky-menu .fa-fw { position: relative; top: 1px; margin-right: 0.4em }
.sticky-menu .close::after { content: "✖"; position: absolute; right: 0.65em; top: 50%; transform: translateY(-50%); font-size: .9em; color: var(--color-brand) }
@media screen and (max-width: 385px) {
	.sticky-menu-user { font-size:.85em!important }
}
#sticky-content { flex: 1; max-width: 720px; margin: 0 0 0 auto }

#sub_menu_admin, #sub_sub_menu_admin { list-style-type: none; overflow: auto; padding: 0; background: var(--color-bg-tone-1); border-radius: 3px }
#sub_menu_admin li, #sub_sub_menu_admin li { float: left; margin: 0 }
#sub_menu_admin { margin: 0 0 1.6em; text-transform: uppercase; font-size: .9em; text-transform: uppercase; font-weight: 600 }
#sub_sub_menu_admin { margin: -1em 0 1.6em; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-size: 1em; }
#sub_menu_admin a, #sub_sub_menu_admin a { display: block; padding: .5em 1em; text-decoration: none; color: var(--color-txt-link) }
#sub_menu_admin a:hover, #sub_sub_menu_admin a:hover { background: var(--color-bg-tone-2) }
#sub_menu_admin a.on, #sub_sub_menu_admin .active a { background: var(--color-bg-brand-2) }
.ui-sortable { user-select: none }
.ui-sortable-helper { box-shadow: 0 0 10px var(--tone-9-opa-3) }

/* Popup select js */
.pp-select { text-align: center }
.pp-select ul { list-style-type: none; margin: 0 }
.pp-select li { margin: 0; display: inline-block; text-align: center; padding: 6px }
.pp-select .img-o { width:140px; text-align: left }
#select_styles img { width:500px }
#TumbGal { width:250px }
.hack-top-border { display: inline-block; overflow: hidden }
.hack-top-border img { display: block; margin-top: -1px }

/* Photos */
#vignette-gal .img-o { width: 140px }
#sticky-pg-options { position: sticky; top: 40px; z-index: 4; background: var(--color-tone-0); padding: 0.3em 0; text-align: center }
.gal-pw { position: absolute; bottom: 0.4em; right: 0.5em; z-index: 1; font-size: 1.2em; color: #fff; filter:drop-shadow(0px 0px 5px #333) } /* idem à common.css */
.gal-pw .fa-lock { color: #fff } /* hack pour réparer truc zarbi hugo */

/* Commentaires */
#comment { table-layout: fixed; width: 100%; border-spacing: 0; word-wrap: break-word }
.com-about { border-top-left-radius: 3px; border-bottom-left-radius: 3px; width: 200px; vertical-align: top; text-align: center; padding: 1em; background: var(--color-bg-tone-2) }
.com-data { border-top-right-radius: 3px; border-bottom-right-radius: 3px; padding: 1em; background: var(--color-bg-tone-1) }
.com-sep { height: 12px }
.com-auth p { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0.2em 0 }

/* Statistiques */
.deploystat { overflow: auto }
.stats_tab { width: 100% }
.stats_td_1, .stats_td_2 { padding: 2px 6px; background: var(--color-bg-tone-1); white-space: nowrap; overflow: hidden; text-overflow: '' }
.stats_td_2 { background: var(--color-bg-tone-2) }
.stats_tabm { margin: 2em auto 0 }
.stats_tabm td { padding: 0.1em 1em; background: var(--color-tone-0) }
.stats_barre { background: #1177AA; height: 8px; margin-top:7px!important; min-width: 1px }
.positif { color: Green }
.negatif { color: var(--color-txt-red) }
#calandrier { width: 100% }
#calandrier td { background: var(--color-bg-tone-2); font-size: 0.9em; text-align: center; border-top-left-radius:0!important; border-top-right-radius:0!important }
#calandrier .select { background: var(--color-bg-red) }
#calandrier .vide { background: var(--color-bg-tone-1) }
#calandrier .jour { background: var(--color-bg-brand-2) }

/* Feed book */
.feed-book-list { list-style-type: none; margin: 0; overflow: auto }
.feed-book-list > li { margin: 0.6em 0; padding: 0.4em 0.4em 0 0; border-radius: 35px 6px 6px 35px; width: 49%; box-sizing: border-box; float: left; position: relative }
.feed-book-list > :nth-child(odd) { margin-right: 1% }
.feed-book-list > :nth-child(even) { margin-left: 1% }
.feed-book-list .img-o { width: 70px; border-radius: 50%; float: left; margin: -0.4em 1em 0 0 } /* srcset */
.feed-book-list > :nth-child(4n+1),
.feed-book-list > :nth-child(4n+2) { background: var(--color-bg-tone-2) }
.feed-book-list > :nth-child(4n+3),
.feed-book-list > :nth-child(4n+4) { background: var(--color-bg-tone-1) }
@media screen and (max-width: 580px) {
	.feed-book-list > li { width: 100%; margin: 0.6em 0!important }
	.feed-book-list > :nth-child(odd) { background: var(--color-bg-tone-2) }
	.feed-book-list > :nth-child(even) { background: var(--color-bg-tone-1) }
}
.feed-book-list-tt { width: 320px; max-width: calc(100vw - 18px) }
.feed-book-list-tt > li { width: 100%; margin: 0.25em 0!important }
.feed-book-list-tt > :nth-child(odd) { background: var(--color-bg-tone-2) }
.feed-book-list-tt > :nth-child(even) { background: var(--color-bg-tone-1) }
.feed-book-list p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.feed-book-list p:nth-of-type(2) { margin-top: 0.1em; color: var(--color-tone-5) }
.feed-book-list strong { font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-weight: 400 }
strong[class^=ttuser] { text-decoration:underline; cursor: pointer }

.f-bar { position: absolute; right: 0; top: 0; z-index: 3 }
.f-bar > div { cursor: pointer; float: left }
.f-button { padding: 6px }
.f-bar > div:nth-child(2) .f-button { margin-left: -3px; padding-left: 3px }
.f-button div { position: relative; font-family: 'Open Sans', Tahoma, Verdana, Arial, Helvetica; background: var(--color-tone-0); height: 1.7em; line-height: 1.7em; text-align: center; color: var(--color-tone-7); box-shadow: 0 0 5px var(--tone-9-opa-2); border-radius: 2px }
.fb-1 div { font-size: 0.9em; border-radius:3px; padding: 0 4px }
.fb-0 div { width: 1.53em; height: 1.53em }
.f-button img { filter: var(--color-tone-7-svg) }
.fb-0 img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0.87em } /* so-user-minus.svg */
.fb-1 img { display: inline-block; width: 0.8em; margin: -.5em .2em -.3em 0; vertical-align: middle } /* so-bars.svg */
.f-button-div-pos { position: relative; margin: 0 auto; max-width: 200px }
.f-button:hover div { color: var(--color-tone-9) }
.f-button:hover img { filter: var(--color-tone-9-svg) }

/* Langue */
.new { line-height: 1em }
.new::after { color: var(--color-brand); display: inline-block; text-decoration: none; font-size: 0.6em; vertical-align: super; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif }
.fr .new::after { content: '\00a0\00a0nouveau' }
.en .new::after { content: '\00a0\00a0new' }
.fr #savedata_ok span::after { content: 'Données enregistrées avec succès' }
.en #savedata_ok span::after { content: 'Successfully recorded data' }

/* ####################################################################################### */
.showtab { display: none }

/* RESPONSIVE DESIGN TABLETTE */
@media screen and (max-width: 979px) {
	#footer-infinite { display: none }
	#logo img { margin-left: 6px }
	#lang_switch { border-bottom-right-radius: 0 }
	#corp, #corp_slim { padding: 0 8px }
	/* admin */
	#sticky-wrapper { display: block }
	#sticky-bar { width: 100%; position: static; max-height: auto; overflow-y: visible; margin: 0 0 1.6em }
	#sticky-content { max-width: none }
	.sticky-menu { font-size: 1em; padding-bottom: 1px }
	.sticky-menu li { display: inline-block }
	.sticky-menu a { padding: .17em .4em; margin: 0 -1px -1px 0; }
	.sticky-menu .fa-fw { margin-right: 3px }
	.sticky-menu-center { text-align: center }
	/* stats */
	#menu-stat { overflow: auto }
	#menu-stat li { float: left; margin-right: 0.7em }
	.hidetab { display: none!important }
	.showtab { display: block }
	/* pg */
	#h-temoignages .italic, #h-temoignages .small { font-size: 1em }
	/* tinymce responsive */
	table.mceLayout, textarea.tinyMCE { width: 100%!important }
	.mceToolbar td { display:table-row; float: left }
	#feed-canvas-container { height: 350px!important }
}

/* RESPONSIVE DESIGN MOBILE */
@media screen and (max-width: 870px) {
	#header_admin { margin-top: -1.2em }
	#sub_menu_admin { font-size: .85em }
	#sub_menu_admin a, #sub_sub_menu_admin a { padding: .3em .55em }
	.selects-list { width: 100% }
	h1 select { max-width: 120px }
	.com-about { width: 120px }
}

/* RESPONSIVE DESIGN MOBILE PORTRAIT */
@media screen and (max-width: 440px) {
	#corp, #corp_slim { padding: 0 3px }
	#hsl h1 { font-size: 0.8em }
	#hsl h2 { font-size: 34px }
	#hsl h3 { font-size: 27px }
	#hsl-copyright a { font-size: 12px }
	#sticky-pg-options { font-size: 0.9em }
	.sticky-menu a { padding: .17em .3em }
	ul, ol { margin-left: 1.5em }
}

/* ICON */
.flag { padding: 1px; border: 1px solid var(--color-tone-5); vertical-align: -15%; width: 22px; }

.ul-ac .svg-inline--fa { vertical-align: -9% }
.a-icon, .a-uicon { text-decoration: none; display:inline-block; cursor: pointer }
.a-uicon span { text-decoration: underline }

.svg-inline--fa, .fa, .fas, .far, .fal, .fad { color: currentColor; font-size: 1.15em }
.small .svg-inline--fa, .small .fa { font-size: 14px }
.ul-lb .svg-inline--fa, .ul-lb .fa { color: var(--color-tone-5); font-size: 12px }
h1 .svg-inline--fa, h1 .fa { font-size: 1em }
.fa-pencil, .fa-edit { color: #f90 }
.fa-minus-circle, .fa-empty-set, .clock-red { color: #E6584C }
.fa-plus-circle, .fa-check-circle, .fa-repeat { color: #6EB558 }
.fa-chart-area { color: #4D89DD }
.fa-level-up, .fa-arrow-right, .fa-undo-alt { color: var(--color-tone-5) }
.fa-grip-vertical { color: var(--color-tone-2) }
.fa-infinity { font-size: .85em }
.fa-5x { font-size: 5em!important }
.fa-xs { font-size: .9em!important; vertical-align: -.03em;}

/* Iframe responsive */
.iframe { width: 100%; overflow: auto; position: relative; display: block; margin: 1.7em 0; text-align: left }
.iframe iframe { position: absolute; top: 0; width: 100%; height: 100% }

/* HUGO */
.text-center{
	text-align:center;
}
.cursor{
	cursor: pointer;
}
.hidden{
	display: none !important;
}
.invisible { visibility: hidden }

#results { margin-top:20px }

/* Sticky Result */
#sticky-results {
	background: var(--color-bg-sticky-results);
	position: sticky;
	bottom: 0;
	left: 0;
	z-index: 7;
  font-weight: 600;
	height: 6px;
	justify-content: center;
	display: none;
}
#sticky-button { position: relative; display: inline-block; top: -30px }
#sticky-button > div {
	background: var(--color-bg-sticky-results);
	height: 30px;
	line-height: 30px;
	padding: 0 .5em; 
	border-radius: 3px 3px 0 0;
	color: #fff;
	vertical-align: middle;
}
#sticky-button > div > div { display: inline-block; padding: 0 .5em }
#sticky-button > div > div:nth-child(2), #sticky-button > div > div:nth-child(3) { cursor: pointer }

/* Search Button */
[id^="reset-filter-"] { margin-left: .2em }
[id^="filter-"] { display: none; margin: 1em auto 0!important; max-width: 400px }
.geopos { margin-left: 4px; cursor: pointer }
.geopos svg { margin-top: .25em }

/* Sliders Age/Taille/Poids */
#slider-age, #slider-taille, #slider-poids, #slider-tatoo, #slider-piercing, #slider-distance { margin: 6px 1em 10px }
.noUi-target { box-shadow: none!important }
.noUi-horizontal { height: 10px !important; background: var(--color-bg-tone-2)!important; border: none!important }
.noUi-handle {
	background: var(--color-tone-7)!important; /* For Safari 5.1 to 6.0 */
	width: 20px!important;
	height: 20px!important;
	right: -10px!important;
	top: -6px !important;
  border: none!important;
  border-radius: none !important;
	background-size: 20px 20px !important;
  background-repeat: no-repeat !important;
  cursor: col-resize !important;
  box-shadow: none!important;
}
.noUi-handle::after, 
.noUi-handle::before {
	height: 10px !important;
	left: 7px !important;
	top: 5px !important;
	width: 2px !important;
	background-color: var(--color-tone-0)!important;
}
.noUi-handle::after { left: 12px !important }
.noUi-connect { background: var(--color-tone-7)!important; opacity: .6 }

#tooltip_rub, #tooltip_srub { white-space: pre-wrap; cursor: pointer }
.menu-tooltip { list-style: none; margin: 0; padding: 0.5em 0 }
.menu-tooltip li { margin: 0 }
.menu-tooltip li a { text-decoration: none; font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif; font-size: 1.1em; display: block; padding: 0.1em 0.5em }
.menu-tooltip li.sep { margin-top: .5em; padding-top: .3em; border-top: 1px solid var(--color-tone-1) }
@media (max-height: 650px) {
	.menu-tooltip { -webkit-columns: 2; -moz-columns: 2; columns: 2 }
}

/* Boutons en nowrap + scroll horizontal + effet de dégradé */
.nowrap-buttons { margin: 0 0 1.2em!important; position: relative }
.nowrap-gradient { pointer-events: none; position: absolute; width: 100%; height: 100%; display: flex; justify-content: space-between }
.nw-grad { width: 50px; height: 100%; opacity: 0 }
.nw-grad-l { background: linear-gradient(to right,var(--tone-0-opa-9),var(--tone-0-opa-0)) }
.nw-grad-r { background: linear-gradient(to left,var(--tone-0-opa-9),var(--tone-0-opa-0)) }
.nowrap-buttons.scrolled-left .nw-grad-l,
.nowrap-buttons.scrolled-right .nw-grad-r { opacity: 1 }
.nowrap-buttons-list { white-space: nowrap; overflow-x: auto; -ms-overflow-style: none;  scrollbar-width: none }  /* IE + Firefox */
.nowrap-buttons-list::-webkit-scrollbar { display: none }
.nowrap-buttons-list :first-child { margin-left: 0!important }
.nowrap-buttons-list :last-child { margin-right: 0!important }

/* Bouton */
.smart-button {
	background: var(--color-txt-link);
	display: table;
	margin: 1.5em auto;
	padding: .25em .5em;
	text-decoration: none;
	text-align: center;
	color: var(--color-tone-0);
	font-weight: 600;
	border-radius: 3px;
	border: none;
	font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
	font-weight: 400;
	font-size: 1.2em;
	cursor: pointer;
}
.sb-ghost { background: transparent; color: var(--color-txt-link) }
.smart-button:hover { background: var(--color-tone-7); color: var(--color-tone-0) }
.smart-button[disabled] { background: var(--color-tone-7)!important; opacity: .8; cursor:default!important }
.smart-button svg { vertical-align: top }
.smart-button:first-child { margin-top: 0 }
.smart-button:last-child { margin-bottom: 0 }
.sb-icon { padding: .25em }
.sb-icon svg { width: 1em!important; height: 1em!important }
.sb-fa svg { width: .8em!important; height: .8em!important; margin: .15em .2em 0 0 }
.sb-inline { display:inline-block; margin: 0 .2em .4em!important }
.sb-secondary { background: var(--color-bg-tone-2); color: var(--color-txt-link) }
.sb-secondary:hover, .sb-ghost:hover { background: var(--color-txt-link); color: var(--color-tone-0); }
.sb-xxs { font-size: .9em }
.sb-xs { font-size: 1em }
.sb-sm { font-size: 1.1em }
.sb-xl { font-size: 1.4em }
.sb-left { margin-left:0 }
.smart-button.active { background: var(--color-bg-brand-1); color: var(--color-txt-link) }
.smart-button.selected { background: var(--color-bg-brand-2); color: var(--color-txt-link) }

.infinite-spin { clear: both; padding: 1em 0; text-align: center; font-size: 1.4em; display: none }
.infinite-spin .fa-spin { color: var(--color-tone-9) }
.fa-circle-notch.fa-spin { animation: fa-spin 1s infinite linear }

/* Tooltipster */
.tooltipstered { -webkit-touch-callout: none; user-select: none; touch-action: manipulation; } /*ios pas de contextmenu*/

/* Transitions */
a, div, .menu_bt span { transition: background .4s ease, border .4s ease, color .4s ease }

/* Pas de bouton pinterest */
body > span { display: none!important }

/* Articles SEO */
.articles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 1em;
    list-style: none;
    padding: 0;
    margin: 0 0 1.6em 0!important;
}

/* ====== Carte d’article ====== */
.articles li {
    display: flex;
    align-items: center;
    background: var(--color-bg-tone-1);
    border-radius: 6px;
    overflow: hidden;
    margin: 0.6em 0 0 0;
}

/* ====== Vignette ====== */
.articles img{
  width:60px;
  height:60px;
  object-fit:cover;                   /* remplissage propre */
  flex-shrink:0;                      /* reste fixe quand le texte s’agrandit */
}

/* ====== Lien / titre ====== */
.articles a {
    flex: 1;
    padding: 0 .8rem;
    line-height: 1.3;
    text-decoration: none;
    font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
    font-size: 1.07em;
}
.articles a:hover{ text-decoration:underline; }

/* ====== Responsive : ≥ 600 px ====== */
@media (min-width:650px){
	#articles-annu {
		width: 100%;
		max-width: calc(960px - 38.5px);
		margin-left: 19.25px;
		text-align: center;
	}
  .articles{
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .articles img{
    width:72px;
    height:72px;
  }
}
@media (max-width:960px){
	#articles-annu {
		margin-left: 0;
}

/* ====== Option : mode sombre ====== */
@media (prefers-color-scheme:dark){
  #articles li{ background:#1e1e1e; }
  #articles a{ color:#f0f0f0; }
}