@font-face {
    font-family: 'Zector';/*monospace*/
    src: url('police/Zector.eot');
    src: url('police/Zector.eot?#iefix') format('embedded-opentype'),
        url('police/Zector.woff2') format('woff2'),
        url('police/Zector.woff') format('woff'),
        url('police/Zector.ttf') format('truetype'),
        url('police/Zector.svg#Zector') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Viafont';/*serif*/
    src: url('police/Viafont.eot');
    src: url('police/Viafont.eot?#iefix') format('embedded-opentype'),
        url('police/Viafont.woff2') format('woff2'),
        url('police/Viafont.woff') format('woff'),
        url('police/Viafont.ttf') format('truetype'),
        url('police/Viafont.svg#Viafont') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Targa MS';
    src: url('police/TargaMS.eot');
    src: url('police/TargaMS.eot?#iefix') format('embedded-opentype'),
        url('police/TargaMS.woff2') format('woff2'),
        url('police/TargaMS.woff') format('woff'),
        url('police/TargaMS.ttf') format('truetype'),
        url('police/TargaMS.svg#TargaMS') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Targa';
    src: url('police/Targa.eot');
    src: url('police/Targa.eot?#iefix') format('embedded-opentype'),
        url('police/Targa.woff2') format('woff2'),
        url('police/Targa.woff') format('woff'),
        url('police/Targa.ttf') format('truetype'),
        url('police/Targa.svg#Targa') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Targa MS Hand';
    src: url('police/TargaMSHand.eot');
    src: url('police/TargaMSHand.eot?#iefix') format('embedded-opentype'),
        url('police/TargaMSHand.woff2') format('woff2'),
        url('police/TargaMSHand.woff') format('woff'),
        url('police/TargaMSHand.ttf') format('truetype'),
        url('police/TargaMSHand.svg#TargaMSHand') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*{
background-color:black;
color:white;
font-family:'Viafont', serif;
text-align:center;
}
h1 ,.h1 {font-family:'Viafont',monospace;
font-size:xx-large;}
h2,.h2{font-family:'targa',monospace;
font-size:x-large;}
h3,.h3{font-family:'targa MS',monospace;
font-size:large;}
h4,.h4{font-family:'Zector',monospace;
font-size:large;}
.souligne{text-decoration:underline;}
.ombre{text-shadow: 1px 0px #cccccc}
em{font-family:'Zector',monospace;
font-size:large;}
#image2{display:block; width:100%; margin:auto;}/*-----------------------------------------------------------------------*/
.circleTof{
	display:block;
	margin:auto;
padding : 5em;
border-radius:50%;
background: radial-gradient(white,15%,black);
}

nav{grid-area: navigation;}
main{grid-area : main; overflow-y:scroll;}
#footItem1{grid-area: footerG;}
#footItem2{grid-area: footerC;}
#footItem3{grid-area: footerD;}

 footer{
  grid-area:footer;
display:grid;
grid-template-columns : 100%;
grid-template-rows : 1fr 1fr 1fr;
grid-template-areas : " footerG" 
			"footerC "
			"footerD";
		}


body{
height: 100vh;
width: 100vw;
display:grid;
grid-template-columns : 1fr 1fr 1fr;
grid-template-rows : 3em auto 5em;
grid-template-areas:
"navigation navigation navigation"
"main main main"
"footer footer footer";
grid-gap:1em;
}

img.bandeau{
width:100%;
}
.red_alert{
border-style : solid;
border-color : red;
	padding : 1em;
}
.text_article{
	margin:5em auto 5em auto;
font-family:'Zector',monospace;
font-size:xx-large;

}
a{text-decoration: none;}

#menu ul {
  margin: 0;
  padding: 0;
}

#menu .main-menu {
  display: none;
}

#tm:checked + .main-menu {
  display: block;
}

#menu input[type="checkbox"], 
#menu ul span.drop-icon {
  display: none;
}

#menu li, 
#toggle-menu, 
#menu .sub-menu {
  border-style: solid;
  border-color: rgba(0, 0, 0, .05);
}

#menu li, 
#toggle-menu {
  border-width: 0 0 1px;
}

#menu .sub-menu {
  background-color: black;
  border-width: 1px 1px 0;
  margin: 0 1em;
}

#menu .sub-menu li:last-child {
  border-width: 0;
}

#menu li, 
#toggle-menu, 
#menu a {
  position: relative;
  display: block;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, .125);
}

#menu, 
#toggle-menu {
  background-color: black;
}

#toggle-menu, 
#menu a {
  padding: 1em 1.5em;
}

#menu a {
  transition: all .125s ease-in-out;
  -webkit-transition: all .125s ease-in-out;
}

#menu a:hover {
  background-color: white;
  color: black;
}

#menu .sub-menu {
  display: none;
}

#menu input[type="checkbox"]:checked + .sub-menu {
  display: block;
}

#menu .sub-menu a:hover {
  color: black;
}

#toggle-menu .drop-icon, 
#menu li label.drop-icon {
  position: absolute;
  right: 1.5em;
  top: 1.25em;
}

#menu label.drop-icon, #toggle-menu span.drop-icon {
  border-radius: 50%;
  width: 1em;
  height: 1em;
  text-align: center;
  background-color: rgba(0, 0, 0, .125);
  text-shadow: 0 0 0 transparent;
  color: rgba(255, 255, 255, .75);
}

#menu .drop-icon {
  line-height: 1;
}
@media only screen and (max-width: 64em) and (min-width: 52.01em) {
  #menu li {
    width: 33.333%;
  }

  #menu .sub-menu li {
    width: auto;
  }

	#image2{display:block; width:50%;margin:auto;}/*----------------------------------------------------*/
}

@media only screen and (min-width: 52em) {
 
  #menu .main-menu {
    display: block;
  }

  #toggle-menu, 
  #menu label.drop-icon {
    display: none;
  }

  #menu ul span.drop-icon {
    display: inline-block;
  }

  #menu li {
    float: left;
    border-width: 0 1px 0 0;
  }

  #menu .sub-menu li {
    float: none;
  }

  #menu .sub-menu {
    border-width: 0;
    margin: 0;
    position: absolute;
    top: 100%;
    left: 0;
    width: 12em;
    z-index: 3000;
  }

  #menu .sub-menu, 
  #menu input[type="checkbox"]:checked + .sub-menu {
    display: none;
  }

  #menu .sub-menu li {
    border-width: 0 0 1px;
  }

  #menu .sub-menu .sub-menu {
    top: 0;
    left: 100%;
  }

  #menu li:hover > input[type="checkbox"] + .sub-menu {
    display: block;
  }
 
  footer{grid-area:footer;
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-areas:"footerG footerC footerD";}

#image2{display:block; width:100%;margin:auto;}/*---------------------------------------------------------*/
}

#affiche_mini{
 border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
display: block;
  margin-left: auto;
  margin-right: auto;
  width: 15em;
	transition: transform ease-in-out 0.3s;
}
#affiche_mini:hover{
transform: scale(1.4);
}

iframe {


margin-top: 20px;


margin-bottom: 30px;

-moz-border-radius: 12px;
-webkit-border-radius: 12px;border-radius: 12px;-moz-box-shadow: 4px 4px 14px #000;-webkit-box-shadow: 4px 4px 14px #000;box-shadow: 4px 4px 14px #000;}