/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  scroll-padding-top: 100px; /* Ajuste l'espace sous le menu sticky */

}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 14px;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
 
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #2a2a2a;
  font-family: 'Berkshire Swash', cursive; /* Application aux titres */
}


ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 28px;
  color: #7a7a7a;
}

p, .details {
  white-space: pre-line;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
Global Styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
}

::selection {
  background: #f0df45;
  color: #fff;
}

::-moz-selection {
  background: #eeb20c;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.border-button a {
  font-size: 15px;
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #ffffff;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  
  letter-spacing: 0.5px;
  transition: all .3s;
}

.border-button a:hover {
  background-color: #ffffff;
  color: #fbab11;
}

.main-button a {
  font-size: 15px;
  color: #fff;
  background-color: #fbab11;
  border: 1px solid #fbab11;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  
  letter-spacing: 0.5px;
  transition: all .3s;
}

.main-button a:hover {
  background-color: transparent;
  color: #fbab11;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 15px;
  text-transform: uppercase;
  color: #fbab11;
  font-weight: 400;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 36px;
  font-size: 30px;
  font-weight: 700;
  
  color: #212741;
}

.section-heading h4 em {
  color: #f8b705; /* Couleur jaune */
  font-style: normal; /* Suppression de l'italique */
  padding: 5px; /* Ajout d'un espace intérieur pour un meilleur rendu */
}

.section-heading p {
  margin-top: 30px;
}


/* 
---------------------------------------------
Header Style
--------------------------------------------- 
*/

.background-header {
  background-color: #fff;
  height: 70px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area {
  background-color: #fbab11;
  position: absolute;
  height: 70px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

@media (max-width: 768px) {
  .header-area {
    position: relative !important; /* Annule la fixation */
  }
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
  display: flex
}

.header-area .main-nav .logo {
  margin-top: 9px;
  flex-basis: 20%;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo img {
  max-width: 142px;
}

.background-header .main-nav .logo {
  width: 142px;
}

#main-logo {
  transition: transform 0.5s ease, opacity 0.5s ease;
  display: inline-block;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
  max-width: 13%;
}

#main-logo.shrinked {
  transform: scale(0.2) translateY(-30px);
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.7s ease;
  pointer-events: none;
}

#main-logo.hidden {
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

.header-area .main-nav .nav {
  flex-basis: 60%;
  height: 70px;
  margin-top: 0px;
  margin-right: 0px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.nav {
  justify-content: center;
}

.header-area .main-nav .nav li:first-child {
  padding-left: 60px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 60px;
}

.header-area .main-nav .nav li {
  padding-left: 30px;
  padding-right: 30px;
  background-color: #fbab11;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 400;
  font-size: 14px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 70px;
  line-height: 70px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .border-button {
  flex-basis: 20%;
  margin-top: 13px;
  text-align: right;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #fff;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #fff;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 2px;
  top: 25px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 160px;
  background-color: #fff;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 70px;
  border-radius: 0px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #fbab11!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 20px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 17px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #2a2a2a;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #2a2a2a;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #2a2a2a;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #2a2a2a;
}

.header-area.header-sticky {
  min-height: 70px;
}

.header-area.header-sticky .nav li a.active {
  color: #fff;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .nav {
    height: auto;
    flex-basis: 100%;
  }
  .header-area .main-nav .logo {
    position:static;
    left: 30px;
    top: 15px;
  }
  .background-header .main-nav .logo {
    top: 0px;
  }
  .background-header .main-nav .border-button {
    top: 0px !important;
  }
  .header-area .main-nav .border-button {
    position: absolute;
    top: 15px;
    right: 70px;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #fbab11!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f19f06;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 70px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #fbab11!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}


/*
--------------------------------------------
PopUp Style
--------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

section.popupBody {
  margin-top: 0px;
}

.popupContainer {
  position: absolute;
  width: 330px;
  height: auto;
  left: 45%;
  top: 60px;
  background: #FFF;
}

.btn {
  padding: 10px 20px;
  background: #fbab11;
  color: #fff;
  transition: all .3s;
}

.btn_red {
  background: #fbab11;
  color: #FFF;
}

.btn:hover {
  background: #E4E4E2;
}

.btn_red:hover {
  color: #2a2a2a;
  background: #E4E4E2;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #fbab11;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;
  
  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}
/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #fbab11;
  transition: all .3s;
}
/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}


/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-image: url(../images/banner-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 290px;
  padding-bottom: 240px;
  text-align: center;
  background-color: #2a2a2a;
}

.main-banner2 {
  background-image: url(../images/banner-bg_couleur.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 290px;
  padding-bottom: 240px;
  text-align: center;
  background-color: #2a2a2a;
}

.main-banner h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
}

.main-banner h2 em {
  font-style: normal;
  color: #f8b705;
}

.main-banner p {
  color: #fff;
  padding: 30px 0px;
  margin: 40px 75px 0px 75px;
  border-top: 1px solid rgba(250,250,250,0.2);
}

.main-banner .buttons {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

.main-banner .big-border-button a {
  font-size: 20px;
  color: #ffffff;
  background-color: rgba(255, 187, 0, 0.5); /* Noir à 50% d'opacité */
  padding: 15px 35px; /* Un peu plus de padding horizontal */
  display: flex; /* Flexbox pour aligner parfaitement le contenu */
  align-items: center; /* Centre verticalement */
  justify-content: center; /* Centre horizontalement */
  text-align: center; /* Assure l'alignement du texte */
  border-radius: 15px;
  font-weight: 500;
  margin-right: 15px;
  letter-spacing: 0.5px;
  transition: all .4s;
  min-width: 150px; /* Évite que le bouton soit trop petit */
}

.main-banner .big-border-button a:hover {
  background-color: #fff;
  color: #fbab11;
}


.main-banner .icon-button a {
  margin-top: 20px;
  display: inline-block;
  margin-left: 15px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  transition: all .3s;
}

.main-banner .icon-button a i {
  margin-right: 6px;
  font-size: 16px;
}

.main-banner .icon-button a:hover {
  color: #fbab11;
}



/*
---------------------------------------------
featured
---------------------------------------------
*/ 

section.featured-items {
  margin-top: -150px;
}

.featured-items .item .thumb {
  position: relative;
  display: inline-block; /* Adapte la taille au contenu */
  border-radius: 15px; /* Coin arrondi */
  overflow: visible; /* Permet à l'ombre de dépasser les limites du conteneur */
}

.featured-items .item .thumb img {
  width: 100%; /* L'image remplit le conteneur */
  height: auto; /* Maintient les proportions */
  border-radius: 15px; /* Coin arrondi pour l'image */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); /* Ombre sous l'image */
  display: block; /* Évite les espaces blancs sous l'image */
}

.featured-items .item .thumb:hover .hover-effect {
  top: 0;
  opacity: 1;
}

.featured-items .item .thumb .hover-effect {
  background-color: rgba(250, 250, 250, 0.92);
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%; /* Correspond à la largeur de l'image */
  height: 100%; /* Correspond à la hauteur de l'image */
  border-radius: 15px; /* Garder l'arrondi pour correspondre à l'image */
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.featured-items .item .thumb .hover-effect .content {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 15px;
}


.featured-items .item .thumb .hover-effect .content h4 {
  font-size: 20px;
  color: #fbab11;
  margin-bottom: 22px;
}

.featured-items .item .thumb .hover-effect .content h4 i {
  font-size: 14px;
  margin-left: 5px;
  font-weight: 600;
}

.featured-items .item .thumb .hover-effect .content h4 span {
  font-size: 14px;
  font-weight: 500;
  color: #afafaf;
}

.featured-items .item .thumb .hover-effect .content ul li {
  font-size: 15px;
  font-weight: 400;
  color: #afafaf;
  margin-bottom: 7px;
}

.featured-items .item .thumb .hover-effect .content ul li:last-child {
  margin-bottom: 0px;
}

.featured-items .item .thumb .hover-effect .content ul li span {
  color: #2a2a2a;
  font-weight: 500;
}

.featured-items .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-35px);
}

.featured-items .owl-nav .owl-prev {
  position: absolute;
  left: -70px;
}

.featured-items .owl-nav .owl-next {
  position: absolute;
  right: -70px;
}

.featured-items .owl-nav .owl-prev span,
.featured-items .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #fff;
  background-color: #fbab11;
  border-radius: 50%;
  opacity: 0.75;
  transition: all .3s;
}

.featured-items .owl-nav .owl-prev span:hover,
.featured-items .owl-nav .owl-next span:hover {
  opacity: 1;
}


