/******************************************************************************
 * Colors
 ******************************************************************************
 * #6e207e violet
 * #cb021a rouge
 * #96bd0d vert
 * #ffd501 jaune
 * #37a8db bleu
 ******************************************************************************/

/*
:root {
  --rouge: #cb021a;
  --violet: #6e207e;
  --bleu: #37a8db;
  --vert: #96bd0d;
  --jaune: #ffd501;
}
*/
:root {
  --rouge: #e52727; /* 229, 39, 39 */
  --violet: #6f2282; /* 111, 34, 130 */
  --bleu: #3878db; /* 56, 129, 219 */
  --vert: #8dbe22; /* 141, 190, 34 */
  --jaune: #f7a712; /* 247, 167, 18 */

  --default-text: #241c15;
}


/* color */
.rouge { color: #e52727; }
.violet { color: #6f2282; }
.bleu { color: #3878db; }
.vert { color: #8dbe22; }
.jaune { color: #f7a712; }
.accentcolor { color: var(--accentcolor); }

/* background-color */
.bgrouge { background-color: #e52727; }
.bgviolet { background-color: #6f2282; }
.bgbleu { background-color: #3878db; }
.bgvert { background-color: #8dbe22; }
.bgjaune { background-color: #f7a712; }
.bgaccentcolor { background-color: var(--accentcolor); }



/******************************************************************************
 * Box model
 ******************************************************************************/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/******************************************************************************
 * Debug
 ******************************************************************************/
.debug {
  text-align:center;
  margin:50px auto;
}
.debug a {
  display: inline-block;
  text-decoration: none;
}
.debug a:after {
  position:relative;
  color: #333;
  /*content: " ・•●★❋ ";*/
  content: " ● ";
}
.debug a:last-child:after {
  content: "";
}
.enrico {
  font-style: italic;
  color: #fd4cfc;
}

/******************************************************************************
 * Fonts
 * Download Google Webfonts: https://gwfh.mranftl.com/fonts
 ******************************************************************************/

/* noto-serif-jp-200 - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 200;
  src: local('Noto Serif JP ExtraLight'), local('NotoSerifJP-ExtraLight'),
       url('../fonts/noto-serif-jp-v7-latin-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-jp-300 - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 300;
  src: local('Noto Serif JP Light'), local('NotoSerifJP-Light'),
       url('../fonts/noto-serif-jp-v7-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-jp-regular - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif JP'), local('NotoSerifJP-Regular'),
       url('../fonts/noto-serif-jp-v7-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-jp-500 - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 500;
  src: local('Noto Serif JP Medium'), local('NotoSerifJP-Medium'),
       url('../fonts/noto-serif-jp-v7-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-jp-600 - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 600;
  src: local('Noto Serif JP SemiBold'), local('NotoSerifJP-SemiBold'),
       url('../fonts/noto-serif-jp-v7-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-jp-700 - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif JP Bold'), local('NotoSerifJP-Bold'),
       url('../fonts/noto-serif-jp-v7-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* noto-serif-jp-900 - latin */
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 900;
  src: local('Noto Serif JP Black'), local('NotoSerifJP-Black'),
       url('../fonts/noto-serif-jp-v7-latin-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/noto-serif-jp-v7-latin-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-300 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'),
       url('../fonts/roboto-v20-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: local('Roboto Italic'), local('Roboto-Italic'),
       url('../fonts/roboto-v20-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'),
       url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-300italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 300;
  src: local('Roboto Light Italic'), local('Roboto-LightItalic'),
       url('../fonts/roboto-v20-latin-300italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-300italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'),
       url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-500italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 500;
  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
       url('../fonts/roboto-v20-latin-500italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-500italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'),
       url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* roboto-700italic - latin */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'),
       url('../fonts/roboto-v20-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/roboto-v20-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}


/******************************************************************************
 * Default
 ******************************************************************************/

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  margin:0;
}
textarea {
  font-family: 'Roboto', sans-serif;
}
@media only screen and (max-width: 1279px) {
  body {
    background: #17181a;
  }
}
@media only screen and (min-width: 1280px) {
  body {
    background: #fff;
  }
}

h1 {
  margin-left: auto;
  margin-right: auto;
}
h2, h3, h4, h5, p, blockquote, form, table, ul, ol {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.main img {
  max-width:100%;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
}

h1, h2, h3, h4, h5 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
}
h1 {
  font-size:2.3rem;
  font-size: calc(2.1rem + 1vw);
  line-height:2.5rem;
  line-height: calc(2.5rem + 1vw);
  margin-top: calc(1rem + 1vw);
  margin-bottom: calc(1rem + 5vw);
  text-align: center;
}
h2 {
  font-size:2rem;
  line-height:2.7rem;
  letter-spacing:-0.04rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  text-align: center;
}
h3 {
  font-size:1.6rem;
  line-height:2rem;
  letter-spacing:-0.04rem;
  margin-top: 3rem;
  margin-bottom: 2rem;
  text-align: left;
}
h4 {
  font-size: 1.3rem;
  line-height:1.5rem;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  text-align: left;
  text-decoration: underline;
}
a {
  color: var(--accentcolor);
  text-decoration: none;
}
a:hover {
  /*text-decoration: underline;*/
}

a:focus,
*:focus {
    outline: none;
}

.cta {
  text-align:center;
}
.cta a {
  display:inline-block;
  width: auto;
  padding: 0 20px;
  font-family: 'Noto Serif JP', serif;
  font-size:1rem;
  line-height:32px;
  margin: 1rem auto;
  text-decoration: none;
  border-radius:3px;
  background: var(--accentcolor);
  color: #fff;
}
/*
.rouge .cta a { color: #e52727; }
.violet .cta a { color: #6f2282; }
.bleu .cta a { color: #3878db; }
.vert .cta a { color: #8dbe22; }
.jaune .cta a { color: #f7a712; }
*/

ul, ol {
  padding-left: 25px;
}
ul {
    list-style-type: disc;
}

.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container p,
.container blockquote,
.container form,
.container table,
.container ul,
.container ol,
.container .content {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}

.container table {
  margin-bottom:2em;
}

i {
  font-style: italic;
}

figure.table {
    width: auto;
    height: auto;
}



/******************************************************************************
 * Navigation mobile
 ******************************************************************************/

@media only screen and (max-width: 1279px) {

  /* Layers */
  .menu { z-index: 1; }
  .container { z-index: 2; }
  .header { z-index: 3; }
  .dialog { z-index: 4; }
  .hamburger { z-index: 5; }


  /* Header */
  .header {
    position: fixed;
    /*position: relative;*/
    height: 70px;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    color: #241c15;
    border-bottom:1px solid #ddd;
    transition: 300ms;
  }

  /* Logo */
  .logo {
    position: absolute;
    top: 0;
    left: 0;
    padding: 15px 15px;
    color: inherit;
    text-decoration: none;
    font-family: 'Noto Serif JP', serif;
    line-height:18px;
  }
  .logo img {
    display: block;
    width: 40px;
    float: left;
    margin-right: 10px;
  }

  /* Hamburger */
  .hamburger {
    position: fixed;
    top: 15px;
    right: 15px;
    transition: 300ms ease-in;
  }

  /* Search */
  .search {
    font-size:16px;
    line-height:28px;
    margin: 0;
    text-decoration: none
  }

  /* Animation Menu & Dialog */
  body.showmenu .menu {
    transform: translate3d(-100px, 0, 0);
  }
  body.showmenu .header {
    transform: translate3d(-320px, 0, 0);
  }
  body.showmenu .container {
    transform: translate3d(-320px, 0, 0);
  }
  body.showdialog,
  body.showmenu {
    overflow-y: hidden;
  }
  body.showmenu .menu {
    overflow-y: scroll;
  }

  /* Menu */
  .menu {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100px;
    width: 320px;
    color: #fff;
    font-weight: 300;
    transition: 300ms;
    padding: 30px 30px 0 30px;
    font-family: 'Noto Serif JP', serif;
    /* TODO: Trouver une autre solution */
    /* Pour qu'on ne voie pas le menu sur mobile en "tirant" le site vers le bas */
    opacity: 0;
  }
  .menu ul {
    margin:0 0 50px 0;
    padding:0;
    list-style: none;
  }
  .showmenu .menu {
    opacity: 1;
  }
  .menu ul a {
    display:block;
    font-weight: 300;
    color:#fff;
    font-size:2.3rem;
    line-height:1.9rem;
    margin: 0.7rem 0;
    text-decoration: none;
  }
  .menu a {
    color: #fff;
  }
  .menu a span {
    display: inline-block;
    padding-left:10px;
  }

  /* Sous-menu */
  .menu li ul {
    display: none;
  }
  .menu li.open ul {
    position:relative;
    display:block;
    margin:0;
  }
  .menu li ul a {
    font-size:16px;
    line-height:28px;
    margin: 0;
  }
  .menu li ul a {
    font-size:16px;
    line-height:28px;
    margin: 0;
  }



}




/******************************************************************************
 * Navitation Desktop
 ******************************************************************************/
@media only screen and (min-width: 1280px) {

  /* Layers */
  .container { z-index: 1; }
  .menu { z-index: 2; }
  .header { z-index: 3; }
  .dialog { z-index: 4; }
  .hamburger { z-index: 5; }

  /* Header */
  .header {
    position: absolute;
    transition: 300ms ease-in;
  }

  /* Logo */
  .logo {
    position: fixed;
    top: 0;
    left: 0;
    padding: 15px 15px;
    color: inherit;
    text-decoration: none;
    font-family: 'Noto Serif JP', serif;
    line-height:18px;
  }
  .logo img {
    display: block;
    width: 40px;
    float: left;
    margin-right: 10px;
  }

  /* Hamburger */
  .hamburger {
    display: none;
  }

  /* Search */
  .search {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0 15px;
    line-height: 70px;
    font-size: 16px;
    color: inherit;
    text-decoration: none;
  }
  .search span {
    display: none;
  }

  /* Menu */
  .menu {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0;
    font-family: 'Noto Serif JP', serif;
    transition: opacity 300ms ease-in;
  }
  .menu ul {
    margin: 0;
    padding: 0 20px;
    width: 100%;
    list-style: none;
    border-bottom: 1px solid #ddd;
    height: 70px;
    line-height: 70px;
    text-align: center;
    background: rgba(255, 255, 255, 0.95);
  }
  .menu li {
    display: inline;
  }
  .menu ul li:first-child {
    display: none;
  }
  .menu ul ul li:first-child {
    display: inline;
  }
  .menu ul a {
    display: inline-block;
    text-decoration: none;
    color: inherit;
    padding: 0 7px;
    font-size: 24px;
  }

  /* Sous-menu */
  .menu ul ul {
    display: block;
    position: absolute;
    width: 100%;
    top: 70px;
    left: 0;
    height: 40px;
    line-height: 40px;
  }
  .menu ul ul ul {
    display: block;
    position: absolute;
    width: 100%;
    top: 40px;
    left: 0;
    height: 40px;
    line-height: 40px;
  }
  .menu ul ul a {
    font-size: 16px;
  }
  .menu ul ul {
    display: none;
  }
  .menu ul .open ul {
    display: block;
  }
  .menu .side > a {
    color: #999;
  }

}

/******************************************************************************
 * Active
 ******************************************************************************/
.menu li.active > a { color: var(--accentcolor); }


/******************************************************************************
 * Container
 ******************************************************************************/
.container {
  position: relative;
  width: 100%;
  min-height:100vh;
  transition: 300ms;
  background: #fff;
  /*will-change: transform;*/
}


/******************************************************************************
 * Dialog
 ******************************************************************************/
#dialog {
  position:fixed;
  top: 0;
  bottom: 0;
  width: 100%;
  padding:25px 25px 100px 25px;
  background: #fff;
  overflow: auto;
  display: none;
}

/******************************************************************************
 * Content
 ******************************************************************************/
.cover {
  position: relative;
  height:calc(100vh + 70px);
  width:100%;
  z-index:5;
}
.cover img {
  position:absolute;
  width:100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  z-index:0;
}

.cover .title {
  position: absolute;
  bottom:100px;
  max-width:90%;
  text-align:left;
}
@media only screen and (min-width: 1280px) {
  .cover .title {
    position: absolute;
    bottom:100px;
    max-width:840px;
    text-align:left;
  }
}

.cover h1 {
  margin:0;
  font-size: calc(2rem + 1vw);
  line-height:calc(3.6rem + 2vw);
  padding:0 15px 4px 15px;
  display: inline;
  background: rgba(255, 255, 255, 0.95);
  color: #241c15;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  z-index:1;
}
img.nocover {
  width: 840px;
  max-width: 100%;
  height: auto;
  margin:0 auto;
}

.dimmer {
  position:absolute;
  display: none;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background: #000;
  pointer-events: none;
  z-index: 4;
}
.main {
  position: relative;
  width:100%;
  /*min-height: 100vh;*/
  padding: 70px 25px 70px 25px;
  background: #fff;
  color: #241c15;
  /*margin-bottom:100vh;*/
  z-index:3;
}

@media only screen and (min-width: 1280px) {
  .submenu {
    padding-top:110px;
  }
  .submenu2 {
    padding-top:150px;
  }
}

.next {
  position: relative;
  width: 100%;
  border-top:1px solid #ddd;
  background: #fff;
  min-height:calc(100vh + 70px);
  font-weight: 300;
  padding: 25px 25px 25px 25px;
  z-index: 2;
}

.footer {
  position: relative;
  width: 100%;
  background: #2b2d30;
  color: rgba(255, 255, 255, .9);
  font-weight: 400;
  padding: 50px 25px 50px 25px;
  z-index: 1;
  font-size: 0.8rem;
}
.footer .bottom {
}
.footer ul {
  max-width: none;
  list-style: none;
  margin: 0 25px;
  padding: 0;
  text-align: center;
}
.footer li {
  display: inline;
}
.footer a {
  text-decoration: none;
  display: inline-block;
  color: inherit;
  margin:0 5px;
}
ul.networks {
  margin:1rem 25px 1rem 25px;
  font-family: 'Noto Serif JP', serif;
  font-size:1.6rem;
  line-height:2rem;
  letter-spacing:-0.04rem;
}
ul.networks li {
}
ul.networks li span {
  display: none;
}
ul.networks li.facebook a::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f082";
  content: "\f09a";
  content: "\f39e";
}
ul.networks li.instagram a::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f16d";
}
ul.networks li.youtube a::before {
  font-family: "Font Awesome 5 Brands";
  content: "\f167";
}


/*
.main > h1,
.main > h2,
.main > h3,
.main > h4,
.main > h5 {
  margin-top:0;
}
*/



.close {
  position: absolute;
  top:15px;
  right:25px;
}

/******************************************************************************
 * Subnav
 ******************************************************************************/
.subnav {
  position:relative;
  margin:25px auto;
  height:32px;
  list-style: none;
  padding: 0;
  font-family: 'Noto Serif JP', serif;
  text-align: center;
}
.subnav li {
  display: inline-block;
  margin:0 5px;
}
.subnav a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  background: var(--accentcolor);
  padding:0 20px;
  border-radius: 3px;
  line-height: 32px;
}
.subnav li.previousitem a::before {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  content: "\f053";
  margin-right:7px;
}
.subnav li.nextitem a::after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 300;
  content: "\f054";
  margin-left:7px;
}

@media only screen and (max-width: 640px) {
  .subnav li.previousitem {
    display: none;
  }
}

/******************************************************************************
 * Different types of hamburgers
 ******************************************************************************/
.bigmac {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.bigmac span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 2px;
  background: #000;
  border-radius:2px;
  transition: .25s;
  /*will-change: transform, opacity;*/
}
.bigmac span:nth-child(1) {
  top:12px;
}
.bigmac span:nth-child(2) {
  top:19px;
}
.bigmac span:nth-child(3) {
  bottom:12px;
}
.showmenu .bigmac span:nth-child(1) {
  top: 19px;
  /*transform: rotate(135deg);*/
  transform: rotate(45deg);
}
.showmenu .bigmac span:nth-child(2) {
  opacity:0;
}
.showmenu .bigmac span:nth-child(3) {
  top: 19px;
  /*transform: rotate(-135deg);*/
  transform: rotate(-45deg);
}

.apple {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background: rgba(0,0,0,0.8);
  background: var(--accentcolor);
  border-radius:20px;
  /*transition: .25s background;*/
}
.apple span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 2px;
  background: #fff;
  border-radius:2px;
  transition: .25s;
  /*will-change: transform;*/
}
.apple span:nth-child(1) {
  top:14px;
}
.apple span:nth-child(2) {
  bottom:14px;
}

/**
 * Corrections pour la version avec le rond
 */
.apple span {
  width: 20px;
  left: 10px;
}
.apple span:nth-child(1) {
  top:15px;
}
.apple span:nth-child(2) {
  bottom:15px;
}
.apple span:nth-child(3) {
  display: none;
}
.showmenu .apple {
  background:none;
}
.showmenu .apple span:nth-child(1) {
  top: 19px;
  background: #fff;
  /*transform: rotate(135deg);*/
  transform: rotate(45deg);
}
.showmenu .apple span:nth-child(2) {
  top: 19px;
  background: #fff;
  /*transform: rotate(-135deg);*/
  transform: rotate(-45deg);
}


.showdialog .hamburger {
  display:block;
}
.showdialog .apple {
}
.showdialog .apple span:nth-child(1) {
  top: 19px;
  /*transform: rotate(135deg);*/
  transform: rotate(45deg);
}
.showdialog .apple span:nth-child(2) {
  top: 19px;
  /*transform: rotate(-135deg);*/
  transform: rotate(-45deg);
}

.plus {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.plus span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 2px;
  background: #000;
  border-radius:2px;
  transition: .25s;
  /*will-change: transform;*/
}
.plus span:nth-child(1) {
  top:19px;
  transform: rotate(0deg);
}
.plus span:nth-child(2) {
  top:19px;
  transform: rotate(90deg);
}
.plus span:nth-child(3) {
  display: none;
}
.showmenu .plus span:nth-child(1) {
  transform: rotate(180deg);
}
.showmenu .plus span:nth-child(2) {
  transform: rotate(0deg);
}

.more {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.more span {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  top:16px;
  background: #000;
  border-radius:4px;
  transition: 300ms;
  /*will-change: transform;*/
}
.more span:nth-child(1) {
  left:2.25px;
}
.more span:nth-child(2) {
  left:16px;
}
.more span:nth-child(3) {
  left:29.75px;
}
.showmenu .more span {
  left: 27.5px;
  width: 12.5px;
  height: 12.5px;
  top: 13.5px;
  background: #fdb42b;
  border-radius:6.25px;
}

.showdialog .more span {
  background: #000;
}


/**
 * Show dialog V1
 **/
/*
.showdialog .more span {
  left: 27.5px;
  width: 12.5px;
  height: 12.5px;
  top: 13.5px;
  background: #fdb42b;
  border-radius:6.25px;
}
.showdialog .more span {
  background: #000;
}
*/

/**
 * Show dialog V2
 **/
.showdialog .more span:nth-child(1) {
  top:18.5px;
  width: 30px;
  left: 5px;
  height: 3px;
  border-radius:1.5px;
  transform: rotate(-45deg);
}
.showdialog .more span:nth-child(2) {
  opacity: 0;
}
.showdialog .more span:nth-child(3) {
  top:18.5px;
  width: 30px;
  left: 5px;
  height: 3px;
  border-radius:1.5px;
  transform: rotate(45deg);
}

.times {
  display:inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
.times span {
  position: absolute;
  display: block;
  width: 30px;
  left: 5px;
  height: 3px;
  background: #000;
  border-radius:1.5px;
  transition: .25s;
  /*will-change: transform;*/
}
.times span:nth-child(1) {
  top:18.5px;
}
.times span:nth-child(2) {
  top:18.5px;
}
.times span:nth-child(3) {
  display: none;
}
.showdialog .times span:nth-child(1) {
  transform: rotate(45deg);
}
.showdialog .times span:nth-child(2) {
  transform: rotate(-45deg);
}

/******************************************************************************
 * Home
 ******************************************************************************/
.homes {
  margin:50px -25px 0 -25px;
  display: flex;
  flex-wrap: wrap;
}

.home {
  display: block;
  flex: 0 0 100%;
  /*background: #2b2d30;*/
  color: #241c15;
  border-bottom:1px solid #bbb;
  padding:25px 25px;
  margin:0;
  text-decoration:none;
  text-align:center;
  /*background-image:url('/img/background-fourth-white-10-br.png');*/
  background-position: bottom right;
  background-repeat: no-repeat;
  background-size: 40% auto;
}
.home:nth-child(1), .homes .home.rouge {
  color: rgba(255, 255, 255, .85);
  border-color: #fff;
  background: #e52727;
}
.home:nth-child(2), .homes .home.violet {
  color: rgba(255, 255, 255, .85);
  border-color: #fff;
  background: #6f2282;
}
.home:nth-child(3), .homes .home.bleu {
  color: rgba(255, 255, 255, .85);
  border-color: #fff;
  background: #3878db;
}
.home:nth-child(4), .homes .home:nth-child(10), .home:nth-child(16) {
  color: rgba(255, 255, 255, .85);
  border-color: #fff;
  background: #8dbe22;
}
.home:nth-child(5), .homes .home.jaune {
  color: rgba(255, 255, 255, .85);
  border-color: #fff;
  background: #f7a712;
}
.home:nth-child(6), .homes .home.jaune {
  /* background: #f7a712; */
}
.home:last-child {
  border-bottom: none;
}


@media only screen and (min-width: 640px) {
  .homes {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
  }
  .home {
    margin-bottom: 10px;
  }
}

/*
@media only screen and (min-width: 640px) {
  .homes {
    margin-left: -5px;
    margin-right: -5px;
  }
  .home {
    flex: 0 0 50%;
    border: 5px solid #fff;
  }
}
@media only screen and (min-width: 1250px) {
  .homes {
    width: 1210px;
    margin: 0 calc(0.5*(100% - 1210px));
  }
}
*/

/*
@media only screen and (min-width: 840px) {
  .homes {
    display: flex;
    flex-wrap: wrap;
    border-left:1px solid #fff;
  }
  .home {
    background-size: 300px auto;
    margin:0;
    display: block;
    flex: 0 0 50%;
    border-right:1px solid #fff;
    border-bottom:1px solid #fff;
  }
}

@media only screen and (min-width: 1024px) {
  .home {
    background-size: 300px auto;
    margin:0;
    display: block;
    flex: 0 0 33.333333333333%;
  }
}
*/


.home h2 {
  margin:0 auto;
  font-size:2.3rem;
  line-height:2.5rem;
}


/******************************************************************************
 * Newsletter
 ******************************************************************************/
.newsletter {
  display: block;
  /*margin:0 -25px 0 -25px;*/
  margin:0;
  padding:70px 25px;
  text-decoration:none;
  text-align:center;
  color: rgba(255, 255, 255, .85);
  background: #f7a712;
}
.newsletter h2 {
  margin:0 auto;
  font-size:2.3rem;
  line-height:2.5rem;
}
.newsletter input[type=text] {
  border: none;
  border-radius: 3px;
  background:rgba(255, 255, 255, .8);
  color: #241c15;
  margin:5px 0;
  text-align: center;
}
.newsletter button {
  color: rgba(255, 255, 255, .8);
  border: none;
  border-radius: 3px;
  background: rgba(0, 0, 0, .5);
  margin:10px 0;
}
.newsletter a {
  color: inherit;
}
/*
@media only screen and (min-width: 640px) {
  .newsletter {
    border-top: 1px solid #ddd;
    background: inherit;
    color: #241c15;
    color: #241c15;
  }
  .newsletter input[type=text] {
    background-color: #eee;
  }
}
*/





/******************************************************************************
 * Formulaires
 ******************************************************************************/
.field {
  margin-bottom: 10px;
}

label {
    display:block;
}
.hint {
    font-size:14px;
    font-style:italic;
}
.radios label {
    display:inline;
}
.radios label:after {
  content: "\A";
  white-space: pre;
}
/* Remove autofill style Firefox */
input {
  filter: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
textarea:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:focus {
  /*
  outline: none;
  border: none;
  border: 1px solid #dedede;
  border-radius: 0;
  background: #eee;
  -webkit-box-shadow: inset 0 0 0px 9999px #eee;
  box-shadow: inset 0 0 0px 9999px #eee;
  */
}


input[type=text],
input[type=password] {
  border-width: 1px;
  border-color: #dedede;
  border-style: solid;
  border-radius: 3px;
  background: #eee;
  padding: 2px 5px;
  font-size: inherit;
  line-height: 32px;
  width: 100%;
  text-align: center;
}

.festivalscope input[type=text] {
    text-align: left;
}
.festivalscope .error-hint {
    text-align: left;
}
.festivalscope .error label {
    color:#c00;
}
.festivalscope .error ol {
    color:#c00;
}

select {
  border-width: 1px;
  border-color: #dedede;
  border-style: solid;
  height: 36px;
  border-radius: 3px;
  background: #eee;
  padding: 2px 5px;
  font-size: inherit;
  line-height: 32px;
  width: auto;
  text-align: left;
}
button, input[type=submit], .button {
  border-width: 1px;
  border-color: #1e2023;
  background: #1e2023;
  color: #dddddd;
  border-style: solid;
  border-radius: 3px;
  padding:2px 5px;
  font-size: inherit;
  line-height:32px;
  width: 100%;
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  opacity: 1; /* Firefox */
  color:#888;
}
.error ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:#c00;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
}

::-ms-input-placeholder { /* Microsoft Edge */
}
.error input {
    border-color:#c00;
    color:#c00;
    background-color:#fee;
}
.error select {
    border-color:#c00;
    color:#c00;
    background-color:#fee;
}
.error-hint {
    text-align:center;
    color:#c00;
    font-style: italic;
}
input:focus::placeholder {
    opacity: 0;
}
.resultats {
  text-align: center;
}


/******************************************************************************
 * Accordeon
 ******************************************************************************/
.accordeon {

}
.accordeon-stage {

}
.accordeon-closed {

}
.accordeon-handle {
  cursor:pointer;
}
.accordeon-details {
  display:block;
}
.accordeon-closed .accordeon-details {
  display:none;
}

/******************************************************************************
 * Errors
 ******************************************************************************/
.error-message {
  font-family: 'Noto Serif JP', serif;
  color: #c00;
  list-style: none;
  margin:1rem 0;
  padding:0;
  text-align:center;
}
.error input {
  border-color: #c00;
  color: #c00;
}



/******************************************************************************
 * Profile
 ******************************************************************************/
.profile {
  width: 200px;
  height: 200px;
  margin:20px auto;
}
.profile img {
  width:100%;
  height:100%;
  border-radius: 50%;
}

/******************************************************************************
 * Table
 ******************************************************************************/
table {
  border-collapse: collapse;
  width:100%;
  border-top:1px solid #ddd;
}
td,
th {
    border-bottom:1px solid #ddd;
    padding: 5px;
    vertical-align: top;
    /*height: 48px;*/
}

td.icone {
  width: 30px;
}
td.vignette {
  width: 40px;
}
td.vignette img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 15%;
  border:1px solid #ddd;
}
td.profile {
  width:48px;
  height:auto;
}
td.profile img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 50%;
}


/* 20210114 */
table {
  display: table;
  border-collapse: collapse;
  width: 100%;
  background: #eee;
}
table th {
    border-bottom: 1px solid #ccc;
    text-align:left;
    font-weight: bold;
    padding: 5px 15px;
}
table td {
    border-bottom: 1px solid #ccc;
    text-align:left;
    padding: 5px 15px;
}




/**
 * No js mais ordre en colonnes
 */
.masonry {
  margin:0 -25px;
  columns: 2;
  column-gap: 10px;
  padding:0 10px;
}
.masonry > div {
  margin-bottom:10px;
  display: block;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
  width: 100%;
}
div.texte {
  background:#eee;
  padding:15px;
}
@media only screen and (min-width: 640px) {
  .masonry {
    columns: 3;
  }
}
@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 4;
  }
}

@media only screen and (min-width: 1024px) {
  .masonry {
    columns: 5;
  }
}
@media only screen and (min-width: 1460px) {
  .masonry {
    columns: 6;
  }
}


/**
 * LEFT TO RIGHT
 * Mais il faut que la hauteur du div .masonry soit plus grande que la plus grande colonne
 * A faire en js
 **/
/*
.masonry {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  margin:0 -25px  ;
  padding:0 5px;
  height: 5000px;
}

.masonry > div {
  width: 33.333333333333%;
  padding: 5px;
}

.masonry > div:nth-child(2n+1) { order: 1; }
.masonry > div:nth-child(2n+2) { order: 2; }

.masonry::before,
.masonry::after {
  content: "";
  flex-basis: 100%;
  width: 0;
  order: 2;
}
*/

.skyscrapers {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 -5px;
}
@media only screen and (min-width: 1250px) {
  .skyscrapers {
    width: 1210px;
    margin: 0 calc(0.5*(100% - 1210px));
  }
}

.skyscrapers .wrapper {
  display: block;
  flex: 0 0 100%;
  padding: 0 5px 50px 5px;
  text-align: center;
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size:1rem;
  line-height:1.4rem;
}
.skyscrapers .textWrapper {
  padding: 5px 15px;
}
.skyscrapers a {
  color: inherit;
}

@media only screen and (min-width: 640px) {
  .skyscrapers .wrapper {
    flex: 0 0 50%;
  }
}
@media only screen and (min-width: 860px) {
  .skyscrapers .wrapper {
    flex: 0 0 33.33333333333333%;
  }
}
@media only screen and (min-width: 1024px) {
  .skyscrapers .wrapper {
    /*flex: 0 0 25%;*/
  }
}

/*
@media only screen and (min-width: 1024px) {
  .skyscrapers .wrapper {
    flex: 0 0 20%;
  }
}
@media only screen and (min-width: 1460px) {
  .skyscrapers .wrapper {
    flex: 0 0 16.6666666666667%;
  }
}
*/


.textWrapper .country {
  font-size: .8rem;
  line-height: 1.2rem;
  margin:5px 0 5px 0;
  font-family: 'Roboto', sans-serif;
  color: var(--accentcolor);
}

.textWrapper .description {
  font-size: .9rem;
  line-height: 1.2rem;
  margin:5px 0 5px 0;
  font-family: 'Roboto', sans-serif;
}



.mainNews {
}
.mainNews .wrapper {
  position:relative;
  display:block;
  clear: both;
  margin-bottom:50px;
}
.mainNews .imageWrapper {
  left: 0;
  right: 0;
}


/*.mainNews .imageRight .imageWrapper {*/
.mainNews .wrapper:nth-child(odd) .imageWrapper {
  margin-right: -25px;
}
/*.mainNews .imageLeft .imageWrapper {*/
.mainNews .wrapper:nth-child(even) .imageWrapper {
  margin-left: -25px;
}
.mainNews .textWrapper {
  max-width:400px;
  margin:0 auto;
  padding:10px 0;
  text-align:center;
}
.mainNews .textWrapper h2 {
  font-family: 'Noto Serif JP', serif;
  font-weight: 400;
  font-size:1.4rem;
  line-height:2rem;
  margin: 0 0 5px 0;
}
.mainNews .textWrapper p {
  font-family: 'Noto Serif JP', serif;
  margin: 0;
}
.mainNews a {
  color: inherit;
}

@media only screen and (min-width: 840px) {
  .mainNews {
    margin: 0 -5px;
  }

  /*.mainNews .imageRight .imageWrapper {*/
  .mainNews .wrapper:nth-child(odd) .imageWrapper {
    margin-right: 0;
    float: right;
    padding-left:5px;
    padding-right:5px;
    width: 66.66666666666667%;
  }
  /*.mainNews .imageLeft .imageWrapper {*/
  .mainNews .wrapper:nth-child(even) .imageWrapper {
    margin-left: 0;
    float: left;
    padding-left:5px;
    padding-right:5px;
    width: 66.66666666666667%;
  }
  /*.mainNews .imageRight .textWrapper {*/
  .mainNews .wrapper:nth-child(odd) .textWrapper {
    width: 33.33333333333333%;
    float: right;
    padding:0 15px 0 15px;
    max-width: none;
  }
  /*.mainNews .imageLeft .textWrapper {*/
  .mainNews .wrapper:nth-child(even) .textWrapper {
    width: 33.33333333333333%;
    float: left;
    padding:0 15px 0 15px;
    max-width: none;
  }
}

/*
@media only screen and (min-width: 1024px) {
  .mainNews .imageRight .imageWrapper {
    width: 75%;
  }
  .mainNews .imageLeft .imageWrapper {
    width: 75%;
  }
  .mainNews .imageRight .textWrapper {
    width: 25%;
  }
  .mainNews .imageLeft .textWrapper {
    width: 25%;
  }
}
*/


@media only screen and (min-width: 1250px) {
  .mainNews {
    width: 1210px;
    margin: 0 calc(0.5*(100% - 1210px));
  }
}


.textWrapper a {
  text-decoration: none;
}
.tags {
  font-size: .8rem;
  line-height: 1.2rem;
  margin:5px 0 5px 0;
  font-family: 'Roboto', sans-serif;
}
.date {
  font-family: 'Roboto', sans-serif;
  font-size: .8rem;
  line-height: 1rem;
  margin:0 0 5px 0;
}
.tags a {
  display: inline-block;
  margin: 0 5px;
  color: var(--accentcolor);
}


/******************************************************************************
 * Swiper
 * https://swiperjs.com/
 ******************************************************************************/
.swiper-container {
  margin: 50px -25px;
}
.swiper-container-band {
  height:33vh;
  overflow: hide;
}

@media only screen and (min-width: 1210px) {
  .swiper-container {
    margin-left: auto;
    margin-right: auto;
    max-width:1200px;
  }
}
.swiper-button-next,
.swiper-button-prev {
  /*background:rgba(0,0,0,.15);*/
  color:#fff;
  width:var(--swiper-navigation-size);
  border-radius: 50%;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  line-height:var(--swiper-navigation-size);
  font-size:1.5rem;
}
.swiper-pagination-bullet-active {
  background:#fff;
}
.swiper-pagination {
  color:#fff;
}

/*******************************************************************************
 * Pagination
 *******************************************************************************/

ul.pagination {
  list-style: none;
  text-align:center;
}
ul.pagination li {
  display:inline-block;
  padding:0 3px;
}

/*******************************************************************************
 * Liste // règlement
 *******************************************************************************/

ol.alpha {
  list-style-type: lower-alpha;
}

/*******************************************************************************
 * Summary
 *******************************************************************************/


@media only screen and (max-width: 1023px) {
  .summary {
    display: none;
  }
}
@media only screen and (min-width: 1024px) {
  .summary {
    position: sticky;
    float: left;
    top: 110px;
    width: calc(0.5*(100% - 840px) - 50px);
    padding: 0 0 70px 0;
    font-family: 'Noto Serif JP', serif;
    font-size:14px;
  }
  .summary ul {
    padding: 0;
    list-style: none;
  }
  .summary li {
    border-bottom:1px solid #ddd;
    padding:5px;
  }
  .summary li a {
    display: block;
    /*color: var(--accentcolor);*/
    text-decoration: none;
    color: inherit;
  }
  .summary li:hover,
  .summary li:hover a {
    /*
    background-color: var(--accentcolor);
    color: #fff;
    */
    color: var(--accentcolor);
  }
}

/******************************************************************************
 * Bloc deposer une demande
 ******************************************************************************/
.apply {
  display: inline-block;
  margin:0 0 20px 0;
  text-decoration: none;
  color: #fff;
  background: var(--accentcolor);
  padding:15px;
  border-radius: 3px;
  line-height: 32px;
  font-weight: 300;
}



/******************************************************************************
 * Clear Floated Elements
 * http://sonspring.com/journal/clearing-floats
 ******************************************************************************/
.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}

/*******************************************************************************
 * http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified
 * slightly enhanced, universal clearfix hack
 *******************************************************************************/
.clearfix:after {
  font-size: 0;
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  content: '.';
}

.clearfix {
  display: inline-block;
}

/* start commented backslash hack \*/
* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

/* close commented backslash hack */

.note {
  font-style: italic;
  font-size:0.8rem;
}

figure {
    position:relative;
    width:960px;
    height:540px;
    margin:0;
}
figure.image {
    height:auto;
}
oembed {
    /*
    position:relative;
    width:100%;
    height:100%;
    */
}
/*
.table {
  display: flex;
  flex-wrap: wrap;
  max-width: 640px;
  margin : 0 auto;
}

.td {
  flex:0 0 100%;
  border:1px solid #ddd;
  padding: 15px;
}
*/

@media only screen and (min-width: 1280px) {
  .td {
    flex:0 0 50%;
  }
}
.entete {
  text-align: center;
  font-weight: bold;
}

.question {
    border-bottom:1px solid #ccc;
    margin-bottom:10px;
    cursor:pointer;
    background-size: auto 20px;
}

.reponse {
    padding-top:5px;
    color:#241c15;
}

.question h3 {
  text-align: left;
}



.underline {
  text-decoration: underline;
}

.italic {
  font-style: italic;
}

/*******************************************************************************
 * ACCES PRO
 *******************************************************************************/

.accespro .field {
    margin-bottom:1.5em;
}
.accespro table {
  background:none;
  line-height:32px;
}
.accespro th {
    text-align:left;
    width:auto;
    padding:5px 5px;
}
.accespro td {
    width:auto;
    padding:5px 5px;
}
.accespro input placeholder {
  color:#999;
}
.accespro h2 {
    text-align:left;
}

.accespro input[type=text], .accespro input[type=password] {
    text-align:left;
}
.accespro .error {
    color: #c00;
}
.accespro .error label {
    color: #c00;
}
.accespro .error-hint {
    text-align:left;
}
.accespro .error-message {
    padding:15px;
    border:1px solid #c00;
    background:#fee;
}
.accespro input[type=submit], .accespro .button, .accespro input[type=submit]:active, .accespro input[type=submit]:focus {
    display: inline-block;
    width:auto;
    padding-left:30px;
    padding-right:30px;
    color:#fff;
    background-color:var(--accentcolor);
    border-color:var(--accentcolor);
    cursor:pointer;
}
.accespro textarea {
  border-width: 1px;
  border-color: #dedede;
  border-style: solid;
  border-radius: 3px;
  background: #eee;
  padding: 2px 5px;
  font-size: inherit;
  line-height: 32px;
  width: 100%;
  text-align: left;
}
.accespro .error textarea {
  border-color: #c00;
  background: #fee;
  color: #c00;
}

.accespro table input {
  line-height:26px;
  padding-top:2px;
  padding-bottom:2px;
}
.accespro table select {
  height:32px;
  line-height:26px;
  padding-top:2px;
  padding-bottom:2px;
}

.accespro button {
  display:inline;
  border-width: 0;
  border-color: none;
  background: none;
  color: var(--accentcolor);
  border-style: none;
  border-radius: 0;
  padding:0;
  font-size: inherit;
  line-height: inherit;
  width: auto;
  cursor:pointer;
}
.accespro .monetary {
  width:130px;
  text-align:right;
}
.accespro .monetary input {
  display:inline-block;
  text-align:right;
  width:100px;
}





.pozor {
    color:#c00;
}

ul.path {
    list-style:none;
    padding:0;
    text-align:center;
}
ul.path li {
    display:inline;
}
ul.path span,
ul.path a {
    display:inline-block;
    line-height:30px;
    width:30px;
    text-align:center;
}
ul.path a {
    background:#999;
    border-radius:15px;
    color:#fff;
}
ul.path a.active {
    background:var(--accentcolor);
}
ul.path a.off {
    background:none;
    color:inherit;
}

input.minutes {
    width:200px;
}

.projet-soumis {
    padding: 15px;
    border: 1px solid #449944;
    color: #449944;
    background: #eeffee;
}
.projet-draft {
    padding: 15px;
    border: 1px solid #dd4444;
    color: #dd4444;
    background: #ffeeee;
}

.projet {
    border:1px solid #ccc;
    background: #eee;
    padding:15px;
    margin-bottom:20px;
}
.projet .titre {
    font-family: 'Noto Serif JP';
    font-size:1.5rem;
    line-height:1.8rem;
    margin-bottom:15px;
}
.projet .commission {

}
.projet .infos {
    margin-top:10px;
    margin-bottom:10px;
    font-size:0.85rem;
    font-style:italic;
    line-height:1rem;
}


.stage9 { background:#3878db; }
.stage8 { background:#5489db; }
.stage7 { background:#6b97db; }
.stage6 { background:#82a5db; }
.stage5 { background:#98b2db; }
.stage4 { background:#abbedb; }
.stage3 { background:#bac7db; }
.stage2 { background:#cfd4db; }
.stage1 { background:#dbdbdb; }

.stage9 { background:rgba(56,120,219,1); }
.stage8 { background:rgba(56,120,219,.8); }
.stage7 { background:rgba(56,120,219,.7); }
.stage6 { background:rgba(56,120,219,.6); }
.stage5 { background:rgba(56,120,219,.5); }
.stage4 { background:rgba(56,120,219,.4); }
.stage3 { background:rgba(56,120,219,.3); }
.stage2 { background:rgba(56,120,219,.2); }
.stage1 { background:rgba(56,120,219,.1); }

.stage9, .stage9 th, .stage9 td { background:rgba(230,230,230,1); }
.stage8, .stage8 th, .stage8 td { background:rgba(230,230,230,.5); }
.stage7, .stage7 th, .stage7 td { background:rgba(230,230,230,.3); }
.stage6, .stage6 th, .stage6 td { background:rgba(230,230,230,.25); }
.stage5, .stage5 th, .stage5 td { background:rgba(230,230,230,.2); }
.stage4, .stage4 th, .stage4 td { background:rgba(230,230,230,.15); }
.stage3, .stage3 th, .stage3 td { background:rgba(230,230,230,.1); }
.stage2, .stage2 th, .stage2 td { background:rgba(230,230,230,.05); }
.stage1, .stage1 th, .stage1 td { background:rgba(230,230,230,.0); }