.TPfond5 {
  background-image: url("../images/fonds/fond-5.jpg");
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .TPfond5 h1 a {
    color: white !important;
    text-shadow: 0 0 10px black; }

.TPfond6 {
  background-image: url("../images/fonds/fond-6.jpg");
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .TPfond6 h1 a {
    color: white !important;
    text-shadow: 0 0 10px black; }

.TPfond8 {
  background-image: url("../images/fonds/fond-8.jpg");
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .TPfond8 h1 a {
    color: white !important;
    text-shadow: 0 0 10px black; }

.TPfond7 {
  background-image: url("../images/fonds/fond-7.jpg");
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .TPfond7 h1 a {
    color: white !important;
    text-shadow: 0 0 10px black; }

.TPfond9 {
  background-image: url("../images/fonds/fond-9.jpg");
  height: 400px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center; }
  .TPfond9 h1 a {
    color: white !important;
    text-shadow: 0 0 10px black; }

:root {
  --primaire: rgb(10, 89, 144);
  --secondaire: rgb(221, 255, 2);
  --orange: rgb(255, 179, 0);
  --level0: #951919;
  --level1: #ce2d2d;
  --level2: #faa727;
  --level3: rgb(10, 89, 144);
  --level4:rgb(10, 89, 144);
  --level5:rgb(10, 89, 144); }

body {
  background-color: #f9f9f9; }

#LOGO {
  width: 100px;
  height: 100px; }

.gris {
  color: #ccc !important; }

.grisBG {
  color: #777 !important;
  background-color: #ccc !important; }

#TETE {
  width: 100%;
  text-align: center; }
  #TETE h1 {
    color: var(--primaire);
    font-size: 6rem;
    margin-top: 0px !important;
    margin-bottom: 10px;
    padding-bottom: 0px;
    text-shadow: 0 0px 3px white; }
    @media screen and (max-width: 768px) {
      #TETE h1 {
        font-size: 3rem; } }
  #TETE h2 {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    background-color: white;
    display: inline;
    margin-top: 0px;
    padding-top: 0px; }
    @media screen and (max-width: 768px) {
      #TETE h2 {
        font-size: 1.2rem; } }
  #TETE a {
    color: var(--primaire); }
  #TETE .citation {
    font-style: italic;
    font-weight: lighter;
    color: white;
    text-shadow: 0 0 3px black; }

#MENU {
  border-bottom: solid 4px var(--primaire);
  margin-bottom: 30px; }

.myHero {
  background-color: var(--primaire) !important;
  background: linear-gradient(90deg, #064976 10%, #0a5990 60%, #00d4ff 100%);
  margin-bottom: 50px;
  border-radius: 30px; }
  .myHero .title {
    color: white !important;
    font-size: 6rem;
    margin-bottom: 40px; }
  .myHero .subtitle {
    color: white !important;
    margin-left: 50px;
    font-size: 2rem; }
  @media screen and (max-width: 768px) {
    .myHero .title {
      color: white !important;
      font-size: 2em;
      margin-bottom: 30px; }
    .myHero .subtitle {
      color: white !important;
      margin-left: 0px;
      font-size: 1.3rem; } }

.myHeroCat {
  border: solid 5px var(--primaire);
  border-radius: 10px;
  background-color: white !important; }

.myHeroForm .title {
  font-size: 2rem; }
.myHeroForm .subtitle {
  font-size: 1rem; }

#TRIAGE h2 {
  font-weight: bold;
  font-size: 1.5em;
  margin-left: 10px;
  text-align: center; }
#TRIAGE .Question {
  padding: 5px;
  text-align: center;
  border: solid 2px var(--primaire);
  border-radius: 5px;
  margin: 7px;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    #TRIAGE .Question {
      width: 500px;
      margin-left: auto;
      margin-right: auto; } }
  #TRIAGE .Question .tictac {
    font-size: 1.5rem;
    color: red;
    font-weight: bold;
    width: auto; }
#TRIAGE h3 {
  font-weight: bold;
  font-size: 1.25rem; }
#TRIAGE .reason {
  font-size: 0.75em;
  color: #333;
  font-style: italic; }
#TRIAGE .option {
  display: inline-block;
  margin: 3px 20px; }
#TRIAGE input {
  margin-right: 5px; }
#TRIAGE .go {
  background-color: var(--primaire);
  text-align: center;
  font-size: 2em;
  padding: 10px;
  color: white !important;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px; }

#JourJ {
  font-size: 4em;
  text-align: center;
  width: 100%;
  line-height: 4rem; }
  @media screen and (max-width: 768px) {
    #JourJ {
      font-size: 2em;
      line-height: 2rem;
      font-weight: bold; } }