/*
---------------------------------------------
popular categories
---------------------------------------------
*/ 

section.popular-categories {
  padding: 0px 65px;
}

section.popular-categories .main-button {
  text-align: right;
}

.popular-item {
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 30px;
}

.popular-item .top-content {
  display: flex;
  margin-bottom: 30px;
}

.popular-item .icon {
  background-color: #f7f7f7;
  width: 75px;
  height: 75px;
  display: inline-block;
  text-align: center;
  line-height: 75px;
  border-radius: 10px;
  margin-right: 20px;
}

.popular-item .icon img {
  max-width: 36px;
  border-radius: 0px;
}

.popular-item h4 {
  font-size: 20px;
  margin-top: 5px;
  font-weight: 700;
  margin-bottom: 12px;
}

.popular-item span em {
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  padding: 5px 8px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #fbab11;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.06);
  margin-right: 10px;
}

.popular-item span {
  color: #afafaf;
  font-weight: 400;
}

.popular-item img {
  border-radius: 15px;
}

.popular-item .thumb {
  position: relative;
  overflow: hidden;
}

.popular-item .thumb span.category {
  font-size: 15px;
  color: #fbab11;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  left: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.popular-item .thumb span.likes {
  font-size: 15px;
  color: #fbab11;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  right: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.popular-item .thumb:hover span.category,
.popular-item .thumb:hover span.likes {
  top: 15px;
  opacity: 1;
}

.popular-item .border-button {
  margin-top: 30px;
}

.popular-item .border-button a {
  width: 100%;
  text-align: center;
}


/*
---------------------------------------------
closed contests
---------------------------------------------
*/ 

section.closed-contests {
  background-image: url(../images/closed-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
}

.closed-item .thumb {
  position: relative;
  overflow: hidden;
}

.closed-item .thumb img {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.closed-item .thumb span.winner {
  font-size: 15px;
  color: #fbab11;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  left: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.closed-item .thumb span.winner em {
  color: #afafaf;
  font-style: normal;
}

.closed-item .thumb span.price {
  font-size: 15px;
  color: #fbab11;
  background-color: #fff;
  border-radius: 10px;
  font-weight: 500;
  position: absolute;
  right: 15px;
  top: -60px;
  padding: 8px 12px;
  opacity: 0;
  transition: all .3s;
}

.closed-item .thumb span.price em {
  color: #afafaf;
  font-style: normal;
}

.closed-item .thumb:hover span.price,
.closed-item .thumb:hover span.winner {
  opacity: 1;
  top: 15px;
}

.closed-item .down-content {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  background-color: #fff;
  padding: 25px 30px;
}

.closed-item .down-content h4.pics {
  text-align: right;
}

.closed-item .down-content h4 {
  font-size: 18px;
  line-height: 32px;
}

.closed-item .down-content h4 span {
  font-size: 15px;
  color: #afafaf;
}

.closed-contests .owl-nav {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-35px);
}

.closed-contests .owl-nav .owl-prev {
  position: absolute;
  left: -70px;
}

.closed-contests .owl-nav .owl-next {
  position: absolute;
  right: -70px;
}

.closed-contests .owl-nav .owl-prev span,
.closed-contests .owl-nav .owl-next span  {
  width: 46px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
  display: inline-block;
  color: #afafaf;
  background-color: #fff;
  border-radius: 50%;
  transition: all .3s;
}

.closed-contests .owl-nav .owl-prev span:hover,
.closed-contests .owl-nav .owl-next span:hover {
  background-color: #fbab11;
  color: #fff;
}

.closed-contests .border-button {
  margin-top: 20px;
}


/*
---------------------------------------------
pricing-plans
---------------------------------------------
*/ 

.pricing-item {
  text-align: center;
  padding: 30px;
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  transition: all .5s;
}

.pricing-item:hover {
  border: 1px solid transparent;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

.pricing-item:hover h4 {
  color: #fbab11;
}

.pricing-item img {
  max-width: 240px;
}

.pricing-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #d4d4d4;
  transition: all .5s;
}

.pricing-item ul li {
  font-size: 15px;
  color: #fbab11;
  margin-bottom: 10px;
}

.pricing-item ul.first-plan li:nth-child(5),
.pricing-item ul.first-plan li:nth-child(4) {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item ul.second-plan li:nth-child(5) {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item span.price {
  font-size: 30px;
  color: #fbab11;
  font-weight: 700;
  display: inline-block;
  margin-top: 30px;
}

.pricing-item .border-button {
  margin-top: 30px;
}


/* 
---------------------------------------------
footer 
--------------------------------------------- 
*/

footer.no-space {
  margin-top: 0px;
}

footer {
  background-color: #fbab11;
  text-align: center;
  padding: 25px 0px;
  margin-top: 120px;
}

footer p {
  color: #fff;
  font-weight: 300;
}

footer p a {
  color: #fff;
  font-weight: 500;
}



/* 
---------------------------------------------
page heading
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/heading-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding-top: 200px;
  padding-bottom: 130px;
  text-align: center;
  background-color: #2a2a2a;
}

.page-heading h2 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  line-height: 74px;
}

.page-heading h2.space-need {
  padding: 0px 30px;
}

.page-heading h2 em {
  font-style: normal;
  color: #fbab11;
}

.page-heading p {
  color: #fff;
  padding: 30px 0px;
  margin: 40px 75px 0px 75px;
  border-top: 2px solid rgba(250,250,250,0.2);
}

.page-heading h6 {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 2px solid rgba(250,250,250,0.2);
  font-size: 20px;
  color: #fff;
}

.page-heading .main-content {
  margin-top: 30px;
}

.page-heading .main-content .days, .page-heading .main-content .hours, .page-heading .main-content .minutes, .page-heading .main-content .seconds {
  width: 20%;
}
.page-heading .main-content .counter div {
  margin: 0 2px;
  display: inline-block;
  text-align: center; 
}
@media (min-width: 992px) {
  .page-heading .main-content .counter div {
    margin: 0px 10px; 
  } 
}
.page-heading .main-content .counter div .value {
  font-size: 50px;
  color: #fff;
  font-weight: 700;
  margin-top: 0px;
  margin-bottom: 10px;
  display: inline-block;
  position: relative; 
}

.page-heading .main-content .counter div span {
  display: block;
  font-size: 15px;
  color: #fff;
  font-weight: 500;
}


/* 
---------------------------------------------
Contests Page
--------------------------------------------- 
*/

#search-form {
  margin-top: -69px;
  background-color: #fff;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

#search-form label {
  font-size: 15px;
  color: #2a2a2a;
  font-weight: 500;
}

#search-form input,
#search-form select {
  background-color: #f7f7f7;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  bordeR: none;
  outline: none;
  padding: 0px 15px;
  font-size: 15px;
  color: #afafaf;
}

#search-form input::placeholder {
  color: #afafaf;
}

#search-form button {
  margin-top: 30px;
  font-size: 15px;
  color: rgb(255, 255, 255);
  background-color: rgb(0, 189, 254);
  border: 1px solid rgb(0, 189, 254);
  padding: 10px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  
  letter-spacing: 0.5px;
  transition: all 0.3s ease 0s;
}

#search-form button:hover {
  background-color: transparent;
  color: #fbab11;
}

.photos-videos .item {
  margin-bottom: 30px;
}

.photos-videos .item .thumb {
  position: relative;
  overflow: hidden;
}

.photos-videos .item .thumb img {
  border-radius: 15px;
}

.photos-videos .item .thumb .play-button a {
  width: 46px;
  height: 46px;
  background-color: #fff;
  border-radius: 50%;
  color: #fbab11;
  text-align: center;
  line-height: 46px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-23px,-23px);
  opacity: 0;
  transition: all .3s;
}

.photos-videos .item .thumb:hover .play-button a {
  opacity: 1;
}

.photos-videos .item .thumb .top-content {
  position: absolute;
  display: inline-block;
  top: 30px;
  left: 30px;
  right: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 15px 25px;
}

.photos-videos .item .thumb .top-content h4 {
  display: inline;
  font-size: 20px;
  font-weight: 700;
}

.photos-videos .item .thumb .top-content h6 {
  display: inline;
  float: right;
  margin-top: 5px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
}

.photos-videos .item .down-content h2 {
  font-size: 20px;
  color: #afafaf;
  font-weight: 700;
  margin-top: 20px;
  margin-left: 30px;
}

