@charset "UTF-8";
/* 
	Homebrew France Web V5.0.0
    Copyright (C) 2025  Homebrew France

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
/* ---------------------- This file is used to manage all fonts from homebrewfrance.fr ----------------- */
/* ------------- Ce fichier est utilisé pour gérer toutes les polices de homebrewfrance.fr ------------- */
/* Sora */
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap");
/* Space Grotesk */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap");
/* Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
/* Inter */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
/* Instrument Sans */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");
/* Syne */
@import url("https://fonts.googleapis.com/css2?family=Syne:wght@400..800&display=swap");
/* DM Sans */
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
:root {
  --main-color-block: #10101363;
  --main-border: 2px solid #272727;
}

@media only screen and (min-width: 1380px) {
  .btn-container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-direction: row;
  }
  .coordonnees-el {
    width: 350px;
  }
  .coordonnees-fup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .partner-image {
    max-width: 100px;
    max-height: 100px;
    margin-right: 25px;
  }
  .pres {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
  .pres:hover .it::after {
    content: "\f08e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-left: 7px;
    color: rgba(90, 90, 90, 0.705);
    font-size: 19px;
  }
  .home-header {
    margin-top: 12%;
    margin-left: 3%;
    height: var(--device-height);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .home-header-2 {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .home-header, .error-container, .home-header-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .discord-img, .error-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-height: 450px;
    width: 50%;
    padding: 25px;
  }
  .discord-img2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    max-height: 450px;
    width: 50%;
  }
  .grid-shop {
    width: 260px;
  }
}

