@keyframes example {
  0% {
    left: 0px;
    top: 0px; }
  25% {
    background-color: yellow;
    left: 200px;
    top: 0px; }
  50% {
    background-color: blue;
    left: 200px;
    top: 200px; }
  75% {
    background-color: green;
    left: 0px;
    top: 200px; }
  100% {
    left: 0px;
    top: 0px; } }
@keyframes wheelHueColor {
  from, to {
    color: #c32283; }
  10% {
    color: #bd2828; }
  20% {
    color: #cf8517; }
  30% {
    color: #819c16; }
  40% {
    color: #36931f; }
  50% {
    color: #169c4c; }
  60% {
    color: #169c9c; }
  70% {
    color: #2e65b8; }
  80% {
    color: #4e2dd2; }
  90% {
    color: #8b29a3; } }
:root {
  --couleur:#ee8436 ; }

* {
  margin: 0;
  box-sizing: border-box; }

html {
  font-size: 62.5%; }
  html header {
    background: linear-gradient(#ee8436, white);
    padding-bottom: 1rem; }
    html header .titreetlien .lienadmin {
      text-align: left;
      text-decoration: none;
      color: white;
      font-size: 2rem;
      font-family: "Syne Mono", monospace; }
    html header .titreetlien .titre {
      text-align: center;
      color: white;
      font-size: 6rem;
      font-family: "Syne Mono", monospace; }
    html header nav ul {
      display: flex;
      justify-content: space-around;
      list-style: none;
      font-size: 3.5rem;
      margin-top: 1rem; }
      html header nav ul li a {
        text-decoration: none; }
  html main {
    width: 80%;
    margin: auto; }
    html main #boutoncalendrier {
      text-align: center;
      display: none; }
      html main #boutoncalendrier h3 {
        color: #ee8436;
        font-size: 6rem;
        margin-bottom: 1rem; }
        html main #boutoncalendrier h3 button {
          position: relative;
          margin: 0 2rem;
          bottom: 1.5rem;
          background-color: #ee8436; }
        html main #boutoncalendrier h3 button:hover {
          color: #ee8436;
          background-color: black;
          transition: 2s; }
      html main #boutoncalendrier div {
        margin-bottom: 1rem; }
        html main #boutoncalendrier div .mois {
          color: black;
          background-color: #ee8436;
          font-size: 2rem;
          margin: 0 1rem;
          margin-bottom: 0.5rem; }
        html main #boutoncalendrier div .mois:hover {
          color: #ee8436;
          background-color: black;
          transition: 2s; }
        html main #boutoncalendrier div .mois:focus {
          background-color: red;
          font-size: 3.5rem; }
    html main #reserver {
      text-align: center;
      display: none; }
      html main #reserver h3 {
        font-size: 3.5rem;
        font-family: "Syne Mono", monospace;
        color: #ee8436; }
      html main #reserver div {
        margin-top: 1rem; }
        html main #reserver div label {
          font-size: 2rem;
          color: #ee8436;
          margin: 0 1rem; }
      html main #reserver #confirmer {
        margin-top: 1rem;
        font-size: 2rem;
        color: red;
        background-color: #ee8436; }
    html main #lesimages {
      display: none;
      margin-bottom: 5rem; }
      html main #lesimages .conteneur {
        background: linear-gradient(white, #ee8436);
        width: 17%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 6rem;
        color: grey; }
      html main #lesimages .conteneur:hover {
        border: 1px solid blue;
        transition: 2s; }
      html main #lesimages .conteneur:active {
        background: linear-gradient(white, blue); }
      html main #lesimages .conteneurimages {
        background-color: black;
        width: 60%; }
        html main #lesimages .conteneurimages #image {
          max-width: 100%;
          min-width: 100%;
          min-height: 100%;
          height: 50rem; }
    html main #imageaccueil {
      display: flex; }
      html main #imageaccueil .indication {
        display: flex;
        align-items: center;
        animation: infinite 1s wheelHueColor;
        font-size: 2rem;
        width: 60rem;
        text-align: center;
        margin: 0 1rem; }
      html main #imageaccueil #tablei {
        background-image: url("images/berneriep.jpg");
        background-size: contain;
        background-repeat: no-repeat;
        width: 60rem;
        height: 50rem;
        margin: 0 auto;
        margin-top: 1rem;
        padding: 0; }
        html main #imageaccueil #tablei tbody td {
          width: 25%;
          text-align: center; }
          html main #imageaccueil #tablei tbody td .chambre {
            background-color: #ee8436; }
          html main #imageaccueil #tablei tbody td .chambre:hover {
            color: red;
            background-color: black;
            transition: 0.7s; }
    html main #tablem {
      margin: auto;
      margin-top: 3rem;
      border: 0.1rem solid #ee8436;
      width: 100%;
      display: none;
      margin-bottom: 5rem; }
      html main #tablem tbody .td {
        border: 0.2rem solid #ee8436;
        font-size: 2rem;
        height: 5rem;
        text-align: center;
        color: #ee8436;
        align-items: center;
        width: 33%; }
        html main #tablem tbody .td div {
          display: flex;
          flex-direction: column; }
          html main #tablem tbody .td div .reservation {
            font-size: 1.2rem; }
      html main #tablem tbody .td:active {
        height: 15rem;
        font-size: 3rem; }
        html main #tablem tbody .td:active .reservation {
          font-size: 3rem; }
    html main #voirreservation {
      text-align: center;
      margin-bottom: 3rem; }
      html main #voirreservation div {
        display: flex;
        justify-content: center; }
        html main #voirreservation div h3 {
          color: #ee8436;
          font-size: 2rem;
          font-family: "Syne Mono", monospace;
          margin: 0 1rem; }
        html main #voirreservation div button {
          background-color: #ee8436; }
      html main #voirreservation p {
        font-size: 1.3rem;
        color: #ee8436;
        margin-top: 2rem; }
    html main #commentaire {
      display: none;
      text-align: center; }
      html main #commentaire h3 {
        font-size: 3.5rem;
        font-family: "Syne Mono", monospace;
        color: #ee8436; }
      html main #commentaire textarea {
        margin-top: 1rem; }
      html main #commentaire button {
        font-size: 1.5rem;
        color: red;
        background-color: #ee8436;
        margin-top: 1rem; }
      html main #commentaire div {
        text-align: left;
        margin-top: 2rem;
        margin-bottom: 10rem;
        animation-iteration-count: infinite;
        animation: 2s example;
        animation-play-state: paused;
        position: relative; }
        html main #commentaire div p {
          width: 100%;
          border: #ee8436;
          font-size: 2rem;
          color: #ee8436;
          padding: 2rem; }
    html main .titre {
      text-align: center;
      color: #ee8436;
      font-size: 6rem;
      font-family: "Syne Mono", monospace;
      margin-top: 3rem; }
    html main article {
      margin-top: 7rem; }
      html main article .titrearticle {
        font-size: 3.5rem;
        color: #ee8436;
        margin: 3rem;
        font-family: "Syne Mono", monospace; }
      html main article div {
        display: flex; }
        html main article div .imagearticle {
          width: 30%; }
        html main article div p {
          font-size: 2rem;
          color: #ee8436;
          text-align: start;
          padding: 2rem; }

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