.photos-videos .item .down-content h6 {
  text-align: right;
  font-size: 15px;
  color: #fbab11;
  font-weight: 500;
  margin-top: 24px;
  margin-right: 30px;
}

.contest-win {
  padding: 0px 65px;
}

.contest-win .contest-item {
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  padding: 30px;
}

.contest-win .contest-item .top-content {
  margin-bottom: 30px;
}

.contest-win .contest-item .top-content span.award {
  font-size: 15px;
  color: #fff;
  background-color: #fbab11;
  border-radius: 10px;
  padding: 8px 12px;;
}

.contest-win .contest-item .top-content span.price {
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #fbab11;
}

.contest-win .contest-item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 20px;
}

.contest-win .contest-item img {
  border-radius: 15px;
}

.contest-win .contest-item .info {
  display: flex;
  width: 100%;
}

.contest-win .contest-item span.participants {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
}

.contest-win .contest-item span.participants img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.contest-win .contest-item span.submittions {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
  display: inline-block;
  text-align: right;
}

.contest-win .contest-item span.submittions img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.contest-win .contest-item .border-button {
  margin-top: 25px;
  margin-bottom: 20px;
}

.contest-win .contest-item .border-button a {
  width: 100%;
  text-align: center;
}

.contest-win .contest-item span.info {
  font-size: 15px;
  display: inline-block;
  text-align: center;
  color: #afafaf;
}

.contest-win ul.pagination {
  justify-content: center;
  margin-top: 60px;
}

.contest-win ul.pagination li {
  margin: 0px 7px;
}

.contest-win ul.pagination li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border: 1px solid #fbab11;
  border-radius: 50%;
  color: #fbab11;
  font-size: 20px;
  font-weight: 600;
}

.contest-win ul.pagination li.active a {
  background-color: #fbab11;
  color: #fff;
}

.contest-win ul.pagination li:last-child a,
.contest-win ul.pagination li:first-child a {
  border-color: transparent;
}


/* 
---------------------------------------------
Contest Details Page
--------------------------------------------- 
*/

.contest-details .top-content {
  background-color: #e7f9ff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding: 30px 45px;
  margin-top: -45px;
}

.contest-details .top-content ul {
  text-align: right;
}

.contest-details .top-content ul li {
  display: inline-block;
}

.contest-details .top-content ul li {
  font-size: 18px;
  font-weight: 500;
  color: #fbab11;
  margin-left: 15px;
}

.contest-details .top-content ul li:first-child {
  margin-left: 0px;
}

.contest-details .top-content ul li span {
  font-size: 15px;
  color: #afafaf;
}

.contest-details .top-content span.open {
  font-size: 15px;
  background-color: #fbab11;
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  margin-right: 20px;
}

.contest-details .top-content span.wish-list {
  font-size: 15px;
  font-weight: 500;
  color: #fbab11;
}

.contest-details .top-content span.wish-list i {
  margin-right: 5px;
}

.contest-details .main-content {
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 80px 60px;
  box-shadow: 0px 10px 10px rgba(0, 0, 0, 0.06);
}

.contest-details .main-content h4 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 25px;
} 

.contest-details .main-content h6 {
  font-size: 15px;
  font-weight: 600;
}

.contest-details .main-content h6.second-title {
  margin-top: 30px;
}

.contest-details .main-content p {
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
  padding-left: 22px;
}

.contest-details .main-content p:before {
  width: 7px;
  height: 7px;
  background-color: #afafaf;
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  border-radius: 50%;
}

.contest-details .main-content h4.second-title {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #d4d4d4;
}

.contest-details .main-content .item span {
  background-color: #f0f0f0;
  border-radius: 10px;
  font-size: 14px;
  color: #2a2a2a;
  font-weight: 600;
  width: 46px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  margin-right: 15px;
  float: left;
}

.contest-details .main-content .item h5 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.contest-details .main-content .item h6 {
  font-size: 15px;
  font-weight: 400;
  color: #afafaf;
}

.contest-details .main-content .main-button {
  margin-top: 60px;
}

.contest-details .main-content .main-button a {
  width: 100%;
  font-size: 20px;
  padding: 15px;
  text-align: center;
}

.contest-waiting h5 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 35px;
}

.contest-waiting .waiting-item img {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.contest-waiting .waiting-item .down-content {
  background-color: #f7f7f7;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding: 25px;
}

.contest-waiting .waiting-item .down-content h4 {
  font-size: 15px;
  color: #fbab11;
  font-weight: 700;
  margin-bottom: 22px;
}

.contest-waiting .waiting-item .down-content p {
  line-height: 20px;
  margin-bottom: 20px;
}

.contest-waiting .waiting-item .down-content span.price,
.contest-waiting .waiting-item .down-content span.deadline {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
}

.contest-waiting .waiting-item .down-content span.deadline {
  float: right;
}

.contest-waiting .waiting-item .down-content span.price em,
.contest-waiting .waiting-item .down-content span.deadline em {
  font-style: normal;
  color: #fbab11;
}

.contest-waiting ul.pagination {
  justify-content: center;
  margin-top: 60px;
}

.contest-waiting ul.pagination li {
  margin: 0px 7px;
}

.contest-waiting ul.pagination li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 44px;
  border: 1px solid #fbab11;
  border-radius: 50%;
  color: #fbab11;
  font-size: 20px;
  font-weight: 600;
}

.contest-waiting ul.pagination li.active a {
  background-color: #fbab11;
  color: #fff;
}

.contest-waiting ul.pagination li:last-child a,
.contest-waiting ul.pagination li:first-child a {
  border-color: transparent;
}



/* 
---------------------------------------------
Categories Page
--------------------------------------------- 
*/

.top-categories {
  margin-top: -100px;
}

.top-categories .item {
  text-align: center;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  border-radius: 15px;
  padding: 30px;
}

.top-categories .item .icon {
  background-color: #f7f7f7;
  width: 75px;
  height: 75px;
  display: inline-block;
  text-align: center;
  line-height: 75px;
  border-radius: 10px;
}

.top-categories .item .icon img {
  max-width: 36px;
  border-radius: 0px;
}

.top-categories .item h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 15px;
  margin-bottom: 10px;
}

.top-categories .item span {
  font-size: 15px;
  color: #afafaf;
  display: block;
}

.top-categories .item span.counter {
  margin-top: 10px;
  font-style: normal;
  font-size: 15px;
  font-weight: 500;
  display: inline-block;
  padding: 5px 8px;
  border-top-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: #fbab11;
  background-color: #fff;
  box-shadow: 0px 0px 10px rgb(0 0 0 / 6%);
  margin-right: 10px;
}

.featured-contests .item  {
  margin-bottom: 30px;
}

.featured-contests .item .thumb {
  position: relative;
  overflow: hidden;
}

.featured-contests .item .thumb  img {
  border-radius: 15px;
}

.featured-contests .item .hover-effect {
  position: absolute;
  right: -100%;
  bottom: 15px;
  transition: all .5s;
}

.featured-contests .item .thumb:hover .hover-effect {
  right: 15px;
  bottom: 15px;
}

.featured-contests .item .hover-effect .content {
  background-color: #fff;
  border-radius: 15px;
  padding: 25px 20px;
}

.featured-contests .item .hover-effect .content .top-content {
  margin-bottom: 20px;
}

.featured-contests .item .hover-effect .content .top-content span.award {
  font-size: 15px;
  color: #fff;
  background-color: #fbab11;
  border-radius: 10px;
  padding: 8px 12px;;
}

.featured-contests .item .hover-effect .content .top-content span.price {
  float: right;
  font-size: 20px;
  font-weight: 700;
  color: #fbab11;
}

.featured-contests .item .hover-effect .content h4 {
  font-size: 18px;
  font-weight: 700;
  margin-top: 25px;
  margin-bottom: 20px;
}

.featured-contests .item .hover-effect .content img {
  border-radius: 15px;
}

.featured-contests .item .hover-effect .content .info {
  display: flex;
  width: 100%;
}

.featured-contests .item .hover-effect .content span.participants {
  font-size: 13px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
}

.featured-contests .item .hover-effect .content span.participants img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.featured-contests .item .hover-effect .content span.submittions {
  font-size: 15px;
  font-weight: 500;
  color: #afafaf;
  flex-basis: 50%;
  display: inline-block;
  text-align: right;
}

.featured-contests .item .hover-effect .content span.submittions img {
  border-radius: 0px;
  max-width: 24px;
  margin-bottom: 8px;
}

