:root {
	--fond: #FFFFFF;
	--panneau: #F7FAFC;
	--ligne: #E2EAF0;
	--ligne-forte: #CBD8E2;
	--encre: #0B1622;
	--gris: #5D7386;
	--gris-clair: #63768A;
	--accent: #3AC0E7;
	--accent-texte: #0E88AC;
	--accent-fond: #E8F7FC;
	--sur-accent: #04252F;
	--v-bon: #0E88AC;
	--v-fort: #C2761A;
	--v-alerte: #D3392F;
	--radius: 10px;
	--ombre: 0 1px 2px rgba(11, 22, 34, .05);
	--ombre-hover: 0 6px 18px rgba(11, 22, 34, .09);
	--chaud: #E2701F;
}

* {
	font-family: Lato, Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.02em;
	margin: 0;
	outline: medium none;
	padding: 0;
	text-decoration: none;
}


html {
	width:100%;
	height:100%;
}


body {
	background: var(--fond);
	color: var(--encre);
	font-size: 1.2em;
	line-height: 1.55;
	width:100%;
	height:100%;
	position:relative;
}


.page {
	padding-top:110px;
	padding-bottom:60px;
	max-width:1600px;
}


.pave {
	background:#FFF;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
	margin-bottom:50px;
	padding:15px;
	border-radius:15px;
}

.pave.login {
	max-width:600px;
	margin:0 auto;
}

/* Champs signup/login/passwd_lost — même langage visuel que le reste du site
   (.dash/.panneau/.abo-card), plus grands et arrondis (cf. content/page_signup.php,
   page_account_login.php, page_passwd_lost.php, qui partagent tous .pave.login) */
.pave.login .mt1, .pave.login .mt2 {
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--gris);
	margin-bottom:3px;
}

.pave.login .mt1 .optionnel, .pave.login .mt2 .optionnel {
	text-transform:none;
	font-weight:400;
	letter-spacing:0;
	font-size:11px;
	color:var(--gris-clair);
	margin-left:4px;
}

.pave.login input.box {
	background:var(--fond);
	border:1px solid var(--ligne-forte);
	border-radius:var(--radius);
	padding:13px 16px;
	font-size:1em;
	color:var(--encre);
	transition:border-color .15s ease, box-shadow .15s ease;
}

.pave.login input.box:focus {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px var(--accent-fond);
}

.pave.login .err {
	min-height:1.3em;
}

.pave.login .btn {
	display:block;
	width:100%;
	box-sizing:border-box;
	text-align:center;
	padding:14px 20px;
	border:none;
	border-radius:var(--radius);
	background:var(--encre);
	font-weight:700;
	font-size:1.05em;
}

.pave.login .btn:hover {
	background:var(--accent-texte);
}

.pave.login .btn.abo {
	background:var(--accent-texte);
}

.pave.login .btn.abo:hover {
	background:var(--encre);
}

.pave.login a.link {
	color:var(--accent-texte);
	font-weight:600;
	text-decoration:none;
}

.pave.login a.link:hover {
	text-decoration:underline;
}

.pave.login .alt-action {
	text-align:center;
	margin-top:16px;
	font-size:13.5px;
	color:var(--gris);
}

.abo-step-title {
	font-size:1.6em;
	font-weight:800;
	letter-spacing:-.5px;
	color:var(--encre);
	margin-bottom:18px;
}

.abo-plan-summary {
	background:var(--accent-fond);
	border:1px solid var(--accent);
	border-radius:var(--radius);
	padding:14px 18px;
	margin-bottom:20px;
	font-size:14.5px;
	color:var(--gris);
	text-align:left;
}

.abo-plan-summary b {
	color:var(--accent-texte);
}

.header {
	width:100%;
	background-color:#000;
	position:fixed;
	top:0;
	z-index:999;
	color:#FFF;
	box-shadow: 0px 0px 12px #555;
	border-bottom:solid 1px #333;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


.header .int {
	padding:5px;
	margin:0 auto;
	max-width:1600px;
}


.actionBar {
	width:100%;
	background-color:#EEE;
	color:#000;
	margin-top:5px;
	padding:3px 0px;
	border-top:solid 1px #69C;
}

.actionBar .int {
	margin:0 auto;
	max-width:1600px;
	position:relative;
}

.actionBar #favBtn {
	position:absolute;
	display:inline-block;
	right:0;
	padding: 5px 10px;
	font-size: 1.2em;
	text-align: left;
	vertical-align: top;

	border: solid 1px #333;
	border-radius: 5px;

	background: #222;
	color: #FFF;
	top: 2px;
	text-transform: uppercase;
}

.actionBar #favBtn i {
	font-size: 20px;
	margin-right: 5px;
	color: #69C;
}

.footer {
	width:100%;
	background:#FFF;
	border-top:solid 1px #FFF;
	position:fixed;
	z-index:998;
	bottom:-1px;
	left:0;
	color:#333;
	box-shadow: 0px 0px 12px rgba(0,0,0,0.3);
}


.footer .int {
	padding:3px;
	margin:0 auto;
	text-align:center;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.footer .mobile {
	display:none;
}

.footer .button-abo {
	display:none;
}

h1 {
	font: normal 50px/55px Lato;
	text-transform:uppercase;
	font-weight:300;
}


h1 span.color{
	font-weight:normal;
}

h1.title {
	font-size:25px;
}

h2 {
	margin-top:0px;
	font: normal 25px/30px Lato;
	text-transform:uppercase;
	font-weight:300;

	font-size: 20px;
	line-height:1.1;
}


h3 {
	margin-top:0px;
	font: normal 20px/25px Lato;
	text-transform:uppercase;
	font-weight:500;
	line-height:1.1;
}

img {
	border:0px;
}


.slider {
	height:600px;
	overflow:hidden;
	position: relative;
}

.slider .int {
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:1;
}

.slider .imgBlock {
	background-image:url('../img/slide_01.jpg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	height:600px;
	width:100%;
}

.colorlogo {
	color:#369;
}

.color{
	color:#69C;
}

.link {
	color:#69C;
	text-decoration:underline;
}

.link.v2 {
	display: block;
	margin-top: 10px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--accent-texte);
	cursor: pointer;
	text-decoration:none;
}

.header .logo img {
	/*width:130px;*/
}

.menu {
	float:right;
	margin-right:10px;
	margin-top:4px;
}


.menu li {
	display:inline-block;
	position:relative;
}


.menu li a {
	font-size:15px;
	display:block;
	color:#FFF;
	padding:4px 15px 4px 15px;
	text-transform:uppercase;
	/*border-top:solid 2px #000;*/
	border-bottom:solid 2px #000;
}

.menu li a.button-abo {
	background: #69C;
	border-radius: 5px;
	padding-left: 2em;
	padding-right: 2em;
}

.menu li a.button-abo:hover {
	color:#000;
}

.menu li.account {
	vertical-align:top;
}

.menu li.account a {
	padding:0px 10px 0px 10px;
	text-transform:uppercase;
	border-bottom:solid 0px #000;
}

.menu li.account a span {
	display:none;
}

.menu li a img {
	width:30px;
}

.menu li a:hover {
	color:#69C;
}


.menu li a.selected {
	color:#69C;
	/*border-top:solid 2px #EEE;*/
	/*border-bottom:solid 2px #EEE;*/
}

.menu li a.button-abo.selected {
	color:#FFF;
}

.menu li.account a.selected {
	border-bottom:solid 0px #000;
}

.menu li .smenu {
	background:#000;
	display:none;
	position:absolute;
	top:32px;
	width:280px;
	padding-top:3px;
	box-shadow: 0px 0px 8px #555;
	z-index:997;
}

.menu li .smenu a {
	font-size:13px;
	display:block;
	color:#CCC;
	padding:4px 10px 4px 10px;
	text-transform:uppercase;
	border-bottom:solid 1px #999;
}


.menu li .smenu a:hover {
	color:#69C;
}


.menu li:hover .smenu {
	display:block;
}

.menu-smart {
	display:none;
}

.menu-bg {
	display:none;
}

.menuContent {
	background:#333;
	padding:0px;
}


.menuContent li {
	display:inline-block;
	position:relative;
}


.menuContent li a {
	font-size:14px;
	display:block;
	color:#EEE;
	padding:5px 10px;
	text-transform:uppercase;
}


.menuContent li a:hover {
	color:#69C;
}


.menuContent li a.selected {
	color:#69C;
}


.menuContent li .smenu {
	background:#333;
	display:none;
	position:absolute;
	top:28px;
	width:230px;
	padding-top:3px;
	box-shadow: 0px 0px 5px #444;
	box-shadow: 0px 0px 5px #444;
	z-index:999;
}

.menuContent li .smenu a {
	font-size:13px;
	display:block;
	color:#CCC;
	padding:4px 12px;
	text-transform:uppercase;
	border-bottom:solid 1px #999;
}


.menuContent li .smenu a:hover {
	color:#69C;
}


.menuContent li:hover .smenu {
	display:block;
}


.menuFooter {
	padding:0px;
}

.menuFooter li {
	display:inline-block;
}

.menuFooter li a {
	font-size:12px;
	display:block;
	color:#AAA;
	padding:2px 10px 4px 10px;
}

.menuFooter li a:hover {
	color:#69C;
}

.menuFooter li a.selected {
	color:#69C;
}


/*

.tooltipmap {
	border:thin 1px #eee;
	background-color:#FFF;
	padding:5px;
	box-shadow: 0px 0px 10px #666;
	text-align:left;
	padding:4px 8px;
	padding-left:40px;
	white-space: nowrap;
	position:relative;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.tooltipmapcam {
	border:thin 1px #eee;
	background-color:#FFF;
	padding:3px;
	box-shadow: 0px 0px 10px #666;
}


.tooltipmap img {
	width:30px;
	top:3px;
	left:5px;
	position:absolute;
}

.tooltipmap .txtlight {
	font-size:11px;
	color:#777;
}

.tooltipmap .txtredlight {
	font-size:11px;
	color:#900;
}

*/

#contentMap {
	height:calc(100% - 105px);
	width:100%;
	position:absolute;
	top:95px;
	left:0;
}

#contentMap.display {
	width:50%;
}

#contentMapHome {
	height:700px;
	width:100%;
}

.mapHome {
	position:relative;
	margin-bottom:24px;
}

.mapHome .btnBigMap {
	position:absolute;
	bottom:10px;
	right:10px;
	box-shadow: 0px 0px 10px #000;
	z-index:800;
}

.tooltipmap {
	margin:0;
	padding:0;
	padding-left:40px;
	white-space: nowrap;
	position:relative;

}

.tooltipmapcam {
	border:thin 1px #eee;
	background-color:#FFF;
	padding:3px;
	box-shadow: 0px 0px 10px #666;
}


.tooltipmap img {
	width:30px;
	top:3px;
	left:5px;
	position:absolute;
}

.tooltipmap .txtlight {
	font-size:11px;
	color:#777;
}

.tooltipmap .txtredlight {
	font-size:11px;
	color:#C00;
}

.tooltipmap .abo {
	color:#F60;
	display:block;
}

.tooltipmap .abocolor {
	max-width:250px;
	display:block;
	white-space:normal;
}

.leaflet-popup-content-wrapper {
	box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
	text-align:left;
	border-radius: 5px !important;
}

