/* @override 
	https://dev.cdn-normandierouen.fr/profiles/ff_profile/themes/custom/ff_starterkit/css/style.css?* */

/* ZONE PRATIQUE */
#pratique,
.local-tasks {
	font-family: var(--gin-font);
    position: relative;
    z-index: 0;
    background-color: var(--gin-bg-app);
    margin-bottom: calc(var(--gut)*.5);
	margin-left: calc(var(--gut)*-1) !important;
	margin-right: calc(var(--gut)*-1) !important;
}
#pratique .block,
.local-tasks {
    padding: 15px calc(var(--gut)*1);
    margin-bottom: 0px;
    border-top: 1px solid var(--gin-color-primary);
    border-bottom: 1px solid var(--gin-color-primary);
}


.local-tasks {
	border-top: none;
	position: sticky;
	top: 0;
}
#pratique .messages {
    background: 0 0;
    padding: 15px calc(var(--gut)*1)!important;
    border: none!important;
    border-top: 1px solid var(--gin-color-primary)!important
}

#pratique .tabs {
    background: 0 0
}

#pratique ul.tabs,
.local-tasks ul.tabs {
    margin: 0;
	margin-block: 0 !important;
	padding-inline: 0 !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
/*	margin-bottom: -10px;*/
}

#pratique ul.tabs li,
#pratique ul.tabs li a,
.local-tasks ul.tabs li,
.local-tasks ul.tabs li a {
    margin: 0;
    padding: 0;
    border: none!important;
    outline: 0;
    background-color: none!important
}
::marker {
  font-size: 0px;
  color: transparent;
}
#pratique ul.tabs li a,
.local-tasks ul.tabs li a {
	color: var(--gin-color-text);
    display: inherit;
    text-transform: lowercase;
    line-height: 1.2;
    border: 1px solid transparent!important;
    background: 0 0!important;
    text-decoration: none;
    font-size: var(--gin-font-size);
    padding-block: calc(var(--gin-spacing-xs) - 2px);
    padding-inline: var(--gin-spacing-s);
    margin-inline-end: .25em;
    border-radius: 2rem;
}

#pratique ul.tabs li a:hover,
.local-tasks ul.tabs li a:hover {
    border-color: var(--gin-color-primary-light) !important;
    color: var(--gin-color-primary)
}

#pratique ul.tabs li a.is-active,
.local-tasks ul.tabs li a.is-active {
    border-color: var(--gin-color-primary) !important;
    color: var(--gin-color-primary)
}
/* FIN ZONE PRATIQUE */

/* MESSAGES */
#messages {
	font-family: var(--gin-font);
	color: var(--gin-color-text);
    background-color: var(--gin-bg-app);
	padding: 15px calc(var(--gut)*1);
    margin-bottom: -1px;
    border-top: 1px solid var(--gin-color-primary);
    border-bottom: 1px solid var(--gin-color-primary);
}
#messages.error {
	background-color: var(--gin-color-danger-lightest, #FCEEF1);
}
/* FIN MESSAGES */

