@font-face {
  font-family:'raleway';
  font-style:normal;
  font-weight:normal;
  src: url('font_raleway.woff2') format('woff2');
}
@font-face {
  font-family:'raleway';
  font-style:normal;
  font-weight:bold;
  src: url('font_raleway_bold.woff2') format('woff2');
}
@font-face {
  font-family:'raleway';
  font-style:normal;
  font-weight:100;
  src: url('font_raleway_thin.woff2') format('woff2');
}
@font-face {
  font-family:'audrielle';
  font-style:normal;
  font-weight:normal;
  src: url('font_audrielle.woff2') format('woff2');
}
@font-face {
  font-family:'ruddy';
  font-style:normal;
  font-weight:normal;
  src: url('font_ruddy.woff2') format('woff2');
}

/*VIEWER*/
@media screen {
body {
	--skewfactor:0;
	--default-font-family:raleway;
	--default-font-size:14px;
	--time-height: 48px;
	--geovoile-height:45px;

	--journal-width:min(500px, max(350px, 33vw));
	--journal-close-height:96px;
	--journal-margin-size:15px;
}

html, 
body {
	background-color:transparent;
}
#blockmark,
#subtitle,
#dates,
#panelslider,
#nav,
#replay,
#coords,
#tools,
#refresh,
#dashboard,
#timekeeper {
	display:none;
}
#page {
	border-radius:15px;
	overflow:hidden;
}
#sig {
	left:0;
	bottom:0;
}
#zoomwindow {
	left:76px;
	right:calc(180px + var(--journal-margin-size) * 2);
	top:calc(100px + var(--journal-margin-size));
	bottom:160px;
}
body.WEATHER #bathymetry {
	background-color: #515B62;
}
body.RECORD #dashboard {
	display:none !important;
}

#time {
	display:block;
	left:auto;
	right:10px;
	bottom:10px;
	width:calc(var(--journal-width) + 28px);
	height:auto;
	background-color:transparent;
	min-width:300px;
}
#time * {
	clip-path:none;
}
#datetime {
	display:block;
	width:auto;
	height:auto;
	font-weight:normal;
	background-color:transparent;
	text-align:right;
	padding:0 10px 0 0;
}
#chrono {
	visibility:hidden;
}
body.RECORD.STANDBY #chrono, 
body.RECORD.FINISH #chrono, 
body.TRACKING #chrono {
	display:block;
}
#chrono > span {
	opacity:1;
}
body.RECORD.STANDBY #chrono {
	display:block;
}
#timeline {
	display:block;
	width:100%;
}
#timeline .axis, 
#timeline .limits {
	right:12px;
}#timeline .bar, 
#timeline .backbar {
	height:8px;
	border-radius:4px;
}
#brackets {
	display:none !important;
}

#credits .geovoile {
	position:absolute;
	right:10px;
	bottom:150px;
	opacity:0.6;
}
#credits .geovoile .link {
	width:auto;
	aspect-ratio:15 / 10;
	padding-left:0;
}
#credits .geovoile .link svg {
	height:100%;
}

#display {
	display:block;
	top:var(--journal-margin-size);
	left:var(--journal-margin-size);
	right:auto;
	bottom:auto;
}
#display .button,
#display .group > label,
#display .content .button label{
	display:none;
}
#display .content {
  display:block;
	padding:0 2px;
	max-height:auto;
	background-color:#FFFFFF;
	background-image:url(img_notebook.png);
	border-radius:7px;
}
#display .content .button {
	padding:0;
	margin:2px;
}
#display.keep .content {
	padding:0 2px;
}
#display.keep .content .group, 
#display.keep .content .button {
  display:block;
}
#display.keep .content .button.kept {
	display:block;
	margin:2px;
	width:100%;
}
#display.keep .content .group.kept {
  display:block;
  height:auto;
}
#display .preferences {
	display:none;
}

