/* Styles for yeswiki's template
 * Author: Florian Schmitt <florian@outils-reseaux.org>
 * under GNU General Public License
 */

 /*
 * CSS variables
 */
 :root {
  --main-text-color:#414141;
  --main-text-fontsize:16px;
  --main-text-lineheight:1.5em;
  --main-text-fontfamily:'Inter UI', sans-serif;
  --main-selected-text-bg:rgb(254, 224, 52);
  --main-bg-color:#E1E1E1;

  --main-container-bg-color:#fff;


  /* full width */
  --main-container-margin: 0;
  --main-container-width: 100%;
  --main-container-text-width: 100%;
  --main-container-border-radius: 0;
  --main-container-box-shadow: none;
  --section-background-image-width:100vw;
  --section-background-image-margin:-50vw;
  --section-background-image-position:50%;

  /* contained page */
  /*
  --main-container-margin: 15px auto 15px auto;
  --main-container-width: 1000px;
  --main-container-text-width: 800px;
  --main-container-border-radius: 4px;
  --main-container-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --section-background-image-width:var(--main-container-width);
  --section-background-image-margin:calc((var(--main-container-text-width) - var(--main-container-width) - 30px) / 2);
  --section-background-image-position:0;*/

  --navbar-bg-color: salmon;
  --navbar-text-color: #222;
  --navbar-link-color: #222;
  --navbar-link-bg-color: transparent;
  --navbar-link-hover-color: #222;
  --navbar-link-bg-hover-color: #FAC473;
  --navbar-border: none;
  --navbar-border-radius : 4px 4px 0 0;
  --navbar-shadow: 1px 1px 1px rgba(0,0,0,.2);


  --header-bg-color: #f4f4f4;
  --header-text-color: #414141;
  --header-title-color: #222;

  --footer-bg-color: #2b2b2b;
  --footer-text-color: #99999b;
  --footer-title-color: #ccc;
  --footer-border-top:  none;

  --btn-border:none;
  --btn-border-radius:0;
  --btn-default-color:white;
  --btn-default-background:pink;
  --btn-default-border:none;
}

/*
 * Webfont
 */
 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 400;
   src: url("Inter-UI-Regular.woff2?v=1.11") format("woff2"),
        url("Inter-UI-Regular.woff?v=1.11") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 400;
   src: url("Inter-UI-RegularItalic.woff2?v=1.11") format("woff2"),
        url("Inter-UI-RegularItalic.woff?v=1.11") format("woff");
 }

 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 500;
   src: url("Inter-UI-Medium.woff2?v=1.11") format("woff2"),
        url("Inter-UI-Medium.woff?v=1.11") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 500;
   src: url("Inter-UI-MediumItalic.woff2?v=1.11") format("woff2"),
        url("Inter-UI-MediumItalic.woff?v=1.11") format("woff");
 }

 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 700;
   src: url("Inter-UI-Bold.woff2?v=1.11") format("woff2"),
        url("Inter-UI-Bold.woff?v=1.11") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 700;
   src: url("Inter-UI-BoldItalic.woff2?v=1.11") format("woff2"),
        url("Inter-UI-BoldItalic.woff?v=1.11") format("woff");
 }

 @font-face {
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 900;
   src: url("Inter-UI-Black.woff2?v=1.11") format("woff2"),
        url("Inter-UI-Black.woff?v=1.11") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 900;
   src: url("Inter-UI-BlackItalic.woff2?v=1.11") format("woff2"),
        url("Inter-UI-BlackItalic.woff?v=1.11") format("woff");
 }


/*
* Main styles
*/

body {
background: var(--main-bg-color);
color: var(--main-text-color);
font: var(--main-text-fontsize)/var(--main-text-lineheight) var(--main-text-fontfamily);
letter-spacing: -0.1px;
font-weight: 400;
font-kerning: normal;
-moz-font-feature-settings: "kern" 1;
-webkit-font-feature-settings: "kern" 1;
font-feature-settings: "kern" 1;
}

*::selection {
   background: var(--main-selected-text-bg);
}
*::-moz-selection {
   background: var(--main-selected-text-bg);
}

h1 {
  color: #222;
  font-size: 55px;
  letter-spacing: -2.1px;
  line-height: 44px;
  text-indent: -2.5px;
  margin-bottom: 30px;
  margin-top: 10px;
  font-weight: 700;
}

h2 {
  font-size: 24px;
  letter-spacing: -0.4px;
  line-height: 30px;
  margin-bottom: 25px;
  margin-top: 10px;
}

h1, h2, h3 {
  font-weight: 500;
}


/* Conteneur principal de la page Wiki */