.leaflet-popup-content {
	margin:5px 10px;
}

.leaflet-popup-close-button {
	display:none;
}

.leaflet-top, .leaflet-bottom {
	z-index: 990;
}

#contentMapHome .leaflet-control-attribution {
	display:none;
}

#contentInfos {
	display:block;
	background:#FFF;
	width:0px;
	height:calc(100% - 105px);
	padding-top:10px;
	position:absolute;
	right:0px;
	top:80px;
}

#contentInfos.display {
	width:50%;
}

#contentInfos .scroll {
	height:100%;
	border-left:solid 1px #CCC;
	overflow:auto;
}

#contentInfos .inner {
	display:block;
	text-align:left;
	padding:10px;
}

#contentInfos.display.full {
	z-index:995;
}

#contentInfos .displayContent i {
	display:none;
}

#contentInfos.full .displayContent .expand {
	display:none;
}

#contentInfos.full .displayContent .compress {
	display:inline-block;;
}

#contentInfos .displayContent .expand {
	display:inline-block;
}

#contentInfos h2 {
	font-size: 20px;
	line-height:1.1;
}

#contentInfos a.title {
	margin-top:5px;
	padding-left:10px;
}

#contentInfos .subtitle {
	padding-left:10px;
	position:relative;
}

#contentInfos .closeContent {
	box-shadow:0px 0px 10px rgba(0,0,0,0.5);
	position:absolute;
	left:-15px;
	top:25px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	background:#FFF;
	border-radius: 50px;
	z-index: 1000;
}

#contentInfos .closeContent:hover {
	background:#69C;
	color:#FFF;
	cursor:pointer;
}

#contentInfos .displayContent:hover {
	background:#69C;
	color:#FFF;
	cursor:pointer;
}

#contentInfos .displayContent {
	position:absolute;
	top:60px;
	font-size:16px;
	left:-15px;
	width:30px;
	height:30px;
	text-align:center;
	line-height:30px;
	background:#FFF;
	border-radius: 50px;
	z-index: 1000;
	box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}


#contentInfos.display.full {
	height:calc(100% - 80px);
	width:100%;
}

#contentInfos.display .closeContent {
	display:block;
}

#contentInfos.display .displayContent {
	display:block;
}

#contentInfos.display.full .closeContent {
	top:25px;
	left:auto;
	right:20px;
}

#contentInfos.display.full .displayContent {
	top:25px;
	left:auto;
	right:60px;
}


.title {
	font-size: 25px;
	font-weight:normal;
	color: #333;
	text-decoration: none;
	text-transform:uppercase;
	padding-bottom:5px;
	border-bottom:solid 1px #EEE;
	margin-bottom:5px;
	line-height:1.1;
}


.title-small {
	font-size: 15px;
	font-weight:normal;
	color: #333;
	text-decoration: none;
	text-transform:uppercase;
	padding-bottom:5px;
	border-bottom:solid 1px #EEE;
	margin-bottom:5px;
	display:inline-block;
}

.stitle {
	font-size: 15px;
	font-weight:normal;
	color: #69C;
	text-decoration: none;
	text-transform:uppercase;
	padding-bottom:5px;
}

.title span.txtcolor {
	color: #69C;
}

.title span.subtitle {
	font-size:0.75em;
}

.subtitle {
	position:relative;
	font-size: 12.5px;
	color: var(--gris-clair);
}

.subtitle .addFav {
	position:absolute;
	top:-25px;
	font-size:22px;
	right:25px;
	width:40px;
	height:40px;
	text-align:center;
	line-height:40px;
	background:#FFF;
	color:#CCC;
	border-radius: 50px;
	box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}

.subtitle .addFav.isFav {
	border:solid 2px #69C;
	color:#69C;
	line-height:36px;
}

.subtitle .link {
	text-decoration:none;
	color: var(--accent-texte);
	font-weight: 500;
}

.mo:hover {
	background:#EEE;
	cursor:pointer;
}

.mo.linkAbo {
	padding:10px;
}

.mo.linkAbo:hover .btn {
	background:#69C;
}


#partLayerTop{
	position:absolute;
	top:95px;
	left:10px;
	z-index:1000;
	display:none;
}

#optionsMap {
	display:inline-block;
	background:#FFF;
	padding:3px 7px;
	box-shadow: 0px 0px 10px #666;
	font-size:1.3em;
	text-align:left;
	vertical-align:top;
	margin-right:10px;

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#optionsMap .inner img{
	padding:0;
	margin:0;
	margin-right:5px;
	width:25px;
}



#partUniteVent{
	position:absolute;
	top:105px;
	right:0px;
	z-index:600;
}

#uniteVentMap {
	display:inline-block;
	background:#FFF;
	padding:5px 10px;
	box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
	font-size:1.2em;
	text-align:left;
	vertical-align:top;
	margin-right:10px;
	border-radius:3px;
	border:solid 1px rgba(0, 0, 0, 0.5);

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#uniteVentMap a {
	color:#333;
	font-weight: 600;
}

#partFeedback {
	display:inline-block;
	padding:0px 10px;
	font-size:1em;
	text-align:left;
	vertical-align:top;
	width:25%;
	height:28px;
	overflow:hidden;
}

#partFacebook {
	display:inline-block;
	padding:0px 10px;
	font-size:1em;
	text-align:left;
	vertical-align:top;
	width:15%;
	height:28px;
	overflow:hidden;
}

#partTwitter span, #partFacebook span {
	display:inline-block;
	/*padding-top:5px;*/
}

#partTwitter {
	display:inline-block;
	padding:0px 10px;
	font-size:1em;
	text-align:left;
	vertical-align:top;
	width:15%;
	height:28px;
	overflow:hidden;
}

#partSearch img, #partFeedback img, #partFacebook img, #partTwitter img {
	padding:0;
	margin:0;
	margin-right:10px;
	width:25px;
}



.autocomplete-suggestions {
	border: 1px solid #999; background: #FFF; cursor: default; overflow: auto;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
	padding:5px 0px;
}
.autocomplete-suggestion {
	font-size:1.15em;
	padding: 6px 2px 6px 8px;
	white-space: nowrap; overflow: hidden;
}
.autocomplete-selected { background: #F0F0F0; }
.autocomplete-suggestions strong { font-weight: bold; color: #69C; }

input {
	font-size: 1em; padding: 6px 10px; border: 0px; border:solid 1px #CCC; display: block; margin: 0px 0; width:100%; background:#EEE;
}

textarea {
	 font-size: 1em; padding: 6px 10px; border: 0px; border:solid 1px #CCC; display: block; margin: 0px 0; width:100%; background:#EEE;
}

.popup{
	background:#FFF;
	padding:10px;
}

/* Popup "Votre avis" (content/popup/feedback.php) */
.popup-feedback {
	padding:22px;
	max-width:420px;
}

.popup-title {
	font-size:1.3em;
	font-weight:800;
	letter-spacing:-.3px;
	color:var(--encre);
	margin-bottom:8px;
}

.popup-intro {
	color:var(--gris);
	font-size:14px;
	line-height:1.5;
	margin-bottom:18px;
}

.popup-label {
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.03em;
	text-transform:uppercase;
	color:var(--gris);
	margin:14px 0 6px;
}

.popup-feedback input.box, .popup-feedback textarea.box {
	background:var(--fond);
	border:1px solid var(--ligne-forte);
	border-radius:var(--radius);
	padding:12px 14px;
	font-size:1em;
	color:var(--encre);
	width:100%;
	box-sizing:border-box;
	font-family:Lato, Verdana, Arial, Helvetica, sans-serif;
	transition:border-color .15s ease, box-shadow .15s ease;
}

.popup-feedback textarea.box {
	height:110px;
	resize:vertical;
}

.popup-feedback input.box:focus, .popup-feedback textarea.box:focus {
	outline:none;
	border-color:var(--accent);
	box-shadow:0 0 0 3px var(--accent-fond);
}

.popup-feedback .btn {
	display:block;
	width:100%;
	box-sizing:border-box;
	text-align:center;
	padding:13px 20px;
	border:none;
	border-radius:var(--radius);
	background:var(--encre);
	font-weight:700;
	margin-top:16px;
}

.popup-feedback .btn:hover {
	background:var(--accent-texte);
}

.popup-feedback .thx {
	text-align:center;
	padding:34px 14px;
	color:var(--accent-texte);
}

.popup-feedback .thx svg {
	margin-bottom:10px;
}

/* Popup instructions PWA iOS (content/popup/pwaInstall.php) */
.popup-pwa {
	padding:22px;
	max-width:340px;
}

.popup-steps > div {
	padding:10px 0;
	border-top:1px solid var(--ligne);
	font-size:14px;
	line-height:1.5;
}

.popup-steps svg {
	vertical-align:-3px;
	color:var(--accent-texte);
}

/* Bandeau d'installation PWA (cf. assets/js/functions/pwaInstall.js) : au-dessus du header
   fixe (z-index supérieur), qui est lui-même décalé vers le bas tant que le bandeau est affiché */
.pwaInstallBar {
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	height:44px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:0 12px;
	background:var(--accent-fond);
	border-bottom:1px solid var(--ligne-forte);
	box-sizing:border-box;
}

.pwaInstallBar-txt {
	display:flex;
	align-items:center;
	gap:8px;
	flex:1 1 0%; /* prend l'espace restant (et pas seulement sa taille de contenu) pour que le texte à l'intérieur ait une largeur à respecter et puisse tronquer avec les "…" */
	min-width:0;
}

.pwaInstallBar-label {
	font-size:13px;
	color:var(--encre);
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	min-width:0; /* text-overflow:ellipsis ne s'applique qu'à un texte porté par ce span, pas au conteneur flex parent */
}

.pwaInstallBar-txt img {
	width:22px;
	height:22px;
	border-radius:5px;
	flex-shrink:0;
}

.pwaInstallBar-actions {
	display:flex;
	align-items:center;
	gap:14px;
	flex-shrink:0;
}

.pwaInstallBar-go {
	background:var(--accent-texte);
	color:#FFF;
	font-weight:700;
	font-size:13px;
	padding:6px 14px;
	border-radius:var(--radius);
}

.pwaInstallBar-close {
	font-size:22px;
	line-height:1;
	color:var(--gris);
	padding:4px;
}

.has-pwa-banner .header {
	top:44px;
}

.has-pwa-banner .page {
	padding-top:154px;
}

@media (max-width:640px) {
	.pwaInstallBar-label {
		font-size:12px;
	}
}

#partSearch {
	display:inline-block;
	padding:0px 10px;
	font-size:1em;
	text-align:left;
	vertical-align:top;
	width:40%;
	overflow:hidden;
	position: relative;
}
#partSearch input {
	font-size: 1.2em;
	padding: 3px 5px 3px 30px;
	border: 0px;
	border:solid 1px #CCC; display: block; margin: 0px 0; width:300px; height:28px;
	background:#FFF;
	width:100%;
}

#partSearch i {
	position:absolute;
	font-size:16px;
	top:6px;
	left:18px;
}

#partFeedback i {
	font-size:25px;
	margin-right:5px;
	float:left;
}

input:-moz-placeholder, textarea:-moz-placeholder {
	color: #999;
}

input:-webkit-input-placeholder, textarea:-webkit-input-placeholder {
	color: #999;
}


#optionsMap .inner span {
	display:inline-block;
	margin-top:4px;
}