@media only screen and (min-width: 800px) and (max-width: 1380px) {
  .home-header, .error-container, .home-header-2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .discord-img, .error-img {
    display: none;
  }
  .home-header {
    margin-top: 20%;
    height: var(--device-height);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .home-header .discord-title, .home-header .discord-desc {
    text-align: center;
  }
  .home-header .btn-container-home {
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    margin-left: -4px;
  }
  .home-header-2 {
    margin-top: 20%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .home-header-2 .discord-title, .home-header-2 .discord-desc {
    text-align: center;
  }
  .home-header-2 .btn-container-home {
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
    margin-left: -4px;
  }
}

@media only screen and (max-width: 800px) {
  .btn-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    justify-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .btn-container-home {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
  }
  .tags-selector {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .coordonnees-el {
    width: 100%;
    margin-block: 12px;
  }
  .coordonnees-fup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
  }
  .grid-shop {
    width: 100%;
  }
  .article-image-container {
    width: 100%;
    height: 125px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 10px;
    border-radius: 15px;
    -webkit-box-shadow: 0 0 10px rgba(214, 214, 214, 0.5);
            box-shadow: 0 0 10px rgba(214, 214, 214, 0.5);
  }
  .pres {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
  }
  .partner-image {
    -ms-flex-item-align: center;
        align-self: center;
    justify-self: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 95px;
  }
  .it {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .it .partner-category {
    width: auto !important;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  .home-header {
    margin-top: 40%;
    height: var(--device-height);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .discord-img, .error-img {
    display: none;
  }
  .btn-container-home {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: 0px !important;
  }
  .indicator {
    font-size: 40px;
    word-break: break-all;
  }
  #fup-indicator {
    width: 45px;
  }
  #presentation-communaute, #presentation-fup {
    font-size: 19px;
    text-justify: inter-word;
    margin-top: 18px;
    font-family: 'Poppins', sans-serif;
  }
  .discord-title, .error-title {
    display: none;
    color: white;
  }
  .discord-desc, .error-desc {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    color: #cacaca;
  }
  .discord-desc strong, .error-desc strong {
    color: white;
  }
  .discord-title-mobile {
    line-height: 1.0;
    margin-bottom: 12px;
    margin-top: 20%;
    text-align: center;
    font-size: 55px;
    color: white;
  }
  .titles {
    font-size: 23px;
  }
  .banner-container {
    margin-left: 3%;
    margin-right: 3%;
  }
  .partner-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
    -ms-flex-direction: column;
  }
  div.page {
    padding-left: 5.5%;
    padding-right: 5.5%;
    width: 100%;
  }
  .container-staff {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .grid-staff {
    width: 270px;
    margin-left: 10%;
    margin-right: 10%;
  }
  .container-presta {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
  }
  .grid-shop {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  .grid-downloads {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 2%;
    margin-right: 2%;
  }
  .grid-downloads h3 {
    font-size: 17px !important;
  }
  .grid-downloads small {
    font-size: 11px !important;
  }
  .pres, .pres-fup {
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .article-author {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
    text-align: center;
    width: 100%;
  }
  .indicator-container {
    margin-top: 120px;
    margin-bottom: 65px;
  }
  .popup {
    width: 80%;
  }
  .tags-search-container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

@media only screen and (min-width: 800px) {
  .pres {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
            flex-direction: column;
    -ms-flex-direction: column;
  }
  .it {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .discord-title-mobile {
    display: none;
  }
  .popup {
    width: auto;
  }
  .indicator-container {
    margin-top: 200px;
    margin-bottom: 100px;
  }
  .article-image {
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    width: 100%;
    height: 100%;
    margin-block: 12px;
    border-radius: 15px;
  }
  .article-image-container {
    width: 100%;
    height: 125px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 10px;
    border-radius: 15px;
    -webkit-box-shadow: 0 0 10px rgba(214, 214, 214, 0.5);
            box-shadow: 0 0 10px rgba(214, 214, 214, 0.5);
  }
  .indicator {
    font-size: 65px;
  }
  #fup-indicator {
    width: 80px;
  }
  .grid-shop:hover, .grid-downloads:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
    background-color: #111113d5;
    -webkit-box-shadow: 0px 10px 15px -4px #00000093;
    box-shadow: 0px 10px 15px -4px #00000093;
  }
  .grid-shop:hover img, .grid-downloads:hover img {
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
    -webkit-transform: rotate(3px);
            transform: rotate(3px);
  }
  #presentation-communaute, #presentation-fup {
    font-size: 29px;
    font-family: 'Poppins', sans-serif;
  }
  #presentation-communaute {
    margin-top: 195px;
  }
  .discord-desc, .error-desc {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: 450px;
    width: 50%;
    color: #cacaca;
  }
  .discord-desc strong, .error-desc strong {
    color: white;
  }
  .img-ds-ratio {
    height: 100%;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
    -webkit-transition: 0.8s;
    transition: 0.8s;
  }
  .img-ds-ratio:hover {
    -webkit-transform: rotate(0.02turn) scale(1.09);
            transform: rotate(0.02turn) scale(1.09);
  }
  .error-container {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    justify-items: center;
    -ms-grid-column-align: center;
        justify-self: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  .titles {
    font-size: 44px;
  }
  .banner-container {
    margin-left: 7%;
    margin-right: 7%;
  }
  div.page {
    padding-left: 8.6%;
    padding-right: 8.6%;
    width: 100%;
  }
  .container-presta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 10px;
  }
  .partner-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-direction: row;
  }
  .grid-downloads {
    margin: 10px;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    float: left;
    cursor: pointer;
    width: 350px;
    padding-inline: 15px !important;
  }
  .grid-downloads img {
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .grid-downloads small {
    color: #b5b5b5 !important;
  }
  .grid-downloads strong {
    color: white !important;
  }
  .grid-shop:hover, .grid-downloads:hover, .add-infos-shop:hover {
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
    cursor: default;
  }
  .grid-downloads:hover img {
    -webkit-transform: rotate(0.01turn) scale(1.09);
            transform: rotate(0.01turn) scale(1.09);
  }
  .pres, .pres-fup {
    width: 50%;
    margin: 5px;
  }
  .row-basic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-direction: row;
    -ms-flex-direction: row;
  }
  .pres:hover {
    cursor: pointer;
    -webkit-transform: scale(1.01);
            transform: scale(1.01);
    border: 2px solid rgba(153, 153, 153, 0.192);
  }
  .pres-fup:hover {
    cursor: pointer;
    background-color: #1f202350;
    -webkit-transform: scale(1.02);
            transform: scale(1.02);
    border: 1px solid rgba(153, 153, 153, 0.192);
  }
  .discord-title, .error-title {
    font-size: 65px;
  }
  .article-author {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    bottom: 0 !important;
    margin-bottom: 15px;
    margin-top: 8px;
  }
}

/**
========================================================================
Début des styles génériques
**/
#navList, #docList, #checkerList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
}

.services-guides {
  font-weight: 700;
  font-family: "Syne", sans-serif !important;
  font-optical-sizing: auto;
  font-style: normal;
}

.fa-check {
  color: #f9cb00 !important;
}

.legal {
  margin-block: 18px;
  font-family: 'Inter';
}

.warning {
  background: rgba(0, 0, 0, 0.5);
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  border: 2px solid #75418d;
  width: var(--navbar-width);
  font-weight: 400;
  padding-block: 8px;
  padding-inline: 20px;
  margin-top: 25px;
  border-radius: 18px;
}

.warning-inpage {
  background: rgba(171, 0, 0, 0.2);
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  border: 1px solid #8d4141;
  width: 100%;
  font-weight: 400;
  padding-block: 8px;
  padding-inline: 20px;
  -webkit-box-shadow: 0 0 10px rgba(255, 150, 150, 0.3);
          box-shadow: 0 0 10px rgba(255, 150, 150, 0.3);
  margin-top: 17px;
  border-radius: 18px;
}

.annonce {
  background: rgba(0, 0, 0, 0.2);
  font-size: 17px;
  font-family: 'Inter', sans-serif;
  border: 1px solid #8d7f41;
  width: var(--navbar-width);
  font-weight: 400;
  padding-block: 8px;
  padding-inline: 20px;
  -webkit-box-shadow: 0 0 10px rgba(255, 243, 150, 0.3);
          box-shadow: 0 0 10px rgba(255, 243, 150, 0.3);
  margin-top: 17px;
  border-radius: 18px;
  margin-inline: -10px;
}

.warning-container, .annonce-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 8px;
}

