/* __________________________________________________________________________________________________96
[HTML]   HTML
*/
	
html{
scrollbar-color:#009999;
overflow-x: hidden;
margin: 0;
height: auto;
overflow-y: auto;
}

body {
width:100%;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: cover;
margin: 0;
height: auto;
overflow-y: auto;
background:rgba(225,233,200,0.33);
}

a, a:hover{
text-decoration: none;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #000000;
  opacity: 1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: #000000;
}

::-ms-input-placeholder { /* Edge */
  color: #000000;
}

/* placeholders */
::-webkit-input-placeholder { opacity: 0.33; -webkit-transition: opacity .5s; transition: opacity .5s; }  /* Chrome 56, Safari 9 */
:-moz-placeholder { opacity: 0.33; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 4-18 */
::-moz-placeholder { opacity: 0.33; -moz-transition: opacity .5s; transition: opacity .5s; } /* FF 19-51 */
:-ms-input-placeholder { opacity: 0.33; -ms-transition: opacity .5s; transition: opacity .5s; } /* IE 10+ */
::placeholder { opacity: 0.33; transition: opacity .5s; } /* Modern Browsers */

/* focus */
*:focus::-webkit-input-placeholder { opacity: 0; } /* Chrome 56, Safari 9 */
*:focus:-moz-placeholder { opacity: 0; } /* FF 4-18 */
*:focus::-moz-placeholder { opacity: 0; } /* FF 19-50 */
*:focus:-ms-input-placeholder { opacity: 0; } /* IE 10+ */
*:focus::placeholder { opacity: 0; } /* Modern Browsers */






/* __________________________________________________________________________________________________96
[ff]   fonts
*/

@font-face {
font-family: 'Helvetica Rounded LT Std Bold';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica Rounded LT Std Bold'), 
url('fonts/HelveticaRoundedLTStd-Bd.woff') 
format('woff');
}

@font-face {
font-family: 'Helvetica Rounded LT Std Bold Condensed';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica Rounded LT Std Bold Condensed'), 
url('fonts/HelveticaRoundedLTStd-BdCn.woff') 
format('woff');
}

@font-face {
font-family: 'Helvetica Neue LT Std 45 Light';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica Neue LT Std 45 Light'), 
url('fonts/HelveticaNeueLTStd Lt.woff') 
format('woff');
}

@font-face {
font-family: 'Helvetica 95 Black';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica 95 Black'), 
url('fonts/HelveticaNeue-Black.woff') 
format('woff');
}

@font-face {
font-family: 'Square 721';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Square 721'), 
url('fonts/Square 721 W03 Rom.woff') 
format('woff');
}

@font-face {
font-family: 'Helvetica Neue';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica Neue WGL'), 
url('fonts/Helvetica Neue WGL.woff') 
format('woff');
}

@font-face {
font-family: 'Helvetica Neue Light';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica Neue LT W06 45 Light'), 
url('fonts/Helvetica Neue LT W06 45 Light.woff') 
format('woff');
}

@font-face {
font-family: 'Saginaw  Bold';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Saginaw  Bold'), 
url('fonts/Saginaw  Bold.woff') 
format('woff');
}

@font-face {
font-family: 'Neuropol X';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Neuropol X'), 
url('fonts/Neuropol X.woff') 
format('woff');
}

@font-face {
font-family: 'NeuropolXW00-Condensed';
font-style: normal;
font-weight: normal;
src: 
local('fonts/NeuropolXW00-Condensed'), 
url('fonts/NeuropolXW00-Condensed.woff') 
format('woff');
}

@font-face {
font-family: 'Helvetica Rounded LT Bold Condensed';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Helvetica Rounded LT Bold Condensed'), 
url('fonts/Helvetica Rounded LT Bold Condensed.woff2') 
format('woff2');
}

@font-face {
font-family: 'Digital Dare';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Digital Dare'), 
url('fonts/Digital Dare.woff') 
format('woff');
}

@font-face {
font-family: 'SquareFont';
font-style: normal;
font-weight: normal;
src: 
local('fonts/SquareFont'), 
url('fonts/SquareFont.woff') 
format('woff');
}

@font-face {
font-family: 'Square Sans Serif 7';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Square Sans Serif 7'), 
url('fonts/Square Sans Serif 7.woff') 
format('woff');
}

@font-face {
font-family: 'Cookie';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Cookie'), 
url('fonts/Cookie.woff') 
format('woff');
}

@font-face {
font-family: 'Komika';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Komica'), 
url('fonts/Komika Display Kaps.woff2'),
url('fonts/Komika Display Kaps.woff');
format('woff');
}

@font-face {
font-family: 'Bestime';
font-style: normal;
font-weight: normal;
src: 
local('fonts/Bestime'), 
url('fonts/Bestime.woff2') 
format('woff');
}






/* __________________________________________________________________________________________________96
[TT]   texts
*/
	
h1 {
font-weight:normal;
padding:0px;
margin:0px;
font-size:clamp(1.5rem, 2vw, 2rem);
letter-spacing:0.25pt;
color:#FFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

h2 {
font-weight:normal;
padding:0px;margin:0px;
font-size:clamp(1rem, 1.25vw, 1.25rem);
letter-spacing:0.5px;
color:#FFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

h3 {
font-weight:normal;
padding:0px;
margin:0px;
font-size:clamp(1rem, 1vw, 1.25rem);
letter-spacing:0.25pt;color:#FFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

h4 {
font-weight:normal;
padding:0px;
margin:0px;
font-size:clamp(0.75rem, 0.9vw, 1rem);
letter-spacing:0.25pt;
color:#FFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

h5 {
font-weight:normal;
padding:0px;
margin:0px;
font-size:clamp(0.67rem, 0.67vw, 0.75rem);
letter-spacing:0.25pt;
color:#FFFFFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

p {
padding:0px;
margin:0px;
font-size:clamp(0.75rem, 0.8vw, 0.9rem);
color:#000;
letter-spacing:clamp(0.05rem, 0.05vw, 0.075rem);
font-family:'Helvetica Neue LT Std 45 Light';
}	/* text */

strong {
font-weight:normal;
padding:0px;
margin:0px;
font-size:clamp(0.85rem, 0.9vw, 1rem);
letter-spacing:0.025rem;
color:#000000;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}	/* cell */

figcaption {
padding:0px;
margin:0px;
font-size:clamp(0.67rem, 0.7vw, 0.75rem);
letter-spacing:0.033rem;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
}	/* legend */

.cell {
padding:0px;
margin:0px;
font-size:clamp(0.9rem, 1vw, 1rem);
letter-spacing:0.25pt;
}

.white {color:#fff;}
.black {color:#000;}

.Cn {
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
font-size:clamp(0.67rem, 0.7vw, 0.75rem);
letter-spacing:0.033rem;
}


.shadow{
text-shadow:
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5),
0 0 2px rgba(0, 0, 0, 0.5);
}

.shadow-button{
filter: 
drop-shadow(1px 2px 2px rgba(0,0,0,0.9))
drop-shadow(4px 6px 8px rgba(0,0,0,0.4));
}






/* __________________________________________________________________________________________________96
[| T |]   text
*/

.maxititle_white {
font-size:2.4em;
letter-spacing:0.25pt;
color:#FFFFFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.maxititle_white_Cn {
font-size:2.4em;
letter-spacing:0.25pt;
color:#FFFFFF;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
}

.maxititle_black {
font-size:2.4em;
letter-spacing:0.25pt;
color:#000000;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.maxititle_black_Cn {
font-size:2.4em;
letter-spacing:0.25pt;
color:#000000;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
}

.title_white {
font-size:clamp(1.5rem, 1.5vw, 1.75rem);
letter-spacing:0.25pt;
color:#FFFFFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.title_white_Cn {
font-size:clamp(1.5rem, 1.5vw, 1.75rem);
letter-spacing:0.25pt;
color:#FFFFFF;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
}

.title_black {font-size:clamp(1.5rem, 1.5vw, 1.75rem);letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.title_black_Cn {font-size:clamp(1.5rem, 1.5vw, 1.75rem);letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.minititle_white {font-size: clamp(1rem, 1vw, 1.25rem);letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.minititle_white_Cn {font-size: clamp(1rem, 1vw, 1.25rem);letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.minititle_black {font-size: clamp(1rem, 1vw, 1.25rem);letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.minititle_black_Cn {font-size: clamp(1rem, 1vw, 1.25rem);letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.microtitle_white {font-size: 0.58em;letter-spacing:0.25pt;color:#FFFFFF; font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.microtitle_white_Cn {font-size: 0.67em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.microtitle_black {font-size: 0.58em;letter-spacing:0.25pt;color:#000000; font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}
.microtitle_black_Cn {font-size: 0.67em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.script {font-size: 2em;font-family:'Saginaw  Bold';}

.catch {font-size:clamp(1.5rem, 1.75vw, 2rem);font-family:'Bestime', 'Cookie', 'Arial';line-height:2rem;letter-spacing:-2px;}

.legend_shadow {
padding:0px;
margin:0px;
font-size:
0.75em;
letter-spacing:0.25pt;
color:#000;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
text-shadow:
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white,
0 0 2px white;
}

.number {
font-size:3em;
color:#FFFFFF;
font-family:'Neuropol X', 'Helvetica Neue', 'Arial';
}

.pan {
padding:0px;
margin:0px;
font-size:clamp(0.9rem, 1vw, 1rem);
letter-spacing:0.25pt;
color:#000;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.pan_bd {
padding:0px;
margin:0px;
font-size:clamp(1rem, 1.12vw, 1.25rem);
letter-spacing:0.25pt;
color:#000;
font-family:'Komika';
}

.pan_Cn {
padding:0px;
margin:0px;
font-size:1.2em;
letter-spacing:0.25pt;
color:#000;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
}




/*
[x]
*/

.legend_black {
padding:0px;
margin:0px;
font-size:0.75em;
letter-spacing:0.25pt;
color:#000000;
font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';
}

.legend_extended {
padding:0px;
margin:0px;
font-size:0.67em;
letter-spacing:0.25pt;
color:#000000;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.legend_extended_white {
padding:0px;
margin:0px;
font-size:0.67em;
letter-spacing:0.25pt;
color:#FFFFFF;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.legend_white {padding:0px;margin:0px;font-size:0.9em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}
.catch_black {font-size:clamp(1.5rem, 2vw, 2rem);color:#000000; font-family:'Cookie', 'Helvetica Neue', 'Arial';}
.minicatch_black {font-size: 2.4em;color:#000000; font-family:'Cookie', 'Helvetica Neue', 'Arial';}

.pan_white {padding:0px;margin:0px;font-size:clamp(0.9rem, 1vw, 1rem);letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.minipan {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';}

.pan_Cn_white {padding:0px;margin:0px;font-size:1.2em;letter-spacing:0.25pt;color:#FFFFFF;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}

.minipan_Cn {padding:0px;margin:0px;font-size:0.75em;letter-spacing:0.25pt;color:#000000;font-family:'Helvetica Rounded LT Bold Condensed', 'Arial Rounded MT Bold';}


.counter_light {font-size: 1.2em;color:#FFFFFF;font-family:'SquareFont';}
.counter {font-size: 1.2em;color:#FFFFFF;font-family:'Digital Dare';}
.counter_black {font-size: 1.2em;color:#000000;font-family:'Digital Dare';}






/* __________________________________________________________________________________________________96
[| | |]   scrollbar
*/

/* width */
::-webkit-scrollbar {
width: 20px;
}

/* track */
::-webkit-scrollbar-track {
box-shadow: inset 0 5px 10px #003333;
border-radius: 10px;
}

/* handle */
::-webkit-scrollbar-thumb {
background: #E11932;
box-shadow: 2px 4px 4px #006666;
border-radius: 10px;
}






/* __________________________________________________________________________________________________96
[| -O |]   search
*/

@media screen and (max-device-width: 1023px) {
#searchfile{
top:6px;
width:72%;
position:absolute;
vertical-align:middle;
left:36px;
}
}

@media screen and (min-device-width: 1024px) {
#searchfile{
width:50%;
left:33%;
top:10px;
position:absolute;
vertical-align:middle;
}
}



/*
[jQ]
*/

.ui-autocomplete { 
position: absolute;
cursor: pointer; 
background:#00647D;
border-style:solid;
border-width:0px 2px 2px 2px;
border-color:white;
-webkit-border-radius: 0px 0px 8px 8px;
-moz-border-radius: 0px 0px 8px 8px;
border-radius: 0px 0px 8px 8px;
box-shadow: 4px 3px 6px #223333;
width:200px;
list-style-type: none;
z-index:1000000;
color:white;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
line-height:24px;
}

.ui-menu-item{
display: block;
padding: 6px;
clear: both;
line-height: 18px;
color: #FFFFFF;
text-decoration: none;
}

.ui-menu {
display:block;
	padding:4px;
}

.ui-state-hover, .ui-state-active {
color: #000000;
text-decoration: none;
background-color: #FFFFFF;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background-image: none;
padding:4px;
}

/* Popup recherche */
.search-popup{
position: fixed;
/* 6px sous la nav BD */
top: calc(var(--bd-nav-h) + var(--bd-nav-pad) + 6px);
left: 50%;
transform: translateX(-50%);

width: min(560px, calc(100vw - 24px));
padding: 12px 12px 12px 12px;

background: none;
border: none;

z-index: 2000;

display: none; /* caché par défaut */
}


@media (max-width: 640px){
.search-popup{
left: 0px;
transform: none;
width: min(340px, calc(75vw - 24px));
}
}



/* visible */
.search-popup.is-open{
display: block;
}

/* Form */
.search-popup__form{
display: flex;
align-items: center;
gap: 10px;
}

/* Input */
.search-popup__input{
flex: 1;
height: 36px;
border-radius: 10px;
background-color: #00647D;
color: white;
border: 2.5px solid white;
padding: 6px 10px;
box-sizing: border-box;
}

.search-popup__input{
  outline: none;
}

.search-popup__input:focus{
  outline: none;
}

/* Bouton submit (loupe) */
.search-popup__submit{
cursor: pointer;
height: 36px;
width: 36px;
border: none;
background: transparent;
background-image: url(/pictOpat/normal/action/search.svg);
background-size: 36px 36px;
background-repeat: no-repeat;
margin: 0;
padding: 0;
}

/* Croix fermer (delete.svg) */
.search-popup__close{
position: absolute;
top: 12px;
right: -30px;

height: 36px;
width: 36px;
border: none;
background: transparent;
cursor: pointer;

background-image: url(/pictOpat/stop/action/delete.svg);
background-size: 36px 36px;
background-repeat: no-repeat;
background-position: center;
}

/* jQuery UI autocomplete : toujours au-dessus + pas trop grand */
.ui-autocomplete{
z-index: 2500 !important;
max-height: min(50vh, 320px);
overflow-y: auto;
overflow-x: hidden;
border-radius: 10px;
box-shadow: 0 12px 28px rgba(0,0,0,0.18);
}

/* ========================================================================72
*/






/* __________________________________________________________________________72
[( M )]   map
_____________________________________________________________________________ */

#map {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
}

@media screen and (max-device-width: 1023px) {
.leaflet-container .leaflet-control-mouseposition {
background-color: rgba(75, 200, 175, 1);
border-style:solid;
border-color:white;
border-width:2px;
padding: 2px 5px 2px 5px;
margin:0;
color: #FFF;
font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
font-size: 1em;
border-radius: 5px;
}
}
@media screen and (min-device-width: 1024px) {
.leaflet-container .leaflet-control-mouseposition {
background-color: rgba(75, 200, 175, 1);
border-style:solid;
border-color:white;
border-width:2px;
padding: 0 5px;
margin:0;
color: #FFF;
font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
font-size: 2em;
border-radius: 5px;
}
}

.leaflet-control-zoom {
top:60px;
}

.leaflet-control-zoom-display {
background-color:#4BC8AF;
width: 24px;
height: 24px;
line-height: 24px;
display: block;
text-align: center;
vertical-align:middle;
text-decoration: none;
color: white;
font-size: 2em;
font-family: 'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
border-radius:6px;
border-width:2px;
border-style:solid;
border-color:white;
}






/* __________________________________________________________________________72
[°°] toolbar
_____________________________________________________________________________ */

#toolbar{
position: fixed;
top: var(--toolbar-top, 12px);
right: var(--toolbar-right, 12px);
z-index: var(--toolbar-z, 1500);
display: flex;
flex-direction: column;
gap: var(--toolbar-gap, 8px);
pointer-events: none;
width: var(--toolbar-width, 60px);
background:rgba(0,75,50,0.17);
border-radius:6px;
padding:6px;
/* box-shadow:2px 3px 6px #223333; */
}
/* mais les groupes/boutons restent cliquables */
#toolbar > *{ pointer-events: auto; }

#toolbar.is-raised{
top: var(--toolbar-raised-top, var(--toolbar-top, 12px));
}



/* ============================================================60
[:P]   language
===============================================================
*/

.language-flag-link {
display:inline-flex;
align-items:center;
justify-content:center;
width:24px;
height:24px;
border-radius:6px;
padding:2px;
background:transparent;
transition:transform 0.15s ease, box-shadow 0.15s ease;
}

.language-flag-link:hover {
transform:scale(1.08);
box-shadow:0 2px 6px rgba(0,0,0,0.18);
}

.language-flag-link.is-active {
box-shadow:0 0 0 1.5px #E1FF00 inset;
background:transparent;
}






/* __________________________________________________________________________72
[| |]   card
_____________________________________________________________________________ */

@keyframes Breath {
0%   { left: -110vw; }
60%  { left: 6px; }
100% { left: 12px; }
}

#card{
animation:Breath 320ms cubic-bezier(.2,.9,.2,1) both;
position:fixed;
z-index:1600;
background: transparent;
display:flex;
flex-direction:column;
overflow-y:hidden;
top:12px;
left:12px;
right:auto;
bottom:auto;
min-width:396px;
max-width:25%;
max-height:calc(100vh - 24px);
height:auto;
padding:0;
border:none;
border-radius:8px;
box-shadow:4px 3px 6px #223333;
transition:
transform 0.34s cubic-bezier(.22,1,.36,1),
top 0.28s ease,
bottom 0.28s ease,
opacity 0.24s ease;
transform:translateY(0);
will-change:transform, opacity, top, bottom;
box-sizing:border-box;
}

/*
@media (max-width: 900px){
#card{
top:12px;
left:50%;
right:auto;
bottom:auto;
transform:translateX(-50%);
max-width:560px;
min-width:420px;;
padding:0;
}
}
*/


@media (max-width: 640px){
#card{
right:12px;
bottom:auto;
width:100%;
max-height:calc(100vh - 24px);
max-height:calc(100dvh - 24px);
min-width:375px;
margin:0 auto;
}
}






/* ============================================================60
[| H |]   card header
===============================================================
*/

#card_head{
position:sticky;
top:0px;
z-index:1601;
padding:6px;
background:
linear-gradient(
to bottom,
rgba(0, 25, 50, 0.8) 0%,
rgba(0, 75, 100, 0.7) 55%,
rgba(0, 125, 150, 0.6) 100%
);
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:6px;
}

.card-head-group{
display:flex;
align-items:flex-start;
gap:6px;
}

.card-head-group--context{
justify-content:flex-start;
}

.card-head-group--fixed{
margin-left:auto;
justify-content:flex-end;
}
.card-head-action{
margin:0;
width:64px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-start;
text-align:center;
}

.card-head-button{
background:none;
border:none;
cursor:pointer;
padding:0;
margin:0;
display:flex;
align-items:center;
justify-content:center;
}

.card-head-action figcaption{
margin-top:4px;
font-size:0.78rem;
line-height:1.1;
color:#FFF;
opacity:90%;
}

.card-head-action.is-active figcaption{
color:#FFF;
}

.card-head-action.is-active img{
filter:none;
}

.card-head-button.is-disabled {
pointer-events: none;
cursor: default;
opacity: 1;
}

.card-head-action.is-active img {
/* optionnel si tu veux un effet lumineux */
filter: brightness(1.1);
}

.card-head-action.is-active img {
filter: drop-shadow(0 0 3px rgba(0, 100, 125, 0.6));
}






/* ============================================================60
[| B |]   card body
===============================================================
*/

#card_body{
background: rgba(255,255,255,0.84);
flex:1 1 auto;
min-height:0;
width:100%;
overflow-y:auto;
overflow-x:hidden;
max-height:calc(100vh - 144px);
max-height:calc(100dvh - 144px);
}

#card [data-card-module]{
width:100%;
}

#card.card-is-reduced{
top:12px !important;
left:12px !important;
right:auto !important;
bottom:auto !important;
width:78px;
min-width:78px;
max-width:78px;
max-height:none;
height:78px;
min-height:78px;
overflow:hidden;
transform:translateY(0);
opacity:0.9;
}



/* ============================================================60
[| F |]   card footer
===============================================================
*/

#card_footer{
position:sticky;
bottom:0px;
z-index:1601;
height:30px;
display:flex;
align-items:center;
padding:4px 8px;
background:
linear-gradient(
to bottom,
rgba(0, 25, 50, 0.9) 0%,
rgba(0, 75, 100, 0.8) 55%,
rgba(0, 125, 150, 0.7) 100%
);
box-sizing:border-box;
}

#card_footer_brand{
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:6px;
text-decoration:none;
}

#card_footer_brand img{
display:block;
flex:0 0 auto;
}






/* ============================================================60
[| _ |]   card reduced
===============================================================
*/

#card.card-is-reduced #card_head{
height:78px;
padding:0px;
align-items:center;
justify-content:center;
}

#card.card-is-reduced .card-head-group--context{
display:none !important;
}

#card.card-is-reduced .card-head-group--fixed{
width:100%;
height:100%;
margin-left:0;
align-items:center;
justify-content:center;
}

#card.card-is-reduced .card-head-action{
width:auto;
}

#card.card-is-reduced #card_footer{
display:none;
}
#card.card-is-reduced #card_body{
display:none;
}

#card.card-is-reduced{
top:12px !important;
left:12px !important;
right:auto !important;
bottom:auto !important;
width:78px;
min-width:78px;
max-width:78px;
max-height:none;
height:78px;
min-height:78px;
overflow:hidden;
}

#card.card-is-reduced #card_body{
display:none;
}






/* __________________________________________________________________________72
[( °> Ci> )]   poi-view
_____________________________________________________________________________ */

.poi-view-shell{
display:flex;
flex-direction:column;
gap:10px;
padding:10px;
box-sizing:border-box;
}

.poi-view-head{
display:flex;
justify-content:flex-end;
align-items:center;
}

.poi-view-close{
display:inline-flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
padding:0;
border:none;
background:none;
cursor:pointer;
}

.poi-view-close img{
display:block;
width:36px;
height:36px;
}

.poi-view-body{
min-width:0;
}

.poi-view-picture-credit {
font-size: 0.72em;
color:#7D7D7D;
text-align:right;
font-family:'Helvetica Rounded LT Std Bold', sans-serif;
letter-spacing:0.5px;
margin-top:3px;
}





/* __________________________________________________________________________72
[( ad )]   promo
_____________________________________________________________________________ */

/* Overlay sombre derrière le popup */
.promo-popup-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
z-index: 9998;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}

/* Conteneur du popup */
.promo-popup {
position: fixed;
top: 50%;
left: 50%;
max-width: 420px;
max-height: 95vh;
width: 67%;
background: #ffffff;
border-radius: 12px;
padding: 16px 16px 24px 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
transform: translate(-50%, -50%) scale(0.85);
opacity: 0;
pointer-events: none;
z-index: 9999;
transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Visible */
.promo-popup.is-visible,
.promo-popup-overlay.is-visible {
opacity: 1;
pointer-events: auto;
}
.promo-popup.is-visible {
transform: translate(-50%, -50%) scale(1);
}

/* Close (croix) */
.promo-popup-close {
position: absolute;
top: 6px;
right: 10px;
border: none;
background: transparent;
font-size: 24px;
cursor: pointer;
line-height: 1;
}

/* Titre (tu peux le rendre plus discret si tu veux) */
.promo-popup-title {
margin: 0 0 8px;
font-size: 18px;
text-align: center;
}

/* Image promo */
.promo-popup-image {
display: block;
margin:0 auto;
width: auto;
height: auto;
max-height: 80vh;
max-width:100%;
}

/* Bouton sous l'image */
.promo-popup-cta {
display: inline-block;
margin-top: 12px;
padding: 12px 18px;
background: #E1AF00; /* couleur Mini-Ardenne ? à adapter */
color: #fff;
text-decoration: none;
border-radius: 999px;
font-size: 15px;
text-align: center;
}
.promo-popup-cta:hover {
filter: brightness(1.05);
}






/* ________________________________________________________________________72
[( Ci> POP! )]   poi-popup
___________________________________________________________________________
*/

@media screen and (max-device-width: 1023px) {
#feature_infos {
display:none;
width:auto;
height:auto;
position:fixed;
bottom:6px;
right:6px;
padding:8px;
border:3px solid white;
z-index:100000;
border-radius: 16px;
background: #00647D;
-webkit-box-shadow:
4px 3px 6px #223333;
-moz-box-shadow: 
4px 3px 6px #223333;
-o-box-shadow: 
4px 3px 6px #223333;
box-shadow: 
4px 3px 6px #223333;
}	
}

@media screen and (min-device-width: 1024px) {
#feature_infos {
	display:none;
    width:0;
    height:0;	
}
}

#info {
}






/* ________________________________________________________________________72
[( C[\ )]   connexion
___________________________________________________________________________
*/

.form-popup {
width: 100%;
height: 100%;
display: none;
position: fixed;
border: none;
z-index: 100000000;
background-color: rgba(0,0,0,0.4);
top:0;
}

.form-container {
max-width: 300px;
padding: 12px;
background-color: #00647D;
border:3px solid white;
border-radius:24px; 
box-shadow: 4px 3px 6px #223333;
z-index: 100000000;
}

#menudiv .form-container,
#myForm .form-container {
position:fixed;
top:12px;
right:12px;
}