#forecasts {
	--skewval: calc(var(--height) * var(--skewfactor));
	--scroll-width: calc(var(--hour-width) * (var(--visible-hours) * 2 - 1)) !important;
	top:var(--journal-margin-size);
	left:calc(50px + var(--journal-margin-size) * 2);
	right:auto;
	border-radius:10px;
	overflow:hidden;
}
#forecasts.on {
	display:grid;
	grid-template-columns:95px 1fr;
	grid-template-rows:31px 16px;
}
#forecasts .provider {
	grid-column: 1;
	grid-row: 1 / 3;
	height:100%;
}
#forecasts .advert {
	height:100%;
}
#forecasts .advert a {
	display:flex;
	align-items:center;
	justify-content:center;
}
#forecasts .advert svg {
	height:85%;
}
#forecasts .dates {
	grid-column: 2;
	grid-row: 1;
}
#forecasts .params {
	grid-column: 2;
	grid-row: 2;
}
#forecasts * {
	font-family:ptsans;
}
#forecasts .advert {
	padding:0 5px;
	clip-path:none;
	text-align:center;
	border-radius:0 0 5px 5px;
}
#forecasts .cursor {
	clip-path:none;
	border-radius:5px;
}
#forecasts .scroll {
	clip-path:none;
	border-radius:10px 10px 0 10px;
	
}
#forecasts .params {
	background-color:transparent !important;
}
#forecasts .options {
	display:none;
}
#forecasts legend {
	overflow:hidden;
	width:100%;
}
#forecasts.under {
	top:var(--journal-margin-size);
	--gapleft:0;
}

#referencesLayer .plot {
  transition:opacity 0.5s ease-out;
}
#referencesLayer.single .ref .plot {
  opacity:0 !important;
}
#referencesLayer.single .ref .plot.on {
  opacity:1 !important;
}
#referencesLayer .boat.on .plot {
  opacity:0 !important;
}
#referencesLayer .boat.on .plot.on {
  opacity:1 !important;
}
#referencesLayer text {
	position:relative;
	z-index:100;
}
#referencesLayer .dot,
#referencesLayer .hitbox {
	display:none;
}

#boatcard {
	border-radius:10px;
	padding:var(--journal-margin-size);
	background-color:#FFFFFF;
	overflow:hidden;
}
#boatcard .photos img {
	border-radius:50%;
}

#geoblog {
	border-radius:17px;
	background-color:#FFFFFF;
	padding:var(--journal-margin-size);
}
#geoblog * {
	z-index:3;
}
#geoblog:before {
	content:'';
	position:absolute;
	top:var(--journal-margin-size);
	left:var(--journal-margin-size);
	bottom:var(--journal-margin-size);
	right:var(--journal-margin-size);
	background-color:#FFFFFF;
	background-image:url(img_notebook.png);
	background-position-y:1px;
	z-index:2;
}
#geoblog header:before {
	content:'à bord !';
	position:absolute;
	top:-30px;
	left:5px;
	font-family:audrielle;
	font-size:85px;
	color:#6AB2D8;
	pointer-events:none;
}
#geoblog .arrow {
	z-index:1;
}
#geoblog .identity {
	visibility:hidden;
}
#geoblog footer,
#geoblog .infos .title,
#geoblog .infos .hat,
#geoblog .infos .position .coords,
#geoblog .position .date:after,
#geoblog .names {
	display:none;
}
#geoblog .infos {
	margin-top:44px;
}
#geoblog .infos .position {
	text-align:right;
	font-weight:normal;
	font-size:16px;
	color:#6AB2D8;
	opacity:1;
	line-height:1;
}
#geoblog .cross {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
	opacity: 0.5;
}
}

/*GOODMORNING*/
@media screen {
#logogoodmorning {
	position:absolute;
	left:1vw;
	bottom:1vw;
	background-image:url(logo_goodmorning.svg);
	background-size:contain;
	aspect-ratio:2;
	width:20vw;
}

#journal {
	position:absolute;
	top:var(--journal-margin-size);
	right:var(--journal-margin-size);
	width:var(--journal-width);
	height:var(--journal-close-height);
	padding:0px;
	background-color:#FFFFFF;
	border-radius:17px;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	justify-content:flex-start;
	align-items:center;
}
#journal .cross {
	position:absolute;
	top:5px;
	right:5px;
	height:26px;
	aspect-ratio:1;
	cursor:pointer;
	transform:rotate(45deg);
}
#journal>.title {
	--height:90px;
	height:var(--height);
	aspect-ratio:26 / 9;
	margin-top:calc((var(--journal-close-height) - var(--height)) / 2);
}
#journal>.title .title1 {
	transform:scale(0.2);
}
#journal>.title .title2 {
	font-family:audrielle;
}
#journal .paper {
	display:none;
	flex-direction:column;
	align-items:center;
	flex:auto;
	width:100%;
	background-image:url(img_notebook.png);
	line-height:25px;
}
#journal .anatole {
	width:93%;
	height:125px;
}
#journal .anatole .photos {
	display:block;
	position:relative;
	float:left;
	width:120px;
	height:120px;
	margin:0 15px;
	border-radius:50%;
	overflow:hidden;
}
#journal .anatole .photo {
	display:none;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:contain;
}
#journal .anatole .photo.on {
	display:block;
}
#journal .anatole .photo.boat {
	background-image:url(img_boat.jpg);
}
#journal .anatole .photo.skipper {
	background-image:url(img_anatole.jpg);
}
#journal .anatole h1 {
	display:inline-block;
	font-size:28px;
	padding-top:27px;
}
#journal .anatole h2 {
	font-size:20px;
}