/* GENERAL */
html {
    scroll-behavior: smooth;
    height: auto !important;
    color-scheme: light;
    background-color: #fff;
    color: var(--noir, #000);
}
body {
    padding: 0;
    margin: calc(var(--gut)*.5) var(--gut);
    background-color: #fff;
    color: var(--noir, #000);
}
.layout-global {
    max-width: var(--maxwidth);
    margin: 0 auto;
}
sup {
    font-size: 60%;
    top: -0.6em;
}
a {
    color: inherit;
    text-decoration: underline;
}
p {
    margin: 0 0 calc(var(--gut) * 0.5) 0;
}
p:empty {
    display: none;
}
p:last-child {
    margin: 0 !important;
}
.hide {
    display: none !important;
}
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
	* {
		transition: none !important;
	}
}
input {
    border: none;
    outline: none;
}
input:focus-visible {
    outline: 2px solid var(--gin-color-primary, currentColor);
    outline-offset: 2px;
}
.flex {
    display: flex;
}
ul,
ul li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* PAGER */
nav.pager {
    margin: var(--gut) 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav.pager ul {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
nav.pager ul li {
    margin: 0 5px;
}
nav.pager ul li a {
    display: inherit;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    padding: 0;
    width: 30px;
    height: 30px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-color: transparent;
}
nav.pager ul li.pagination-previous a {
    background-image: url(../images/pictos_fleche.svg);
    transform: rotate(180deg);
}
nav.pager ul li.pagination-next a {
    background-image: url(../images/pictos_fleche.svg);
}
nav.pager ul li.current span {
    display: none;
}
nav.pager ul li.current {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    background-color: transparent;
    color: var(--noir);
    text-align: center;
    line-height: 60px;
    font-size: var(--font100);
    border: var(--border);
}
/* FIN PAGER */

/* COOKIES */
.klaro .cookie-notice:not(.cookie-modal-notice) {
	background-color: var(--noir);
	color: var(--blanc);
	width: 100%;
	bottom: 0;
	right: 0;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0;
}
@media (min-width: 1024px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    right: var(--gut);
    bottom: var(--gut);
    box-shadow: none;
  }
}
@media (max-width: 1023px) {
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    border-style: none;
    border-radius: 0;
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body {
	padding: calc(var(--gut)*.5);
}
.klaro .context-notice p, .klaro .context-notice strong, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice strong, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li {
	color: var(--blanc);
	margin: 0;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn {
	border-color: var(--blanc) !important;
	color: var(--blanc) !important;
}
@media (max-width: 384px) {
  .klaro
    .cookie-notice:not(.cookie-modal-notice)
    .cn-body
    .cn-buttons
    button.cm-btn {
    width: auto;
  }
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-btn:hover {
	color: var(--noir) !important;
	border-color: var(--coul1) !important;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cm-link {
	margin: 0 !important;
	font-weight: 700;
	color: var(--blanc) !important;
	text-decoration: underline;
	text-transform: lowercase;
}
.klaro .cookie-modal .cm-modal.cm-klaro {
  background-color: var(--blanc);
  color: var(--noir);
  box-shadow: none;
}
.klaro .cookie-modal p, .klaro .cookie-modal strong, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li {
	color: var(--noir);
}
.klaro .cookie-modal h1 {
	line-height: 1;
	padding: 0 !important;
	margin-bottom: calc(var(--gut)*.5) !important;
}
@media (min-width: 660px) {
  .klaro .cookie-modal .cm-modal.cm-klaro {
    border-radius: 0;
  }
}
.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body {
  border-bottom: var(--border);
  padding: calc(var(--gut)*.5) !important;
}
.klaro .cookie-modal .cm-modal .cm-footer {
	border: none;
	padding: calc(var(--gut)*.5) !important;
}
.klaro .cookie-modal .cm-modal .cm-footer-buttons {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px !important;
}
.klaro .cookie-modal .slider,
.klaro .context-notice .slider,
.klaro .cookie-notice .slider {
  box-shadow: none;
}
.klaro .cookie-modal .cm-list-description,
.klaro .context-notice .cm-list-description,
.klaro .cookie-notice .cm-list-description {
  color: var(--noir);
  font-size: inherit;
  padding-top: 0px;
}
.klaro .cookie-modal .cm-list-title,
.klaro .context-notice .cm-list-title,
.klaro .cookie-notice .cm-list-title {
  font-size: inherit;
}
.klaro .cookie-modal a,
.klaro .context-notice a,
.klaro .cookie-notice a {
  color: var(--noir);
  text-decoration: underline;
}
.klaro .cookie-notice:not(.cookie-modal-notice) .cn-body .cn-buttons {
  gap: 10px !important;
  display: flex;
  flex-wrap: wrap;
}
/* FIN COOKIES */

/* CLOSE */
.block:has(> .close-button) {
    position: absolute;
    z-index: 1;
	top: calc(var(--gut)*.5);
	left: var(--gut);
}
.close-button {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	width: 40px;
	font-size: 1.5rem;
	font-family: var(--font);
	border: var(--border) !important;
	border-color: var(--noir) !important;
	border-radius: 40px;
	background-color: var(--blanc);
	color: var(--noir);
	cursor: pointer;
	transition: all .3s;
}
.close-button span {
	padding-bottom: 2px;
}
.close-button:before {
	display: none;
}
.close-button:hover {
	background-color: var(--coul1);
}
@media print, screen and (max-width: 1023px) {
	.close-button  {
		height: 30px;
		width: 30px;
	}
}
/* FIN CLOSE */

/* THROBBLER */
.ajax-progress,
.ajax-progress-throbber,
.ajax-progress-fullscreen {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: 0;
	opacity: 1;
	background: rgba(255, 255, 255, 0);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999999;
	overflow: hidden;
	text-indent: -99999em;
}
.ajax-progress-fullscreen:before,
.ajax-progress-fullscreen:after {
	content: ' ';
	display: block;
	height: 3px;
	background-color: var(--noir);
	overflow: hidden;
	text-indent: -99999em;
	margin: auto;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}
.ajax-progress-fullscreen:after {
	right: inherit;
	width: 10vw;
	background-color: var(--coul2);
	animation: ajax_anim 2s infinite;
}
@keyframes ajax_anim {
	0% { transform: translateX(0); }
	50% { transform: translateX(100vw); }
	100% { transform: translateX(0); }
}
/* FIN THROBBLER */

/* PAGER */
nav.pager {
	margin: var(--gut) 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
nav.pager ul {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
nav.pager ul li {
	margin: 0 5px;
}
nav.pager ul li a {
	display: inherit;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	padding: 0;
	width: 30px;
	height: 30px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: transparent;
	transform: none !important;
}
nav.pager ul li.pagination-previous a {
	background-image: url(../images/fleche-g.svg);
}
nav.pager ul li.pagination-next a {
	background-image: url(../images/fleche-d.svg);
}
nav.pager ul li.current span {
	display: none;
}
nav.pager ul li.current {
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background-color: transparent;
	color: var(--noir);
	text-align: center;
	line-height: 60px;
	font-size: var(--font-m);
	border: var(--border);
}
/* FIN PAGER */

/* CARTE */
.leaflet-marker-icon.active {
	content: url(../../ff_rouen/images/marker-gris.png);
}
.leaflet-tooltip {
	
}
.carte {
	position: relative;
}
.carte .geolocation-map-container {
	aspect-ratio: 4 / 3;
	height: auto !important;
	max-height: 70vh;
}
@media print, screen and (max-width: 1023px) {
	.carte .geolocation-map-container {
		aspect-ratio: inherit;
		height: 70vh !important;
		max-height: 70vh !important;
	}
}
.infobulle {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	max-height: calc(100%);
	overflow: auto;
	display: none;
	background-color: var(--noir);
	color: var(--blanc);
	z-index: 1;
	padding: 15px 15px 15px 60px;
}

.carte.view .infobulle {
	border-top: var(--border);
	background-color: var(--blanc);
}
.infobulle.open,
.carte.view .infobulle.open {
	display: block;
}
.infobulle .close-button {
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 30px;
	width: 30px;
	font-size: 1.5rem;
	font-family: var(--font);
	border: var(--border) !important;
	border-color: var(--blanc) !important;
	border-radius: 40px;
	background-color: var(--noir);
	color: var(--blanc);
	cursor: pointer;
}
.infobulle .close-button:before {
	display: none;
}
.infobulle .content a {
	display: inherit;
}
/* FIN CARTE */