.alcool:hover {
  cursor: default;
}

ul {
  margin-left: 30px;
  margin-block: 13px;
}

.coordonnees-el {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-inline: 16px;
  padding-block: 25px;
  background-color: #10101363;
  border-radius: 38px;
  border: 2px solid #272727;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
}

.coordonnees-el i {
  color: #a8a7a7;
}

.coordonnees-el .fa, .coordonnees-el .fa-solid, .coordonnees-el .fa-brands {
  color: white;
}

.pres, .pres-fup {
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 16px;
  height: auto;
  overflow-wrap: anywhere;
  border: 2px solid rgba(153, 153, 153, 0);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.pres-name {
  color: white;
  word-break: break-word;
  font-family: "Instrument Sans", sans-serif !important;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 27px !important;
  margin-bottom: 6px;
}

.pres p {
  font-size: 15px !important;
}

.partner-container .pres {
  padding-top: 20px;
  padding-bottom: 22px;
}

.pres, .pres-fup {
  border-radius: 25px;
  background-color: #1f202350;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
}

.pres p, .pres-fup p {
  color: #9e9e9e;
}

.partner-image {
  background-color: #1a1b1d50;
  border: 2px solid rgba(61, 61, 61, 0.458);
  border-radius: 17px;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
  padding: 11px;
}

.page {
  margin-bottom: 12px;
}

.page a:hover {
  text-shadow: 1px 1px 10px rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  height: auto;
}

a {
  color: #ffffff;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  text-decoration: none;
}

.about-end {
  text-align: center;
}

body {
  width: 100%;
  background: radial-gradient(circle, rgba(138, 43, 226, 0.6), rgba(32, 0, 54, 0.15), transparent 70%), #070809;
  background-attachment: fixed;
  -webkit-background-attachment: fixed;
  animation: moveBackground 5s infinite alternate ease-in-out;
  -webkit-animation: moveBackground 5s infinite alternate ease-in-out;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: white;
  z-index: 4500;
  line-height: 1.47;
}

.popup {
  background-color: #1f2023a1;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-radius: 35px;
  border: 2px solid #333;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding: 23px;
  display: none;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  position: fixed;
  z-index: 6600;
  height: auto;
}

.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-direction: column;
}

