:root {
--txt-ttf: Verdana, Geneva, Tahoma, sans-serif;
--hdl-ttf: Times New Roman, Times, serif;
--txt-ombre: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
--ombre: 10px 10px 14px -7px rgb(102, 102, 102);
--blue-bord: rgb(21, 78, 183);
--red-bord: rgb(220, 52, 59);
--gris-hdl:rgb(140, 140, 140);
--gris-txt: rgb(51, 51, 51);
--gris-lgt:rgb(221, 221, 221);
--gris-bl: rgb(242, 242, 242);
--bleu-h2-6: rgb(5, 19, 46);
--bleu-bck-hov: rgba(223, 229, 241,0.6);
--bleu-lien-int:rgb(48, 113, 232);
--bl:rgb(255, 255, 255);
--txt-ombre-blu: 0 6px 10px 0 rgba(18, 65, 161, 0.2);
}

html { font-size:16px; }

body {
margin:0;
padding:0;
border-left: 16px solid rgba(21, 78, 183,0.6);
border-right: 16px solid rgba(220, 52, 59,0.6);
font-family:  var(--txt-ttf);
font-size: 100%;
letter-spacing: 0.0625em;
}

* { box-sizing: border-box; }

.row:after { content: ""; clear: both; display: block }
[class*="col-"] { float: left; padding:16px; }
[class*="col-"] { width: 100%; }
@media only screen and (min-width: 768px) { /*600*/
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 1200px) { 
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

@font-face {
  font-family: ProzaLibre-Medium; /* set name */
  src: url(fonts/ProzaLibre-Medium.ttf); /* url of the font */
}

.alerte {
margin:0;
padding:20px;
background-color:rgb(255, 0, 0);
font-size: 22px;
font-weight: bold;
color: white;
text-align:center;
}

header {
position: sticky;
top: 0;
overflow: hidden;
background-color:rgb(255,255,255);
z-index: 99;
}

.logo-top  {
margin:0;
padding:0;
text-align:center;
font-family:ProzaLibre-Medium;
font-weight:bold;
font-size: 9vw;
color:rgb(9, 32, 144);
line-height:normal;
}
a.link-logo:link {color:rgb(9, 32, 144);text-decoration:none;}
a.link-logo:visited {color:rgb(9, 32, 144);text-decoration:none;}
a.link-logo:hover {color:rgb(9, 32, 144);text-decoration:none;cursor:pointer;}
a.link-logo:active{color:rgb(9, 32, 144);text-decoration:none;}

@media screen and (min-width: 500px) {
  #logo-top {
    font-size:6vw; /*7*/
  }
}

.top-navi {
margin:auto;
max-width:100%;
padding: 8px 16px; /*10px 20px;*/
background-color:rgb(13, 49, 114);
text-align:center;
font-family: var(--txt-ttf);
font-size:1.5em;
}
.link-top-navi {
 padding: 14px 6px;
 color:	rgb(232, 239, 252);
 text-decoration:none;
}
a.link-top-navi:link {text-decoration:none;}
a.link-top-navi:visited {text-decoration:none;}
a.link-top-navi:hover {color:rgb(255, 255, 255);text-decoration:underline;}
a.link-top-navi:active{text-decoration:underline;}

@media screen and (max-width: 780px) { 
  span.mq-xw-780 { display:none; }
}

.largeur-300 { max-width:300px; 	margin:auto; }
.largeur-600 { max-width:600px; 	margin:auto; }
.largeur-750 { max-width:750px; margin:auto; }
.largeur-800 { max-width:800px; 	margin:auto; }
.largeur-850 { max-width:850px; 	margin:auto; }
.largeur-900 { max-width:900px; 	margin:auto; }
.largeur-1000 { max-width:1000px; margin:auto; }
.largeur-1200 { max-width:1200px; 	margin:auto; }
.largeur-1300 { max-width:1300px; 	margin:auto; }
.largeur-1400 { max-width:1400px; 	margin:auto; }
.largeur-1600 { max-width:1600px; margin:auto; }

.centre { text-align:center; }
.droite { text-align: right; }
.pic { max-width: 100%;height: auto;border:0px none; }

h1 {
font-family: var(--txt-ttf);
padding-top:10px;
text-align:center;
line-height: normal;
font-weight:normal;
font-size:30px;
color: var(--gris-hdl);
letter-spacing: 0;
}
h2, h3, h4, h5, h6 {
margin-bottom:0;
line-height: normal;
font-family:  var(--hdl-ttf);
font-weight:normal;
color: var(--bleu-h2-6);
}
h2 {text-align:center;font-size:30px;}
h3 {font-size:24px;}
h4 {font-size:20px;}
h5 {font-size:19px;}
h6 {font-size:18px;}