#optionsMap .options {
	width:220px;
}

#optionsMap .option {
	background-image:url(../img/icon-empty.png);
	background-repeat: no-repeat;
	background-position: 4px center;
	display:block;
	padding:5px 0px;
	padding-left:28px;
	color:#999;
}

#optionsMap .option:hover {
	background-color:#EEE;
}

#optionsMap .option.selected {
	background-image:url(../img/icon-ok.png);
	color:#000;
}

/* bouton "Affichage" sur la petite carte "à proximité" (content/part_content_previs.php) —
   #optionsMap est déjà stylé ci-dessus (réutilisé tel quel), il ne manque que le positionnement
   flottant dans le coin de cette carte-ci (la grande page /map gère le sien séparément) */
.carte-visuel{position:relative}
.mini-map-options-wrap{position:absolute; top:10px; left:10px; z-index:1000}

.liste .titre {
	font-size: 14px;
	font-weight:normal;
	color: #69C;
	text-decoration: none;
	text-transform:uppercase;
	padding-bottom:5px;
	border-bottom:solid 1px #EEE;
	margin-bottom:5px;
}


.liste a {
	display:inline-block;
	padding:7px 12px;
	color:#000;
}

.liste a span.dist {
	display:inline-block;
	padding-left:8px;
	color:#BBB;
	font-size:0.8em;
}

.liste a:hover, .liste a.onRollover, .liste a.selected {
	background:#EEE;
	color:#69C;
	font-weight:bold;
}

.liste.fullWidth a {
	display:block;
}

.tableObs {

}

.tableObs tr.head {
	font-zize:1.2em;
	background:#AAA;
}

.tableObs tr.head td {
	color:#FFF;
	font-size:1.1em;
	font-weight:bold;
}

.tableObs tr.head .tableTxtMin,
.tableObs tr.head .tableTxtMoy,
.tableObs tr.head .tableTxtMax {
	color:#FFF;
	font-size:1.1em;
	font-weight:bold;
}

.tableObs td{
	padding:2px;
}

.tableObs img {
	width:20px;
}

.tableTxtMin, .tableTxtMax {
	display:inline-block;
	width:33%;
	color:#999;
	text-align:center;
}

.tableTxtMoy {
	display:inline-block;
	width:33%;
	color:#000;
	text-align:center;
	font-size:1.5em;
	font-weight:normal;
}

.tableTxtO {
	display:inline-block;
	width:50%;
	text-align:center;
}

.tableImgO {
	display:inline-block;
	width:50%;
	text-align:center;
}




.legend {
	padding:0px 0px;
	line-height:1.2;
}

.legend div {
	display:inline-block;
	width:3.8461538%;
	text-align:center;
	font-size:10px;
	color:#FFF;
	font-weight:bold;
	padding:1px;
}


.weathericon {
	padding:5px 0px;
}

.weathericon div {
	display:inline-block;
	text-align:center;
	color:#FFF;
	padding:2px;
	min-height:5px;
}

.weathericon div img {
	width:100%;
}

/* tooltip */
#tooltip {
	position: absolute;
	z-index: 9999;
	/*border: 1px solid #EEE;*/
	border: 0px solid #EEE;
	background-color: #FFF;
	color:#333;
	font-size:11px;
	padding: 3px 6px;
	-moz-box-shadow: 0 0px 5px #000;
	-webkit-box-shadow: 0 0px 5px #000;
	box-shadow: 0 0px 5px #000;
	max-width:300px;
}

#tooltip h3, #tooltip div { margin: 0; }


/* cartelist */
#cartelistImg {
	position:relative;
}

#cartelistImg .date {
	position:absolute;
	top:10px;
	left:10px;
	color:#FFF;
	display:block;
	font-size:2.5em;
}

#cartelistList{
	height:500px;
}

.cartelist {
	padding:0px;
	margin:0 auto;
	list-style:none;
	position:relative;
	color:#333;
	display:block;
	line-height: 1;
}

.cartelist li {
	display:block;
}

.cartelist li a {
	font-size:10px;
	display:block;
	color:#333;
	padding:2px 0px 2px 10px;
}

.cartelist li a .date{
	display:none;
}


.cartelist li a:hover, .cartelist li.selected a {
	background:#69C;
	color:#FFF;
	padding:5px 0px 5px 7px;
	font-size:11px;
}

.cartelist li a:hover .date, .cartelist li.selected a .date {
	display:inline;
}

.cartelist li a.disabled {
	color:#CCC;
}

.btn {
	display:inline-block;
	padding:6px 15px;
	background:#333;
	border:solid 1px #FFF;
	color:#FFF;
	border-radius:7px;
}

.btn:hover {
	background:#69C;
}

.btn.disabled {
	opacity:0.5;
	pointer-events:none;
}

.btn.abo {
	background:#69C;
}

.btn.abo:hover {
	background:#333;
}

.btn.abobtn {
	font-size:1.2em;
}

.btn-accent { background:var(--accent-texte); color:#FFF; border:none; }
.btn-accent:hover { background:var(--encre); }

.forceRatio {
	display:block;
	width:100%;
	height:20px;
	overflow:hidden;
	position:relative;
}

.forceRatio.top30 img {
	top:-30%
}

.forceRatio.top20 img {
	top:-20%
}

.forceRatio.top10 img {
	top:-10%
}

.forceRatio img {
	width:100%;
	position:relative;
}

.hide {
	display:none;
}


.titledate {
	font-size:1.3em;
	font-weight:bold;
}

.prix {
	font-size:3em;
	font-weight:normal;
	color:#69C;
	padding:10px 0px 0px 10px;
}

.prixbarre {
	font-size:0.5em;
	font-weight:normal;
	text-decoration: line-through;
	color:#777;
	display:inline-block;
	margin-right:10px;
}

.err {
	color:#D00;
	padding-top:5px;
}


.abocolor {
	color:#69C;
	font-weight:bold;
}


.home-pave1 {
	background:#242424;
	color:#FFF;
}

.home-pave1 > div {
	padding:50px;
	max-width:1400px;
	margin:0 auto;
}

.home-pave1 .infos {
	font-size:1.2em;
	color:#CCC;
	margin-top:0.5em;
	line-height:1.3;
}

.home-pave2 {
	background:#1b1b1b;
	color:#FFF;
	vertical-align:top;
}

.home-pave2 > div {
	max-width:1400px;
	margin:0 auto;
}

.home-pave2 img {
	max-width:140px;
	width:25%;
	vertical-align:middle;
}

.home-pave2 .block {
	display:inline-block;
	width:49%;
	padding:40px 25px;
}

.home-pave2 .block:hover{
	background:#000;
	cursor:pointer;
}

.home-pave2 .block > div {
	display:inline-block;
	width:70%;
	padding-left:10px;
	vertical-align:middle;
	color:#CCC;
}
.home-pave2 > div {
	padding:20px 80px;
}
.home-pave2 > div h2 {
	margin-bottom:10px;
	color:#FFF;
}

.home-pave3 {
	background:#242424;
	color:#FFF;
	margin-bottom:25px;
}

.home-pave3 .infos {
	font-size:1.2em;
	color:#CCC;
	margin-top:0.5em;
}

.home-pave3 > div {
	padding:50px;
	max-width:1400px;
	margin:0 auto;
}


.home-pave4 {
	background:#121212;
	color:#FFF;
}

.home-pave4 h2 {
	margin-bottom:10px;
	color:#FFF;
}

.home-pave4 .infos {
	font-size:1.2em;
	color:#CCC;
	margin-top:0.5em;
	line-height:1.4;
}

.home-pave4 > div {
	padding:50px;
	max-width:1400px;
	margin:0 auto;
}

.home-pave4 .liste .titre {
	border-bottom:solid 1px #444;
}

.home-pave4 .liste a {
	color:#CCC;
}

.home-pave4 .liste a:hover {
	color:#FFF;
	background:#666;
}


.home-pave4.port {
	background:#242424;
	margin-bottom:20px;
}

.part {

}

.part.closed {

}

.part.closed .part-head .close .down {
	display:inline-block;
}

.part.closed .part-head .close .up {
	display:none;
}

.part.closed .part-content {
	/*display:none;*/
}

.part .part-head {
	position:relative;
	padding-right:35px;
}

.part .part-head .close {
	position:absolute;
	width:25px;
	height:25px;
	right:5px;
	top:0px;
	text-align:center;
	font-size:20px;
	box-shadow:none !important;
}

.part .part-head .close .down {
	display:none;
}

.part .part-head .close .up {
	display:inline-block;
}

.part .part-head .close:hover {
	background:#EEE;
	color:#69C;
}

.lastData {

}

.lastData .img {
	display:inline-block;
	vertical-align:top;
}

.lastData .img img {
	vertical-align:top;
	width:50px;
}


.lastData .data {
	font-size:25px;
	padding-left:7px;
	display:inline-block;
}

.lastData .data .minMax {
	font-size:12px;
	display:block;
}

.tabVent {
	position:relative;
}

.tabVent .promoAboTab {
	position:absolute;
	top:100px;
	padding:15px;
	background:#FFF;
	transform: rotate(-5deg);
	max-width:80%;
	left:10%;
	box-shadow:0px 0px 10px rgba(0,0,0,0.5);
}

.tabVent .promoAboTab .titlePromo {
	line-height:1;
	padding-bottom:7px;
	padding-top:5px;
}

.shop {
	margin-top:15px;
}

.shop .itemList {
	margin-top:15px;
}

.shop .item {
	display:inline-block;
}

.shop .item img {
	width:250px;
}

.shop .item .details {
	display:inline-block;
	max-width:200px;
	vertical-align:top;
	padding:5px;
}

.shop .item .details .name {
	display:block;
	font-size:1.5em;
}

.shop .item .details .price {
	display:block;
	font-size:1.2em;
	font-weight:bold;
	color:#69C;
	padding-bottom:10px;
}

.shop .item .details .desc {
	display:block;
	padding-bottom:10px;
}





.aboSelect {
	text-align:center;
}


.aboSelect .aboBlock {
	display:inline-block;
	vertical-align:top;
	max-width:400px;
	padding:15px;
	padding-bottom: 55px;
	border:solid 1px #EEE;
	border-radius:15px;
	margin:10px;
	min-height:370px;
	position:relative;
}

.aboSelect .aboBlock.pro {
	background:#F5F5F5;
}

.aboSelect .aboBlock .price {
	font-size:2em;
	color:#69C;
}

.aboSelect .aboBlock .aboBtn {
	position:absolute;
	bottom:15px;
	width:calc(100% - 30px);
}

.aboSelect .aboBlock .infos {
	text-align:left;
	padding:1em;
}

.aboSelect .aboBlock .infos span {
	font-style:italic;
	display:block;
	padding:5px 0px 10px;
}

.aboSelect .aboBlock .infos > div {
	padding:3px 0px;
	line-height:1.2;
}

.aboSelect .aboBlock .infos > div i {
	margin-right:7px;
	color:#69C;
}

.aboSelect .aboDuration {
	padding:3px;
	border:solid 1px #EEE;
	border-radius:20px;
	display:inline-block;
	width:auto;
	margin:0 auto;
}

.aboSelect .aboDuration a {
	display:inline-block;
	padding:10px 15px;
	border-radius:15px;
	color:#69C;
}

.aboSelect .aboDuration a.selected {
	border:solid 1px #EEE;
	background:#69C;
	color:#FFF;
}

.pave.account .infos div {
	line-height:1.5;
}

.pave-intro h3 {
	margin-top:15px;
	font: normal 18px / 20px Lato;
}

.pave-intro a {
	color:#333;
	text-decoration:underline;
}


.favList .liste a {
	display:inline-block;
	width:calc(33.3333% - 12px);
	min-width:350px;
	position:relative;
	padding:7px 10px;
	border-radius:10px;
	border:solid 1px #EEE;
	margin:5px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
	line-height:1.3;
}

.favList .liste a:hover {
	background:var(--panneau);
	border-color: var(--accent);
	box-shadow: var(--ombre-hover);
	transform: translateY(-2px);
}

.favList .liste a:has(.data) {
	border-left-width:4px;
}

.favList .liste a > span {
	font-weight:400;
	font-size:1.2em;
}

/* Réorganisation des favoris par drag & drop (content/page_fav.php) — n'affecte
   que .favList.draggable, pas la page liste/dep qui réutilise .favList sans
   être réordonnable */
.favList.draggable .liste a {
	padding-left:28px;
}

.fav-handle {
	display:none;
}

.favList.draggable .fav-handle {
	display:flex;
	position:absolute;
	left:2px;
	top:0;
	bottom:0;
	width:22px;
	align-items:center;
	justify-content:center;
	color:var(--gris-clair);
	cursor:grab;
	touch-action:none;
	z-index:3;
}

.fav-handle:hover, .fav-handle:active {
	color:var(--accent-texte);
}

.favList .liste a.fav-item-dragging {
	opacity:0.45;
	cursor:grabbing;
}

.favList .liste a.fav-item-drop-target {
	box-shadow:inset 0 0 0 2px var(--accent);
}

.favHint {
	font-weight:400;
	font-size:0.75em;
	color:var(--gris-clair);
	text-transform:none;
	letter-spacing:0;
}

.favHint svg {
	vertical-align:-1px;
	color:var(--gris-clair);
}

.favList .liste a .lastData {
	color:#999;
	font-size:0.9em;
}

.favList .liste a .infosVent {
	position: absolute;
	right: 5px;
	top: 7px;
	line-height: 40px;
	font-size: 1.3em;
	padding-left: 70px;
	background: linear-gradient(90deg, transparent, #FFF 40%);
}

.favList .liste a .infosVent img {
	vertical-align: top;
	width: 40px;
}

.favList .liste a .infosVent .wind {
	font-weight:600;
	font-size:1.1em;
}

.favList .liste a .infosVent .unit {
	font-size:0.7em;
	color:#999;
	padding-right:5px;
}

.favList .liste a .infosVent .data {
	display:inline-block;
}













.liste.spot.wind a {
	display:block;
	width:100%;
	min-width:350px;
	position:relative;
	padding:7px 10px;
	border-radius:10px;
	border:solid 1px #EEE;
	margin:0px 0px 5px 0px;
	transition: border-color .15s, box-shadow .15s, transform .15s;
	line-height:1.3;
}

.liste.spot.wind a:nth-child(n+6) {
	display:none;
}

.liste.spot.wind.showAll a {
	display:block;
}

.liste.spot.wind a:hover {
	background:var(--panneau);
	border-color: var(--accent);
	box-shadow: var(--ombre-hover);
	transform: translateY(-2px);
}

.liste.spot.wind a:has(.data) {
	border-left-width:4px;
}

.liste.spot.wind a > span {
	font-weight:400;
	font-size:1.2em;
}

.liste.spot.wind a .lastData {
	color:#999;
	font-size:0.9em;
}

.liste.spot.wind a .infosVent {
	position: absolute;
	right: 5px;
	top: 7px;
	line-height: 34px;
	font-size: 1.15em;

	background: linear-gradient(to right, transparent, rgba(255, 255, 255, 1) 25%);
    padding-left: 50px;
}

.liste.spot.wind a .infosVent img {
	vertical-align: top;
	width: 34px;
}

.liste.spot.wind a .infosVent .wind {
	font-weight:600;
	font-size:1.1em;
}

.liste.spot.wind a .infosVent .unit {
	font-size:0.7em;
	color:#999;
	padding-right:5px;
}

.liste.spot.wind a .infosVent .data {
	display:inline-block;
}







.pave-small {
	display:inline-block;
	width:calc(50% - 12px);
	max-width:200px;
	position:relative;
	padding:15px 10px;
	border-radius:10px;
	border: 1px solid var(--ligne);
	margin:5px;
	background: var(--panneau);
	transition: border-color .15s, box-shadow .15s, transform .15s;

	color: var(--gris-clair);
	letter-spacing: .03em;
}

.pave-small .title {
	font-size:0.9em;
	font-weight:normal;
	text-transform:uppercase;
	color: var(--gris-clair);
}

.pave-small .value {
	font-size:1.8em;
	font-weight:600;
	color:var(--encre);
}

.pave-small .value .unite {
	font-size:0.7em;
	font-weight:400;
	display:inline-block;
	padding-left:5px;
	vertical-align:text-top;
	color:var(--gris);
}

.pave-small .value .min {
	font-size:0.7em;
	color:var(--gris);
}

.pave-small .value .max {
	font-size:0.8em;
}

@media screen and (max-width: 1200px) {
	.slider, .slider .imgBlock {
		height:500px;
		background-image:url('../img/slide_01_500.jpg');
	}

	.menu li a {
		font-size:14px;
		/*padding:4px 10px 4px 10px;*/
	}


}

@media screen and (max-width: 1000px) {
	.menu li a {
		font-size:13px;
		padding:7px 10px 4px 10px;
	}

	.menu li a.button-abo {
		font-size: 15px;
		padding: 7px 10px 4px 10px;
	}

	#partFacebook {
		display:none;
	}

	#partTwitter {
		display:none;
	}

	#partSearch {
		width:60%;
	}

	.menu li a img {
		width:25px;
	}

	.slider, .slider .imgBlock {
		height:400px;
		background-image:url('../img/slide_01_400.jpg');
	}

	.home-pave2 > div h2 {
		margin-bottom:10px;
		font-size:20px;
		line-height:25px;
	}


	h1, h1 span.color {
		font-size:35px;
		line-height:1.3;
	}

	#contentMapHome {
		height:500px;
	}

	.favList .liste a {
		width:calc(50% - 12px);
	}
}