.featured-contests .item .hover-effect .content .border-button {
  margin-top: 15px;
  margin-bottom: 0px;
}

.featured-contests .item .hover-effect .content .border-button a {
  width: 100%;
  text-align: center;
  padding: 10px 20px;
}

.featured-contests .item .hover-effect .content span.info {
  font-size: 15px;
  display: inline-block;
  text-align: center;
  color: #afafaf;
}

.testimonials {
  background-color: #f1fbff;
  padding: 120px 0px;
}

.testimonials .item {
  border: 1px solid #e0e0e0; 
  padding: 60px 60px 100px 60px;
  border-radius: 15px;
}

.testimonials .item .content {
  display: flex;
}

.testimonials .item .content .image {
  min-width: 240px;
}

.testimonials .item .content .image img {
  border-radius: 15px;
}

.testimonials .item p {
  font-size: 20px;
  font-weight: 600;
  color: #afafaf;
}

.testimonials .item .content .left-content {
  margin-right: 45px;
}

.testimonials .item .content .left-content h4 {
  display: inline-block;
  margin-top: 25px;
  padding-top: 25px;
  border-top: 1px solid #dfdfdf;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px;
}

.testimonials .item .content .left-content span {
  display: block;
  font-size: 15px;
  color: #afafaf;
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: -70px;
  margin-bottom: 120px;
  position: relative;
  z-index: 555;
}

.testimonials .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  border: 1px solid #afafaf;
  border-radius: 50%;
  margin: 0px 3px;
}

.testimonials .owl-dots .active {
  background-color: #fbab11;
  border: 1px solid #fbab11;
}


/* 
---------------------------------------------
Users Page
--------------------------------------------- 
*/

.user-info {
  text-align: center;
  margin-top: -85px;
}

.user-info h4 {
  font-size: 30px;
  font-weight: 700;
  margin-top: 30px;
}

.user-info .avatar img {
  max-width: 170px;
  border-radius: 50%;
  border: 1px solid #afafaf;
}

.user-info .info {
  margin-top: 30px;
  padding: 30px;
  border-radius: 15px;
  border: 1px solid #afafaf;
}

.user-info .info h4 {
  margin-top: 0px;
}

.user-info .info h6 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.user-info .info span {
  font-size: 15px;
  color: #afafaf;
  display: block;
  margin-top: 5px;
}

section.portfolio {
  padding: 80px 0px;
  background-color: #f7f7f7;
}

section.portfolio .thumb {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 30px;
}

section.portfolio .thumb:hover .hover-effect {
  opacity: 1;
  visibility: visible;
}

section.portfolio .thumb .hover-effect {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(42, 42, 42, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: all .3s;
}

section.portfolio .thumb .hover-effect .content {
  text-align: center;
  padding: 30px;
  display: inline-block;
  width: 100%;
}

section.portfolio .thumb .hover-effect .content h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}

section.portfolio .thumb .hover-effect .content span {
  font-size: 15px;
  color: #fff;
  margin: 10px;
}

section.portfolio .thumb .hover-effect .content span em {
  font-style: normal;
  font-weight: 700;
}

section.portfolio .thumb .hover-effect .content ul {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

section.portfolio .thumb .hover-effect .content ul li {
  display: inline-block;
  margin: 0px 5px;
}

section.portfolio .thumb .hover-effect .content ul li a {
  width: 46px;
  height: 46px;
  display: inline-block;
  text-align: center;
  line-height: 46px;
  border-radius: 10px;
  background-color: #fff;
  color: #2a2a2a;
  font-size: 15px;
  transition: all .3s;
}

section.portfolio .thumb .hover-effect .content ul li a:hover {
  background-color: #fbab11;
  color: #fff;
}

section.portfolio .main-button {
  text-align: center;
  margin-top: 30px;
}

section.contact-us .info-item {
  text-align: center;
  padding: 30px;
  border-radius: 15px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.contact-us .info-item i {
  font-size: 32px;
  background-color: #fbab11;
  color: #fff;
  width: 80px;
  height: 80px;
  display: inline-block;
  text-align: center;
  line-height: 80px;
  border-radius: 50%;
  margin-bottom: 25px;
}

section.contact-us .info-item h4 {
  font-size: 25px;
  color: #2a2a2a;
  font-weight: 700;
  margin-bottom: 12px;
}

section.contact-us .info-item a {
  font-size: 15px;
  font-weight: 400;
  color: #2a2a2a;
  transition: all 0.3s;
}

section.contact-us .info-item a:hover {
  color: #fbab11;
}

#contact {
  margin-top: 60px;
}

#contact input {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  color: #2a2a2a;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
  transition: all .3s;
}

#contact textarea {
  width: 100%;
  height: 180px;
  max-height: 24px;
  min-height: 150px;
  background-color: #f7f7f7;
  color: #2a2a2a;
  border-radius: 10px;
  border: none;
  padding: 15px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
  transition: all .3s;
}

#contact input:focus,
#contact textarea:focus {
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.06);
}

#contact input::placeholder, 
#contact textarea::placeholder {
  color: #212741;
}
#contact button.orange-button {
  font-size: 14px;
  width: 100%;
  text-align: center;
  color: #fff;
  background-color: #fbab11;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 10px;
  font-weight: 500;
  
  letter-spacing: 0.5px;
  border: 1px solid #fbab11;
  transition: all .3s;
}

#contact button.orange-button:hover {
  background-color: transparent;
  border: 1px solid #fbab11;
  color: #fbab11;
}


/* 
---------------------------------------------
Responsive Style
--------------------------------------------- 
*/

body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }
  .testimonials .item .content {
    display: inline-block;
    text-align: center;
  }
  .testimonials .item .content .image {
    margin-top: 30px;
  }
  .testimonials .item .content .left-content {
    margin-right: 0px;
  }
  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -10px !important;
  }
  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -10px !important;
  }
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:first-child {
    padding-left: 15px !important;
  }
  .header-area .main-nav .nav li:last-child {
    padding-right: 15px !important;
  }
  .header-area .main-nav .nav li ul li:first-child {
    padding-left: 0px !important;
  }
  .header-area .main-nav .nav li ul li:last-child {
    padding-right: 0px !important;
  }
  .border-button a {
    font-size: 14px;
    padding: 10px 20px;
  }
  .header-area .main-nav .logo {
    margin-right: 5px;
  }
  .section-heading {
    text-align: center;
  }
  section.popular-categories .main-button {
    text-align: center;
    margin-top: -30px;
  }
  section.popular-categories .popular-item {
    margin-top: 30px;
  }
  .contest-win .contest-item {
    margin-bottom: 30px;
  }
  .contest-details .top-content {
    text-align: center;
  }
  .contest-details .top-content ul {
    text-align: center;
    margin-top: 30px;
  }
  .contest-details .top-content ul li:first-child {
    margin-left: 10px;
  }
  .contest-details .top-content ul li {
    margin: 0px 10px;
  }
  .contest-details .item {
    margin-bottom: 20px;
  }
  .contest-waiting .waiting-item {
    margin-bottom: 30px;
  }
  .top-categories .item,
  section.contact-us .info-item {
    margin-bottom: 15px;
  }
  section.popular-categories,
  .contest-win {
    padding: 0px;
  }
  .pricing-item {
    margin-bottom: 15px;
  }
  .featured-contests .item .hover-effect .content .info {
    display: flex !important;
  }
}

@media (max-width: 1200px) {
  .featured-items .owl-nav .owl-next,
  .closed-contests .owl-nav .owl-next {
    right: -25px;
  }
  .featured-items .owl-nav .owl-prev,
  .closed-contests .owl-nav .owl-prev {
    left: -25px;
  }
  .featured-contests .item .hover-effect .content .info {
    display: none;
  }
}

/* Ajouts */
.logotitre {
  all: unset; /* Réinitialise les styles par défaut de <h2> */
  display: block;
  font-size: 4rem; /* Texte plus grand */
  color: #f89517 !important;
  font-weight: 900 !important; /* Ultra-gras */
  text-shadow: 
    -3px -3px 0 #ffffff,
    3px -3px 0 #ffffff,
    -3px 3px 0 #ffffff,
    3px 3px 0 #ffffff,
    0px 0px 5px #ffffff,
    5px 5px 10px rgba(0, 0, 0, 0.6) !important; /* Ombre portée */
  font-family: 'Arial Black', sans-serif !important;
  text-align: center; /* Centrer le texte */
  position: relative; /* Garde le texte au-dessus des bulles */
  z-index: 1; /* S'assurer que le texte passe au-dessus des bulles */
}