#yw-container {
  background-color: var(--main-container-bg-color);
  margin: var(--main-container-margin);
  -moz-border-radius: var(--main-container-border-radius);
  -webkit-border-radius: var(--main-container-border-radius);
  border-radius: var(--main-container-border-radius);
  width: var(--main-container-width);
  -moz-box-shadow: var(--main-container-box-shadow);
  -webkit-box-shadow: var(--main-container-box-shadow);
  box-shadow: var(--main-container-box-shadow);
}
#yw-container .container {
  max-width: var(--main-container-width);
}

/* Menu horizontal principal */

#yw-topnav {
  margin:0;
  -webkit-border-radius: var(--navbar-border-radius);
  border-radius: var(--navbar-border-radius);
  border: var(--navbar-border);
  transition: top 0.3s ease-in-out;
}

#yw-topnav.fixable.nav-up, .yw-responsive #yw-topnav.fixable.nav-up {
  top: -50px;
}

.yw-fixed #yw-topnav, .yw-responsive #yw-topnav {
  margin: 0 -15px 15px;
  /*marge negative pour compenser le conteneur principal*/
}


/* le menu devient fixe quand on scrolle plus bas dans la page */

#yw-topnav.affix {
  right: auto;
  left: auto;
  z-index: 3;
  width: var(--main-container-width);
}

@media screen and (max-width: 768px) {
  #yw-topnav.affix {
    width: 100%;
  }
}


/* on decalle le contenu vers le bas pour eviter un saut */
#yw-topnav.affix + #yw-header {
  margin-top: 50px;
}

/* Couleur navbar */
.navbar-default {
   background-color: var(--navbar-bg-color);
   color: var(--navbar-text-color);
   border: var(--navbar-border);
   box-shadow: var(--navbar-shadow);
}
.navbar-default .navbar-brand, .navbar-default .navbar-nav > li > a {
   color: var(--navbar-link-color);
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav a.active-parent-link, .navbar-default .navbar-nav a:hover, .navbar-default .navbar-nav > li > a:focus, .navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
   color: var(--navbar-link-hover-color);
   background-color: var(--navbar-link-bg-hover-color);
}



/* Bandeau d'entete */

#yw-header {
background-color: var(--header-bg-color);
color: var(--header-text-color);
}
#yw-header h1,#yw-header h2, #yw-header h3 ,#yw-header h4, #yw-header h5, #yw-header h6  {
color: var(--header-title-color);
}

#yw-header .white {
 color: var(--header-text-color) !important;
}

#yw-header .white h1, #yw-header .white h2, #yw-header .white h3, #yw-header .white h4, #yw-header .white h5, #yw-header .white h6, #yw-header .white a, #yw-header .white a:hover {
 color:var(--header-title-color) !important;
}

.yw-fixed #yw-header, .yw-responsive #yw-header {
  margin: 0 -15px;
  /*marge negative pour compenser le conteneur principal*/
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.yw-fixed #yw-header .yw-headerpage, .yw-fixed #yw-header .background-image, .yw-responsive #yw-header .yw-headerpage, .yw-responsive #yw-header .background-image {
  -webkit-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

.page .background-image {
    position: relative;
    left: var(--section-background-image-position);
    right: var(--section-background-image-position);
    width:var(--section-background-image-width);
    margin-left: var(--section-background-image-margin);
    margin-right: var(--section-background-image-margin);
}


/* Partie centrale de la page Wiki */

#yw-main {
  padding-top: 15px;
  position: relative;
  min-height: 400px;
}
#yw-main .container {
  max-width: var(--main-container-text-width);
}


/* Barre de rédaction */

.footer {
  font-size: 0.9em;
  margin: 15px 0;
  padding: 0;
  text-align: center;
}

.footer a {
  color: #333;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  margin: 0;
}

.footer a:hover {
  text-decoration: none;
}


/* Pied de page */

#yw-footer {
  background-color: var(--footer-bg-color);
  color: var(--footer-text-color);
  border-top: var(--footer-border);
  padding: 30px 0;
}
#yw-footer h1, #yw-footer h2, #yw-footer h3, #yw-footer h4, #yw-footer h5, #yw-footer h6 {
  color: var(--footer-title-color);
}

.yw-fixed #yw-footer, .yw-responsive #yw-footer {
  margin: 0 -15px;
  /*marge negative pour compenser le conteneur principal*/
  -webkit-border-radius: 0 0 4px 4px;
  border-radius: 0 0 4px 4px;
}

.btn {
    border: var(--btn-border);
    border-radius: var(--btn-border-radius);
}

.btn-default {
    color: var(--btn-default-color);
    background: var(--btn-default-background);
    border: var(--btn-default-border);
}