#QR {
  float: right;
  text-align: center;
  font-size: 0.6em;
  padding: 3px; }
  #QR img {
    width: 100px;
    height: 100px; }
  @media screen and (max-width: 768px) {
    #QR {
      float: none; } }

#THECHECKLIST section {
  margin-top: 70px; }
#THECHECKLIST .BTN_addtask {
  font-size: 1.1em;
  padding: 3px;
  background-color: var(--orange);
  border-radius: 5px;
  cursor: pointer;
  padding: 10px; }
#THECHECKLIST .BTN_changedate {
  font-size: 0.7rem;
  display: inline-block; }
#THECHECKLIST #push-subscription-button {
  font-size: 1.5em;
  font-weight: bold;
  color: white;
  background-color: var(--primaire);
  border: none;
  padding: 10px;
  margin-right: 5px;
  cursor: pointer; }
#THECHECKLIST .notif {
  text-align: center; }
#THECHECKLIST .expliq {
  font-size: 0.9rem; }
  @media screen and (max-width: 768px) {
    #THECHECKLIST .expliq {
      font-size: 0.6rem; } }
#THECHECKLIST section .Stade {
  text-align: center; }
  #THECHECKLIST section .Stade h2 {
    display: block;
    font-size: 2.5em;
    font-weight: bold;
    color: var(--primaire); }
    @media screen and (max-width: 768px) {
      #THECHECKLIST section .Stade h2 {
        font-size: 2em; } }
  #THECHECKLIST section .Stade p {
    font-size: 1.25em;
    color: #cccccc;
    font-style: italic; }
#THECHECKLIST .EVTrappel {
  font-size: 0.9rem !important;
  color: red !important; }
#THECHECKLIST .EVTperso {
  color: var(--orange);
  text-align: center; }
  #THECHECKLIST .EVTperso a {
    color: var(--orange); }
#THECHECKLIST .EVTplus {
  font-weight: 700; }
  @media screen and (max-width: 768px) {
    #THECHECKLIST .EVTplus {
      text-align: center;
      display: block;
      border: solid 1px #ddd;
      margin: 2px;
      font-size: 1.2em; } }