.logotitre2 {
  all: unset; /* Réinitialise les styles par défaut de <h2> */
  display: block;
  font-size: 3rem; /* Texte plus grand */
  color: #f89517 !important;
  font-weight: 700 !important; /* gras */
  text-shadow: 
    -2px -2px 0 #ffffff,
    2px -2px 0 #ffffff,
    -2px 2px 0 #ffffff,
    2px 2px 0 #ffffff,
    0px 0px 3px #ffffff,
    3px 3px 7px rgba(0, 0, 0, 0.6) !important; /* Ombre portée */
  font-family: 'Arial Black', sans-serif !important;
  text-align: center; /* Centrer le texte */
  position: relative; /* Garde le texte au-dessus des bulles */
  z-index: 1; /* S'assurer que le texte passe au-dessus des bulles */
}

.bubbles {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1; /* Les bulles passent sous le texte */
}

.bubbles span {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: bubble 2s infinite ease-in-out;
  pointer-events: none;
}

@keyframes bubble {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-20%);
    opacity: 0;
  }
}

.imageeffet {
  display: inline-block; /* Assure que l'image s'affiche correctement */
  overflow: visible; /* Permet à l'image d'être visible même en mouvement */
  margin-bottom: 20px; /* Augmenter la marge pour éviter la coupe */
  transform: translateY(0px);
  -webkit-animation: float 6s ease-in-out infinite;
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Ajout d'un correctif spécifique pour les écrans mobiles */
@media (max-width: 768px) {
  .imageeffet {
    margin-bottom: 30px; /* Augmente l'espace sous l'image sur mobile */
  }
}


/* effets de menu */
/* Style général des liens */
.nav a {
  text-decoration: none; /* Supprime le soulignement par défaut */
  position: relative; /* Nécessaire pour les effets */
  display: inline-block; /* Pour l'effet soulignement */
  transition: color 0.3s ease, transform 0.3s ease; /* Effet de transition fluide */
  text-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3) !important; /* Légère ombre intérieure */
}

/* Effet au survol */
.nav a:hover {
  color: #000000 !important; /* Change la couleur du texte */
  font-weight: 700;
  transform: scale(1.2); /* Légère augmentation de taille */
}

/* Ajout d'un soulignement animé */
.nav a::after {
  content: ""; /* Crée un élément pseudo pour l'animation */
  position: absolute;
  bottom: -3px; /* Position sous le texte */
  left: 0;
  width: 0;
  height: 3px; /* Épaisseur du soulignement */
  background-color: #f39c12; /* Couleur de l'animation */
  transition: width 0.3s ease; /* Animation fluide */
}

/* Effet d'agrandissement au survol */
.nav a:hover::after {
  width: 100%; /* Soulignement complet */
}

/* Effet pour l'élément actif */
.nav a.active {
  
  color: #000000 !important; /* Change la couleur du texte */
  font-weight: 900;
  transform: scale(1.2); /* Légère augmentation de taille */
}

.nav a.active::after {
  width: 100%; /* Soulignement actif complet */
  color: #000000 !important; /* Change la couleur du texte */
  font-weight: 900;
  transform: scale(1.2); /* Légère augmentation de taille */
}

.nav a.active:hover {
  color: #000000 !important; /* Change la couleur du texte */
  font-weight: 900;
  transform: scale(1.2); /* Légère augmentation de taille */
}

/* Effet clic avec ombre */
.nav a:active {
  transform: scale(0.95); /* Effet de réduction légère au clic */
  text-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3) !important; /* Légère ombre intérieure */
}

#category-content {
  margin-top: 20px; /* Ajoute un petit espace sous le menu */
}

/* Styles pour les catégories */
#category-thumbnails {
  display: flex;
  flex-wrap: wrap; /* Permet aux cartes de passer à la ligne */
  gap: 15px;
  padding: 15px;
  justify-content: space-between;
}

#category-thumbnails .category-card {
  border-radius: 15px;
  flex: 0 0 calc(100% / 7 - 15px); /* 7 cartes sur les grands écrans */
  max-width: calc(100% / 7 - 15px); /* Limite la largeur */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  background: #fff;
  padding: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Assure que l'effet reste dans les limites */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#category-thumbnails .category-card:hover {
  transform: scale(1.05); /* Augmente légèrement la taille */
}

#category-thumbnails img {
  border-radius: 15px;
  max-width: 100%;
  height: auto;
  margin: auto;
  display: block;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

#category-thumbnails .category-card:hover img {
  transform: scale(1.1); /* Légèrement agrandit l'image au survol */
}

#category-thumbnails h5 {
  margin-top: 10px;
}

/* Responsive Design */
@media (max-width: 1200px) {
  #category-thumbnails .category-card {
    flex: 0 0 calc(100% / 5 - 15px); /* 5 cartes par ligne */
    max-width: calc(100% / 5 - 15px);
  }
}

@media (max-width: 992px) {
  #category-thumbnails .category-card {
    flex: 0 0 calc(100% / 3 - 15px); /* 3 cartes par ligne */
    max-width: calc(100% / 3 - 15px);
  }
}

@media (max-width: 768px) {
  #category-thumbnails .category-card {
    flex: 0 0 calc(50% - 15px); /* 2 cartes par ligne */
    max-width: calc(50% - 15px);
  }
}

@media (max-width: 576px) {
  #category-thumbnails .category-card {
    flex: 0 0 100%; /* 1 carte par ligne */
    max-width: 100%;
  }
}
@media (max-width: 576px) {
  #category-thumbnails {
    padding: 10px 20px;
  }
}
@media (max-width: 768px) {
  body, html {
    overflow-x: hidden;
  }

  #beer-page-container {
    padding: 10px !important;
  }
}

@media (max-width: 768px) {
  .hover-effect {
    display: none !important;
  }
}
@media (max-width: 576px) {
  .lightbox-content img {
    max-height: 80vh;
    width: auto;
  }
}

#category-main-image {
  max-width: 100%; /* L'image ne dépasse pas la largeur de sa colonne */
  max-height: 150px; /* Limite la hauteur */
  object-fit: cover; /* Maintient le contenu de l'image dans le cadre */
}

.category-card {
  position: relative; /* Nécessaire pour que .badge soit bien positionnée */
}

.category-card img {
  transition: filter 0.3s ease; /* Animation fluide pour la désaturation */
}

.category-card.dimmed img {
filter: grayscale(100%); /* Passe l'image en noir et blanc */
opacity: 0.5; /* Réduit légèrement la visibilité pour renforcer l'effet */
}

#beer-page-container {
  display: flex; /* Dispose la liste et les détails côte à côte */
  gap: 15px; /* Espace entre la liste et les détails */
  margin: 0 auto; /* Centre tout le conteneur */
  max-width: 1200px; /* Limite la largeur totale de la page */
  padding: 15px; /* Ajoute un padding autour du contenu */
}

#beer-list-container {
  flex: 0 0 25%; /* Occupe 25% de la largeur */
  max-width: 25%; /* Limite la largeur maximale */
  border-right: 1px solid #ddd; /* Ajoute une bordure droite pour délimiter */
  height: 100vh; /* Occupe toute la hauteur de l'écran */
  overflow-y: auto; /* Permet le défilement vertical si nécessaire */
  padding: 15px; /* Ajoute du padding intérieur */
  margin-left: 15px; /* Ajoute une marge à gauche */
  background-color: #e7e5d7;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre */
  font-size: medium;
}

/* Section Détails de la Bière */
#beer-details-container {
  flex: 1; /* Occupe le reste de l'espace */
  padding: 15px;
  display: flex;
  flex-direction: column; /* S'assure que les éléments se superposent */
}

#beer-list .list-group-item:hover {
  color: #fff;
  background-color: #eb9c0b;
  font-size: large;
  transition: background-color 0.3s ease, font-size 0.3s ease;
}

/* Effet au survol */
.list-group-item:hover,
.selected-beer:hover {
  background-color: #d88a09; /* Couleur plus foncée au survol */
  transition: background-color 0.3s ease;
}

/* Changement de couleur de la flèche au survol */
.list-group-item:hover::after,
.selected-beer:hover::after {
  background-color: #d88a09; /* Même couleur que l'élément au hover */
}

/* Style du texte */
#beer-details-container p {
  margin: 0;
  text-align: justify; /* Aligne le texte pour un rendu esthétique */
}

#beer-thumbnails img {
  max-width: 10%;
  max-height: 10%;
  transition: transform 0.3s ease;
  border-radius: 15px;
}

