/* ==========================================================
   Bleu-Vert v2
   Responsive + Flexbox
   Compatible avec les anciennes classes d'images
   ========================================================== */

:root{
 --bleu:#12458d;
 --vert:#a5c2b3;
 --vert-fonce:#2f6d3b;
 --fond:#f7f8f6;
 --texte:#222;
 --ombre:0 4px 14px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{
 margin:0;
 background:var(--fond);
 color:var(--texte);
 font-family: Georgia,"Times New Roman",serif;
 line-height:1.65;
}
a{color:var(--bleu);text-decoration:none}
a:hover{text-decoration:underline}

#title{
 box-shadow:var(--ombre);
 background:var(--vert);
 border-bottom:1px solid var(--bleu);
 padding:.5rem 0rem .5rem 4%;
}
#title h1{
 margin:0;
 padding:0;
 font-family:Georgia,serif;
 font-size:3rem;
 color:var(--vert-fonce);
}

#container{
 max-width:1800px;
 margin:auto;
 display:flex;
 align-items:flex-start;
 gap:1.5rem;
 padding:2rem;
}

#main{
 flex:1;
 background:white;
 border:2px solid var(--bleu);
 padding:1.5rem;
 box-shadow:var(--ombre);
 max-width:1800px;
 min-width:0;
 font-size:1.1rem;
}

#main p,#main ul,#main ol,#main dl{
 max-width:1800px;
}

#main h2{
 color:var(--vert-fonce);
 border-bottom:2px solid var(--bleu);
 padding-bottom:.25rem;
 margin-top:2.5rem;
 font-size:2em;
}

.massifs{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(min(450px, 100%), 1fr));
gap:1rem;}

/*
.deuxcol { display: flex;
justify-content: space-between;
 flex-wrap:wrap;
 flex-direction:row;
 row-gap:1rem;
 align-items:flex-start;
 align-content:flex-start;
justify-content:space-around;}

.colonne{
 display: flex;
 width:48%;
 flex-wrap:wrap;
 flex-direction:column;
 row-gap:1rem;    
 display:flex;
 flex-direction:column;
 gap:1rem;
 justify-content:flex-start;
}*/
 
.massif{height:auto;overflow: hidden;
width:100%;
font-size:95%;padding:1rem;margin-top:1em;padding-top:0rem;
 border-radius:4px; border:1px solid var(--bleu);
 box-shadow:0 2px 8px rgba(0,0,0,.10);
 min-height:0;
 min-width:0;
}

#main .massif h2{margin:1rem 2rem .7rem 2rem;
    padding: 0;}

#panel{
 max-width:10em;
 background:white;
 border:2px solid var(--bleu);
 padding:0.2rem 0.5rem 0.2rem 0.2rem;
 position:sticky;
 top:1rem;right:auto;
 font-size:1.2rem;
 box-shadow:var(--ombre);
 color:var(--vert-fonce);
}

.panel  a{color:var(--texte);text-decoration:none}

.galerie{
 display:flex;
 flex-wrap:wrap;
 flex-direction:row;
 row-gap:0.3rem;
 align-items:flex-end;
 align-content:flex-start;
 justify-content:space-around;

min-width:0;
}


.galerie a{
flex: 0 0 var(--taille);
display:block;
transition:transform .18s;
}


.galerie a:hover{
 transform:translateY(-2px);
}

.galerie img{
 height:auto;
 border-radius:4px;
 box-shadow:0 2px 8px rgba(0,0,0,.10);
 transition:transform .2s, box-shadow .2s;
 min-height:0;
 min-width:0;
}

.galerie a:hover img{
/* transform:scale(1.01);*/
 box-shadow:0 6px 18px rgba(0,0,0,.8);
}

/* Compatibilité anciennes classes 
.dipc{flex:0 0 calc(99% - .6rem))}
.nepc{flex:0 0 calc(89% - .6rem)}
.hupc{flex:0 0 calc(79% - .6rem)}
.sepc{flex:0 0 calc(69% - .6rem)}
.sipc{flex:0 0 calc(59% - .6rem)}
.cipc{flex:0 0 calc(49% - .6rem)}
.qupc{flex:0 0 calc(39% - .6rem)}
.trpc{flex:0 0 calc(29% - .6rem)}
.depc{flex:0 0 calc(19% - .6rem)}
.qipc{flex:0 0 calc(15% - .6rem)}
.unpc{flex:0 0 calc(9% - .6rem)}*/

/* les classes qui agissent sur les liens 
.galerie a.trpc{flex:0 0 calc(100% * 4 / 12);}

.galerie a{display:inline-block;}*/