#THECHECKLIST .Event {
  margin: 2%;
  margin-bottom: 20px;
  border: solid 1px #ccc;
  padding: 10px;
  overflow: auto;
  box-shadow: 0px 0px 10px 0px #ddd;
  background-color: white; }
  #THECHECKLIST .Event h3 {
    font-size: 2.5rem;
    line-height: 1.5em;
    color: var(--primaire);
    padding: 5px; }
    @media screen and (max-width: 768px) {
      #THECHECKLIST .Event h3 {
        font-size: 2rem;
        line-height: 1.2;
        background-color: var(--primaire);
        color: white;
        padding-left: 10px; } }
    #THECHECKLIST .Event h3 a {
      font-size: 0.85rem;
      margin: 5px;
      display: inline-block; }
  #THECHECKLIST .Event .plusUn {
    width: 30%;
    max-width: 200px;
    border: solid 1px #ccc;
    padding: 2px;
    border-radius: 5px;
    float: left;
    line-height: 1;
    margin: 2px; }
    #THECHECKLIST .Event .plusUn .plusUn-date {
      color: #555;
      font-size: 0.6rem;
      display: block; }
    #THECHECKLIST .Event .plusUn .plusUn-note {
      font-size: 0.7rem;
      font-weight: 500;
      font-style: italic; }
  #THECHECKLIST .Event .evtStory {
    overflow: auto; }
  #THECHECKLIST .Event .timeLeft {
    color: #aaa;
    font-weight: 300;
    display: block; }
  #THECHECKLIST .Event .range {
    font-size: 0.7rem;
    display: block; }
  #THECHECKLIST .Event .EVT-nbchosesfaites {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px; }
  #THECHECKLIST .Event .EVT-desc {
    font-size: 0.85rem;
    margin: 10px;
    padding: 10px;
    padding-left: 50px;
    border-left: solid 20px #69c2b2;
    background-color: white; }
  #THECHECKLIST .Event .EVT-rcs {
    font-size: 0.85rem;
    font-weight: 300;
    margin: 10px;
    padding: 10px;
    padding-left: 50px;
    border-left: solid 20px #fcb81c;
    background-color: white; }
  #THECHECKLIST .Event .EVT-planb {
    font-size: 0.85rem;
    font-weight: 300;
    margin: 10px;
    padding: 10px;
    border-left: solid 20px #fc1c1c;
    background-color: white; }
  #THECHECKLIST .Event .EVT-avant {
    font-size: 1.7rem;
    font-weight: bold;
    padding: 5px;
    color: white;
    background-color: #484848; }
    #THECHECKLIST .Event .EVT-avant span {
      font-size: 1.2rem;
      display: block; }
    #THECHECKLIST .Event .EVT-avant .BTN_go {
      color: #333;
      background-color: var(--secondaire);
      padding: 5px;
      display: block;
      border-radius: 5px;
      float: right;
      font-size: 1.1rem; }
  #THECHECKLIST .Event .BTN_addchose {
    font-size: 0.7rem;
    padding: 3px;
    background-color: #ddd;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block; }
  #THECHECKLIST .Event .chose {
    display: inline-block;
    margin: 2px;
    line-height: 1.8rem; }
  #THECHECKLIST .Event .chose label {
    border: solid 1px #9d9d9d;
    border-radius: 5px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    padding: 5px 10px;
    box-shadow: 0px 0px 5px 0px #bdbdbd;
    display: flex;
    line-height: 1.1; }
  #THECHECKLIST .Event .chose input[type=checkbox] {
    width: 30px;
    height: 30px;
    float: right; }
  #THECHECKLIST .Event .chose input[type=checkbox]:checked + label {
    border: solid 1px transparent;
    box-shadow: none;
    background-color: var(--secondaire); }
  #THECHECKLIST .Event .delchose {
    display: inline-block;
    font-size: 0.3em;
    font-weight: bold;
    color: white;
    padding: 2px;
    margin: 2px;
    background-color: red; }
  #THECHECKLIST .Event .checkIt {
    float: right;
    text-align: right; }
    #THECHECKLIST .Event .checkIt span {
      font-size: 1.2rem;
      padding: 3px;
      display: block;
      font-weight: bold;
      color: var(--primaire);
      background-color: white;
      margin-top: 8px; }
    #THECHECKLIST .Event .checkIt span:hover {
      color: white;
      background-color: var(--orange);
      cursor: pointer; }
    #THECHECKLIST .Event .checkIt .Done {
      color: #CCC; }
    @media screen and (max-width: 768px) {
      #THECHECKLIST .Event .checkIt {
        float: none;
        text-align: center; }
        #THECHECKLIST .Event .checkIt span {
          width: 48%;
          display: inline-block;
          border: solid 1px #ddd;
          margin: 2px;
          font-size: 1.1em;
          text-align: center; } }
#THECHECKLIST .EventPerso {
  border: solid 2px var(--orange); }
#THECHECKLIST .Finito {
  font-style: italic;
  color: #ccc;
  background-color: #ececec;
  border: none;
  box-shadow: none; }
  #THECHECKLIST .Finito h3 {
    background-color: #CCC; }
  #THECHECKLIST .Finito .checkIt {
    display: none !important; }
  #THECHECKLIST .Finito .timeLeft {
    display: none !important; }
  #THECHECKLIST .Finito .cfait {
    float: right;
    margin-right: 10px;
    font-style: normal;
    font-weight: bold;
    color: var(--primaire);
    background-color: var(--secondaire);
    padding: 5px;
    border: solid 5px var(--primaire);
    border-radius: 10px;
    font-size: 1.2em; }

#FRISE {
  width: 100%;
  text-align: center;
  border: solid 2px #dddddd;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 5%;
  background-color: white; }
  #FRISE .FRISE_points .FRISE_day {
    display: inline-block;
    width: 10px;
    height: 10px; }
  #FRISE .FRISE_points .FRISE_todayA {
    background-color: #727272 !important; }
  #FRISE .FRISE_points .FRISE_todayB {
    color: #777 !important;
    background-color: var(--secondaire) !important; }
  #FRISE .FRISE_points .FRISE_day0 {
    background-color: #727272; }
  #FRISE .FRISE_points .FRISE_day1 {
    background-color: var(--secondaire); }
  #FRISE .FRISE_points .FRISE_day2 {
    background-color: var(--primaire); }
  #FRISE .FRISE_points .FRISE_dayDead {
    height: 25px;
    color: white;
    background-color: RED;
    border: solid 1px black; }
  #FRISE .FRISE_points .FRISE_full {
    display: inline-block;
    width: auto;
    font-weight: bold;
    padding: 2px 5px;
    background-color: var(--primaire);
    color: white;
    font-size: 2rem; }