/* Augmenter la taille des miniatures sur petit écran */
@media (max-width: 768px) {
  #beer-thumbnails img {
    max-width: 20%;  /* Double la taille pour les petits écrans */
    max-height: 20%;
  }
}

@media (max-width: 480px) {
  #beer-thumbnails img {
    max-width: 30%;  /* Encore plus grand pour les écrans très petits */
    max-height: 30%;
  }
}

/* Effet au survol */
#beer-thumbnails img:hover {
  transform: scale(1.1);
}


/* Image principale flottante */
#beer-main-image {
  float: right; /* Positionne l'image à droite */
  max-width: 300px; /* Limite la largeur de l'image */
  margin: 0 15px 15px 15px; /* Marges égales à droite et à gauche */
  border-radius: 15px !important; /* Arrondir les coins */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajoute une ombre */
  object-fit: contain; /* S'assure que l'image garde ses proportions */
}

#beer-main-image:hover {
  transform: scale(1.1); /* Agrandit légèrement au survol */
  transition: transform 0.3s ease; /* Animation fluide */
}


@media (max-width: 768px) {
  #beer-page-container {
    flex-direction: column; /* Empile la liste et les détails verticalement */
  }

  #beer-list-container {
    margin-left: 0; /* Supprime la marge à gauche sur les petits écrans */
    border-right: none; /* Supprime la bordure droite */
    border-bottom: 1px solid #ddd; /* Ajoute une bordure en bas */
  }

  #beer-details-container {
    flex: 1;
    max-width: 100%;
  }
}

/* Lightbox Container */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1050;
  overflow: hidden;
  padding: 10px;
}

/* Lightbox Hidden */
#lightbox.d-none {
  display: none;
}

/* Lightbox Content */
.lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 90%; /* S'adapte à 90% de la largeur de l'écran */
  max-height: 90%; /* S'adapte à 90% de la hauteur de l'écran */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  cursor: zoom-in; /* Indique que l'image peut être agrandie */
}

/* Image */
.lightbox-content img {
  width: 100%; /* Adapte l'image à la largeur disponible */
  height: 100%; /* Adapte l'image à la hauteur disponible */
  object-fit: contain; /* Assure que l'image reste visible dans sa totalité */
  transition: transform 0.3s ease; /* Transition pour un effet fluide */
}

/* Image agrandie */
.lightbox-content img.full-size {
  transform: scale(1.5); /* Agrandit l'image */
  max-width: none; /* Supprime les limites */
  max-height: none;
  cursor: zoom-out; /* Change le curseur pour le réduire */
}

/* Close Button */
#lightbox-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: rgba(255, 255, 255, 0.9);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: black;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease, transform 0.2s ease;
}

#lightbox-close:hover {
  background-color: rgba(240, 165, 5, 0.8);
  transform: scale(1.1);
}

#beer-rating-stars i {
  transition: transform 0.2s;
}

#beer-rating-stars i:hover {
  transform: scale(1.2);
}

/* Pastilles du nombre de bières dans les catégories */
.img-fluid {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease;
}

.category-card:hover .img-fluid {
  transform: scale(1.05);
}

.badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f0e4d6; /* Couleur de la pastille */
  color: #f36d1f; /* Couleur du texte */
  padding: 5px 10px;
  border-radius: 20%;
  font-size: 0.9em;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  z-index: 10; /* S'assure qu'elle reste visible */
}

/* Style pour l'élément sélectionné */
.selected-beer {
  background-color: #fbab11; /* Couleur de fond */
  font-weight: bold; /* Texte en gras */
  position: relative; /* Permet de positionner la flèche correctement */
  border-right: none; /* Supprime une éventuelle bordure */
  color: white; /* Couleur du texte */
  transition: background-color 0.3s ease; /* Transition fluide */
}

/* Flèche qui pointe vers la fiche */
.selected-beer::after {
  content: "";
  position: absolute;
  top: 0; /* Aligne la flèche avec le haut de l'élément */
  right: -14px; /* Ajusté pour coller parfaitement */
  height: 100%; /* Prend toute la hauteur de l'élément */
  width: 15px; /* Largeur de la flèche */
  clip-path: polygon(0 0, 100% 50%, 0 100%); /* Forme de la flèche */
  background-color: #fbab11; /* Couleur identique au fond de l'élément sélectionné */
  transition: background-color 0.3s ease; /* Animation douce */
}

/* Effet hover : élément + flèche deviennent blancs */
.selected-beer:hover {
  background-color: white; /* Fond blanc au survol */
  color: #fbab11; /* Texte devient de la couleur originale */
}

.selected-beer:hover::after {
  background-color: white; /* La flèche devient blanche aussi */
}

/* --- MODALE DE RECHERCHE --- */
/* Style général de la modale */
/* ✅ Empêcher la modale d'apparaître au chargement sans bloquer son ouverture */
#searchModal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  
  opacity: 0; /* Caché au chargement */
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* ✅ Empêcher le contenu de clignoter au chargement */
.modal-content {
  background: white;
  padding: 20px;
  width: 90%;
  max-width: 500px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
}

.modal {
  display: none; /* Cachée par défaut */
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column; /* Assure un alignement correct */
}



/* Effet d'apparition */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bouton de fermeture */
.close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 20px;
  cursor: pointer;
  color: #333;
  transition: color 0.3s;
  z-index: 2000; /* S'assurer qu'il est bien au-dessus */
  background: white; /* Ajoute un fond blanc pour être visible */
  padding: 5px 10px; /* Agrandit la zone de clic */
  border-radius: 50%; /* Donne une forme arrondie pour un effet sympa */
}

.close:hover {
  color: #9b1d0e;
}

/* Champ de recherche */
#searchInput {
  width: 90%;
  padding: 10px;
  font-size: 1em;
  border: 2px solid #ddd;
  border-radius: 8px;
  outline: none;
  transition: 0.3s;
}

#searchInput:focus {
  border-color: #9b1d0e;
  box-shadow: 0 0 10px rgba(155, 29, 14, 0.5);
}

/* Résultats de recherche */
#searchResults {
  margin-top: 15px;
  max-height: 300px;
  overflow-y: auto; /* Permet le défilement vertical si nécessaire */
  overflow-x: hidden; /* Supprime l'ascenseur horizontal */
  border-top: 1px solid #ddd;
  padding-top: 10px;
  padding-right: 10px; /* Évite la coupure du texte à droite */
  white-space: nowrap; /* S'assure que les lignes restent propres */
}

/* Élément des résultats */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 10px;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.3s, transform 0.2s;
}

.search-result-item:hover {
  background: #f8d7da;
  transform: scale(1.05);
}

/* Image des résultats */
.search-thumbnail {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 5px;
  object-fit: cover;
}

/* Guide EBC */
/* Conteneur de l'abaque EBC */
#ebc-scale-container {
  width: 100%;
  max-width: 300px;
  height: 20px;
  background: linear-gradient(to right, 
    #f8e08e 0%,  /* Blond pâle */
    #f6c144 20%, /* Blonde dorée */
    #d59b36 40%, /* Ambrée */
    #a46328 60%, /* Brune */
    #7b3b1b 80%, /* Stout foncé */
    #080400 100%  /* Noir */
  );
  border-radius: 5px;
  position: relative;
  margin-bottom: 10px;
}

/* Curseur EBC sous forme de cadre */
/* Rectangle de sélection pour la couleur EBC */
#ebc-indicator {
  position: absolute;
  top: -5px;
  width: 35px; /* Ajusté pour le texte */
  height: 30px;
  border: 2px solid red;
  background: transparent;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: bold;
  color: red; /* Texte en rouge */
  transition: left 0.3s ease-in-out;
  transform: translateX(-50%);
}

#beer-ebc {
  display: none;
}

/* Pareil pour l'indice d'amertume */
/* Conteneur de l'échelle IBU */
#ibu-scale-container {
  display: flex;
  align-items: center;
  gap: 5px;
  
}

/* Icônes de houblon */
.ibu-hop {
  font-size: 20px;
  margin-right: 4px;
  transition: transform 0.3s ease-in-out;
}

/* Houblon rempli */
.ibu-hop.full {
  color: #4CAF50; /* Vert */
  transform: scale(1.1);
}

/* Houblon vide */
.ibu-hop.empty {
  color: #ccc; /* Gris clair */
}