@media (max-width: 640px) {
.form-container {
top:168px;
left:50%;
transform: translateX(-50%);
max-width:100%;
}
}

/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
background-color: #FFFFFF;
margin:0px;
padding: 10px;
border-radius:0px 8px 8px 0px;
width: 768px; /* Could be more or less, depending on screen size */
height: 800px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
color: #000000;
float: right;
font-size: 28px;
font-weight: bold;
position:relative;
top:0;
right:10px;
}

.close:hover,
.close:focus {
color: red;
text-decoration: none;
cursor: pointer;
}

.subbutton {
background-color: #FFFFFF;
transition-duration: 0.4s;
cursor: pointer;
height:48px;
width:48px;
border-style:none;
border-radius:30px;
background-size:45px 45px;
background-repeat:no-repeat;
margin:0px 4px 10px 4px;
}

.subbutton1 {
background-color: white; 
}

.subbutton1:hover {
background-color: #CCFF00;
}

.closebox {
color: #FFFFFF;
float: right;
font-size: 28px;
font-weight: bold;
position:absolute;
top:0;
right:10px;
}

.closebox:hover,
.closebox:focus {
color: red;
text-decoration: none;
cursor: pointer;
}

.goto {
color: #FFFFFF;
font-size: 1em;
line-height:1px;
font-family:'Helvetica Rounded LT Std Bold', 'Arial Rounded MT Bold';
}

.goto:hover,
.goto:focus {
color: #CCFF00;
text-decoration: none;
cursor: pointer;
}