body{

margin:0;
font-family:Arial, sans-serif;
background:#f4f4f4;
color:#333;

}

header{

background:white;
padding:20px;
position:sticky;
top:0;
z-index:100;
box-shadow:0 2px 12px rgba(0,0,0,.12);

}



h1{

color:#004080;

}


.outils{

margin-top:20px;

}


input,select{

padding:10px 14px;
border:1px solid #ddd;
border-radius:25px;
font-size:14px;
margin:5px;
outline:none;

}

input{

width:260px;

}


.galerie{

display:grid;
grid-template-columns:repeat(auto-fill,100px);
justify-content:center;
gap:28px;
padding:35px;

}

.pin{

width:100px;
background:white;
border-radius:12px;
padding:10px;
text-align:center;
cursor:pointer;
box-shadow:0 3px 8px rgba(0,0,0,.10);
transition:.25s;

}

.pin:hover{

transform:translateY(-4px);
box-shadow:0 8px 18px rgba(0,0,0,.18);

}

.pin img{

width:100px;
height:100px;
object-fit:contain;
background:white;
border-radius:8px;

}

.nom{

margin-top:10px;
font-size:13px;
font-weight:bold;
color:#004080;

}
 
.departement{

margin-top:10px;
font-size:13px;
font-weight:bold;
color:#004080;

} 
 
/* Popup */

.popup{

display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.75);
align-items:center;
justify-content:center;
z-index:1000;

}


.fiche{

background:white;
border-radius:15px;
padding:30px;
width:900px;
max-width:90%;
box-shadow:0 15px 40px rgba(0,0,0,.30);
position:relative;
animation:zoom .25s;
max-height:90vh;
overflow:auto;

}

.images-fiche {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


.images-fiche img {
    width: 450px;
    height: 300px;
    object-fit: contain;
}


.fiche img{

max-width:700px;
max-height:500px;
object-fit:contain;

}

#fermer{

position:absolute;
right:15px;
top:10px;
font-size:25px;
border:0;
background:none;
cursor:pointer;

}


.navigation button{

padding:10px 25px;
margin:15px;

}

.infos-fiche{

margin-top:20px;
text-align:left;

}


.infos-fiche div{

border-top:1px solid #ddd;
padding:10px 0;

}


.infos-fiche span{

display:block;
font-size:12px;
color:#777;
text-transform:uppercase;

}


.infos-fiche strong{

display:block;
font-size:16px;
color:#004080;
margin-top:3px;

}

@keyframes zoom{

from{
transform:scale(.90);
opacity:0;
}

to{
transform:scale(1);
opacity:1;
}

}

.tooltip{

position:fixed;
display:none;
background:white;
padding:12px 16px;
border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,.25);
pointer-events:none;
z-index:2000;
min-width:180px;
font-size:14px;
line-height:1.5;

}

.tooltip strong{

display:block;
font-size:16px;
color:#004080;
margin-bottom:8px;

}

.tooltip .petit{

font-size:12px;
color:#777;

}

.rouge {
    color:red;
}