/* Styles des commentaires */
/* Bloc de commentaire stylisé */
.comment-bubble {
  background-color: #fff8e1; /* fond bière */
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-left: 5px solid #f39c12;
  position: relative;
  font-size: 0.95em;
}

.comment-bubble strong {
  color: #9b1d0e;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 4px;
}

.comment-bubble small {
  font-size: 0.85em;
  color: #444;
}

.comment-bubble i.fa-user {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ccc;
}

.comment-bubble .rating {
  color: #f39c12;
}

/* Notation dans les commentaires */ 
.star-rating {
  direction: ltr;
  font-size: 2em;
  unicode-bidi: bidi-override;
  display: inline-block;
  position: relative;
  user-select: none;
}

.star-rating i {
  color: #ddd;
  cursor: pointer;
  transition: color 0.2s;
  margin-right: 2px;
}

.star-rating i.full,
.star-rating i.half {
  color: #f39c12;
}

.star-rating i.half::before {
  content: '\f089'; /* Font Awesome star-half-alt */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}
#beer-details {
  padding-bottom: 100px; /* pour laisser respirer les commentaires */
}
#comment-list {
  max-height: 300px;
  overflow-y: auto;
  padding-right: 10px;
}

.comment-btn {
  background-color: #f39c12;
  color: white;
  border: 1px solid #d08800;
  border-radius: 5px;
  padding: 8px 10px;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.5s ease, padding 0.5s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 40px;
  position: relative;
}

.comment-btn i {
  font-size: 1em;
}

.comment-btn .btn-label {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  white-space: nowrap;
}

.comment-btn:hover {
  width: auto;
  padding: 8px 16px;
}

.comment-btn:hover .btn-label {
  opacity: 1;
  visibility: visible;
}

/* Corrections responsive */ 
@media (max-width: 768px) {
  .header-area .main-nav {
    flex-direction: column;
    align-items: center;
  }

  .logo.imageeffet.bubbles {
    max-width: 120px;
    margin: 0 auto;
  }

  .main-banner2 {
    padding-top: 180px; /* réduit pour petit écran */
    padding-bottom: 80px;
  }
}

/* Responsivité du titre principal */
/* Titre principal responsive mais contenu */
.logotitre {
  font-family: 'Berkshire Swash', cursive;
  font-weight: bold;
  color: #ff9900;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
  text-align: center;
  line-height: 1.1;
  margin: 0 auto 10px auto;

  font-size: clamp(2rem, 8vw, 5rem); /* taille fluide */
  max-width: 90vw;                  /* ne dépasse pas 90% de la largeur écran */
  word-wrap: break-word;
}

@media (max-width: 992px) {
  .logotitre {
    font-size: 3em;
  }
}

@media (max-width: 768px) {
  .logotitre {
    font-size: 2.5em !important;
    margin-bottom: 10px;
  }

  .header-text {
    margin-top: 0 !important;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .main-banner {
    padding-top: 10px;
    padding-bottom: 140px;
    min-height: 80vh; /* suffisant pour contenir logo + titre + bouton */
    display: flex;
    flex-direction: column;
    justify-content: center; /* centrer verticalement */
    align-items: center;
    text-align: center;
  }
  #main-logo {
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    max-width: 35%;
  }
}


@media (max-width: 480px) {
  .logotitre {
    font-size: 1.8em;
  }
}

/* Responsive */
@media (max-width: 768px) {
  #beer-page-container {
    flex-direction: column;
    padding: 10px;
  }

  #beer-list-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px;
    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  #beer-details-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0;
  }

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

/* Affichage mobile optimisé pour categories.html */
@media (max-width: 768px) {
  .row {
    display: flex;
    flex-direction: column;
  }

  #beer-list-container,
  #beer-details-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #beer-list-container {
    margin-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    background-color: #f7f7f7;
    border-radius: 8px;
  }

  #beer-details-container {
    padding: 10px;
  }

  #beer-list-title {
    font-weight: bold;
    font-size: 1.2em;
    text-align: center;
    margin-bottom: 10px;
    width: 100%;
  }
  
  #beer-main-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
  }
  
}

/* Le back to top*/ 
#back-to-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background-color: #ff9900;
  color: #fff;
  font-size: 20px;
  padding: 12px 16px;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 999;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

#back-to-top:hover {
  background-color: #cc7a00;
}

#back-to-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* Likes */
#like-icon {
  font-size: 1.6rem;
  transition: transform 0.5s ease;
  color: #ffa500; /* orange par défaut */
}

#like-icon:hover {
  transform: scale(1.5);
}

#like-icon.liked {
  color: #ffc98c !important; /* couleur pâle si déjà voté */
  cursor: default;
  animation: pulse 0.5s ease;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.beer-title {
  color: #9b1d0e;
  text-shadow: 0 0 10px rgba(0,0,0,0.3);
  margin: 0;
  font-size: 2rem;
}

.like-container {
  gap: 8px;
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .beer-header-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }

  .beer-title {
    font-size: 1.5rem;
  }

  .like-container {
    font-size: 1rem;
  }
}

/* Style boite d'accueil 18ans*/
.age-modal {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(10, 10, 10, 0.95);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-family: 'Berkshire Swash', cursive;
}

.age-modal-content {
  color: #f8f8f8;
  background-color: rgba(20, 20, 20, 0.95); 
  border: 4px solid #ffa500;
  border-radius: 18px;
  padding: 30px;
  text-align: center;
  max-width: 400px;
  box-shadow: 0 0 30px rgba(255, 165, 0, 0.6);
}

.age-buttons {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  gap: 15px;
  line-height: 1.2;
}

.age-buttons button {
  padding: 10px 20px;
  font-size: 1.1em;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#btn-yes {
  background-color: #ffa500;
  border-radius: 18px;
  color: #000;
}

#btn-no {
  background-color: #555;
  border-radius: 18px;
  color: #eee;
}

.age-buttons .emoji {
  display: block;
  font-size: 1.8rem;
  margin-top: 5px;
}

.age-buttons button:hover {
  transform: scale(1.1);
}

.age-buttons button span.emoji {
  font-size: 1.2em;
  margin-left: 5px;
  display: inline-block;
  transform: translateY(2px); 
}

.age-modal-content h2 {
  font-size: 1.8rem;
  color: #fff;
}

.age-modal-content p {
  font-size: 1.05rem;
  color: #f0f0f0; /* texte lisible, mais doux */
}

/* Top des bières */
#top-beers h2 {
  margin-bottom: 20px;
  color: #9b1d0e;
  text-shadow: 0 0 8px rgba(0,0,0,0.1);
}

#top-beers-list {
  list-style: none;
  padding: 0;
}

#top-beers-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f5f5;
  margin-bottom: 10px;
  padding: 12px 18px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#top-beers-list .beer-name {
  font-weight: bold;
}

#top-beers-list .like-count {
  color: #ff6600;
  font-size: 1.1em;
  margin-left: auto;
  margin-right: 10px;
}

#top-beers-list a {
  text-decoration: none;
  font-size: 1.1em;
  color: #007bff; 
  margin-left: 10px;
}

#top-beers-list a:hover {
  color: #ff6600;
}

#top-beers-list a i {
  transition: transform 0.2s ease;
}

#top-beers-list a:hover i {
  transform: scale(1.2);
}