div, p { font-family: var(--txt-ttf); font-size:100%; line-height: 1.6;color: var(--gris-txt); }
p { margin-top:0; margin-left:4px; max-width:850px; padding:10px; text-indent: 3%; overflow-wrap: break-word; }

h2.agenda { margin:0; }
h2.agenda-date { margin:0; text-align:right; }
h2.agenda-titre { margin:0; text-align:left; }
.annonce { color: rgb(128, 128, 128); }
.futur { color: rgb(72, 129, 234);  } 
.passe { color: rgb(21, 78, 183); }

figure  { margin:0; }
figcaption { padding-left:10px;font-family:var(--hdl-ttf);font-size:1.25em;color:var(--bleu-h2-6);  }
.agenda-caption { font-size:0.875em;}
.subcaption { padding-right:10px;font-family:var(--txt-ttf);font-size:small;color:rgb(191, 191, 191); }
.agenda-foto { margin:0;padding:0;max-width: 100%;height: auto;border:0px none;box-shadow: var(--ombre) }
.pic-copyright { border:0px none;padding-right:10px;text-align:right;font-size:small;color:rgb(191, 191, 191) }
.capt-lft { float:left;}
.capt-rgt { float:right;}

.portraits { margin-left: auto;margin-right: auto;padding:14px;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
.portraet-image { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
.portraet-nom { text-align:center;font-family:var(--hdl-ttf);font-size:22px;text-decoration:underline; }

.zeit-container { display: flex;  justify-content: center;  align-items: center; }
.horloge { max-width:300px;padding:30px;background-color:var(--gris-hdl);font-size:1.75em;color:white;text-align:center; }
.horaires { padding:20px;line-height: normal;text-align:center; box-shadow:var(--txt-ombre); }
.notes { font-size:0.9375em; }
.refs { border-left: 2px solid rgba(220, 52, 59,0.6); padding:8px; }

sup { vertical-align: super; font-size: smaller; }
sup.nbp { font-weight:bold;color:var(--bleu-h2-6); }

p.nbp {text-indent:0;font-size: smaller;}
p.nbp::first-line {text-decoration:underline;}

/*insite text navi*/
a.lieninttxt::before {	content: "\003E";} /*\0020*/
a.lieninttxt:link {color:var(--bleu-lien-int);text-decoration:none;}
a.lieninttxt:visited {color:var(--bleu-lien-int);text-decoration:none;}
a.lieninttxt:hover {background-color:var(--bleu-bck-hov);color:var(--bleu-lien-int);}
a.lieninttxt:active{color:rgb(13, 49, 114);text-decoration:underline;}
a.lieninttxt::after {	content: "\003C";}

a.lienintsans:link {color:var(--gris-txt);text-decoration:none;}
a.lienintsans:visited {color:var(--gris-txt);text-decoration:none;}
a.lienintsans:hover {background-color:var(--bleu-bck-hov);color:var(--bleu-lien-int);text-decoration:underline;}
a.lienintsans:active{color:rgb(13, 49, 114);text-decoration:underline;}

a.liendownld:link {color:var(--bleu-lien-int);text-decoration:none;}
a.liendownld:visited {color:var(--bleu-lien-int);text-decoration:none;}
a.liendownld:hover {background-color:var(--bleu-bck-hov);color:var(--bleu-lien-int);text-decoration:none;}
a.liendownld:active{color:rgb(13, 49, 114);text-decoration:underline;}

h4.archive {margin:0;padding-left:3%;line-height:1.6;}
a.lienintarchiv:link {color:var(--gris-txt);text-decoration:none;}
a.lienintarchiv:visited {color:var(--gris-txt);text-decoration:none;}
a.lienintarchiv:hover {text-decoration:underline;}
a.lienintarchiv:active{text-decoration:underline;}

/*external links*/
a.lienext:link {color:var(--gris-txt);text-decoration:none;}
a.lienext:visited {color:var(--gris-txt);text-decoration:none;}
a.lienext:hover {color:var(--red-bord);text-decoration:underline;}
a.lienext:active{color:var(--red-bord);text-decoration:underline;}
a.lienext::after { content:"\2197";} /*arrow*/

.bottom-nav {
margin:auto;
padding:0;
background-color:var(--bleu-bck-hov);
text-align:center;
}
ul.bottom-navi {
  list-style-type: none;
  margin: 0;
  padding-top: 0;
  display: inline-block;
  text-align: left;
  font-family: var(--txt-ttf);
  font-size:1.25em;
}
li.bottom-navi {
  margin-top: 0;
  margin-bottom:6px;
}
.link-bottom-navi {
 color:	rgb(13, 49, 114);
 text-decoration:none;
}
a.link-bottom-navi:link {text-decoration:none;}
a.link-bottom-navi:visited {text-decoration:none;}
a.link-bottom-navi:hover {color:rgb(8, 29, 68);text-decoration:underline;}
a.link-bottom-navi:active{text-decoration:underline;}

ul.plan {
  list-style-type: none;
  margin: 0;
  padding-top: 0;
  display: inline-block;
  text-align: left;
  font-family: var(--txt-ttf);
  font-size:1.25em;
}
li.plan {
  margin-top: 10px;
  margin-bottom:0;
}
.link-plan {
 color:	rgb(13, 49, 114);
 text-decoration:none;
}
a.link-plan::before {content:"\003E"; margin-right: 6px;user-select: none;} /* 25B7 */
a.link-plan:link {text-decoration:none;}
a.link-plan:visited {text-decoration:none;}
a.link-plan:hover {font-weight:bold;color:rgb(8, 29, 68);text-decoration:none;}
a.link-plan:active{text-decoration:underline;}

li.plan-bis {
margin-left:24px;
font-size:0.75em;
color:var(--gris-txt);
user-select: none;
}

.tableau { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }  /*tables*/
.tableaux { 
  border-collapse: collapse;
  width: 100%;
}
.tableaux caption {
 padding-top: 12px;
 padding-bottom: 12px;
font-family: var(--hdl-ttf);
font-size:20px;
}
.tableaux td, .tableaux th {
  border: 1px solid var(--hdl-ttf);
  padding: 8px;
}
.tableaux tr:nth-child(even){background-color: var(--gris-bl);}
.tableaux tr:hover {background-color: var(--gris-lgt);}
.tableaux th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align:center;
  background-color: rgb(21, 78, 183);
  color: white;
} 
.cimetiere th { background-color:rgb(77, 77, 77); }
.fichiers th, td { margin:0;padding:0;font-weight:normal;color:var(--gris-txt);text-align:center; } /*fin tables*/

.legenden { 
border-collapse: collapse;
width: 100%;
text-align:center;
font-weight:normal;
font-size:12px;
}
.legenden caption {
padding-top: 12px;
padding-bottom: 12px;
font-family: var(--hdl-ttf);
font-size:1em;   
color:var(--bleu-h2-6);
}
.legenden td {
border: 1px solid var(--gris-lgt);
padding: 8px;
}

.copyright {
padding:10px;
background-color:rgb(13, 49, 114);
text-align:center;
font-size:1em;
color:rgb(100, 149, 237);
}
.text-copyright {
font-family: var(--txt-ttf);
}
.link-copyright {
font-family:ProzaLibre-Medium;
color: rgb(100, 149, 237);
text-decoration:none;
}
a.link-copyright:link {text-decoration:none;}
a.link-copyright:visited {text-decoration:none;}
a.link-copyright:hover {color:rgb(255, 255, 255);text-decoration:underline;}
a.link-copyright:active{text-decoration:underline;}

.carte-map { /*resp iframe*/
position: relative;
overflow: hidden;
width: 100%;
padding-top: 75%;
}
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}