@media screen and (max-width: 890px) {
	body {
		font-size: 1.3em;
	}

	#myShop {
		font-size: 1.3em;
	}

	.header #favBtn {
		display:none;
	}

	.menu-smart {
		display:block;
		position:absolute;
		right:10px;
		top:8px;
		cursor:pointer;
	}

	.menu {
		position:absolute;
		display:none;
		z-index:10000;
		margin:0;
		right:0px;
		top:40px;
		background:#000;
		padding:10px;
		box-shadow:0px 0px 10px rgba(0,0,0,0.5);

		font-size: 1.3em;
        line-height: 1.3;
	}

	.menu li {
		display:block;
	}

	.menu li.account a {
		padding: 7px 10px 4px 10px;
	}

	.menu li.account a span {
		display:inline-block;
		/*padding-right:15px;*/
	}

	.menu li.account a img {
		display:none;
	}

	.menu li a.button-abo {
		margin-top:10px;
	}

	.menu-bg {
		position:absolute;
		width:110%;
		height:1000px;
		top:40px;
		left:-10px;
		background:rgba(0,0,0,0.7);
		z-index:9000;
	}

	.menu li .smenu {
		display:block;
		position:relative;
		top:0;
		box-shadow:none;
		padding-top:0;
		padding-left:15px;
	}

	.menu li .smenu a {
		border:none;
		font-size:0.9em;
	}

	.pave {
		margin-bottom:15px;
		padding:7px;
	}

	.actionBar {
		padding:0;
	}

	.actionBar .int {
		padding:0;
	}

	#partSearch {
		width:85%;
		padding:0;
	}

	#partSearch i {
		position:absolute;
		font-size:20px;
		top:12px;
		left:12px;
	}

	#partSearch input {
		font-size: 1.2em;
		padding:7px 0px 7px 45px;
		width:100%;
		height:45px;
	}

	#partFeedback {
		width:auto;
		padding:0;
		height:45px;
	}

	#partFeedback i {
		font-size:30px;
		margin-top:7px;
		margin-left:10px;
	}

	#partFeedback img {
		margin:0;
	}

	#partFeedback span {
		display:none;
	}

	#contentMap.display {
		height:calc(40% - 95px);
		width:100%
	}

	#contentInfos.display {
		width:100%;
		height:calc(60%);
		right:0px;
		left:0px;
		top:auto;
		bottom:0px;
	}

	#contentInfos.display.full {
		height:calc(100% - 95px);
	}

	#contentInfos.display .closeContent {
		display:block;
	}

	#contentInfos.display .displayContent {
		display:block;
	}

	#contentInfos.display.full .closeContent {
		top:10px;
	}

	#contentInfos.display.full .displayContent {
		top:10px;
		right:70px;
	}

	#contentInfos .inner {
		padding-top:0;
		padding-bottom:70px;
	}

	#contentInfos .part .close {
		top:0;
	}

	#contentInfos .closeContent {
		left:auto;
		top:-25px;
		right:10px;
		width:40px;
		height:40px;
		line-height:40px;
		font-size:22px;
	}

	#contentInfos .displayContent {
		left:auto;
		top:-25px;
		right:60px;
		width:40px;
		height:40px;
		line-height:40px;
		font-size:22px;
	}

	#contentInfos .scroll {
    	border:none;
	}

	#contentInfos a.title {
		margin-top:0px;
		padding-left:0px;
	}

	#contentInfos .subtitle {
		padding-left:0px;
	}


	.linkAbo .title span {
		display:block;
		font-size:0.9em;
	}

	.linkAbo .prix .prixbarre {
		display:block;
	}

	.promoAbo .titlePromo {
		font-size:1.2em;
	}

	.promoAbo .txtAbo:before {
	  content: "";
	  display: block;
	  clear: both;
	}

	.promoAbo .txtAbo {
		padding-top:10px;
	}

	.tableObs {
		font-size:0.9em;
	}

	.tableObs tr.head {
		font-size:0.85em;
	}

	.tableObs tr.head .tableTxtMin,
	.tableObs tr.head .tableTxtMoy,
	.tableObs tr.head .tableTxtMax {
		font-size:0.85em;
	}

	.tableObs .tableTxtO {
		font-size:1.1em;
		font-weight:bold;
	}

	.slider, .slider .imgBlock {
		height:300px;
		background-image:url('../img/slide_01_300.jpg');
	}

	.home-pave1 > div {
		padding:30px;
	}

	.home-pave2 .block {
		display:block;
		width:100%;
		padding:20px;
	}

	.home-pave2 img {
		width:15%;
	}

	.home-pave2 > div {
		padding:20px;
	}

	.home-pave2 > div h2 {
		margin-bottom:6px;
	}

	.home-pave2 .block > div {
		width:83%;
	}

	.home-pave4 > div {
		padding:30px;
	}

	#contentMapHome {
		height:400px;
	}

	.etape {
		font-size:15px;
		color:#999;
		vertical-align:top;
		text-transform:uppercase;
	}


	.shop .item {
		padding-bottom:20px;
		border-bottom:solid 1px #EEE;
	}

	.shop .item img {
		width:100%;
	}

	.shop .item .details {
		display:inline-block;
		max-width:100%;
		vertical-align:top;
		padding:5px;
	}

	.footer .menuFooter {
		display:none;
	}

	.footer .mobile {
		display:block;
		padding: 8px 0px;
		margin:0;
		line-height:1;
	}

	.footer .mobile li {
		display:inline-block;
		width:23%;
		text-align:center;
	}

	.footer .mobile li a {
		text-decoration:none;
		color:#333;
	}

	.footer .mobile li i {
		font-size:20px;
	}

	.footer .mobile li span {
		display:block;
		font-size:0.8em;
		padding-top:3px;
	}

	.footer .button-abo {
		display:block;
		position:absolute;
		bottom:70px;
		width:100%;
		text-align:center;
	}

	.footer .button-abo .btn {
		padding:0.7em 2em;
		font-size:1.2em;
		background:#69C;
		border-radius:8px;
		line-height:1;
	}

	.footer .button-abo .btn span {
		display:block;
		font-size:0.7em;
		color:#000;
	}

	/* texte de présentation des pavés : entièrement replié sur mobile (il reste dans le
	   HTML, donc indexé), un lien "En savoir plus" (ajouté par init.js) le déplie */
	.readMore {
		height:0;
		overflow:hidden;
		margin-top:0 !important;
		margin-bottom:0 !important;
	}

	.readMore.more {
		height:auto;
		margin-top:8px !important;
		margin-bottom:4px !important;
	}

	.readMore-toggle {
		display:inline-block;
		margin:4px 0 10px;
		font-size:12.5px;
		font-weight:600;
		color:var(--accent-texte);
		cursor:pointer;
	}

	.pave.ports {
		display: block;
	}

	.pave.zones {
		display: flex;
		flex-direction: column;
	}

	.pave.ports .col {
		width:100%;
		display: block;
	}

	.pave.zones .col {
		width:100%;
		display: block;
	}

	.pave.zones .col:first-child {
		order:2;
	}

	.aboSelect {
		display:flex;
		flex-direction: column;
	}

	.aboSelect .aboBlock {
		min-height:auto;
		padding-bottom: 4em;
		order:2;
	}

	.aboSelect .aboBlock.pro {
		order:1;
	}

	.pave.account {
		display:block;
	}

	.pave.account .col {
		width:100%;
		display: block;
	}

	.favList .liste a {
		width:100%;
		margin-left:0;
		margin-right:0;
	}

}