@-webkit-keyframes moveBackground {
  0% {
    background-size: 180% 180%;
  }
  100% {
    background-size: 220% 220%;
  }
}

@keyframes moveBackground {
  0% {
    background-size: 180% 180%;
  }
  100% {
    background-size: 220% 220%;
  }
}

p, ul, li, code {
  font-size: 17px;
  font-family: "Plus Jakarta Sans", sans-serif;
}

h1, h2, h3, h4, h5 {
  font-family: 'DM Sans', sans-serif;
}

.required-fields {
  color: #ff8585;
}

.discord-title, .error-title {
  background: white;
  --webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Instrument Sans', sans-serif;
}

.discord-title-mobile {
  background: #9c9c9c;
  --webkit-background-clip: text;
  background-clip: text;
}

div.page-forms {
  padding-right: 7%;
  padding-left: 7%;
  width: 100%;
}

.about {
  text-align: justify;
  padding-left: 150px;
  padding-right: 150px;
}

.head {
  background-color: #ffe600;
  color: #000000;
}

img {
  max-width: 100%;
  height: auto;
}

.cat-separator {
  margin-top: 5%;
}

.titles {
  background: #f3ceff;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(33%, #f2daff), color-stop(50%, #b597c8), to(#aaaaab));
  background: linear-gradient(0deg, #f2daff 33%, #b597c8 50%, #aaaaab 100%);
  --webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 80px;
  margin-bottom: 0px;
  word-break: break-word;
  font-family: "Syne", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
}

.titles-ontop {
  background: #1010108d;
  border-radius: 50px;
  padding-inline: 13px;
  padding-block: 4px;
  border: 2px solid #67007c;
}

.titles-ontop-sect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  margin-bottom: -75px;
  margin-top: 150px;
}

.titles-desc {
  color: #d4c6d9;
  font-size: 16px;
  margin-bottom: 17px;
  text-align: center;
  width: 100%;
}

.credits {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-direction: column;
  width: 100%;
  padding-inline: 10%;
}

.credits-container {
  border-radius: 25px;
  background-color: #1f202350;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
  padding: 20px;
  margin-block: 12px;
}

#latest-commit {
  background-color: #151518c4;
  border-radius: 25px;
  border: 1px solid #333;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  margin: 5px;
  padding: 20px;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.blurred {
  -webkit-filter: blur(8px);
          filter: blur(8px);
}

.partner-category {
  font-size: 13px;
  border-radius: 7px;
  padding-inline: 7px;
  padding-block: 3px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 6px;
  -webkit-transform: translateY(-2px);
          transform: translateY(-2px);
}