.galerie img.dipc{width:100%;}
.galerie img.nepc{width:100%;}
.galerie img.hupc{width:100%;}
.galerie img.sepc{width:100%;}
.galerie img.sipc{width:100%;}
.galerie img.cipc{width:100%;}
.galerie img.qupc{width:100%;}
.galerie img.trpc{width:100%;}
.galerie img.depc{width:100%;}
.galerie img.qipc{width:100%;}
.galerie img.unpc{width:100%;}

.do { --taille: calc(100% - .6rem); }
.on { --taille: calc(91.66% - .6rem); }
.di { --taille: calc(83.33% - .6rem); }
.ne { --taille: calc(75% - .6rem); }
.hu { --taille: calc(66.66% - .6rem); }
.se { --taille: calc(58.33% - .6rem); }
.si { --taille: calc(50% - .6rem); }
.ci { --taille: calc(41.66% - .6rem); }
.qu { --taille: calc(33.33% - .6rem); }
.tr { --taille: calc(25% - .6rem); }
.de { --taille: calc(16.66% - .6rem); }
.un { --taille: calc(8.33% - .6rem); }


img.picto{width:1em;height:auto;box-shadow:none;border-radius:0}

#footer{
 margin-top:2rem;
 padding:0.2rem;
 box-shadow:var(--ombre);
 background:var(--vert);
 border-top:2px solid var(--bleu);
}
#logos{text-align:center}
#mis-a-jour{text-align:right;font-style:italic;font-size:.9rem;margin-right:2em;margin-top:-50px}



@media (max-width:1200px){
.do { --taille: calc(100% - .5rem); }
.on { --taille: calc(95% - .5rem); }
.di { --taille: calc(90% - .5rem); }
.ne { --taille: calc(75% - .5rem); }
.hu { --taille: calc(66.66% - .5rem); }
.se { --taille: calc(66.66% - .5rem); }
.si { --taille: calc(50% - .5rem); }
.ci { --taille: calc(50% - .5rem); }
.qu { --taille: calc(33.33% - .5rem); }
.tr { --taille: calc(33.33% - .5rem); }
.de { --taille: calc(25% - .5rem); }
.un { --taille: calc(16.66% - .5rem); }
}


@media (max-width:1050px){
.do { --taille: calc(100% - .5rem); }
.on { --taille: calc(100% - .5rem); }
.di { --taille: calc(95% - .5rem); }
.ne { --taille: calc(75% - .5rem); }
.hu { --taille: calc(75% - .5rem); }
.se { --taille: calc(75% - .5rem); }
.si { --taille: calc(50% - .5rem); }
.ci { --taille: calc(50% - .5rem); }
.qu { --taille: calc(50% - .5rem); }
.tr { --taille: calc(50% - .5rem); }
.de { --taille: calc(25% - .5rem); }
.un { --taille: calc(25% - .5rem); }
}

@media (max-width:900px){
.do { --taille: calc(100% - .5rem); }
.on { --taille: calc(100% - .5rem); }
.di { --taille: calc(100% - .6rem); }
.ne { --taille: calc(100% - .6rem);}
.hu { --taille: calc(100% - .6rem);}
.se { --taille: calc(100% - .6rem);}
.si { --taille: calc(100% - .6rem);}
.ci { --taille: calc(100% - .6rem);}
.qu { --taille: 80%;}
.tr { --taille: 70%;}
.de { --taille: 60%;}
.qi { --taille: calc(40% - .6rem);}
.un { --taille: calc(40% - .6rem);}

}

@media (max-width:700px){
.do { --taille: calc(100% - .5rem); }
.on { --taille: calc(100% - .5rem); }
.di { --taille: calc(100% - .6rem); }
.ne { --taille: calc(100% - .6rem);}
.hu { --taille: calc(100% - .6rem);}
.se { --taille: calc(100% - .6rem);}
.si { --taille: calc(100% - .6rem);}
.ci { --taille: calc(100% - .6rem);}
.qu { --taille: calc(100% - .6rem);}
.tr { --taille: 80%;}
.de { --taille:  70%; }
.qi { --taille:  70%; }
.un { --taille:  50%; }

}

@media (max-width:1200px){
 #container{
   flex-direction:column;
 }
 #panel{
   width:100%;
   position:static;
   order:-1;
 }
 #main{
   max-width:none;
   width:100%;
 }
}

@media (max-width:800px){
 html{font-size:18px}
 #title{border-left:none}
 #title h1{
   font-size:1.8rem;
   letter-spacing:0;
 }
 #container{padding:.5rem}
 #main{padding:1rem}
 .galerie a{
   display:block;
   margin-bottom:0.5rem;
}}
@media (max-width:1000px){
 #mis-a-jour{text-align:center;margin-top:10px;margin-right:0em}
}