#sound {
	--icon-width:35px;
	--micro-width:60px;
	margin-top:25px;
	height:125px;
	width:100%;
	box-sizing:border-box;
	display:none;
}
#sound.off {
	display:none;
}
#sound h1 {
	font-family:audrielle;
	font-size:60px;
	text-align:center;
	color:#6AB2D8;
	line-height:37px;
}
#sound .player {
	margin-top:15px;
	width:auto;
	display:flex;
	align-items:center;
	justify-content:center;
}
#sound .player .icon {
	display:flex;
	width:var(--icon-width);
}
#sound .player .icon.micro {
	width:var(--micro-width);
	aspect-ratio:1;
}
#sound .player .icon.bar {
	position:relative;
	width:calc(100% - var(--micro-width) - var(--icon-width) - var(--journal-margin-size) * 4);
	pointer-events:none;
}
#sound.playing  .player .icon.bar {
	pointer-events:auto;
	cursor:pointer;
}
#sound .player .cursor {
	position:absolute;
	top:50%;
	left:0;
	transform:translate(-50%, -50%);
	width:15px;
	height:15px;
	background-color:#6AB2D8;
	border-radius:50%;
}
#sound .player .backbar,
#sound .player .forebar {
	position:absolute;
	top:50%;
	left:0;
	width:100%;
	transform:translateY(-50%);
	fill:#6ab2d8;
}
#sound .player .backbar {
	fill:#000000;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
#sound .player .forebar {
	fill:#6ab2d8;
	clip-path:polygon(0 0, 1px 0, 1px 100%, 0 100%);
}
#sound .player .icon.play,
#sound .player .icon.pause {
	padding-left:5px;
	cursor:pointer;
	aspect-ratio:1;
}
#sound .player .icon.pause {
	display:none;
}
#sound.playing .icon.play {
	display:none;
}
#sound.playing .icon.pause {
	display:block;
}
#sound .player svg {
	height:100%
}

#journal .citation {
	position:relative;
	flex:auto;
	width:75%;
	box-sizing:border-box;
	font-size:18px;
	text-align:center;
	margin-top:5px;
}
#journal .citation .content {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	overflow:auto;
	padding-right:10px;
	scrollbar-width:thin;
}
#journal .citation .content::-webkit-scrollbar {
	width:5px;
}
#journal .citation .content cite {
	font-style:italic;
}
#journal .citation .content cite:before {
	content:'« '
}
#journal .citation .content cite:after {
	content:' »'
}

#infoslive {
	display:none;
	width:100%;
	text-align:center;
	padding:20px 0;
}
#infoslive>.title {
	display:inline-block;
	aspect-ratio:26 / 10;
	width:min(50%, 200px);
}
#infoslive>.title text {
	font-size:17px;
}
#infoslive>.infos {
	font-size:20px;
	display:flex;
	flex-wrap:wrap;
}
#infoslive>.infos .date {
	width:100%;
	font-size:18px;
	color:#6AB2D8;
}
#infoslive>.infos .val {
	box-sizing:border-box;
	width:50%;
	padding:min(3%, 10px);
}
#infoslive>.infos .val var,
#infoslive>.infos .val label {
	display:block;
}
#infoslive>.infos .val var {
	font-size:32px;
	font-weight:bold;
}
#infoslive>.infos .val label {
	font-size:18px;
}
#infoslive>.infos .speed var:after,
#infoslive>.infos .windspeed var:after {
	content:' nds';
}
#infoslive>.infos .heading var:after {
	content:'°';
}