#AVERTO {
  font-size: 1.25em;
  border: solid 3px RED;
  padding: 10px; }
  #AVERTO strong {
    font-size: 2.5em; }
  #AVERTO .ladresse {
    font-size: 1.1em;
    margin: 20px; }
  @media screen and (max-width: 768px) {
    #AVERTO {
      font-size: 1rem; }
      #AVERTO strong {
        font-size: 2em; }
      #AVERTO .ladresse {
        font-size: 1em; } }

.EvtAddInput {
  width: auto;
  border-radius: 3px;
  border: 1px solid transparent;
  border-color: #b5b5b5; }

#EVT-PLANB .Event {
  border: solid 2px #AAA; }

#POURCENT {
  text-align: center;
  color: #717171;
  font-size: 1.2rem; }

@media screen and (max-width: 768px) {
  .modal-card {
    width: 90%; }

  .modal-card-title {
    font-size: 1rem; }

  .modal-card-body {
    padding: 5px;
    font-size: 0.9rem; } }
#EVT-PLANB .Stade h2 {
  color: var(--level0) !important; }

#EVT-URGENT .Stade h2 {
  color: var(--level1) !important; }

#EVT-BOUGE .Stade h2 {
  color: var(--level2) !important; }

#EVT-CBON .Stade h2 {
  color: var(--level3) !important; }
#EVT-CBON .Event .EVT-avant {
  background-color: #ccc;
  color: #777;
  font-size: 1.3rem; }

#EVT-LARGE .Stade h2 {
  color: var(--level4) !important; }
#EVT-LARGE .Event .EVT-avant {
  background-color: #ccc;
  color: #777;
  font-size: 1.3rem; }

#EVT-FAIT .Stade h2 {
  color: var(--level5) !important; }

@media screen and (max-width: 768px) {
  #CAT {
    line-height: 1.1; } }
#CAT h2 {
  font-size: 2.2rem;
  color: var(--primaire); }
#CAT .CAT-template {
  padding: 10px;
  border: solid 1px #dfdfdf; }
  #CAT .CAT-template h3 {
    font-size: 2.5rem; }
  #CAT .CAT-template img {
    width: 250px;
    float: right; }
    @media screen and (max-width: 768px) {
      #CAT .CAT-template img {
        width: 94%;
        min-width: 0px;
        float: none; } }
  #CAT .CAT-template .CAT-template-intro {
    font-size: 1.5rem;
    color: #777;
    font-weight: 300;
    margin-left: 20px; }

#HOME h2 {
  font-size: 2.2rem;
  color: var(--primaire); }
#HOME .HOME-template {
  margin-top: 10px;
  border-top: solid 3px var(--primaire);
  padding-left: 5px; }
  #HOME .HOME-template a {
    font-size: 1.5rem; }
  #HOME .HOME-template p {
    font-size: 0.9rem;
    color: #999; }
  #HOME .HOME-template .HOME-template-cat {
    font-size: 0.9rem; }
#HOME .HOME-categorie {
  display: block;
  width: 45%;
  min-width: 300px;
  font-size: 1.5rem;
  float: left;
  margin: 10px;
  padding: 5px;
  border: solid 1px #dfdfdf; }
  @media screen and (max-width: 768px) {
    #HOME .HOME-categorie {
      width: 94%;
      min-width: 0px; } }
  #HOME .HOME-categorie h3 {
    font-size: 2rem; }
  #HOME .HOME-categorie p {
    font-size: 0.9rem; }
  #HOME .HOME-categorie img {
    width: 100%; }

#REMINDER .prog {
  margin: 15px;
  padding: 10px;
  font-size: 1.5rem;
  border: solid 1px #ccc;
  border-radius: 20px;
  background-color: var(--secondaire); }
#REMINDER .BTN_addprog {
  margin: 10px;
  margin-top: 30px;
  cursor: pointer;
  padding: 10px;
  font-size: 1.1rem;
  font-weight: bold;
  background-color: var(--secondaire); }

#DEMO {
  text-align: center;
  background-color: #a80000;
  color: white;
  margin: 10px;
  padding: 20px;
  border-radius: 20px; }
  #DEMO .DEMOgros {
    font-size: 3rem;
    font-weight: bold; }
    @media screen and (max-width: 768px) {
      #DEMO .DEMOgros {
        font-size: 2rem; } }
  #DEMO .DEMOtxt {
    font-size: 1.5rem; }
  #DEMO a {
    color: white;
    font-weight: bold;
    text-decoration: underline; }

.TPDEMO {
  text-align: center;
  font-size: 2rem; }

footer {
  font-size: 0.8rem;
  color: #999; }

/*# sourceMappingURL=style.css.map */