:root {
  --content-width: 100rem;
  --couleur-1: #1BA170;
  --couleur-1bis: #24D493;
  --couleur-2: #ee7357;
  --couleur-2bis: #D4674E;
  --couleur-2ter: #D49359;
  --couleur-fond: #fff;
  --couleur-3: #21363B;
  --min-larg-gal: 50vw;
}

/*color rgb(238, 115, 87) orange orange #ee7357
!color rgb (86, 99, 138) gris #56638a
!police  Coronet => Titre
!police Lato regular => texte
!police compagnon bold
!police Reforma 2018 Blanca
!vert #42ba78
!vert 2 : 1BA170
!gris 2 : 21363B
!
*/

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

@font-face {
  font-family:"Reforma 2018 Blanca";
  src: url(../fonts/Reforma2018-Blanca.otf) format("opentype");
}
@font-face {
  font-family:"Reforma 2018 GrisItalica";
  src: url(../fonts/Reforma2018-GrisItalica.otf) format("opentype");
}

@font-face {
  font-family:"Compagnon Bold";
  src: url("../fonts/Compagnon-Bold.woff") format("woff");
  font-variant: common-ligatures;
}
@font-face {
  font-family:"Reforma 2018 Negra";
  src: url("../fonts/Reforma2018-Negra.otf") format("opentype");
}

@font-face {
  font-family:"Reforma 1918 NegraIt";
  src: url("../fonts/Reforma1918-NegraItalica.woff") format("woff");
}
@font-face {
  font-family:"ReformaGrisIt";
  src: url("../fonts/Reforma1918-GrisItalica.otf") format("opentype");
}
@font-face {
  font-family:"FiraCodeNerd Light";
  src: url("../fonts/Fira Code Light Nerd Font Complete.ttf") format("truetype");
}
@font-face {
  font-family:"FiraCodeNerd Regular Mono";
  src: url("../fonts/Fira Code Regular Nerd Font Complete Mono.ttf") format("truetype");
}
@font-face {
  font-family:"FiraCodeNerd Regular";
  src: url("../fonts/Fira Code Regular Nerd Font Complete.ttf") format("truetype");
}
@font-face {
  font-family:"FiraCodeNerd Medium ";
  src: url("../fonts/Fira Code Medium Nerd Font Complete.ttf") format("truetype");
}
@font-face {
  font-family:"FiraCodeNerd Medium Mono";
  src: url("../fonts/Fira Code Medium Nerd Font Complete Mono.ttf") format("truetype");
}



html {
  /*font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";*/
  font-family:"Reforma 2018 Blanca";
  background: var(--couleur-fond);
  color: var(--couleur-1);
}


li {
  list-style: square inside;
  padding-left: 2rem;
}

a {
  color: currentColor;
  text-decoration: none;
}

strong, b {
  font-weight: 500;
}

img {
  width: 100%;
}

.col_img_gallery {
  list-style: none;
  padding-left: 0;
}

.page {
  /*padding: 5vh 5vw 10vh;*/
  display: grid;
  grid-template-areas: "menu main" "foot main" ". main";
  grid-template-columns: 15vw 2fr;
  grid-template-rows: 23vh auto;
}
.page > * {
  max-width: var(--content-width);
  /*margin: 0 auto;*/
}

.header {
  margin-block: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position:sticky;
  top:1rem;
}

.header a {
  position: relative;
  text-transform: uppercase;
  /*font-size: .875rem;*/
  letter-spacing: .05em;
  padding: .5rem 0;
  font-weight: 700;
}

.header .logo {
  display: block;
  margin-bottom: 1.5rem;
  padding: .5rem 0;
  font-size: 1.5rem;
}

.menu a {
  margin: 0 .75rem;
  /*color:#56638a;*/
}

.menu {
  display: flex;
  flex-direction: column;
}

.menu a[aria-current] {
  border-bottom: 2px solid var(--couleur-3);
}

@media screen and (min-width: 40rem) {
  .header .logo {
    margin-bottom: 0;
  }
  .header {
/*    flex-direction: row;
    justify-content: space-between;*/
  }

}


main {
  /*min-height: calc(100vh - 10rem);*/
  grid-area: main;
  min-width: 75%;
}

.intro {
  /*padding: 10vh 0;*/
  text-align: center;
}

.intro h1 {
  font-family: "Reforma 2018 Negra";
  position: relative;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: calc(1vw + 2.5rem);
  z-index: 1;
  /*color: #56638a;*/
}

.tags {
  font-family: ""Reforma 1918 NegraIt"";
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: .75rem;
  font-weight: 400;
  color: var(--couleur-2);
}

.text {
  line-height: 1.5em;
}
.text p,
.text figure,
.text ul,
.text ol {
  margin-bottom: 1.5em;
}
.text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  text-align: center;
}
.text > *:first-child {
  margin-top: 0;
}
.text a {
  position: relative;
  white-space: nowrap;
  font-weight: 500;
  z-index: 1;
  display: inline-block;
  border-bottom: 2px solid  var(--couleur-2);
}
.text figure {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.text img {
  width: 100%;
}

.grid_gallery {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 1vw;
  grid-row-gap: 1vh;
}

.footer {
  /* padding: 1.5rem 5vw 10vh; */
  grid-area: foot;
  position: sticky;
  top: 90%;
  display: block;
  line-height: .7rem;
  font-size: .7rem;
}
.footer a {
  display: inline-block;
  color:  var(--couleur-3);
}
.footer > a {
  margin-bottom: 1.5rem;
  border-top: 2px solid  var(--couleur-1);
  width: 16.5rem;
  padding-top: .5rem;
}
.creativecommon {
  font-family:"FiraCodeNerd Regular";
}
.creativecommon::before {
  content:"\E290  "
}
.footer p {
  color:  var(--couleur-3);
}
.social a {
  margin: 0 .75rem;
  padding: .5rem 1rem;
  border: 2px solid  var(--couleur-1);
  width: 7.5rem;
}
.social a:hover {
  background: #000;
  color: var(--couleur-2);
}
.note-date::before {
  font-family:"FiraCodeNerd Regular";
  font-size:300;
  content:"\EAB0   ";
}
.note-date {
  font-family:"Reforma1918-GrisItalica";
  font-size:400;
}

.logo {
  display: flex;
  text-indent: 0px;
  width: 150px;
  height: 82px;
  color : var(--couleur-fond);;
  font-family: "Reforma 1918 NegraIt";
  font-size:1.5rem;
  text-shadow: 2px 2px  var(--couleur-2);
}
.logo img {
  width: 100px;
  height: 82px;
  background: url(../img/fleurs_logo.svg);
  background-size: 100px 82px;
}


/*
.gradient-pattern {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 29%;
  height: 100%;
  opacity: 0.76;
  border: none;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 17%, #56638a 100%), -webkit-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), #56638a;
  background: -moz-linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 17%, #56638a 100%), -moz-linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), #56638a;
  background: linear-gradient(90deg, rgba(0,0,0,0) 0, rgba(0,0,0,0) 17%, #56638a 100%), linear-gradient(45deg, rgba(255,255,255,0.2) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), #56638a;
  background-position: 50% 50%, auto auto;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: auto auto, 12px 12px;
  background-size: auto auto, 12px 12px;
}
*/