#logoarthrosedupouce {
	position:absolute;
	right:var(--journal-margin-size);
	top:calc(var(--journal-close-height) + var(--journal-margin-size) * 2);
	width:175px;
}
#logoarthrosedupouce #carousel {
	position:relative;
	aspect-ratio:496 / 272;
	width:100%;
}
#logoarthrosedupouce .logo {
	background-size:contain;
	width:100%;
	height:100%;
}
#logoarthrosedupouce .arthrosedupouce {
	background-image:url(logo_arthrosedupouce.svg);
}
#logoarthrosedupouce .morbihan {
	background-image:url(logo_morbihan.svg);
}
#logoarthrosedupouce .days {
	width:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	background-image:url(img_circle.svg);
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center bottom;
	aspect-ratio:26 / 12;
	font-size:46px;
	white-space:nowrap;
}
body.CONVOY #logoarthrosedupouce .days {
	display:none !important;
}

#progressline {
	position:absolute;
	display:flex;
	right:20px;
	bottom:55px;
	width:var(--journal-width);
	flex-wrap:wrap;
	font-size:18px;
	font-weight:bold;
}

#progressline .percent {
	flex:none;
	padding-bottom:0.3em;
	color:#FAEB00;
}
#progressline .line {
	flex:100%;
	height:16px;
	border:1px solid #111111;
	border-radius:8px;
	background-image:url(img_progressline.svg);
	background-size:100% auto;
	background-repeat:no-repeat;
}
#progressline .sailed {
	flex:1 1 auto;
	text-align:left;
	padding-top:0.2em;
	color:#FAEB00;
}
#progressline .length {
	flex:1 1 auto;
	text-align:right;
	padding-top:0.2em;
	font-weight:normal;
}

body.JOURNAL #journal {
	height:auto;
	bottom:var(--journal-margin-size);
}
body.JOURNAL #journal .cross {
	transform:rotate(0);
}
body.JOURNAL #journal .paper {
	display:flex;
}
body.JOURNAL #sound {
	display:block;
}
body.JOURNAL #sound.off {
	display:none;
}
body.JOURNAL #infoslive {
	display:block;
}
body.JOURNAL #logoarthrosedupouce {
	top:var(--journal-margin-size);
	right:calc(var(--journal-width) + var(--journal-margin-size) * 2);
}
body.JOURNAL #progressline {
	right:calc(var(--journal-width) + var(--journal-margin-size) * 2);
}
body.JOURNAL #time {
	right:calc(var(--journal-width) + var(--journal-margin-size) * 2 - 10px);
}
body.JOURNAL #credits {
	right:calc(var(--journal-width) + var(--journal-margin-size) * 2 - 10px);
}
body.JOURNAL #credits.on {
	right:0;
}
body.JOURNAL #graphics {
	right:calc(var(--journal-width) + var(--journal-margin-size) * 2);
	top:calc(100px + 80px + var(--journal-margin-size) * 3);
}
body.JOURNAL #zoomwindow {
	left:76px;
	right:calc(var(--journal-width) + var(--journal-margin-size) * 2);
	top:calc(100px + var(--journal-margin-size));
	bottom:160px;
}
body.JOURNAL #geoblog {
	left: calc(50% - var(--journal-width) / 2 + 21px);
}
}




@media (max-height:785px), (max-width:905px) {
#display .content,
#journal .paper {
	background-image:url(img_notebook_small.png);
}
#journal>.title {
	--height:60px;
}
#journal .paper {
	line-height:18px;
}
#journal .anatole {
	height:90px;
}
#journal .anatole .photos {
	margin:0 10px;
	width:90px;
	height:90px;
}
#journal .anatole h1 {
	font-size:23px;
	padding-top:17px;
}
#journal .anatole h2 {
	font-size:18px;
}
#sound {
	margin-top:18px;
	height:90px;
	max-width:400px;
}
#sound h1 {
	font-size:45px;
	line-height:27px;
}
#sound .player {
	margin-top:0;
	height:54px;
}
#journal .citation {
	font-size:14px;
	margin-top:3px;
}
#infoslive {
	padding:10px 0;
}
#infoslive>.title {
	width:30%;
}
#infoslive>.infos {
	font-size:16px;
}
#infoslive>.infos .val {
	padding:1%;
}
#infoslive>.infos .val var {
	font-size:26px;
}
#infoslive>.infos .val label {
	font-size:12px;
}
}

@media (max-width:905px) {
body {
	--journal-close-height:70px;
	--journal-margin-size:10px;
	--goodmorning-height:68px;
  --timeline-height:27px;
}
body.RECORD #sig {
	top:0;
}