.SprdMain .sprd-burgermenu {
	top:80px !important;
}

.sprd-info-footer__open-shop {
	display:none !important;
}

.wrap {
	padding:0px 15px;
}

.btn2 {
	display: inline-block;
    padding: 8px 15px;
    background: #333;
    border: solid 1px #FFF;
    color: #FFF;
	border-radius:7px;
	font-weight:700;
}
.btn2.plus {display: block; text-align: center; margin-top: 10px;}
.btn-ghost { background:#FFF; color:var(--encre); border: 1px solid var(--ligne-forte); }

.breadcrumbs{font-size:1em;color:var(--gris-clair);}
.breadcrumbs a{text-decoration:none; display:inline-block; color:var(--gris-clair); padding:0px 5px;}
.breadcrumbs a:hover{color:var(--accent-texte)}

/* Titre */
.entete{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:12px 0 16px;flex-wrap:wrap}
h1{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-1px;line-height:1.1;font-stretch:90%}
h1 em{font-style:normal;color:var(--accent-texte)}
h1 .focus{font-style:normal;color:var(--accent-texte)}
.source{display:inline-flex;align-items:center;gap:6px;background:var(--panneau);border:1px solid var(--ligne);color:var(--gris);font-weight:600;padding:3px 10px;border-radius:6px;font-size:11.5px;font-family:'JetBrains Mono',monospace;letter-spacing:.03em;vertical-align:6px;margin-left:8px}
.meta{display:flex;gap:14px;margin-top:9px;font-size:13px;color:var(--gris);flex-wrap:wrap;align-items:center}
.meta .mono{font-size:12.5px;color:var(--gris-clair)}
.meta a{color:var(--accent-texte);font-weight:500}
.live{display:inline-flex;align-items:center;gap:7px;background:var(--accent-fond);color:var(--accent-texte);font-weight:600;padding:4px 11px;border-radius:999px;font-size:12.5px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--accent-texte);display:inline-block;animation:pulse 2s infinite}
@keyframes pulse{50%{opacity:.35}}
.actions-spot{display:flex;gap:9px;flex-wrap:wrap}
.btn-ico{border:1px solid var(--ligne-forte);border-radius:var(--radius);padding:9px 13px;font-size:13.5px;color:var(--gris);display:inline-flex;align-items:center;gap:7px;background:var(--fond)}
.btn-ico.isFav {font-weight:bold; color:var(--encre); background:var(--accent-fond);}
.btn-ico:hover{border-color:var(--accent);color:var(--accent-texte)}

/* Onglets */
.onglets{display:flex;gap:4px;border-bottom:1px solid var(--ligne);overflow-x:auto;scrollbar-width:none}
.onglets::-webkit-scrollbar{display:none}
.onglet{padding:12px 17px;font-size:14.5px;font-weight:600;color:var(--gris);border-bottom:2px solid transparent;white-space:nowrap}
.onglet:hover{color:var(--encre)}
.onglet.actif{color:var(--accent-texte);border-color:var(--accent)}


/* Grille */
.dash{display:grid;grid-template-columns:repeat(12,1fr);gap:15px;padding:20px 0 34px;align-items:start}
.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
.panneau{background:var(--fond);border:1px solid var(--ligne);border-radius:15px;padding:18px;box-shadow:var(--ombre);height:100%}
.p-titre{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:1.2em;color:var(--gris-clair);font-family:'JetBrains Mono',monospace;letter-spacing:.08em;margin-bottom:12px}
.p-titre a{color:var(--accent-texte);font-weight:500;letter-spacing:0;font-size:11.5px}
.p-titre a:hover{color:var(--encre)}
.p-titre > span {text-transform:uppercase;}
.p-titre > span .focus {font-weight: 700;   color: var(--encre);}

.decalage{margin-top:12px;font-size:11px;color:var(--gris-clair);text-align:center;font-family:'JetBrains Mono',monospace;background:var(--panneau);border:1px dashed var(--ligne-forte);border-radius:8px;padding:8px}
.decalage a{color:var(--accent-texte);font-weight:600}

/* PRO */
.pro{display:flex;align-items:center;gap:18px;background:var(--encre);border-radius:var(--radius);padding:22px 26px;flex-wrap:wrap}
.pro .ic{width:42px;height:42px;border-radius:10px;background:rgba(58,192,231,.15);display:flex;align-items:center;justify-content:center;flex:none}
.pro p{flex:1;font-size:14px;color:#9FB2C1;min-width:230px}
.pro p b{color:#fff}

/* Proximité */
.section-t{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris-clair);border-top:1px solid var(--ligne);padding-top:18px;margin-bottom:16px}
.prox{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px}
.prox-col{background:var(--panneau);border:1px solid var(--ligne);border-radius:var(--radius);padding:18px}
.prox-col h3{font-size:13.5px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.prox-col h3 i{width:8px;height:8px;border-radius:2px;background:var(--accent);display:inline-block}
.prox-col h3 span{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gris-clair);font-weight:400}
.prox-col ul{list-style:none; padding: 0;}
.prox-col li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--ligne);font-size:1.1em;}
.prox-col li:nth-child(n+6){display:none;}
.prox-col.showAll li{display:flex;}
.prox-col li:first-child{border-top:none;padding-top:0}
.prox-col li a {font-weight:700; color:var(--encre);}
.prox-col li a:hover{color:var(--accent-texte)}
.prox-col .km{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gris-clair);flex:none}
.prox-col .tout{display:block;margin-top:10px;font-size:12.5px;font-weight:600;color:var(--accent-texte); cursor:pointer;}

/* SEO */
.seo{max-width:75ch;color:var(--gris);font-size:15px;margin-bottom:24px}
.seo h2{color:var(--encre);font-size:21px;font-weight:800;letter-spacing:-.4px;margin-bottom:12px}
.seo p+p{margin-top:12px}
.faq{border-top:1px solid var(--ligne);max-width:75ch;margin-bottom:70px}
.faq details{border-bottom:1px solid var(--ligne);padding:14px 0; margin:0;}
.faq summary{font-weight:600;font-size:15px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--accent-texte);font-weight:700}
.faq details[open] summary::after{content:'−'}
.faq p{margin-top:9px;color:var(--gris);font-size:14.5px}

.tabVent.v2 table{width:100%;border-collapse:collapse;font-size:13.5px;border:none;}
.tabVent.v2 thead th{position:sticky;top:64px;background:var(--fond);text-align:left;font-size:10.5px;font-family:'JetBrains Mono',monospace;letter-spacing:.06em;color:var(--gris-clair);font-weight:500;padding:9px 10px;border-bottom:1px solid var(--ligne-forte);z-index:5}
.tabVent.v2 tbody td{padding:4px 4px;border-bottom:1px solid var(--ligne); border-left: none;}
.tabVent.v2 tbody tr:hover{background:var(--panneau)}
.tabVent.v2 .h{font-family:'JetBrains Mono',monospace;color:var(--gris);width:60px}
.tabVent.v2 .dir-cell{width:96px;white-space:nowrap}
.tabVent.v2 .fleche{display:inline-block;font-size:15px;color:var(--accent-texte);width:20px;text-align:center}
.tabVent.v2 .dir-lib{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gris)}
.tabVent.v2 .num{font-family:'JetBrains Mono',monospace;font-weight:700;width:56px;text-align:right}
.tabVent.v2 .num.max{color:var(--v-fort)}
.tabVent.v2 .barre-cell{width:42%}
.tabVent.v2 .mini{height:8px;border-radius:4px;background:var(--panneau);position:relative;overflow:hidden}
.tabVent.v2 .mini i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--accent)}
.tabVent.v2 .mini u{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--v-fort);text-decoration:none}

.tabVent.v2 table td.h{width:50px; font-size:0.9em}
.tabVent.v2 table td.dir{width:80px;}
.tabVent.v2 table td.min{width:40px; text-align:right;}
.tabVent.v2 table td.moy{width:60px; font-weight:700; font-size:1.1em; text-align:right;}
.tabVent.v2 table td.moy span{display:inline-block; width:45px; padding:3px 5px; border-radius:5px; color: #FFF; text-shadow: -1px -1px 0 #999,  /* Contour en noir */
                  1px -1px 0 #999,
                 -1px 1px 0 #999,
                  1px 1px 0 #999;}
.tabVent.v2 table td.max{width:40px; text-align:right;}
.tabVent.v2 table td.temp{width:50px; text-align:right; color:var(--gris);}

.tabVent.v2 tr.jour-debut td.jour-label{font-weight:700; padding-top:16px; border-bottom:none; background:none;}
.tabVent.v2 tr.jour-debut:hover{background:none;}

.tabVent.v2 tbody tr:nth-child(n+17) {display:none;}
.tabVent.v2.showAll tbody tr {display:table-row;}

/* zone masquée PRO */
.masque{position:relative}
.masque tbody td{color:var(--gris-clair)}
.voile{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,.93) 55%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;border-radius:var(--radius)}
.voile p{font-size:14px;color:var(--gris);max-width:44ch}
.voile p b{color:var(--encre)}
.flou{filter:blur(3px);user-select:none}
.plus{display:block;text-align:center;margin-top:12px}