summary {
background-color: var(--bl);
  color: var(--bleu-h2-6);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  font-family: var(--hdl-ttf);
  text-align: left;
  font-size: 24px;
  color:var(--bleu-h2-6);
}
summary:hover { background-color: var(--bleu-bck-hov); color:var(--bleu-lien-int); }
details:open { background-color: var(--bleu-bck-hov); color:var(--bleu-lien-int);
}
details[open] > summary { font-weight:normal; background-color: var(--bleu-bck-hov); color:var(--bleu-lien-int); }

#haut { 
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 20px;
  border: none;
  background-color: rgba(13, 49, 114,0.6);
  color:var(--bleu-lien-int);
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
}
#haut:hover { background-color: var(--bleu-bck-hov); }

.columns { float: left; width: 33.3%; padding: 8px; } /*urgences*/
.tel { list-style-type: none; border: 1px solid rgb(238, 238, 238); margin: 0; padding: 0; box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2) }
.tel .header { color: white; font-size: 25px; }
.tel li { border-bottom: 1px solid rgb(238, 238, 238); padding: 20px; text-align: center; }
.tel .grey { background-color: var(--gris-bl); font-size: 20px; }

@media only screen and (max-width: 600px) {
  .columns {
    width: 100%;
  }
}


#defil { background: url('images/services/defibrillateur1.jpg') no-repeat center 50%; width:100%;  height:300px;  background-size: contain;background-position-x:center; background-position-y:50% } /*1a 357*/
#defil:hover { background: url('images/services/defibrillateur2.jpg') no-repeat center 50%;  width:100%; height:300px;  background-size: contain;background-position-x:center; background-position-y:50%  } /*1b*/