#display {
	display:block;
	top:calc(var(--goodmorning-height) + var(--journal-margin-size) * 2);
	left:auto;
	right:var(--journal-margin-size);
	bottom:auto;
}
.iconbutton {
	width:33px;
	height:33px;
}
#display .content .button {
	line-height:33px;
}
#logogoodmorning {
	left:auto;
	bottom:auto;
	right:var(--journal-margin-size);
	top:var(--journal-margin-size);
	width:auto;
	height:var(--goodmorning-height);
}
#logoarthrosedupouce {
	right:auto;
	top:var(--journal-margin-size);
	left:var(--journal-margin-size);
	width:100px;
	height:var(--goodmorning-height);
	display:flex;
}
#logoarthrosedupouce .days {
	font-size:30px;
	margin-left:20px;
	background-position: center center;
}
#journal {
	top:auto;
	right:var(--journal-margin-size);
	left:var(--journal-margin-size);
	width:auto;
	height:var(--journal-close-height);
	bottom:0;
	border-radius:17px 17px 0 0;
}
#time {
	left:calc(var(--journal-margin-size) * 2);
	right:calc(var(--journal-margin-size) * 2);
	bottom:calc(var(--journal-close-height) + var(--journal-margin-size) * 1);
	width:auto;
	height:auto;
	min-width:auto;
}
#datetime {
	display:none !important;
}
#chrono {
	margin-bottom:47px;
	padding:0;
}
#datetime br {
	display:none;
}
#datetime big,
#datetime small {
	display:inline-block;
}
#datetime small {
	margin-left:1ex;
}
#geovoile {
	height:37px;
	margin-right:-5px;
}
#progressline {
	left:calc(var(--journal-margin-size) * 2);
	right:calc(var(--journal-margin-size) * 2);
	width:auto;
	bottom:107px;
}
#timeline .axis, 
#timeline .limits {
	left:0;
	right:0;
}
body.RECORD #forecasts {
	--visible-hours:5;
	top:90px;
	left:var(--journal-margin-size);
	width: auto;
}
 #forecasts .scroll {
	width:var(--scroll-width);
}
#forecasts .hours {
	left: calc(100% - (var(--visible-hours) + var(--current-index)) * var(--hour-width));
}
#forecasts .cursor, 
#forecasts .wait {
	left: calc(100% - var(--visible-hours) * var(--hour-width));
}
#graphics {
	left:var(--journal-margin-size);
	right:calc(50px + var(--journal-margin-size) * 2);
	top:calc(110px + var(--journal-margin-size) * 2);
}
#zoomwindow {
	left:calc(var(--journal-margin-size) * 2);
	right:calc(50px + var(--journal-margin-size) * 2);
	top:calc(100px + var(--journal-margin-size));
	bottom:220px;
}
#progressline {
	font-size:14px;
}

body.JOURNAL #journal {
	height:auto;
	top:calc(var(--goodmorning-height) + var(--journal-margin-size) * 2);
	bottom:0;
}
body.JOURNAL #logoarthrosedupouce {
	right:auto;
}
body.JOURNAL #progressline {
	display:none;
}
body.JOURNAL #time {
	display:none;
}
body.JOURNAL #credits {
	display:none;
}
body.JOURNAL #display {
	display:none;
}
body.JOURNAL #logogoodmorning {
	right:var(--journal-margin-size);
}
body.JOURNAL #forecasts {
	width:min(350px, calc(100vw - 136px - 95px - 50px - var(--journal-margin-size) * 4));
}
body.JOURNAL #geoblog {
	display:none;
}
}

@media (max-width:660px) {
#geoblog {
	left: calc(50% - 21px);
	top:calc(50% - 30px);
	width:calc(80% - 41px - var(--journal-margin-size) *2);
}
#geoblog article.type1 {
	max-height:initial;
	min-height:initial;
	aspect-ratio:1200 / 675;
	width:100%;
}
}


@media (max-height:600px) {
#display {
	top:var(--journal-margin-size);
}
#logogoodmorning {
	right:calc(50px + var(--journal-margin-size) * 2);
}
}


@media (max-width:530px) {
body.RECORD #forecasts {
	--visible-hours:4;
}
}



@media (max-width:450px) {
body.RECORD #forecasts {
	--visible-hours:3;
}
}