*, *:before, *:after {
  box-sizing: border-box;
}

/**************************************************************/
/*                            GLOBAL
/**************************************************************/

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

body {
  background-color: white;
  color: #18294F;
  font-size: 24px;
  line-height: 1.3em;
  overflow-x: hidden;
}

.main-zone {
  display: block;
  margin: 0 auto;
  max-width: 1000px;
}

p, ul {
  color: #161486;
  font-family: monospace, Helvetica, sans-serif;
  font-size: 0.66em;
}

p.intro {
  font-weight: bold;
  font-size: 0.77em;
}

.rrot {
  transition: transform 0.075s ease-out;
}

h2 {
  font-family: Jeannot, Monospace;
}

/**************************************************************/
/*                            HEADER
/**************************************************************/

header img {
  width: 100%;
  padding: 0 100px;
}

header img path:hover {
  opacity: 0.5;
}

/**************************************************************/
/*                            NAVIGATION
/**************************************************************/

ul.navigation {
  display: block;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul.navigation li {
  display: inline-block;
  margin: 10px 0px;
  position: relative;
}

ul.navigation li a {
  position: relative;
  display: inline-block;
  z-index: 5;
  padding: 24px 12px 12px 24px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  font-size: 1.52em;
  font-family: Jeannot, Arial, Helvetica, sans-serif;
}

ul.navigation li a:hover {
  color: #18294F;
}

ul.navigation li:before {
  position: absolute;
  display: block;
  content: ' ';
  background-image: url('img/cadr.svg');
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  transition: transform 0.2s ease-out;
}

ul.navigation li:hover:before {
  background-size: 100% 105%;
  height: 105%;
  width: 100%;
  transition: transform 0.2s ease-out;
}

ul.navigation li:nth-child(odd):before {
  background-image: url('img/cadr2.svg');
}

a.a-propos:before {
  position: absolute;
  display: block;
  content: 'à propos...';
  color: #18294F;
  width: 100px;
  z-index: -1;
  left: -10px;
  top: 0;
  transform: scale(0.1) rotate(-10deg);
  transition: all 0.2s ease-in;
}
a.a-propos:hover:before {
  left: 15px;
  top: -20px;
  transform: scale(1) rotate(24deg);
  transition: all 0.1s ease-out;
}



.skew1:before { transform: skewX(1deg); }
.skew2:before { transform: skewX(2deg); }
.skew3:before { transform: skewX(3deg); }
.skew4:before { transform: skewX(4deg); }
.skew5:before { transform: skewX(5deg); }
.skew6:before { transform: skewX(6deg); }
.skew7:before { transform: skewX(7deg); }
.skew8:before { transform: skewX(8deg); }
.skew9:before { transform: skewX(9deg); }
.skew-1:before { transform: skewX(-1deg); }
.skew-2:before { transform: skewX(-2deg); }
.skew-3:before { transform: skewX(-3deg); }
.skew-4:before { transform: skewX(-4deg); }
.skew-5:before { transform: skewX(-5deg); }
.skew-6:before { transform: skewX(-6deg); }
.skew-7:before { transform: skewX(-7deg); }
.skew-8:before { transform: skewX(-8deg); }
.skew-9:before { transform: skewX(-9deg); }



/**************************************************************/
/*                        HOME CONTENT
/**************************************************************/

.home-category {
  font-family: Jeannot, Arial, Helvetica, sans-serif;
}

.articles-category a {
  display: inline-block;
  font-size: 1.2em;
  text-decoration: none;
  color: #18294F;
  position: relative;
}

.articles,
.cover-articles {
  font-family: Jeannot, Arial, Helvetica, sans-serif;
}

.cover-articles {
  width: 90%;
  margin: auto;
}

.articles a,
.cover-articles a {
  text-decoration: none;
  color: #18294F;
  font-size: 1.3em;
}

.cover-articles a {
  font-size: 1.5em;
}

.articles a:hover,
.cover-articles a:hover {
  color: #F73617;
}

.articles-category a:after {
  color: #161486;
  font-family: monospace, Helvetica, sans-serif;
  font-weight: lighter;
  font-size: 0.3em;
  position: absolute;
  width: 100%;
  top: -30px;
  left: 0;
  transform: scale(1);
  text-align: center;
  transform: scale(0.01);
  opacity: 0;
  top: -20px;
  content: "Voir tout...";
  transition: all 0.2s ease-out;
}

.articles-category a:hover:after {
  top: -30px;
  transform: scale(1);
  opacity: 1;
}

.articles-category a:hover {
  text-decoration: none;
  color: #FA3712;
}
/*
RED  #FA3712
BLUE #18294F
*/
ul.articles,
ul.cover-articles {
  position: relative;
  margin: auto;
  list-style-type: none;
  vertical-align: top;
  padding-left: 0;
  text-align: center;
}
ul.articles li {
  display: inline-block;
  margin: 1em;
  vertical-align: top;
  width: 200px;
}
ul.cover-articles li {
  display: inline-block;
  margin: 1em;
  vertical-align: top;
  width: 100%;
}
img.article_thumbnail {
  width: 200px;
  height: 200px;
  object-fit: cover;
}
ul.cover-articles img.article_thumbnail {
  width: 100%;
  height: 300px;
}
.article_title {
  display: block;
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 10px;
  right: 0;
  background: rgba(255,255,255,1);
  /*background: linear-gradient(0deg, rgba(255,255,255,1) 45%, rgba(255,255,255,0.7231267507002801) 75%, rgba(255,255,255,0) 100%);*/
  padding: 6px 6px 2px 6px;
  border-right: 1px solid #18294F;
  border-top: 1px solid white;
  border-left: 1px solid white;
}
.article_author {
  display: block;
  text-align: center;
}
/*
img.article_thumbnail {
  position: relative;
}

ul.articles li:before {
  position: absolute;
  display: block;
  content: ' ';
  background-image: url('img/kadr.svg');

  transition: transform 0.2s ease-out;
}
*/
.category-title {
  text-align: center;
  font-family: Jeannot, Arial, Helvetica, sans-serif;
}

span.thumb-wrap {
  position: relative;
  display: block;
  padding: 0;
  margin: 0;
}

ul.articles li span.thumb-wrap:before {
  background-image: url(img/kadr1.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  content: " ";
  line-height: 0px;
  position: absolute;
  /*background-color: red;*/
  z-index: -1;
  top: -10%;
  left: -10%;
  width: 110%;
  height: 110%;  
}

span.telehand:after {
  background-image: url(img/telehand.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-size: 100% 100%;
  content: " ";
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 34px;
  z-index: 5;
}

ul.articles li:nth-child(odd) span.thumb-wrap:before {
  background-image: url(img/kadr2.png);
}

ul.articles span.thumb-wrap img {
  border-right: 1px solid #18294F;
  border-bottom: 1px solid #18294F;
  border-top: 1px solid white;
  border-left: 1px solid white;
}

ul.cover-articles span.thumb-wrap img {
  border-right: 1px solid #18294F;
  border-bottom: 1px solid #18294F;
  border-top: 1px solid white;
  border-left: 1px solid white;
}

ul.cover-articles li span.thumb-wrap:before {
  background-image: url(img/cover_cadre.png);
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 100% 100%;
  content: " ";
  line-height: 0px;
  position: absolute;
  /*background-color: red;*/
  z-index: -1;
  top: -10px;
  left: -10px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}

ul.cover-articles li span.thumb-wrap img {
  /*opacity: 0;*/
}

.telekom {
  z-index: 20;
  position: fixed;
  top: -10px;
  right: -10px;
  padding: 0;
  margin: 0;
  border: 0;
  transition: all 0.07s ease-out;
  cursor: pointer;
}

.telekom:hover {
  transform: translate(-6px, 5px) rotate(-3deg);
}

.telekom img {
  max-width: 195px;
  width: 20vw;
}

/**************************************************************/
/*                            FOOTER
/**************************************************************/

footer {
  font-family: Jeannot, Arial, Helvetica, sans-serif;
  text-align: center;
  padding: 25px 0;
}

.merci {
  font-family: Jeannot, Arial, Helvetica, sans-serif;
  font-size: 0.66em;
  line-height: 18px;
  color: #353535;
}

footer img {
  margin: 0 0.5em;
  height: 140px;
}

footer a {
  display: inline-block;
}

/*footer a:hover{
  filter: invert(67%) sepia(83%) saturate(1211%) hue-rotate(89deg) brightness(109%) contrast(99%);
}
*/

/**************************************************************/
/*                          CONTENT
/**************************************************************/

.page-content p.publish-date {
  font-style: italic;
  text-align: center;
  font-size: 0.6em;
  color: #606060;
}

.category-intro {
  display: block;
  margin: 2em 5em;
}

.back-nav {
  text-align: center;
}

.back-nav a {
  display: inline-block;
  padding: 0.5em 1em;
  font-weight: bold;
  text-decoration: none;
  border-radius: 0.3em;
}

.back-nav a:hover {
  color: #F73617;
  background-color: #18294F; 
}

hr {
  width: 50%;
  margin: 20px auto;
  border: 0;
  border-bottom: 1px dotted #353535;
}

.page-content h2{
  border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
  text-align: center;
  color: white;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
  padding: 10px;
  margin: 0px;
  font-family: Jeannot;
  font-weight: normal;
  font-size: 38px;
  background-color: #353535;
}

.page-content p a{
  color: #353535;
  text-decoration: none;
  border-bottom: solid 1.2px #353535;
}

.page-content p a:hover{
  font-weight: bolder;
  color: #02fe76;
  border-bottom: solid 1.5px #02fe76;
}

p.auteur{
  margin-bottom: 80px;
  text-align: center;
  font-family: Monospace;
  font-size: 24px;
  color: #353535;
}

p.auteur mark{
  border: none;
  font-family: Monospace;
  font-size: 15px;
  color: #353535;
  background-color: #f7f7f7;
}

p.sous-tit{
  text-align: center;
  color: #353535;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
  padding: 10px;
  margin: 0px;
  font-family: Jeannot;
  font-weight: normal;
  font-size: 30px;
}

.page-content p{
  /*margin-bottom: 30px;
  margin-top: 30px;*/
  font-family: Monospace;
  font-weight: normal;
  font-size: 0.8em;
  line-height: 1.5em;
  color: #353535;
}


.page-content h1{
  text-align: center;
  margin-top: 40px;
  margin-bottom: 80px;
  line-height: 60px;
  font-family: Jeannot;
  font-weight: normal;
  font-size: 70px;
  color: #353535;
}

.intro p, p.intro {
  font-family: Monospace;
  font-weight: bold;
  font-size: 0.8em
  line-height: 1.4em;
  /*color: #353535;*/
  /*margin-bottom: 60px;*/
}
.col-split {
  margin-top: 3em;
    column-count: 2;
  font-family: Monospace;
  color: #353535;
  font-weight: normal;
  font-size: 12px;
}

.col-split p:first-child {
    margin-top: 0;
}

.signature {
  font-family: Monospace;
  color: #353535;
  float: right;
  font-style: italic;
}
.invisible {
    pointer-events: none;
    opacity: 0;
    font-size: 1px;
}

.cross {
  position: relative;
}
.cross:before {
  content: "";
  position: absolute;
  background-color: #353535;
  left: -0.1em;
  right: -0.1em;
  top: 46%;
  bottom: 46%;
  transform: rotate(45deg);
}
.cross:after {
  content: "";
  position: absolute;
  background-color: #353535;
  left: -0.1em;
  right: -0.1em;
  top: 46%;
  bottom: 46%;
  transform: rotate(-45deg);
}

.title.white .cross:before,
.title.white .cross:after {
  background-color: white !important;
}

img.show{
  width: 100%;
}

img.show-grid {
  width: 45%;
  display: inline-block;
  margin: 34px 17px;
  vertical-align: middle;
}

img.fit {
  display: block;
  max-width: 100%;
  margin: 34px auto;
}

img.show-smaller-left{
  float: left;
  margin: 0.5em 1em 0.5em 0;
  width: 30%;
  /*height: 326px;*/
    /*object-fit: cover;*/
}

img.show-smaller-right{
  float: right;
  margin: 0.5em 0em 0.5em 1em;
  width: 30%;
  /*height: 326px;*/
    /*object-fit: cover;*/
}

img.show-centre{
  margin-right: 3px; 
  margin-left: 3px;
  /*height: 350px;*/
  /*object-fit: cover;*/
  width: 30%;
}

img.show-medium {
  display: block;
  margin: 0.5em 1em;
  width: 45%;
  margin: auto;
}

.cul{
  display: block;
  text-align: center;
}
/**************************************************************/
/*                          RESPONSIVE
/**************************************************************/


@media screen and (max-width: 980px) {
  
  ul.cover-articles li span.thumb-wrap:before {
    background-image: none;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

  ul.cover-articles li span.thumb-wrap img {
    border: 1px solid #18294F;
  }
}

@media screen and (max-width: 765px) {
  body {
    font-size: 16px;
  }
  header img {
    padding: 0 20px;
  }

  ul.navigation li a {
    padding: 8px 6px 3px 14px;
  }

  ul.navigation li {
    margin: 4px 3px;
  }

  footer img {
    height: 100px;
  }

  .articles-category,
  .category-title {
    text-align: center;
  }

}

@media screen and (max-width: 480px) {
  ul.articles li {
    width: 130px;
  }

  img.article_thumbnail {
    width: 130px;
    height: 130px;
    object-fit: cover;
  }

  .telekom img {
    max-width: 195px;
    width: 30vw;
  }
}