/* Responsive */
@media(max-width:1100px){
  .c3{grid-column:span 4}.c9{grid-column:span 8}
  .c5,.c7{grid-column:span 6}
  .resume{grid-template-columns:repeat(3,1fr)}
  .prox{grid-template-columns:repeat(2,1fr)}
  nav.menu{display:none}
}
@media(max-width:860px){
  .c3,.c4,.c5,.c7,.c8,.c9{grid-column:span 12}
  .dash{gap:14px}
  .panneau {padding: 10px;}
}
@media(max-width:620px){
  .wrap{padding:0 10px}
  .mapHome{margin-bottom:18px}
  .o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}
  .resume{grid-template-columns:repeat(2,1fr)}
  .prox{grid-template-columns:1fr}
  .barre-cell{display:none}
  thead th{top:0}
  .actions-spot{width:100%}
  .actions-spot a{flex:1;justify-content:center}
}

/* ====== Page abonnement (content/page_abo.php) — maquette fond blanc, teal + corail ====== */
.abo2{--a1:#2FD8CB;--a2:#FF7A59;--a-txt:#0B8F86;--a-surface:#f4f7f8;--a-surface2:#eef3f4;--a-line:rgba(10,25,34,.10);--a-line2:rgba(10,25,34,.20);--a-text:#0a1922;--a-dim:rgba(10,25,34,.64);--a-dim2:rgba(10,25,34,.42);--a-grad:linear-gradient(90deg,var(--a1),var(--a2));max-width:1000px;margin:0 auto;font-family:'Manrope',sans-serif;color:var(--a-text)}
.abo2 h1,.abo2 .abo-card-price .num,.abo2 .abo-card-price.free{font-family:'Space Grotesk',sans-serif}

.abo-hero{position:relative;text-align:center;padding:40px 10px 8px;overflow:hidden}
.abo-hero-bg{position:absolute;left:0;right:0;top:0;height:420px;opacity:.10;pointer-events:none}
.abo-hero-in{position:relative;max-width:720px;margin:0 auto}
.abo-step{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid var(--a-line2);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--a-txt);text-transform:uppercase}
.abo-hero h1{margin:22px 0 0;font-size:clamp(30px,5vw,52px);font-weight:700;line-height:1.08;letter-spacing:-.02em;color:var(--a-text)}
.abo-hero h1 .focus{background:var(--a-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.abo-sub{margin:20px auto 0;font-size:17px;line-height:1.6;color:var(--a-dim)}
.abo-sub b{font-weight:700;color:var(--a-dim)}
.abo-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:30px}
.abo-trust span{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:var(--a-surface);border:1px solid var(--a-line);font-size:13px;font-weight:600;color:var(--a-dim)}
.abo2 .ck{flex:none;display:block}

.abo-openbar{display:flex;align-items:flex-start;gap:16px;background:linear-gradient(135deg,var(--encre),#12283a);color:#FFF;border-radius:18px;padding:20px 24px;margin:20px 0 0}
.abo-openbar img{width:44px;flex:none}
.abo-openbar p{color:#B9C7D3;font-size:13.5px;margin-top:4px}

.abo-already{display:flex;align-items:center;gap:16px;background:var(--a-surface);border:1.5px solid var(--a1);border-radius:18px;padding:18px 22px;margin:26px 0}
.abo-already .ic{width:40px;height:40px;border-radius:50%;background:var(--a1);color:#07161c;display:flex;align-items:center;justify-content:center;flex:none}
.abo-already b{color:var(--a-txt)}
.abo-already div div{font-size:14px;color:var(--a-dim);margin-top:3px}

.abo-duration{display:flex;width:max-content;max-width:100%;margin:40px auto 48px;padding:6px;gap:4px;border-radius:999px;background:var(--a-surface);border:1px solid var(--a-line);box-shadow:0 2px 10px -4px rgba(10,25,34,.10)}
.abo-duration a{position:relative;padding:12px 26px;border-radius:999px;font-size:14px;font-weight:700;color:var(--a-dim);white-space:nowrap}
.abo-duration a:hover{color:var(--a-text)}
.abo-duration a.selected{background:var(--a-grad);color:#07161c}
.abo-duration a .save{position:absolute;top:-9px;right:-4px;background:var(--a2);color:#1a0d06;font-size:10px;font-weight:800;padding:2px 6px;border-radius:999px;line-height:1.3}

.abo-cards{display:flex;justify-content:center;gap:28px;flex-wrap:wrap;margin-bottom:64px}
.abo-card{position:relative;width:400px;max-width:100%;box-sizing:border-box;padding:44px 36px 36px;border-radius:24px;background:var(--a-surface2);border:1px solid var(--a-line);box-shadow:0 20px 44px -30px rgba(10,25,34,.18);display:flex;flex-direction:column}
.abo-card:hover{border-color:var(--a-line2)}
.abo-card.pro{order:-1;border:none;background:linear-gradient(180deg,var(--a-surface),var(--a-surface2));box-shadow:0 0 0 1.5px var(--a1) inset,0 30px 70px -30px rgba(47,216,203,.35)}
.abo-card-ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);padding:7px 18px;border-radius:999px;background:var(--a-grad);color:#07161c;font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap;text-transform:uppercase}
.abo-card-title{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--a-dim)}
.abo-card.pro .abo-card-title{color:var(--a-txt)}
.abo-card-price{display:flex;align-items:baseline;gap:8px;margin:14px 0 0}
.abo-card-price .num{font-size:46px;font-weight:700;letter-spacing:-.02em;color:var(--a-text);line-height:1.1}
.abo-card-price .unit{font-size:15px;color:var(--a-dim)}
.abo-card-sub{margin:6px 0 0;font-size:13px;color:var(--a-dim2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.abo-card:not(.pro) .abo-card-sub{font-family:inherit}
.abo-card-list{list-style:none;margin:28px 0 32px;padding:28px 0 0;border-top:1px solid var(--a-line);display:flex;flex-direction:column;gap:16px;flex:1}
.abo-card-list li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.5;color:var(--a-text)}
.abo-card-list li .ck{margin-top:2px}
.abo-card:not(.pro) .abo-card-list li{color:var(--a-dim)}
.abo-cta,.abo-cta-ghost{display:block;width:100%;box-sizing:border-box;text-align:center;padding:16px;border-radius:14px;font-size:15px}
.abo-cta{background:var(--a-grad);color:#07161c;font-weight:800;box-shadow:0 18px 40px -16px rgba(47,216,203,.55);transition:transform .18s ease,box-shadow .18s ease}
.abo-cta:hover{transform:translateY(-2px);box-shadow:0 20px 44px -14px rgba(47,216,203,.55);color:#07161c}
.abo-cta-ghost{border:1px solid var(--a-line2);color:var(--a-text);font-weight:700;background:transparent}
.abo-cta-ghost:hover{border-color:var(--a-text);background:rgba(10,25,34,.03)}

.abo-faq{max-width:720px;margin:0 auto 70px}
.abo-faq-t{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--a-txt);text-transform:uppercase;text-align:center;margin:0 0 14px}

@media(max-width:480px){
  .abo-hero{padding-top:24px}
  .abo-sub{font-size:15.5px}
  /* 4 paliers de durée (au lieu de 3) depuis l'ajout du mois seul : au cas où ça ne tienne plus
     sur les plus petits écrans, un défilement horizontal plutôt qu'un débordement/chevauchement */
  .abo-duration{max-width:calc(100% - 32px);overflow-x:auto;-webkit-overflow-scrolling:touch}
  .abo-duration a{padding:11px 16px;font-size:13px}
  .abo-card{padding:38px 22px 26px}
  .abo-card-price .num{font-size:40px}
  .abo-openbar{flex-direction:column;text-align:center;align-items:center}
  .abo-already{flex-direction:column;text-align:center}
}

/* étape 3/3 : redirection vers Stripe */
.abo-pay{max-width:480px;margin:0 auto;padding:64px 10px 80px;text-align:center}
.abo-pay h1{margin:22px 0 0;font-size:clamp(24px,4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--a-text)}
.abo-spinner{width:44px;height:44px;margin:28px auto 0;border-radius:50%;border:3px solid var(--a-line);border-top-color:var(--a1);border-right-color:var(--a2);animation:aboSpin .8s linear infinite}
@keyframes aboSpin{to{transform:rotate(360deg)}}
.abo-pay-recap{display:inline-flex;align-items:center;gap:14px;margin-top:26px;padding:10px 20px;border-radius:999px;background:var(--a-surface);border:1px solid var(--a-line);font-size:14px;color:var(--a-dim)}
.abo-pay-recap b{font-family:'Space Grotesk',sans-serif;font-size:17px;color:var(--a-text)}
.abo-pay-sub{margin:18px 0 0;font-size:15px;line-height:1.6;color:var(--a-dim)}
.abo-pay-sub.small{font-size:13px;margin-top:8px;color:var(--a-dim2)}
.abo-pay-sub.small a{color:var(--a-dim2);text-decoration:underline}
.abo-pay-cb{width:150px;margin-top:28px;opacity:.55}
.abo-pay-btn{display:inline-block;width:auto;padding:14px 28px;margin-top:26px}

/* étape 2/3 : formulaire */
.abo-pay-form{max-width:440px}
.abo-form{text-align:left;margin-top:30px}
.abo-form label{display:block;margin:16px 0 6px;font-size:13px;font-weight:700;color:var(--a-dim)}
.abo-form input.box{width:100%;box-sizing:border-box;padding:14px 16px;font:inherit;font-size:15px;color:var(--a-text);background:#fff;border:1px solid var(--a-line2);border-radius:14px;transition:border-color .15s ease,box-shadow .15s ease}
.abo-form input.box:focus{outline:none;border-color:var(--a1);box-shadow:0 0 0 3px rgba(47,216,203,.22)}
.abo-form-pw{position:relative}
.abo-form-pw input.box{padding-right:84px}
.abo-form-pw a{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:13px;font-weight:700;color:var(--a-txt)}
.abo-form .err{color:#B42318;font-size:13px;margin-top:6px}
.abo-form .err:empty{display:none}
.abo-form .abo-cta{margin-top:26px}

/* page de retour paiement */
.abo-pay-ico{width:60px;height:60px;margin:0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center}
.abo-pay-ico.ok{background:var(--a1);color:#07161c;box-shadow:0 14px 34px -14px rgba(47,216,203,.6)}
.abo-pay-ico.err{background:#FDECEC;color:#B42318;border:1px solid rgba(180,35,24,.25)}
.abo-pay-ico + h1{margin-top:24px}

/* ====== Page compte (content/page_account.php) ====== */
.account-menu{display:flex;flex-direction:column;gap:2px}
.account-menu-item{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:var(--radius);color:var(--encre);font-weight:600;font-size:14.5px}
.account-menu-item:hover{background:var(--panneau)}
.account-menu-item.selected{background:var(--accent-fond);color:var(--accent-texte)}
.account-menu-item .ico{flex:none;color:var(--gris-clair);display:flex}
.account-menu-item.selected .ico{color:var(--accent-texte)}
.account-menu-item .chevron{margin-left:auto;flex:none;color:var(--gris-clair)}
.account-menu-item.logout{color:var(--v-alerte);margin-top:10px;padding-top:16px;border-top:1px solid var(--ligne)}
.account-menu-item.logout .ico{color:var(--v-alerte)}

.account-back{display:none;align-items:center;gap:5px;color:var(--accent-texte);font-weight:600;font-size:13.5px;margin-bottom:16px}

.account-info-list{display:flex;flex-direction:column;margin:14px 0 22px}
.account-info-list > div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--ligne);font-size:14.5px}
.account-info-list > div:last-child{border-bottom:none}
.account-info-list > div b{color:var(--gris);font-weight:600}

.account-form{margin-top:14px}
.account-form .mt1{font-size:12.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--gris);margin:14px 0 6px}
.account-form input.box{background:var(--fond);border:1px solid var(--ligne-forte);border-radius:var(--radius);padding:13px 16px;font-size:1em;color:var(--encre);width:100%;box-sizing:border-box;transition:border-color .15s ease, box-shadow .15s ease}
.account-form input.box:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-fond)}

.account-status{background:var(--accent-fond);border:1px solid var(--accent);border-radius:var(--radius);padding:16px 20px;margin-top:14px;font-size:14.5px;color:var(--gris)}
.account-status b{color:var(--accent-texte)}
.account-status.free{background:var(--panneau);border-color:var(--ligne)}
.account-status.free b{color:var(--encre)}

.account2 .btn{display:inline-block;border-radius:var(--radius);padding:13px 22px;border:none;background:var(--encre);color:#FFF;font-weight:700}
.account2 .btn:hover{background:var(--accent-texte)}

@media(max-width:860px){
  .account2:not(.has-cat) .account-detail{display:none}
  .account2.has-cat .account-nav{display:none}
  .account2.has-cat .account-back{display:inline-flex}
}

/* ====== Page d'accueil (content/page_home.php) ====== */
.home-hero{background:linear-gradient(135deg, var(--encre), #12283a);color:#FFF;border-radius:18px;padding:48px 36px;margin:24px 0 28px;text-align:center}
.home-hero h1{font-size:clamp(28px,4.5vw,44px);font-weight:800;letter-spacing:-1px;line-height:1.15;margin-bottom:16px}
.home-hero h1 span{color:var(--accent)}
.home-hero p{max-width:68ch;margin:0 auto;color:#B9C7D3;font-size:16px;line-height:1.6}
.home-hero .cta{margin-top:26px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn-accent-lg, .btn-ghost-lg{display:inline-block;padding:14px 24px;border-radius:var(--radius);font-weight:700;font-size:15px}
.btn-accent-lg{background:var(--accent-texte);color:#FFF}
.btn-accent-lg:hover{background:var(--accent)}
.btn-ghost-lg{background:rgba(255,255,255,.08);color:#FFF;border:1px solid rgba(255,255,255,.25)}
.btn-ghost-lg:hover{border-color:#FFF}

.home-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin-top:28px}
.home-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:#B9C7D3;font-weight:600}
.home-trust span svg{color:var(--accent);flex:none}

.home-feature{display:block;text-align:center;color:var(--encre)}
.home-feature img{width:44px;height:44px;margin-bottom:12px}
.home-feature h2{font-size:15px;font-weight:700;margin-bottom:6px}
.home-feature p{font-size:13.5px;color:var(--gris);line-height:1.5;margin:0}

@media(max-width:480px){
  .home-hero{padding:34px 20px}
  .home-hero .cta{flex-direction:column}
  .btn-accent-lg, .btn-ghost-lg{width:100%;text-align:center;box-sizing:border-box}
}

/* Liens régions de la page d'accueil (content/page_home.php) : quelques liens
   ciblés vers /liste/region/... plutôt qu'une liste exhaustive d'anémomètres */
.home-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:34px}
.home-links a{display:inline-block;padding:9px 16px;border:1px solid var(--ligne-forte);border-radius:999px;font-size:14px;font-weight:600;color:var(--encre);background:var(--fond)}
.home-links a:hover{border-color:var(--accent);color:var(--accent-texte);background:var(--accent-fond)}
.home-links a.all{border-style:dashed;color:var(--accent-texte)}

/* page liste : bloc "près de vous" (loader + apparition en fondu) */
.near-loader{display:flex;align-items:center;gap:10px;padding:14px 12px;color:#999;font-size:13.5px}
.near-loader span{width:18px;height:18px;border-radius:50%;border:2px solid #E3E8EC;border-top-color:var(--accent);animation:nearSpin .8s linear infinite}
@keyframes nearSpin{to{transform:rotate(360deg)}}
#nearList > a{animation:nearFade .9s ease-out both}
#nearList > a:nth-child(2){animation-delay:.12s}#nearList > a:nth-child(3){animation-delay:.24s}#nearList > a:nth-child(4){animation-delay:.36s}#nearList > a:nth-child(5){animation-delay:.48s}#nearList > a:nth-child(n+6){animation-delay:.6s}
@keyframes nearFade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}

/* page liste : régions dépliables + zones de navigation repliées */
.reg-list{border-top:1px solid var(--ligne);margin-bottom:22px}
.reg{border-bottom:1px solid var(--ligne)}
.reg summary,.reg-zones > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:13px 4px;font-weight:600;font-size:15px}
.reg summary::-webkit-details-marker,.reg-zones > summary::-webkit-details-marker{display:none}
.reg summary::before,.reg-zones > summary::before{content:'+';flex:none;width:16px;color:var(--accent-texte);font-weight:700}
.reg[open] > summary::before,.reg-zones[open] > summary::before{content:'−'}
.reg-name{flex:1}
.reg-count{font-weight:400;font-size:13px;color:var(--gris-clair)}
.reg-body{padding:2px 4px 18px 32px}
.reg-body .home-links{margin:12px 0 0}
.reg-body .home-links a{padding:7px 14px;font-size:13.5px}
.reg-all{display:inline-block;font-size:14px;font-weight:600;color:var(--accent-texte)}
.reg-n{color:var(--gris-clair);font-weight:400;margin-left:3px}
.reg-zones{border-top:1px solid var(--ligne);border-bottom:1px solid var(--ligne)}
.reg-zones > summary{color:var(--encre)}
.reg-more{padding:8px 4px 0}

/* page prévisions : légende du graphique de comparaison des modèles */
.cmp-legend{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:13px;color:var(--gris);margin-bottom:10px}
.cmp-legend span{display:inline-flex;align-items:center;gap:7px}
.cmp-sw{display:inline-block;width:22px;height:11px;border-radius:3px}
.cmp-sw-dark{background:rgba(15,140,180,.24)}
.cmp-sw-light{background:rgba(15,140,180,.13)}

/* tableaux vent (prévisions / relevés), desktop : colonnes température, min et rafales/max plus larges */
@media(min-width:861px){
  .tabVent.v2 table td.temp{width:78px; text-align:center}
  .tabVent.v2 table td.min{width:64px; padding-right:14px}
  .tabVent.v2 table td.max{width:78px; padding-right:14px}
}

/* tableau des relevés : police un peu plus petite pour faire de la place à la colonne température */
.tabVent.v2 #tabObsVent{font-size:12.5px}
.tabVent.v2 #tabObsVent td.temp{width:62px;text-align:center}
@media(min-width:861px){
  .tabVent.v2 #tabObsVent td.min,.tabVent.v2 #tabObsVent td.max{width:58px}
}

/* graphiques défilables horizontalement sur mobile (cf. chart_scrollBox en PHP) */
.chart-scroll-wrap{position:relative;width:100%}
.chart-scroll-in{position:relative;width:100%;height:var(--ch,200px)}
.chart-scroll-hint{display:none}
@media(max-width:860px){
  .chart-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
  .chart-scroll-in{width:var(--cw);min-width:100%}
  .chart-scroll canvas{touch-action:pan-x pan-y}

  /* indice de défilement : mention + dégradé sur le bord droit, tant qu'il reste de la place à parcourir */
  .chart-scroll-wrap.is-scrollable .chart-scroll-hint{display:block;text-align:center;font-size:11.5px;color:var(--gris-clair);margin:0 0 4px}
  .chart-scroll-wrap.is-scrollable:not(.at-end)::after{content:'';position:absolute;top:18px;right:0;bottom:8px;width:34px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.95))}
}

/* axe Y fixe des graphiques défilables (cf. civ_stickyYAxisPlugin) */
.chart-yaxis-fixed{position:absolute;pointer-events:none;display:none;z-index:2}

/* légende HTML au-dessus des graphiques (cf. civ_htmlLegendPlugin) */
.chart-legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--gris);margin-bottom:6px}
.chart-legend:empty{display:none}
.chart-legend-item{display:inline-flex;align-items:center;gap:7px;cursor:pointer}
.chart-legend-item.off{opacity:.4;text-decoration:line-through}
.chart-legend .sw-line{display:inline-block;width:20px;height:3px;border-radius:2px}
.chart-legend .sw-bar{display:inline-block;width:12px;height:12px;border-radius:3px}

/* sélecteur de modèle météo (page prévisions) */
.model-tabs-wrap{position:relative}
.model-tabs{display:flex;align-items:stretch;gap:8px;overflow-x:auto;padding:2px 2px 8px;position:relative;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.model-group{flex:none;align-self:center;font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-clair);padding:0 4px 0 10px;margin-left:4px;border-left:1px solid var(--ligne-forte);white-space:nowrap}
.model-tabs > .model-group:first-child,.model-tabs > .model-tab-synthese + .model-group{border-left:none;margin-left:0;padding-left:2px}
.model-tab{flex:none;scroll-snap-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:84px;padding:8px 12px;border:1px solid var(--ligne-forte);border-radius:12px;background:var(--fond);color:var(--encre);line-height:1.25;text-align:center}
.model-tab b{font-size:14px;font-weight:700}
.model-tab small{font-size:11px;color:var(--gris);white-space:nowrap}
a.model-tab:hover{border-color:var(--accent);background:var(--accent-fond)}
.model-tab.active{border-color:var(--accent);background:var(--accent-fond);color:var(--accent-texte);box-shadow:0 0 0 1px var(--accent) inset}
.model-tab.active small{color:var(--accent-texte)}
.model-tab-synthese{border-style:dashed}
@media(max-width:860px){
  .model-tabs-wrap:not(.at-end)::after{content:'';position:absolute;top:0;right:0;bottom:8px;width:30px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.95))}
  .model-tabs-wrap:not(.at-start)::before{content:'';position:absolute;top:0;left:0;bottom:8px;width:24px;z-index:1;pointer-events:none;background:linear-gradient(to left,rgba(255,255,255,0),rgba(255,255,255,.95))}
}

/* lien "En savoir plus" des textes de présentation : mobile uniquement */
@media(min-width:891px){ .readMore-toggle{display:none} }

/* graphe des relevés vent : sur mobile, le défilement remplace les boutons précédent / suivant */


/* pavé "tendance 2 h" du résumé de la journée */
.pave-small.trend .value{display:flex;align-items:center;gap:8px;margin-top:2px}
.pave-small.trend .trend-arrow{flex:none;transition:transform .2s ease}
.pave-small.trend .trend-label{font-size:.62em;font-weight:700;line-height:1.15;letter-spacing:0}
.pave-small.trend .trend-sub{font-size:.78em;color:var(--gris);margin-top:2px;letter-spacing:0}
.pave-small.trend-up2 .value{color:#D3392F}
.pave-small.trend-up1 .value{color:#E8742A}
.pave-small.trend-flat .value{color:#5D7386}
.pave-small.trend-down1 .value{color:#0E88AC}
.pave-small.trend-down2 .value{color:#0B6FA6}
.pave-small.trend-none .value{color:var(--gris-clair)}
a.pave-small.trend-lock{text-decoration:none;border-style:dashed}
a.pave-small.trend-lock .value{color:var(--accent-texte)}
a.pave-small.trend-lock:hover{border-color:var(--accent)}

/* graphe des relevés vent : défilement horizontal sur tous les écrans */
.obs-chart-wrap .chart-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin}
.obs-chart-wrap .chart-scroll-in{width:var(--cw);min-width:100%}
.obs-chart-wrap .chart-scroll canvas{touch-action:pan-x pan-y}
.obs-loading{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:6;background:rgba(255,255,255,.92);border:1px solid #E2EAF0;border-radius:14px;padding:4px 12px;font-size:12px;color:#5D7386}
/* outils desktop : durée affichée, bouton "Maintenant", boutons ‹ › */
.obs-toolbar,.obs-nav-btn{display:none}
@media(min-width:861px){
  .obs-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:6px 0 8px;font-size:13px;color:var(--gris)}
  .obs-range{display:inline-flex;align-items:center;gap:6px}
  .obs-range button,.obs-now-btn{border:1px solid var(--ligne-forte);background:var(--fond);color:var(--encre);border-radius:999px;padding:5px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
  .obs-range button:hover,.obs-now-btn:hover{border-color:var(--accent);color:var(--accent-texte)}
  .obs-range button.on{background:var(--accent-fond);border-color:var(--accent);color:var(--accent-texte)}
  .obs-chart-wrap .chart-scroll{cursor:grab}
  .obs-chart-wrap .chart-scroll.dragging{cursor:grabbing;user-select:none}
  .obs-chart-wrap .chart-scroll:focus{outline:none}
  .obs-nav-btn{display:flex;align-items:center;justify-content:center;position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid var(--ligne-forte);background:rgba(255,255,255,.96);color:var(--encre);font-size:30px;line-height:1;padding:0 0 4px;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.18);transition:opacity .15s,border-color .15s}
  .obs-nav-btn:hover{border-color:var(--accent);color:var(--accent-texte)}
  .obs-nav-prev{left:52px}
  .obs-nav-next{right:8px}
  .obs-nav-btn.disabled{opacity:.3;pointer-events:none}
}

/* pavé tendance : la variation est sous le libellé (et non sous la flèche), pour garder la hauteur des autres pavés */
.pave-small.trend .value{min-height:1.75em}
.pave-small.trend .trend-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.pave-small.trend .trend-label{font-size:.6em;line-height:1.1}
.pave-small.trend .trend-sub{font-size:.36em;line-height:1.2;font-weight:400;margin-top:1px;color:var(--gris);letter-spacing:0}

/* pavés de chiffres cles : alignés par le haut (sinon un pavé de contenu différent décale les autres) */
.pave-small{vertical-align:top}

/* bouton ‹ › devenu "changement de jour" (page d'un jour passé) : pastille avec le nom du jour */
@media(min-width:861px){
  .obs-nav-btn.as-day{width:auto;min-width:44px;padding:0 18px 0 16px;border-radius:24px;font-size:14px;font-weight:700;white-space:nowrap;border-color:var(--accent);color:var(--accent-texte);background:#FFF}
  .obs-nav-btn.as-day:hover{background:var(--accent-fond)}
}

/* ancres de section (liens "Carte", "Tableau des données"...) : le header fixe masquerait le haut
   de la section visée sans cette marge de défilement */
[id="map"], [id="dataList"], [id="detail"], [id="temperature"] {
	scroll-margin-top: 90px;
}

/* fiche plage/plan d'eau : type de lieu + qualité des eaux de baignade */
.tag-plage{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;background:var(--panneau);border:1px solid var(--ligne);font-size:12px;font-weight:600;color:var(--gris);margin-left:6px;vertical-align:middle}
.tag-plage-mer-littoral{background:var(--accent-fond);border-color:var(--accent);color:var(--accent-texte)}
.tag-plage-lac{background:#E7F3FC;border-color:#BFDFF5;color:#0E6FA8}
.tag-plage-riviere{background:#E9F7F0;border-color:#BEE8D3;color:#0E7A4B}
.tag-plage-estuaire-zone-de-transition{background:#F3EEFB;border-color:#DBC9F5;color:#6B3FA0}
.tag-qualite{background:#FFF7E6;border-color:#F5D98B;color:#8A6200}

/* petit repère de type sur les listes de plages/plans d'eau (cf. plage_typeTag) */
.plage-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.02em;vertical-align:middle}
.plage-tag-mer{background:var(--accent-fond);color:var(--accent-texte)}
.plage-tag-lac{background:#E7F3FC;color:#0E6FA8}
.plage-tag-riviere{background:#E9F7F0;color:#0E7A4B}
.plage-tag-estuaire{background:#F3EEFB;color:#6B3FA0}

/* carte Met Office (page_cartes.php) : une seule image, taille raisonnable, avec une navigation
   précédent/suivant en dessous pour parcourir les échéances (+0h à +84h) */
.metoffice-viewer{max-width:900px;margin:0 auto}
.metoffice-viewer img{display:block;max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--ligne-forte)}
.metoffice-nav{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
.metoffice-nav button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid var(--ligne-forte);background:var(--fond);color:var(--encre);font-size:14px;cursor:pointer;transition:border-color .15s ease, color .15s ease}
.metoffice-nav button:hover:not(:disabled){border-color:var(--accent);color:var(--accent-texte)}
.metoffice-nav button:disabled{opacity:.3;cursor:default}
.metoffice-navLabel{min-width:170px;text-align:center;font-weight:600;font-size:14px}

/* page /zones : liste des zones à gauche, carte à droite sur desktop ; empilé (carte en dessous,
   pleine largeur) sur mobile */
.zones-layout{display:flex;gap:28px;align-items:flex-start;padding:0 10px 10px}
.zones-layout .zones-list{flex:1 1 0;min-width:0}
.zones-layout .zones-mapCol{flex:1 1 0;min-width:0}
.zones-mapCol #zonesMap{width:100%;height:480px;border-radius:var(--radius)}
@media(max-width:860px){
	.zones-layout{display:block}
	.zones-layout .zones-list{margin-bottom:20px}
	.zones-mapCol #zonesMap{height:340px}
}

/* page marées (content/part_content_maree.php) */
.maree-next{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.maree-next-badge{padding:6px 16px;border-radius:999px;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.03em}
.maree-next-badge.pm{background:var(--accent-fond);color:var(--accent-texte)}
.maree-next-badge.bm{background:#FDEFE8;color:#B5501A}
.maree-next-heure{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--encre)}
.maree-next-detail{font-size:15px;color:var(--gris)}

.maree-legend{margin-top:12px;font-size:12px;color:var(--gris-clair)}

/* le défilement de .chart-scroll-wrap (cf. chart_scrollBox) n'est actif que sous 860px sur le
   reste du site : ici on le force aussi en desktop, la courbe de marée (17 jours, double axe)
   restant trop dense si elle est compressée dans la largeur de l'écran */
.maree-chart-desktop-scroll .chart-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:thin}
.maree-chart-desktop-scroll .chart-scroll-in{width:var(--cw);min-width:100%}
.maree-chart-desktop-scroll .chart-scroll canvas{touch-action:pan-x pan-y}
.maree-chart-desktop-scroll .chart-scroll-hint{display:block;text-align:center;font-size:11.5px;color:var(--gris-clair);margin:0 0 4px}
.maree-chart-desktop-scroll .chart-scroll-wrap:not(.at-end)::after{content:'';position:absolute;top:18px;right:0;bottom:8px;width:34px;pointer-events:none;background:linear-gradient(to right,rgba(255,255,255,0),rgba(255,255,255,.95))}

.maree-table-wrap{overflow-x:auto}
.maree-table{width:100%;max-width:640px;border-collapse:collapse;font-size:14px}
.maree-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--gris-clair);font-weight:600;padding:8px 10px;border-bottom:2px solid var(--ligne-forte);white-space:nowrap}
.maree-table td{padding:10px;border-bottom:1px solid var(--ligne);vertical-align:top}
.maree-table tr:hover td{background:var(--panneau)}
.maree-table th.maree-th-coef,.maree-table td:last-child{width:60px;white-space:nowrap}
.maree-cell{display:block;white-space:nowrap;margin-bottom:4px}
.maree-cell:last-child{margin-bottom:0}
.maree-h{color:var(--gris-clair);font-size:12.5px;margin-left:4px}

@media(max-width:620px){
	.maree-next-heure{font-size:26px}
	.maree-table{font-size:12.5px}
}

/* récap simple du jour, fiches plage (content/part_content_previs.php) */
.recap-jour{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;background:var(--accent-fond)}
.recap-jour-main{display:flex;align-items:center;gap:14px}
.recap-jour-icon{width:64px;height:64px;flex-shrink:0}
.recap-jour-label{font-weight:700;font-size:16px;color:var(--encre)}
.recap-jour-temp{font-size:15px;color:var(--gris)}
.recap-jour-temp b{color:var(--encre);font-size:20px}
.recap-jour-sub{font-size:12.5px;color:var(--gris-clair)}
.recap-jour-details{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--gris)}
.recap-jour-details b{color:var(--encre)}
.recap-jour-details i{width:18px;color:var(--accent-texte)}

.recap-jours-row{display:flex;gap:12px;width:100%;flex-basis:100%}
.recap-jour-card{flex:1;min-width:0;background:#fff;border-radius:12px;padding:12px}
.recap-jours-titre{width:100%;flex-basis:100%;font-size:12px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.02em;margin-top:4px}
.recap-jour-card .recap-jours-titre{margin-top:0;margin-bottom:8px}
.recap-periodes{display:flex;gap:10px;width:100%;flex-basis:100%}
.recap-periode{flex:1;min-width:0;background:#fff;border-radius:10px;padding:10px 8px;text-align:center}
.recap-jours .recap-periode{background:#fff;border:1px solid var(--ligne)}
.recap-periode-label{font-size:12px;font-weight:700;color:var(--gris);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.recap-periode img{width:40px;height:40px}
.recap-periode-temp{font-size:17px;font-weight:700;color:var(--encre)}
.recap-periode-vent{font-size:12px;color:var(--gris-clair)}
.recap-periode-vent i{margin-right:3px;color:var(--accent-texte)}

@media(max-width:620px){
	.recap-jour{gap:14px}
	.recap-jour-icon{width:52px;height:52px}
	.recap-jour-label{font-size:15px}
	.recap-jour-temp b{font-size:18px}
	.recap-periodes{gap:6px}
	.recap-periode{padding:8px 4px}
	.recap-periode img{width:32px;height:32px}
	.recap-periode-temp{font-size:15px}
	.recap-periode-vent{font-size:11px}
	.recap-jours-row{flex-direction:column}
}