.partner-classic {
  color: #ffffff;
  background: linear-gradient(135deg, #67158a, #a32aff);
}

.partner-orange {
  color: #d8ab78;
  background-color: #443727;
}

.partner-red {
  color: #d87878;
  background-color: #442727;
}

.docs {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.socials-container {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.coordonnees-container {
  word-break: break-word;
}

.fondator::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f521";
  margin-left: 5px;
  color: #8d8d8d;
}

.qrcode {
  border-radius: 13px;
  width: 305px;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.music-link:hover {
  cursor: pointer;
}

/**
Fin des styles génériques
========================================================================
**/
/**
========================================================================
Début des styles "grids"
**/
@-webkit-keyframes gridAnim {
  from {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes gridAnim {
  from {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}

.grid-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  -ms-flex-direction: row;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
}

/**
Fin des styles "grids"
========================================================================
**/
/**
========================================================================
Début des styles de la page "A PROPOS"
Lien : https://homebrewfrance.fr/a-propos
**/
.grid-downloads, .grid-shop {
  -webkit-animation-name: gridAnim;
          animation-name: gridAnim;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-fill-mode: backwards;
          animation-fill-mode: backwards;
  position: relative;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.grid-staff {
  height: auto;
  background-color: var(--main-color-block);
  border-radius: 38px;
  border: 2px solid #272727;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
  width: 355px;
  height: 285px auto;
  float: left;
  margin: 8px auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.grid-staff h3 {
  font-size: 22px;
  font-family: 'Instrument Sans';
  font-weight: 500;
}

.grid-staff .fa-crown {
  color: #a0a0a0;
}

.grid-staff small {
  color: #a3a3a3;
}

.grid-staff img {
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 25px;
  border: 2px solid rgba(121, 121, 121, 0.568);
}

.grid-staff .staff-desc-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.grid-staff .role {
  font-size: 14px;
  border-radius: 20px;
  margin-inline: 6px;
}

.grid-staff .modératrice, .grid-staff .modérateur {
  color: #74da87;
  background-color: #1c3521;
  border-radius: 7px;
  padding-inline: 5px;
  padding-block: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.grid-staff .administrateur {
  color: #9349b1;
  background-color: #301a38;
  border-radius: 7px;
  padding-inline: 5px;
  padding-block: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.grid-staff .helper {
  color: #3bb4b6;
  background-color: #113131;
  border-radius: 7px;
  padding-inline: 5px;
  padding-block: 2px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: translateY(5px);
          transform: translateY(5px);
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

/**
Fin des styles "A PROPOS"
========================================================================
**/
/**
========================================================================
Début des styles de la page "RESSOURCES"
Lien : https://homebrewfrance.fr/ressources
**/
.grid-downloads {
  height: auto;
  background-color: var(--main-color-block);
  border-radius: 38px;
  border: 2px solid #272727;
  -webkit-box-shadow: 0px 10px 15px -4px #0000005e;
          box-shadow: 0px 10px 15px -4px #0000005e;
  padding-block: 17px;
  padding-inline: 8px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-pack: center !important;
      -ms-flex-pack: center !important;
          justify-content: center !important;
  -webkit-box-align: center !important;
      -ms-flex-align: center !important;
          align-items: center !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -ms-flex-direction: column;
  height: auto !important;
}

.grid-downloads h3 {
  font-size: 25px;
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 500;
  word-break: break-all;
}

.grid-downloads h4  {
  color: #707070;
}

.grid-downloads img {
  margin-bottom: 6px;
}

.grid-downloads .qrcode-placeholder {
  color: #b7b7b7;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.grid-downloads .qrcode-placeholder:hover {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(214, 214, 214, 0.5);
}

.dsi-grid {
  background-image: url("https://cdn.homebrew-france.fun/telechargements/dsi.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.ds3-grid {
  background-image: url("https://cdn.homebrew-france.fun/telechargements/3ds.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.switch-grid {
  background-image: url("https://cdn.homebrew-france.fun/telechargements/switch.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.grid-staff .btn-container {
  margin-bottom: 4px;
}

.btn-container {
  margin-top: 15px;
}

#packSearch, #themeSearch, .search-icon {
  background: rgba(26, 28, 31, 0.26);
  border-radius: 15px !important;
  border: var(--main-border);
  padding-inline: 12px;
  padding-block: 6px;
  color: white;
  font-family: 'Plus Jakarta Sans';
  -webkit-transition: 0.3s;
  transition: 0.3s;
  font-size: 15px !important;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.tags-selector {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  justify-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 25px;
}

#themeSearch:focus, #packSearch:focus {
  outline: none;
  -webkit-transform: scale(1.03);
          transform: scale(1.03);
  -webkit-box-shadow: 0px 2px 3px #000000;
          box-shadow: 0px 2px 3px #000000;
}

#compteurResultats {
  font-size: 14px;
  margin-top: 5px;
  color: #8d8d8d;
}

.search-icon:hover {
  -webkit-transform: scale(1.09);
          transform: scale(1.09);
}

.search-icon:active {
  -webkit-transform: scale(0.98);
          transform: scale(0.98);
}

/**
Fin des styles "RESSOURCES"
========================================================================
**/
/*# sourceMappingURL=main.css.map */