/* CSS des brasseries */
.breweries-hero{padding:60px 0 20px;text-align:center}
    .breweries-hero h1{
      color:#f5a021;font-weight:700;text-shadow:-2px -2px 0 #62380e,2px -2px 0 #62380e,-2px 2px 0 #62380e,2px 2px 0 #62380e,0 0 12px rgba(0,0,0,.6)
    }
    .toolbar{position:sticky;top:70px;z-index:8;background:linear-gradient(180deg,#fff 60%,rgba(255,255,255,0));padding:10px 0 6px}
    .letters{display:flex; flex-wrap:wrap;gap:6px;justify-content:center}
    .letters a{padding:6px 10px;border-radius:18px;border:none; color: #ffffff !important; background-color: #ffffff81; text-decoration:none;font-weight:500}
    .letters a:hover{background:#f5f5f5; color: #fbab11 !important; transition: transform 0.3s ease; transform: scale(1.3);}
    .breweries-count{opacity:.8;margin-top:8px}
    .search-wrap{max-width:480px;margin:12px auto}
    #brewery-search{width:100%;padding:10px 14px;border-radius:12px;border:1px solid #ddd}

    .letter-group{scroll-margin-top:110px;margin-top:28px}
    .letter-title{font-size:1.8rem;margin:18px 0 12px;color:#bd6916}

    .brewery-grid{display:grid;grid-template-columns:repeat( auto-fill, minmax(220px,1fr) );gap:16px}
    .brewery-card{
      cursor: pointer;
      background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.06);
      box-shadow:0 6px 20px rgba(0,0,0,.06);
      overflow:hidden;transition:transform .15s ease, box-shadow .15s ease
    }
    .brewery-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(238, 157, 8, 0.432)}
    .brewery-card:focus {
      outline: 3px solid rgba(243, 168, 7, 0.322); /* halo discret */
      outline-offset: 2px;
    }
    .brewery-thumb{aspect-ratio:16/9;width:100%;object-fit:cover;background:#f3f3f3}
    .brewery-body{padding:12px 14px;display:flex;align-items:center;gap:10px}
    .brewery-name{font-weight:600;margin:0;flex:1}
    .brewery-link{font-size:1.1rem;opacity:.9}
    .brewery-link[aria-disabled="true"]{opacity:.35;pointer-events:none}
    .muted{opacity:.7}
    .no-result{padding:24px;text-align:center;opacity:.8}

    /* === Zoom "focus" sur les vignettes des brasseries === */
@media (hover: hover) and (pointer: fine) {
  .brewery-card {
    position: relative;
    overflow: hidden; /* Important : on coupe l'image zoomée */
    --mx: 50%;
    --my: 50%;
    --ov: 0; /* opacité de l'overlay */
  }

  .brewery-card .brewery-thumb {
    transform: scale(1) translateZ(0);
    transform-origin: 50% 50%;
    transition: transform 420ms cubic-bezier(.22,.61,.36,1),
                filter   420ms cubic-bezier(.22,.61,.36,1);
    will-change: transform;
  }

  /* Effet vignette + focus doux pour renforcer la sensation de plongée */
  .brewery-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
      circle at var(--mx) var(--my),
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0.08) 60%,
      rgba(0,0,0,0.18) 100%
    );
    opacity: var(--ov);
    transition: opacity 420ms cubic-bezier(.22,.61,.36,1);
  }

  .brewery-card.is-hover .brewery-thumb {
    transform: scale(1.12);            /* ← intensité du zoom */
    filter: saturate(1.05) contrast(1.02);
  }

  .brewery-card.is-hover { --ov: 1; }  /* overlay visible au survol */
}

/* Popup vignette brasserie */
/* === Popup "Fiche Brasserie" === */
.modal-brewery {
  max-width: 720px;
  width: min(92vw, 720px);
  border-radius: 18px;
}
.brewery-modal-list { margin-top: 10px; max-height: 60vh; overflow: auto; }
.brewery-modal-footer {
  margin-top: 16px;
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
}
.brewery-item {
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
}
.brewery-item .meta { font-size: .9rem; opacity: .7; }
.brewery-item .title { font-weight: 600; margin: 0; }
.brewery-item .actions { display: flex; gap: 8px; }
.brewery-item .btn { white-space: nowrap; }
@media (max-width: 480px) {
  .brewery-item { flex-direction: column; align-items: stretch; }
  .brewery-item .actions { justify-content: flex-end; }
}
/* Masquer la modale Brasserie au chargement */
#breweryModal { display:none; opacity:0; visibility:hidden; }

/* Miniatures bières dans le popup brasserie */
.brewery-item { align-items: center; }
.brewery-item .item-left { flex: 0 0 auto; }
.beer-mini {
  width: 56px; height: 56px;
  border-radius: 10px;
  object-fit: cover;
  background: #f2f2f2;
  display: block;
}
.beer-mini.fallback { filter: grayscale(60%); opacity: .85; }
.brewery-item .item-body { flex: 1 1 auto; min-width: 0; }
.brewery-item .title { margin: 0 0 2px; font-weight: 600; }
.brewery-item .meta { font-size: .9rem; opacity: .7; }
.brewery-item .actions { flex: 0 0 auto; display: flex; gap: 8px; }
@media (max-width: 480px) {
  .brewery-item { gap: 10px; }
  .beer-mini { width: 48px; height: 48px; }
}

/* Bouton de fermeture "joli" */
.modal-brewery {
  position: relative;
  padding-top: 24px; /* place pour le close */
}
.modal-brewery .modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 36px; height: 36px;
  border-radius: 999px;
  border: none;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #ffd34d, #f5a021);
  color: #222;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.modal-brewery .modal-close:hover,
.modal-brewery .modal-close:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
  outline: none;
}

/* Item + miniature (déjà posés) */
.brewery-item { align-items: center; }
.brewery-item .item-left { flex: 0 0 auto; }
.beer-mini {
  width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  background: #f2f2f2; display: block;
}
.beer-mini.fallback { filter: grayscale(60%); opacity: .85; }
.brewery-item .item-body { flex: 1 1 auto; min-width: 0; }
.brewery-item .actions { flex: 0 0 auto; }

/* Bouton icône "voir la fiche" */
.btn-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn-icon:hover, .btn-icon:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.1);
  outline: none;
}

/* Bouton "site de la brasserie" extensible */
.brewery-modal-footer {
  margin-top: 16px;
  display: flex; gap: 10px; justify-content: center; /* centré */
}
.btn-site {
  display: inline-flex; align-items: center;
  gap: .5rem;
  padding: 10px 14px; /* réduit par défaut */
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd34d, #f5a021);
  color: #222; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  transition: box-shadow .2s ease, transform .2s ease;
  overflow: hidden;
}
.btn-site .label {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  transition: max-width .25s ease, opacity .2s ease, margin-left .2s ease;
  margin-left: 0;
}
.btn-site:hover, .btn-site:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
  outline: none;
}
.btn-site:hover .label,
.btn-site:focus-visible .label {
  max-width: 360px; /* assez large pour le texte */
  opacity: 1;
  margin-left: .35rem;
}

/* Réduit un peu sur petits écrans */
@media (max-width: 480px) {
  .beer-mini { width: 48px; height: 48px; }
  .btn-site .label { display: none; } /* mobile : icône seule */
}

/* Vignette zoomable dans la modale */
.beer-mini-wrap{
  --mx: 50%;
  --my: 50%;
  width: 56px; height: 56px;
  border-radius: 10px;
  overflow: hidden;           /* empêche tout scroll */
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.beer-mini{
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: var(--mx) var(--my);
  transition: transform .22s ease, filter .2s ease;
  will-change: transform;
}
.beer-mini-wrap.is-hover .beer-mini,
.beer-mini-wrap:focus-within .beer-mini{
  transform: scale(1.9);
}
.beer-mini.fallback{ filter: grayscale(.6); opacity: .9; }

@media (max-width: 480px) {
  .beer-mini-wrap{ width: 48px; height: 48px; }
}

/* Vignette zoomable dans la modale (taille de base) */
.beer-mini-wrap{
  --mx: 50%;
  --my: 50%;
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;                 /* pas de scroll */
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  transform-origin: var(--mx) var(--my);
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: 0;                       /* passera au-dessus en hover */
}

/* L'image suit le point de focus et zoome un peu plus */
.beer-mini{
  width: 100%; height: 100%;
  object-fit: cover;
  transform-origin: var(--mx) var(--my);
  transition: transform .22s ease, filter .2s ease;
  will-change: transform;
}

/* Survol/focus : la vignette GRANDIT (sans reflow) et l'image zoome encore */
.beer-mini-wrap.is-hover,
.beer-mini-wrap:focus-within{
  transform: scale(1.6);            /* agrandit la vignette elle-même */
  z-index: 60;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.beer-mini-wrap.is-hover .beer-mini,
.beer-mini-wrap:focus-within .beer-mini{
  transform: scale(1.6);            /* zoom interne supplémentaire */
}

/* Option : un peu plus grand par défaut si tu veux */
@media (min-width: 700px){
  .beer-mini-wrap{ width: 64px; height: 64px; }
}

/* Mobile : pas de hover => on garde taille normale */
@media (hover: none) and (pointer: coarse){
  .beer-mini-wrap{ transform: none !important; }
}

/* Evite que l'agrandissement soit coupé */
.brewery-item { overflow: visible; }
.modal-brewery { overflow: visible; }

.brewery-thumb-wrap { position: relative; }
.flag-badge{
  position: absolute;
  top: 8px; left: 8px;      /* ou right:8px si tu préfères */
  font-size: 18px; line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  pointer-events: none;     /* ne bloque pas les clics sur la carte */
}
@media (max-width: 480px){
  .flag-badge{ font-size: 16px; padding: 2px 6px; }
}