@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
@font-face {
  font-family: "Glacial Indifference";
  src: url("../../fonts/GlacialIndifference-Regular.otf"), url("../../fonts/GlacialIndifference-Bold.otf"), format("opentype");
}
@font-face {
  font-family: "Sisterhood";
  src: url("../../fonts/Sisterhood.ttf"), format("truetype");
}
@font-face {
  font-family: "Toddler Writing";
  src: url("../../fonts/ToddlerWriting.ttf"), format("truetype");
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  scroll-behavior: smooth;
  font-size: 62.5%;
}

body {
  position: relative;
  font-size: 1.6rem;
  font-family: "Glacial Indifference", sans-serif;
  line-height: 1;
  color: #26150c;
  background-color: #FFF5E9;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

.container {
  max-width: 70vw;
  margin: 0 auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

h1 {
  margin: 1em 0;
  font-family: "Toddler Writing";
  font-size: 2.8rem;
  font-weight: bold;
  color: #5b3b2e;
}

h2 {
  margin: 0.5em 0;
  font-size: 2rem;
  font-weight: bold;
  color: #5b3b2e;
}

h3 {
  margin: 0.5em 0;
  font-size: 1.8rem;
  font-weight: bold;
  color: #5b3b2e;
}

a {
  color: #5b3b2e;
  text-decoration: none;
}
a:hover {
  color: #b84c65;
}

button {
  font-size: 1.6rem;
  font-family: "Glacial Indifference";
}

dl {
  margin: 1em;
}
dl dt {
  margin: 0.5em;
  font-weight: bold;
}
dl dd {
  padding: 0.5em;
}
dl dd .message {
  white-space: pre-wrap;
}

.form-title {
  text-align: center;
}

form {
  margin: 1em;
  padding: 1em;
  border-radius: 0.5em;
  background-color: #e9d4cc;
}
form fieldset {
  padding: 0.5em;
}
form fieldset label {
  display: block;
  padding-block: 0.3em;
}
form fieldset input,
form fieldset textarea,
form fieldset select {
  width: 100%;
  padding: 0.3em;
  border: none;
  border-radius: 0.2em;
  background-color: #FFF5E9;
  font-family: "Glacial Indifference";
}
form fieldset p.show {
  margin-block: 0.5em;
  padding: 0.5em;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  background-color: #f4c8c2;
}
form input[type=submit] {
  margin: 0.5em;
  padding: 0.5em;
  border: 1px solid #b84c65;
  border-radius: 0.2em;
  color: white;
  background-color: #b84c65;
}
form input[type=submit]:hover {
  color: #b84c65;
  background-color: white;
}

.modal {
  display: none;
}
.modal.show {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
}
.modal.show article {
  background-color: #FFF5E9;
  width: 70%;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
}
.modal.show article h2 {
  text-align: center;
}
.modal.show article p {
  padding: 0.5em;
  white-space: pre-wrap;
}
.modal.show article .buttons {
  display: flex;
  justify-content: center;
  margin: 0.5em;
}
.modal.show article .buttons button {
  margin-inline: 0.5em;
  padding: 0.5em;
  border: 1px solid #b84c65;
  border-radius: 0.2em;
  color: white;
  background-color: #b84c65;
}
.modal.show article .buttons button:hover {
  color: #b84c65;
  background-color: white;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body .login form {
    width: 80%;
    margin-inline: auto;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) {
  main {
    padding-bottom: 20vh;
  }
  main form {
    width: 30%;
    margin-inline: auto;
  }
  main > .main {
    position: relative;
  }
  main > .main .modal {
    position: absolute;
    left: 0;
  }
  main > .main .modal.show {
    max-width: 100%;
    height: 100%;
  }
  main > .main .modal.show article {
    width: 40%;
  }
}
body > header {
  width: 100%;
  padding: 1em;
  background-color: #e9d4cc;
}
body > header .access a {
  position: fixed;
  top: -100em;
}
body > header .access a:focus {
  top: 0;
  background-color: black;
  color: white;
}
body > header #show-aside {
  position: fixed;
  top: 0.5em;
  left: 0.5em;
  z-index: 2;
  width: 4em;
  height: 4em;
  background-color: #fff;
  border: none;
  border-radius: 0.3em;
  transition: all 0.5s;
}
body > header #show-aside.show {
  translate: calc(100vw - 4.5em);
  rotate: 90deg;
}
body > header #show-aside i {
  font-size: 2em;
}
body > header nav {
  text-align: center;
}
body > header nav > a:hover {
  font-weight: normal;
}
body > header nav > a section {
  display: none;
}
body > header nav > a section p:first-of-type {
  margin-bottom: 0.5em;
  font-family: "Sisterhood";
  font-size: 2rem;
}
body > header nav > a img {
  width: 50%;
}
body > header nav ul {
  margin-top: 1em;
}
body > header nav ul li {
  padding: 0.5em;
}
body main aside {
  position: fixed;
  top: 0;
  left: -100vw;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  padding: 2.5em 1em;
  background-color: #fff;
  transition: all 0.5s;
}
body main aside.show {
  translate: 100vw;
}
body main aside .aside-menu h2 {
  display: none;
}
body main aside .aside-menu > li {
  margin: 0.5em;
  font-size: 1.8rem;
}
body main aside .aside-menu > li ul li {
  padding: 0.5em 0;
  font-size: 1.6rem;
}
body main .main {
  padding: 1em;
}
body > footer {
  padding: 1em;
  background-color: #e9d4cc;
}
body > footer section {
  padding: 1em 0;
  text-align: center;
}
body > footer section h2 {
  display: none;
}
body > footer section li {
  padding: 0.15em;
}
body > footer section ~ section {
  border-top: 2px solid #fff;
}
body > footer .info section p {
  padding: 0.15em;
}
body > footer .info section p:first-of-type {
  font-weight: bold;
  text-transform: uppercase;
}
body > footer .info img {
  width: 70%;
}
body > footer .socials ul {
  display: flex;
  justify-content: center;
}
body > footer .socials ul li {
  padding: 0.5em;
}
body > footer .socials ul li i {
  font-size: 2.5rem;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body > header nav > a {
    display: block;
  }
  body > header nav > a img {
    width: 30%;
  }
  body > header nav > a section {
    display: block;
  }
  body > footer .info > a img {
    width: 30%;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) and (max-width: 1200px) {
  body {
    position: relative;
    min-height: 100vh;
  }
  body > header {
    height: 15vh;
    padding: 0 1em;
  }
  body > header #show-aside {
    display: none;
  }
  body > header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15vh;
  }
  body > header nav > a {
    display: flex;
    align-items: center;
  }
  body > header nav > a:hover {
    font-weight: normal;
  }
  body > header nav > a img {
    width: 15%;
  }
  body > header nav > a section {
    display: block;
  }
  body > header nav ul {
    display: flex;
    justify-content: right;
    margin: 0;
  }
  body > header nav ul li {
    padding: 0.5em;
  }
  body > header.homepage {
    position: absolute;
    top: 0;
    background: transparent;
  }
  body > header.homepage a {
    color: #fff;
  }
  body > header.homepage a:hover {
    color: #f4c8c2;
  }
  body main.user {
    display: grid;
    grid-template-areas: "aside main";
    grid-template-columns: 20% 80%;
  }
  body main.user #show-aside {
    display: none;
  }
  body main.user aside {
    position: relative;
    grid-area: aside;
    left: 0;
    width: 100%;
    min-height: 65vh;
    height: auto;
    overflow: hidden;
    transition: none;
  }
  body main.user aside .aside-menu > li ul li {
    padding: 0.2em 0;
  }
  body main.user .main {
    grid-area: main;
  }
  body > footer {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 20vh;
  }
  body > footer section {
    height: 100%;
    padding: 0 1em;
  }
  body > footer section ~ section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 20%;
    border-top: none;
    border-left: 2px solid #fff;
  }
  body > footer .info {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 40%;
  }
  body > footer .info section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: left;
  }
  body > footer .info a img {
    width: auto;
    max-height: 15vh;
  }
  body > footer .socials ul li {
    padding: 0.2em;
  }
  body > footer .socials p {
    margin-block: 1em;
  }
}
/** DESKTOP LARGE **/
@media screen and (min-width: 1200px) {
  body {
    position: relative;
    min-height: 100vh;
  }
  body > header {
    height: 15vh;
    padding: 0 1em;
  }
  body > header #show-aside {
    display: none;
  }
  body > header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 15vh;
  }
  body > header nav > a {
    display: flex;
    align-items: center;
  }
  body > header nav > a:hover {
    font-weight: normal;
  }
  body > header nav > a img {
    width: 15%;
  }
  body > header nav > a section {
    display: block;
  }
  body > header nav ul {
    display: flex;
    justify-content: right;
    margin: 0;
  }
  body > header nav ul li {
    padding: 0.5em;
  }
  body > header.homepage {
    position: absolute;
    top: 0;
    background: transparent;
  }
  body > header.homepage a {
    color: #fff;
  }
  body > header.homepage a:hover {
    color: #f4c8c2;
  }
  body main.user {
    display: grid;
    grid-template-areas: "aside main";
    grid-template-columns: 15% 85%;
  }
  body main.user #show-aside {
    display: none;
  }
  body main.user aside {
    position: relative;
    grid-area: aside;
    left: 0;
    width: 100%;
    min-height: 65vh;
    height: auto;
    overflow: hidden;
    padding: 2em;
    transition: none;
  }
  body main.user aside .aside-menu > li ul li {
    padding: 0.2em 0;
  }
  body main.user .main {
    grid-area: main;
  }
  body > footer {
    position: absolute;
    bottom: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
    height: 20vh;
  }
  body > footer section {
    height: 100%;
    padding: 0 1em;
  }
  body > footer section ~ section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 23.3333333333%;
    border-top: none;
    border-left: 2px solid #fff;
  }
  body > footer .info {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 30%;
  }
  body > footer .info section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    text-align: left;
  }
  body > footer .info a img {
    width: auto;
    max-height: 15vh;
  }
  body > footer .socials p {
    margin-block: 1em;
  }
}
body main.homepage .warning {
  font-size: 2.4rem;
}
body main.homepage .warning a {
  border: none;
  background-color: initial;
  color: #5b3b2e;
  text-decoration: underline;
}
body main.homepage .scroll-to-top {
  position: fixed;
  bottom: 6vh;
  right: 4vw;
  z-index: 5;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  background-color: #5b3b2e;
  color: #e9d4cc;
}
body main.homepage h1 {
  display: none;
}
body main.homepage section h2 {
  display: none;
}
body main.homepage section article {
  padding: 2em;
  margin: auto 0;
}
body main.homepage section article h3 {
  margin-bottom: 1.5em;
  font-size: 2.7rem;
}
body main.homepage section article p {
  margin: 1em 0;
  font-size: 2rem;
  white-space: pre-wrap;
}
body main.homepage section article a {
  display: inline-block;
  margin-top: 1em;
  padding: 0.5em 1em;
  border-radius: 5px;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  color: white;
}
body main.homepage section article a:hover {
  background-color: #fff;
  color: #b84c65;
}
body main.homepage .presentation {
  min-height: 90vh;
  background-image: url("/assets/images/presentation.jpg");
  background-position: 50% 70%;
  -webkit-background-size: cover;
  background-size: cover;
}
body main.homepage .presentation .gradient {
  min-height: 90vh;
  background-image: linear-gradient(black, rgba(0, 0, 0, 0.8) 80%, transparent);
}
body main.homepage .presentation .gradient article {
  color: white;
  text-align: justify;
}
body main.homepage .presentation .gradient article h3 {
  margin: 1.5em 0;
  color: white;
}
body main.homepage .advantages article {
  font-size: 1.6rem;
}
body main.homepage .advantages article span {
  display: inline-block;
  padding: 0 0 0.3em 0;
  border-bottom: 2px solid #5a8b09;
}
body main.homepage .advantages article p {
  text-align: justify;
}
body main.homepage .advantages article ul li i {
  display: inline-block;
  margin: 0.5em;
  color: #5a8b09;
}
body main.homepage .advantages figure {
  margin: auto 0;
}
body main.homepage .advantages figure img {
  width: 100%;
}
body main.homepage .problems {
  display: block;
}
body main.homepage .problems::before {
  display: block;
  content: "";
  height: 3em;
  margin: 1em auto;
  background-image: url("/assets/images/branch.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center;
}
body main.homepage .problems article {
  margin: 0 auto;
}
body main.homepage .problems article h3 span {
  display: inline-block;
  padding: 0 0 0.2em 0;
  border-bottom: 2px solid #5a8b09;
}
body main.homepage .problems article p {
  text-align: justify;
}
body main.homepage .problems article p span {
  font-weight: bold;
}
body main.homepage .problems article ul li i {
  display: inline-block;
  margin: 0.5em;
  color: #5a8b09;
}
body main.homepage .for-who {
  display: block;
}
body main.homepage .for-who::before {
  display: block;
  content: "";
  height: 3em;
  margin: 1em auto;
  background-image: url("/assets/images/branch.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center;
}
body main.homepage .for-who article h3 span {
  display: inline-block;
  padding: 0 0 0.2em 0;
  border-bottom: 2px solid #5a8b09;
}
body main.homepage .for-who article p {
  text-align: justify;
}
body main.homepage .for-who article p span {
  font-weight: bold;
}
body main.homepage .for-who article .links {
  display: flex;
  flex-direction: column;
  align-items: center;
}
body main.homepage .for-who article .links a {
  width: 60%;
  text-align: center;
}
body main.homepage .who::before {
  display: block;
  content: "";
  height: 3em;
  margin: 1em auto;
  background-image: url("/assets/images/branch.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center;
}
body main.homepage .who article h3 span {
  display: inline-block;
  padding: 0 0 0.2em 0;
  border-bottom: 2px solid #5a8b09;
}
body main.homepage .who article figure img {
  width: 100%;
  border-radius: 1em;
}
body main.homepage .who article p {
  text-align: justify;
}
body main.homepage .who article p span {
  font-weight: bold;
}
body main.homepage .who article .values {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}
body main.homepage .who article .values li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 7em;
  height: 7em;
  margin: 1em auto;
  border-radius: 50%;
  background-color: #e9d4cc;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
  font-size: 2rem;
}
body main.homepage .who article .values li::before {
  display: block;
  width: 2em;
  height: 2em;
  margin-inline: auto;
  margin-bottom: 0.5em;
  content: "";
  -webkit-background-size: contain;
  background-size: contain;
}
body main.homepage .who article .values .heart::before {
  background-image: url("/assets/images/icons/love.png");
}
body main.homepage .who article .values .hands::before {
  background-image: url("/assets/images/icons/cooperate.png");
}
body main.homepage .who article .values .smiley::before {
  background-image: url("/assets/images/icons/happy.png");
}
body main.homepage .who article .values .star::before {
  background-image: url("/assets/images/icons/star.png");
}
body main.homepage .who article .values .target::before {
  background-image: url("/assets/images/icons/goal.png");
}
body main.homepage .who article .desktop {
  display: none;
}
body main.homepage .who article .link {
  display: flex;
  justify-content: center;
}
body main.homepage .testimonies {
  padding: 2em;
  font-size: 2rem;
}
body main.homepage .testimonies::before {
  display: block;
  content: "";
  height: 3em;
  margin: 1em auto;
  background-image: url("/assets/images/branch.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center;
}
body main.homepage .testimonies h2 {
  display: block;
  margin-bottom: 1.5em;
  font-size: 2.7rem;
}
body main.homepage .testimonies h2 span {
  display: inline-block;
  padding: 0 0 0.2em 0;
  border-bottom: 2px solid #5a8b09;
}
body main.homepage .testimonies p {
  text-align: justify;
  white-space: pre-line;
}
body main.homepage .testimonies p span {
  font-weight: bold;
}
body main.homepage .testimonies p .en {
  font-style: italic;
  font-weight: normal;
}
body main.homepage .testimonies .cards {
  position: relative;
  left: -2em;
  display: flex;
  gap: 1em;
  padding: 1em;
  width: 100vw;
  overflow: scroll;
}
body main.homepage .testimonies .cards article {
  width: 100%;
  padding: 1em;
  margin: 0;
  border-radius: 0.5em;
  background-color: #e9d4cc;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}
body main.homepage .testimonies .cards article header {
  width: 65vw;
}
body main.homepage .testimonies .cards article header .name {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-align: left;
  font-weight: bold;
}
body main.homepage .testimonies .cards article header .name img, body main.homepage .testimonies .cards article header .name i.user {
  display: block;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  color: #5b3b2e;
}
body main.homepage .testimonies .cards article header .date {
  font-size: 1.6rem;
}
body main.homepage .contact::before {
  display: block;
  content: "";
  height: 3em;
  margin: 1em auto;
  background-image: url("/assets/images/branch.png");
  background-repeat: no-repeat;
  -webkit-background-size: contain;
  background-size: contain;
  background-position: center;
}
body main.homepage .contact article {
  padding: 1em 2em;
}
body main.homepage .contact article h3 span {
  display: inline-block;
  padding: 0 0 0.2em 0;
  border-bottom: 2px solid #5a8b09;
}
body main.homepage .contact article p {
  margin: 0;
  white-space: pre-line;
  text-align: justify;
}
body main.homepage .contact article .links {
  margin: 2em 0;
}
body main.homepage .contact article .links a {
  display: block;
  width: 50%;
  margin: 1em auto;
  padding: 0.5em 1em;
  border-radius: 5px;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  color: white;
  text-align: center;
}
body main.homepage .contact article .links a:hover {
  background-color: #fff;
  color: #b84c65;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body main.homepage .advantages {
    display: flex;
  }
  body main.homepage .advantages figure {
    width: 50%;
    padding-right: 1em;
  }
  body main.homepage .advantages figure img {
    border-radius: 0.5em;
  }
  body main.homepage .for-who article .links {
    flex-direction: row;
    justify-content: center;
  }
  body main.homepage .for-who article .links a {
    width: 30%;
    margin: 1em;
  }
  body main.homepage .who article figure {
    width: 70%;
    margin: 0 auto;
  }
  body main.homepage .who article figure img {
    display: block;
    width: 70%;
    margin: 0 auto;
    border-radius: 1em;
  }
  body main.homepage .who article .values li {
    margin: 2em;
  }
  body main.homepage .testimonies .cards article header {
    width: 40vw;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) and (max-width: 1200px) {
  body main.homepage {
    display: block;
  }
  body main.homepage section {
    display: flex;
  }
  body main.homepage section article {
    width: 50vw;
    font-size: 2rem;
  }
  body main.homepage .presentation {
    display: block;
  }
  body main.homepage .presentation .gradient {
    display: flex;
    justify-content: flex-end;
    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8), black);
  }
  body main.homepage .presentation .gradient article {
    margin-top: 5em;
    text-align: left;
  }
  body main.homepage .advantages {
    justify-content: center;
  }
  body main.homepage .advantages article {
    font-size: 2rem;
  }
  body main.homepage .advantages article h3 {
    line-height: 1.5em;
  }
  body main.homepage .advantages figure {
    padding: 1.5em 0;
    width: 20%;
  }
  body main.homepage .advantages figure img {
    width: 100%;
    border-radius: 1em;
  }
  body main.homepage .problems {
    justify-content: center;
  }
  body main.homepage .problems article {
    width: 70vw;
  }
  body main.homepage .for-who article {
    width: 70vw;
    margin-inline: auto;
  }
  body main.homepage .for-who article .links {
    flex-direction: row;
    justify-content: center;
  }
  body main.homepage .for-who article .links a {
    width: 30%;
    margin: 1em;
  }
  body main.homepage .who {
    display: block;
  }
  body main.homepage .who article {
    display: grid;
    grid-template-areas: "title title" "img text" "values values" "link link";
    grid-template-columns: 35% 65%;
    width: 70vw;
    margin: 0 auto;
  }
  body main.homepage .who article h3 {
    grid-area: title;
  }
  body main.homepage .who article figure {
    grid-area: img;
    width: 90%;
    margin: auto;
  }
  body main.homepage .who article p {
    grid-area: text;
    padding: 1em;
  }
  body main.homepage .who article .values {
    grid-area: values;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  body main.homepage .who article .values li {
    width: 7em;
    height: 7em;
    margin: 1em;
  }
  body main.homepage .who article .values li::before {
    width: 3em;
    height: 3em;
    margin-bottom: 0.5em;
  }
  body main.homepage .who article .mobile {
    display: none;
  }
  body main.homepage .who article .link {
    grid-area: link;
    display: inline-block;
    margin-left: 1em;
  }
  body main.homepage .testimonies {
    display: block;
    width: 70vw;
    margin-inline: auto;
  }
  body main.homepage .testimonies .cards {
    width: 70vw;
  }
  body main.homepage .testimonies .cards article header {
    width: 25vw;
  }
  body main.homepage .contact {
    display: block;
    width: 70vw;
    margin-inline: auto;
  }
  body main.homepage .contact article {
    width: 100%;
  }
  body main.homepage .contact article .links {
    display: flex;
    justify-content: center;
  }
  body main.homepage .contact article .links a {
    width: 30%;
    margin-inline: 1em;
  }
}
/** DESKTOP LARGE **/
@media screen and (min-width: 1200px) {
  body main.homepage {
    display: block;
  }
  body main.homepage section {
    display: flex;
  }
  body main.homepage section article {
    width: 50vw;
    font-size: 2rem;
  }
  body main.homepage .scroll-to-top {
    position: sticky;
    bottom: 8vh;
    left: 90vw;
    margin-bottom: 1em;
  }
  body main.homepage .presentation {
    display: block;
  }
  body main.homepage .presentation .gradient {
    display: flex;
    justify-content: flex-end;
    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.8), black);
  }
  body main.homepage .presentation .gradient article {
    margin-top: 9em;
    text-align: left;
  }
  body main.homepage .advantages {
    justify-content: center;
  }
  body main.homepage .advantages article {
    font-size: 2rem;
  }
  body main.homepage .advantages article h3 {
    line-height: 1.5em;
  }
  body main.homepage .advantages figure {
    padding: 1.5em 0;
    width: 20%;
  }
  body main.homepage .advantages figure img {
    width: 100%;
    border-radius: 1em;
  }
  body main.homepage .problems {
    justify-content: center;
  }
  body main.homepage .problems article {
    width: 70vw;
  }
  body main.homepage .for-who article {
    width: 70vw;
    margin-inline: auto;
  }
  body main.homepage .for-who article .links {
    flex-direction: row;
    justify-content: center;
  }
  body main.homepage .for-who article .links a {
    width: 20%;
    margin: 1em;
  }
  body main.homepage .who {
    display: block;
  }
  body main.homepage .who article {
    display: grid;
    grid-template-areas: "title title" "img text" "img values" "link link";
    grid-template-columns: 35% 65%;
    width: 70vw;
    margin-inline: auto;
  }
  body main.homepage .who article h3 {
    grid-area: title;
  }
  body main.homepage .who article figure {
    grid-area: img;
    width: 90%;
    margin: auto;
  }
  body main.homepage .who article p {
    grid-area: text;
    padding: 1em;
  }
  body main.homepage .who article .values {
    grid-area: values;
    display: block;
  }
  body main.homepage .who article .values .row {
    display: flex;
    justify-content: center;
  }
  body main.homepage .who article .values li {
    width: 7em;
    height: 7em;
    margin: 1em;
  }
  body main.homepage .who article .values li::before {
    width: 3em;
    height: 3em;
    margin-bottom: 0.5em;
  }
  body main.homepage .who article .mobile {
    display: none;
  }
  body main.homepage .who article .link {
    grid-area: link;
    display: inline-block;
    margin-left: 1em;
  }
  body main.homepage .testimonies {
    display: block;
    width: 70vw;
    margin-inline: auto;
    /* Track */
    /* Handle */
    /* Handle on hover */
  }
  body main.homepage .testimonies .cards {
    width: 70vw;
  }
  body main.homepage .testimonies .cards article header {
    width: 15vw;
  }
  body main.homepage .testimonies ::-webkit-scrollbar {
    width: 0;
    height: 0.5em;
  }
  body main.homepage .testimonies ::-webkit-scrollbar-track {
    background: #e9d4cc;
    border-radius: 0.5em;
  }
  body main.homepage .testimonies ::-webkit-scrollbar-thumb {
    background: #5b3b2e;
    border-radius: 0.5em;
  }
  body main.homepage .testimonies ::-webkit-scrollbar-thumb:hover {
    background: #26150c;
  }
  body main.homepage .contact {
    display: block;
    width: 70vw;
    margin-inline: auto;
  }
  body main.homepage .contact article {
    width: 100%;
  }
  body main.homepage .contact article .links {
    display: flex;
    justify-content: center;
  }
  body main.homepage .contact article .links a {
    width: 30%;
    margin-inline: 1em;
  }
}
body .contact-form .info {
  padding: 1.5em;
}
body .contact-form .info p {
  white-space: pre-wrap;
  text-align: justify;
}
body .contact-form .info a {
  text-decoration: underline;
}
body .contact-form img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}
body .contact-form form fieldset label {
  display: block;
  padding-bottom: 0.2em;
}
body .contact-form form fieldset input {
  width: 100%;
}
body .contact-form form fieldset textarea {
  width: 100%;
  height: 5em;
}
body .contact-form form > p {
  padding: 0.5em;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body .contact-form form {
    margin-inline: 2em;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) {
  body .contact-form {
    display: grid;
    grid-template-areas: "title title" "form info" "form image";
    grid-template-columns: 50% 50%;
    width: 90vw;
    margin: 0 auto;
  }
  body .contact-form h1 {
    grid-area: title;
  }
  body .contact-form form {
    grid-area: form;
    margin-bottom: 1.5em;
    width: 100%;
  }
  body .contact-form .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  body .contact-form img {
    grid-area: image;
    width: calc(100% - 3em);
    margin: 1.5em;
    border-radius: 0.5em;
  }
}
body .about {
  padding: 1em;
}
body .about h1 {
  text-align: center;
}
body .about h2 {
  margin: 1em 0;
  text-align: center;
}
body .about img {
  display: block;
  margin: 2em auto;
  width: 70vw;
  border-radius: 0.5em;
}
body .about p {
  margin-bottom: 2em;
  text-align: justify;
  white-space: pre-wrap;
}
body .about p span {
  font-weight: bold;
}
body .about a {
  display: block;
  width: 8em;
  margin: 1em auto;
  padding: 0.5em 1em;
  border-radius: 5px;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  text-align: center;
  color: white;
}
body .about a:hover {
  background-color: #fff;
  color: #b84c65;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body .about img {
    width: 50vw;
  }
  body .about p {
    padding: 1em;
    margin-bottom: 0;
  }
  body .about .links {
    display: flex;
    justify-content: center;
  }
  body .about .links a {
    display: inline-block;
    margin: 1em;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) {
  body .about {
    display: grid;
    grid-template-areas: "h1 h1" "h2 h2" "text img" "links img";
    width: 70vw;
    margin: 0 auto;
    padding-bottom: 20vh;
  }
  body .about h1 {
    grid-area: h1;
  }
  body .about h2 {
    grid-area: h2;
  }
  body .about p {
    grid-area: text;
    padding: 1.5em;
    padding-right: 6em;
    margin: auto 0;
  }
  body .about img {
    grid-area: img;
    width: 20vw;
    margin: 0 0 2em 0;
  }
  body .about .links {
    grid-area: links;
    display: flex;
    justify-content: center;
    margin-bottom: 2em;
  }
  body .about .links a {
    display: inline-block;
    margin: auto 1em;
  }
}
body .legals {
  padding: 1em;
}
body .legals h1 {
  text-align: center;
}
body .legals h2 {
  margin: 1em 0;
  text-transform: uppercase;
}
body .legals h3 {
  margin: 1em 0;
  font-size: 1.8rem;
  font-weight: bold;
}
body .legals p {
  padding: 1em;
  text-align: justify;
  white-space: pre-wrap;
}
body .legals p.center {
  text-align: center;
}
body .legals p span {
  font-weight: bold;
}
body .legals ul {
  padding: 0 2em;
  list-style-type: disc;
  text-align: justify;
}
body .legals ul ul {
  padding-block: 0.5em;
  list-style-type: circle;
}
body .legals a {
  text-decoration: underline;
}
body .credits {
  padding: 1em;
}

/** DESKTOP **/
@media screen and (min-width: 980px) {
  body .legals, body .credits {
    width: 60vw;
    margin: 0 auto;
    padding: 1em 1em 20vh;
  }
}
body .blog h1 {
  text-align: center;
}
body .blog > a {
  display: inline-block;
  margin: 0 1em;
  padding-top: 0.2em;
}
body .blog > a i {
  padding: 0.2em 0.5em 0 0.5em;
}
body .blog .actions a {
  display: inline-block;
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  color: white;
  background-color: #b84c65;
}
body .blog .actions a:hover {
  color: #b84c65;
  background-color: white;
}
body .blog .categories ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
body .blog .categories ul li {
  min-width: 8em;
  margin: 0 0.5em;
}
body .blog .categories ul li a {
  display: inline-block;
  width: 100%;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  color: white;
  background-color: #b84c65;
}
body .blog .categories ul li a.new-cat {
  background-color: #f4c8c2;
  color: #b84c65;
}
body .blog .categories ul li a:hover {
  color: #b84c65;
  background-color: white;
}
body .blog .category {
  display: inline-block;
  padding: 0.3em;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  background-color: #f4c8c2;
  color: #b84c65;
}
body .blog .articles {
  padding: 1em;
}
body .blog .articles article {
  margin: 1.5em auto;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 0.5em 0.5em 1em rgba(0, 0, 0, 0.3);
}
body .blog .articles article > .main img {
  width: 100%;
  height: 7em;
  object-fit: cover;
}
body .blog .articles article > .main .content {
  height: 8em;
  padding-block: 1em;
  overflow: hidden;
  white-space: pre-wrap;
  text-overflow: ellipsis;
}
body .blog .articles article > .main > a {
  display: inline-block;
  width: 100%;
  text-align: right;
}
body .blog .articles article footer {
  padding-block: 0.3em;
  font-size: 1.2rem;
}
body .article {
  padding: 1em;
}
body .article a {
  display: inline-block;
  margin-block: 0.5em;
  text-decoration: underline;
}
body .article a:hover {
  text-decoration: none;
}
body .article > a:first-of-type {
  display: inline-block;
  margin-block: 1em;
  padding-top: 0.2em;
  text-decoration: none;
}
body .article > a:first-of-type i {
  padding: 0.2em 0.5em 0 0.5em;
}
body .article .article-infos {
  display: flex;
  justify-content: space-evenly;
  margin-block: 1em;
}
body .article .article-infos p {
  margin-block: auto;
  padding: 0.5em 1em;
}
body .article .article-infos p a {
  margin: 0;
  padding: 0.3em 0.5em;
  border: none;
  border-radius: 0.5em;
  color: white;
  text-decoration: none;
  text-align: center;
  background-color: #b84c65;
}
body .article img {
  display: block;
  max-width: 100%;
  max-height: 30vh;
  margin: 1em auto;
}
body .article .content {
  padding-block: 1em;
  white-space: pre-wrap;
}

/** DESKTOP **/
@media screen and (min-width: 980px) and (max-width: 1200px) {
  body .blog > a {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
  body .blog .articles {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
  }
  body .blog .articles article {
    width: calc(33.3333333333% - 2em);
    margin: 1em;
  }
  body .article {
    width: 80%;
    margin-inline: auto;
    padding-bottom: 20vh;
  }
  body .article .article-infos {
    justify-content: flex-start;
  }
  body .article .medias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  body .article .medias > img {
    width: calc(50% - 2em);
    margin: 1em;
  }
  body .article .medias figure {
    width: calc(50% - 2em);
    margin: 1em;
  }
  body .article .content {
    width: 80%;
    margin: 0 auto;
  }
}
/** DESKTOP LARGE **/
@media screen and (min-width: 1200px) {
  body .blog > a {
    display: block;
    width: 80%;
    margin: 0 auto;
  }
  body .blog .articles {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
  }
  body .blog .articles article {
    width: calc(25% - 2em);
    margin: 1em;
  }
  body .article {
    width: 80%;
    margin-inline: auto;
    padding-bottom: 20vh;
  }
  body .article .article-infos {
    justify-content: flex-start;
  }
  body .article .medias {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  body .article .medias > img {
    width: calc(33.3333333333% - 2em);
    margin: 1em;
  }
  body .article .medias figure {
    width: calc(33.3333333333% - 2em);
    margin: 1em;
  }
  body .article .content {
    width: 80%;
    margin: 0 auto;
  }
}
body main .dashboard h1 {
  grid-area: title;
  text-align: center;
}
body main .dashboard .important {
  margin-block: 0.5em;
  padding: 0.5em;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  background-color: #f4c8c2;
}
body main .dashboard > section {
  padding: 1em;
  margin-block: 1em;
  border-radius: 0.5em;
  border: 1px solid #f4c8c2;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
}
body main .dashboard > section table {
  width: 100%;
}
body main .dashboard > section table th, body main .dashboard > section table td {
  padding: 0.3em;
  vertical-align: middle;
}
body main .dashboard > section table th a, body main .dashboard > section table td a {
  display: block;
  margin-block: 0.5em;
}
body main .dashboard > section table th {
  font-weight: bold;
}
body main .dashboard > section table ~ table {
  border-top: 1px solid #f4c8c2;
}
body main .dashboard > section .mobile table:first-of-type {
  border-top: 1px solid #f4c8c2;
}
body main .dashboard > section .mobile table:last-of-type {
  border-bottom: 1px solid #f4c8c2;
}
body main .dashboard > section .mobile table th {
  width: 40%;
}
body main .dashboard > section .desktop tr:last-of-type {
  border-bottom: 1px solid #f4c8c2;
}
body main .dashboard > section .desktop tr ~ tr {
  border-top: 1px solid #f4c8c2;
}
body main .dashboard .documents > ul li {
  padding: 0.5em;
}
body main .dashboard .documents > ul > li ~ li {
  border-top: 1px solid #f4c8c2;
}
body main .dashboard .documents > ul > li:first-of-type {
  border-top: 1px solid #f4c8c2;
}
body main .dashboard .documents > ul > li:last-of-type {
  border-bottom: 1px solid #f4c8c2;
}
body main .dashboard .desktop {
  display: none;
}

/** DESKTOP **/
@media screen and (min-width: 980px) and (max-width: 1200px) {
  body main .dashboard {
    display: grid;
    grid-template-areas: "title title" "documents messages" "upcoming to-confirm" "contact contact";
    grid-template-columns: 50% 50%;
    padding-inline: 5%;
  }
  body main .dashboard > section {
    margin: 0.5em;
    padding: 1em;
  }
  body main .dashboard .documents {
    grid-area: documents;
  }
  body main .dashboard .contacts {
    grid-area: contact;
  }
  body main .dashboard .contacts .mobile {
    display: none;
  }
  body main .dashboard .contacts .desktop {
    display: block;
    width: 80%;
    margin-inline: auto;
  }
  body main .dashboard .contacts .desktop th {
    text-align: left;
  }
  body main .dashboard .contacts .important {
    width: auto;
  }
  body main .dashboard .upcoming {
    grid-area: upcoming;
  }
  body main .dashboard .to-confirm {
    grid-area: to-confirm;
  }
  body main .dashboard .new-messages {
    grid-area: messages;
  }
}
/** DESKTOP LARGE **/
@media screen and (min-width: 1200px) {
  body main .dashboard {
    display: grid;
    grid-template-areas: "title title" "documents messages" "upcoming to-confirm" "contact contact";
    grid-template-columns: 50% 50%;
    padding-inline: 5%;
  }
  body main .dashboard > section {
    margin: 0.5em;
    padding: 1em;
  }
  body main .dashboard .mobile {
    display: none;
  }
  body main .dashboard .desktop {
    display: block;
    width: 80%;
    margin-inline: auto;
  }
  body main .dashboard .desktop th {
    text-align: left;
  }
  body main .dashboard .documents {
    grid-area: documents;
  }
  body main .dashboard .contacts {
    grid-area: contact;
  }
  body main .dashboard .upcoming {
    grid-area: upcoming;
  }
  body main .dashboard .to-confirm {
    grid-area: to-confirm;
  }
  body main .dashboard .new-messages {
    grid-area: messages;
  }
}
body main .main .messages {
  max-height: 70vh;
  overflow: scroll;
}
body main .main .messages li {
  display: flex;
  margin: 0.5em;
}
body main .main .messages li article {
  width: 80%;
  padding: 0.5em;
  border-radius: 0.3em;
}
body main .main .messages li article > p {
  white-space: pre-wrap;
}
body main .main .messages li article footer {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
}
body main .main .messages li.me {
  justify-content: flex-end;
  text-align: right;
}
body main .main .messages li.me article {
  background-color: #f4c8c2;
}
body main .main .messages li.other article {
  background-color: #e9d4cc;
}

/** DESKTOP **/
@media screen and (min-width: 980px) {
  body main > .discussion {
    width: 70%;
    margin: 0 auto;
  }
  body main > .discussion form {
    width: 100%;
  }
}
body main .clients > a, body main .clients button {
  display: inline-block;
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  color: white;
  background-color: #b84c65;
}
body main .clients > a:hover, body main .clients button:hover {
  color: #b84c65;
  background-color: white;
}
body main .clients > section > ul .client {
  padding: 0.5em;
  margin-block: 1em;
  border-radius: 0.5em;
  border: 1px solid #f4c8c2;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
}
body main .clients > section > ul .client li {
  margin: 0.5em;
}
body main .clients > section > ul .client .actions {
  display: flex;
  justify-content: flex-end;
}
body main .clients > section > ul .client .actions button {
  margin: 0.5em;
}
body main .client-info ul li {
  padding: 0.5em;
}
body main .client-info .actions a, body main .client-info .actions button {
  display: inline-block;
  width: 100%;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  color: white;
  background-color: #b84c65;
}
body main .client-info .actions a:hover, body main .client-info .actions button:hover {
  color: #b84c65;
  background-color: white;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body main .clients > section > ul {
    display: flex;
    flex-wrap: wrap;
  }
  body main .clients > section > ul .client {
    width: calc(50% - 2em);
    margin: 1em;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) and (max-width: 1200px) {
  body main .clients > section > ul {
    display: flex;
    flex-wrap: wrap;
  }
  body main .clients > section > ul .client {
    width: calc(33.3333333333% - 2em);
    margin: 1em;
  }
  body main .client-info .actions a, body main .client-info .actions button {
    width: 15em;
  }
}
/** DESKTOP LARGE **/
@media screen and (min-width: 1200px) {
  body main .clients > section > ul {
    display: flex;
    flex-wrap: wrap;
  }
  body main .clients > section > ul .client {
    width: calc(25% - 2em);
    margin: 1em;
  }
  body main .client-info .actions a, body main .client-info .actions button {
    width: 15em;
  }
}
body main .space > section > ul > li {
  padding: 0.5em;
  text-align: center;
  margin: 1em 0.5em;
  border-radius: 0.5em;
  border: 1px solid #f4c8c2;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
}
body main .space > section > ul > li article {
  display: grid;
  grid-template-columns: 45% 55%;
}
body main .space > section > ul > li article a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
body main .space > section > ul > li article a img {
  display: block;
  margin: 0.5em auto;
  width: 50%;
}
body main .space > section > ul > li article footer, body main .space > section > ul > li article > ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body main .space > section > ul > li article footer button,
body main .space > section > ul > li article footer a, body main .space > section > ul > li article > ul button,
body main .space > section > ul > li article > ul a {
  display: inline-block;
  width: 80%;
  margin: 0.5em;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  background-color: rgba(255, 255, 255, 0.7);
  color: #b84c65;
}
body main .space > section > ul > li article footer button:hover,
body main .space > section > ul > li article footer a:hover, body main .space > section > ul > li article > ul button:hover,
body main .space > section > ul > li article > ul a:hover {
  color: white;
  background-color: #b84c65;
}
body main .space > section > ul > li article footer li, body main .space > section > ul > li article > ul li {
  width: 100%;
}
body main .space > section > a {
  display: inline-block;
  margin: 0.5em;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  color: white;
}
body main .space > section > a:hover {
  color: #b84c65;
  background-color: white;
}
body main .space .actions ul {
  display: block;
}
body main .space .actions ul li {
  margin: 0;
  padding: 0;
  text-align: left;
  border: none;
  box-shadow: none;
}
body main .space .actions ul li a {
  display: inline-block;
  width: 100%;
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  color: white;
}
body main .space .actions ul li a:hover {
  color: #b84c65;
  background-color: white;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body main .space > section > ul {
    display: flex;
    flex-wrap: wrap;
  }
  body main .space > section > ul > li {
    width: calc(50% - 1em);
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) and (max-width: 1200px) {
  body main .space {
    padding-inline: 5%;
  }
  body main .space > section > ul {
    display: flex;
    flex-wrap: wrap;
  }
  body main .space > section > ul > li {
    width: calc(33.3333333333% - 1em);
  }
}
/** DESKTOP LARGE **/
@media screen and (min-width: 1200px) {
  body main .space {
    padding-inline: 5%;
  }
  body main .space > section > ul {
    display: flex;
    flex-wrap: wrap;
  }
  body main .space > section > ul > li {
    width: calc(25% - 1em);
  }
}
body .appointments > a {
  display: inline-block;
  margin: 0.5em 0;
  padding: 0.3em 0.5em;
  text-align: center;
  border-radius: 0.5em;
  border: 1px solid #b84c65;
  color: white;
  background-color: #b84c65;
}
body .appointments > a:hover {
  color: #b84c65;
  background-color: white;
}
body .appointments > section {
  padding: 1em;
  margin-block: 1em;
  border-radius: 0.5em;
  border: 1px solid #f4c8c2;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.3);
}
body .appointments > section p {
  margin: 1em;
}
body .appointments > section table {
  width: 100%;
}
body .appointments > section table th, body .appointments > section table td {
  padding: 0.3em;
  vertical-align: middle;
}
body .appointments > section table th {
  font-weight: bold;
}
body .appointments > section table ~ table {
  border-top: 1px solid #f4c8c2;
}
body .appointments .mobile {
  padding: 0.5em;
  margin-block: 0.5em;
}
body .appointments .mobile table td a {
  display: block;
  margin-block: 0.5em;
}
body .appointments .mobile table th {
  width: 40%;
}
body .appointments .mobile table:first-of-type {
  border-top: 1px solid #f4c8c2;
}
body .appointments .mobile table:last-of-type {
  border-bottom: 1px solid #f4c8c2;
}
body .appointments .desktop {
  display: none;
}
body .main.appointment {
  padding-inline: 5%;
}
body .main.appointment .comments form {
  width: 100%;
  margin-inline: 0;
}
body .main.appointment .comments form textarea {
  height: 5em;
}
body .main.appointment .comments ul {
  border-radius: 0.5em;
  background-color: #fff;
}
body .main.appointment .comments li ~ li {
  border-top: 1px solid #f4c8c2;
}
body .main.appointment .comments .comment {
  padding: 1em;
}
body .main.appointment .comments .comment header {
  font-weight: bold;
}
body .main.appointment .comments .comment p {
  padding: 0.5em;
  white-space: pre-line;
}

/** DESKTOP **/
@media screen and (min-width: 980px) {
  body main .appointments {
    padding: 1em 5%;
  }
  body main .appointments .mobile {
    display: none;
  }
  body main .appointments .desktop {
    display: block;
  }
  body main .appointments .desktop table {
    width: 80%;
    margin: 0 auto;
  }
  body main .appointments .desktop table thead {
    font-weight: bold;
  }
  body main .appointments .desktop table tr:last-of-type {
    border-bottom: 1px solid #f4c8c2;
  }
  body main .appointments .desktop table tr ~ tr {
    border-top: 1px solid #f4c8c2;
  }
  body main .appointments .desktop table td, body main .appointments .desktop table th {
    padding-block: 0.8em;
    width: 20%;
  }
  body main .appointments .desktop table td a, body main .appointments .desktop table th a {
    display: block;
    margin: 0.3em;
  }
  body main .appointments .contact table td, body main .appointments .contact table th {
    width: auto;
  }
}
body main.prestations {
  padding: 1em;
}
body main.prestations .menu {
  margin: 2em 0;
  padding: 0.5em;
  background-color: #e9d4cc;
  border-radius: 0.5em;
}
body main.prestations .menu li {
  margin: 1em;
  text-align: center;
}
body main.prestations h2 {
  text-transform: uppercase;
}
body main.prestations .cta {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 5px;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  color: white;
}
body main.prestations .cta:hover {
  background-color: #fff;
  color: #b84c65;
}
body main.prestations .intro p {
  margin: 1em 0;
}
body main.prestations .intro p span {
  font-style: italic;
}
body main.prestations .intro cite {
  font-style: italic;
}
body main.prestations .intro ul {
  margin: 1.5em 0;
}
body main.prestations .intro ul h4 {
  margin: 0.5em 0;
  font-size: 1.8rem;
  font-weight: bold;
}
body main.prestations .intro ul li {
  padding: 0.5em;
}
body main.prestations .intro ul li i {
  display: inline-block;
  color: #5a8b09;
  transform: rotate(90deg);
}
body main.prestations .domains {
  margin: 1em 0;
  padding: 1em 0;
}
body main.prestations .domains h3 {
  font-family: "Toddler Writing";
  font-size: 2rem;
  text-align: center;
}
body main.prestations .domains article {
  margin: 1em;
  padding: 1em;
  background-color: #e9d4cc;
  border-radius: 0.5em;
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5);
}
body main.prestations .domains article h4 {
  margin: 1em;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
body main.prestations .domains article h4 i {
  margin-right: 0.5em;
}
body main.prestations .domains article ul li {
  display: flex;
  margin: 0.5em 0;
}
body main.prestations .domains article ul li i {
  display: block;
  margin-right: 0.3em;
}
body main.prestations .tarifications {
  margin: 1em 0;
  padding: 1em 0;
}
body main.prestations .tarifications h3 {
  margin-bottom: 1em;
  font-family: "Toddler Writing";
  font-size: 2rem;
  text-align: center;
}
body main.prestations .tarifications p {
  white-space: pre-line;
}
body main.prestations .tarifications p span {
  font-size: 1.8rem;
  font-weight: bold;
}
body main.prestations .tarifications img {
  display: block;
  margin: 0 auto;
  width: 70%;
}
body main.prestations .tarifications .prices {
  margin: 1em 1em 2em 1em;
  padding: 1em;
  background-color: #e9d4cc;
  border-radius: 0.5em;
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5);
}
body main.prestations .tarifications .prices .hourly {
  text-align: center;
}
body main.prestations .tarifications .prices .taxes {
  margin: 1em;
  font-size: 1.4rem;
  text-align: center;
  font-style: italic;
}
body main.prestations .tarifications .links a {
  display: block;
  width: 50%;
  margin: 1em auto;
  text-align: center;
}
body main.prestations .packs {
  margin: 1em 0;
  padding: 1em 0;
}
body main.prestations .packs h3 {
  margin-bottom: 1em;
  font-family: "Toddler Writing";
  font-size: 2rem;
  text-align: center;
}
body main.prestations .packs article {
  margin: 2em 0;
}
body main.prestations .packs article h4 {
  margin: 0.5em;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
body main.prestations .packs article p {
  white-space: pre-line;
}
body main.prestations .packs article ul {
  margin: 1em;
  padding: 1em;
  background-color: #e9d4cc;
  border-radius: 0.5em;
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5);
}
body main.prestations .packs article ul h5 {
  margin: 0.5em;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: center;
}
body main.prestations .packs article ul h5 i {
  margin-right: 0.5em;
}
body main.prestations .packs article ul li {
  display: flex;
  margin: 0.5em 0;
}
body main.prestations .packs article ul li i {
  display: block;
  margin-right: 0.3em;
}
body main.prestations .packs article ul .price {
  margin-top: 1.5em;
  justify-content: center;
  font-weight: bold;
}
body main.prestations .packs article .links a {
  display: block;
  width: 50%;
  margin: 1em auto;
  text-align: center;
}

/** TABLET **/
@media screen and (min-width: 768px) and (max-width: 980px) {
  body main.prestations .menu {
    display: flex;
    justify-content: space-evenly;
  }
  body main.prestations .domains {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  body main.prestations .domains h3 {
    grid-column: 1/span 2;
  }
  body main.prestations .tarifications img {
    width: 40%;
  }
  body main.prestations .tarifications .links {
    display: flex;
    justify-content: center;
  }
  body main.prestations .tarifications .links a {
    width: 30%;
    margin-inline: 1em;
  }
  body main.prestations .packs article ul {
    width: 60%;
    margin: 1em auto;
  }
  body main.prestations .packs article .links {
    display: flex;
    justify-content: center;
  }
  body main.prestations .packs article .links a {
    width: 30%;
    margin-inline: 1em;
  }
}
/** DESKTOP **/
@media screen and (min-width: 980px) {
  body main.prestations {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 20vh;
  }
  body main.prestations .menu {
    display: flex;
    justify-content: space-evenly;
  }
  body main.prestations .domains {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  body main.prestations .domains h3 {
    grid-column: 1/span 3;
  }
  body main.prestations .tarifications {
    display: grid;
    grid-template-areas: "title title title title" "intro intro intro intro" ". logo prices ." ". logo prices ." "links links links links";
    grid-template-columns: 10% 35% 45% 10%;
  }
  body main.prestations .tarifications h3 {
    grid-area: title;
  }
  body main.prestations .tarifications p {
    text-align: center;
  }
  body main.prestations .tarifications p:first-of-type {
    grid-area: intro;
  }
  body main.prestations .tarifications img {
    grid-area: logo;
    width: 80%;
  }
  body main.prestations .tarifications .prices {
    grid-area: prices;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 5em;
  }
  body main.prestations .tarifications .prices .hourly {
    margin: 1em 0;
  }
  body main.prestations .tarifications .links {
    grid-area: links;
    display: flex;
    justify-content: center;
  }
  body main.prestations .tarifications .links a {
    width: 20%;
    margin-inline: 1em;
  }
  body main.prestations .packs {
    display: grid;
    grid-template-columns: 50% 50%;
  }
  body main.prestations .packs h3 {
    grid-column: 1/span 2;
    margin-bottom: 2em;
  }
  body main.prestations .packs article {
    margin: 0;
    padding: 1em;
  }
  body main.prestations .packs article h4 {
    margin-block: 0 2em;
  }
  body main.prestations .packs article p {
    text-align: justify;
  }
  body main.prestations .packs article ul {
    width: 80%;
    margin: 2em auto;
  }
  body main.prestations .packs article ul h5 {
    margin: 1em;
  }
  body main.prestations .packs article:first-of-type {
    border-right: 2px solid #e9d4cc;
  }
}
body main.conferences {
  padding: 1em;
}
body main.conferences img {
  width: 100%;
  border-radius: 0.5em;
}
body main.conferences article {
  margin: 2em 0;
  padding: 1em;
  background-color: #e9d4cc;
  border-radius: 0.5em;
  box-shadow: 0 0 0.3em rgba(0, 0, 0, 0.5);
  text-align: justify;
}
body main.conferences article h2 {
  display: block;
  margin-bottom: 2em;
  text-align: center;
  white-space: pre-line;
}
body main.conferences article h2 img {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
}
body main.conferences article p {
  white-space: pre-line;
}
body main.conferences article p span {
  font-weight: bold;
}
body main.conferences article .duration, body main.conferences article .price {
  margin: 1em;
  text-align: center;
  font-size: 1.8rem;
  font-weight: bold;
}
body main.conferences article .links a {
  display: block;
  width: 50%;
  margin: 1em auto;
  padding: 0.5em 1em;
  border-radius: 5px;
  border: 1px solid #b84c65;
  background-color: #b84c65;
  color: white;
  text-align: center;
}
body main.conferences article .links a:hover {
  background-color: #fff;
  color: #b84c65;
}

/** DESKTOP **/
@media screen and (min-width: 980px) {
  body main.conferences {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 20vh;
  }
  body main.conferences img {
    height: 60vh;
    object-fit: cover;
  }
  body main.conferences article {
    padding: 1.5em;
  }
  body main.conferences article h2 {
    white-space: nowrap;
  }
  body main.conferences article .links {
    display: flex;
    justify-content: center;
  }
  body main.conferences article .links a {
    width: 20%;
    margin-inline: 1em;
  }
}/*# sourceMappingURL=style.css.map */