/**
* Template Name: Groovin
* Template URL: https://bootstrapmade.com/groovin-free-bootstrap-theme/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Playfair Display",  sans-serif;
  --nav-font: "Merriweather",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2a2a2a; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #5c9f24; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #d1d1d1;  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #5c9f24; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f9f9;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(0, 0, 0, 0.5);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 26px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
  text-transform: uppercase;
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  border: 2px solid var(--accent-color);
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: #000000;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 15px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  position: relative;
}

.footer .footer-top {
  padding-top: 50px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-about .logo {
  line-height: 1;
  margin-bottom: 25px;
}

.footer .footer-about .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.footer .footer-about .logo span {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 1px;
  font-family: var(--heading-font);
  color: var(--heading-color);
}

.footer .footer-about p {
  font-size: 14px;
  font-family: var(--heading-font);
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  padding-right: 2px;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  display: inline-block;
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  margin-bottom: 15px;
  padding: 6px 8px;
  position: relative;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  display: flex;
  background-color: var(--background-color);
  transition: 0.3s;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: var(--background-color);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .copyright {
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 82px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 67px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-title p {
  margin-bottom: 0;
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding: 0;
}

.hero .carousel {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  margin: 0;
  background-color: var(--background-color);
  position: relative;
}

.hero img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.hero .carousel-item:before {
  content: "";
  background: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-item::before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.hero .carousel-container {
  position: absolute;
  inset: 90px 64px 64px 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 3;
}

.hero h2 {
  margin-bottom: 30px;
  font-size: 48px;
  font-weight: 700;
  animation: fadeInDown 1s both;
}

@media (max-width: 768px) {
  .hero h2 {
    font-size: 30px;
  }
}

.hero p {
  animation: fadeInDown 1s both 0.2s;
}

@media (min-width: 1024px) {

  .hero h2,
  .hero p {
    max-width: 60%;
  }
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 8px 32px;
  border-radius: 4px;
  transition: 0.5s;
  margin: 10px;
  animation: fadeInUp 1s both 0.4s;
}

.hero .btn-get-started:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
  width: 10%;
  transition: 0.3s;
  opacity: 0.5;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
  opacity: 0.9;
}

@media (min-width: 1024px) {

  .hero .carousel-control-prev,
  .hero .carousel-control-next {
    width: 5%;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
  background: none;
  font-size: 32px;
  line-height: 1;
}

.hero .carousel-indicators {
  list-style: none;
}

.hero .carousel-indicators li {
  cursor: pointer;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-img {
  position: relative;
  margin: 60px 0 0 60px;
}

.about .about-img:before {
  position: absolute;
  inset: -60px 0 0 -60px;
  content: "";
  background: url("../img/about-bg.png") top left;
  background-repeat: no-repeat;
  z-index: 1;
}

.about .about-img img {
  position: relative;
  z-index: 2;
}

@media (max-width: 575px) {
  .about .about-img {
    margin: 30px 0 0 30px;
  }

  .about .about-img:before {
    inset: -30px 0 0 -30px;
  }
}

.about h3 {
  font-weight: 300;
  font-size: 32px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .about h3 {
    font-size: 28px;
  }
}

.about .nav-pills {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.about .nav-pills li+li {
  margin-left: 40px;
}

.about .nav-link {
  background: none;
  font-size: 18px;
  font-weight: 400;
  color: var(--default-color);
  padding: 12px 0;
  margin-bottom: -2px;
  border-radius: 0;
}

.about .nav-link.active {
  color: var(--accent-color);
  background: none;
  border-bottom: 3px solid var(--accent-color);
}

@media (max-width: 575px) {
  .about .nav-link {
    font-size: 16px;
  }
}

.about .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: var(--default-color);
}

.about .tab-content i {
  font-size: 22px;
  line-height: 0;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  padding: 30px;
  width: 100%;
}

.stats .stats-item i {
  color: var(--accent-color);
  display: block;
  font-size: 44px;
  float: left;
  line-height: 0;
}

.stats .stats-item .purecounter {
  color: var(--heading-color);
  font-size: 48px;
  line-height: 40px;
  display: block;
  font-weight: 700;
  margin-left: 60px;
}

.stats .stats-item p {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 15px 0 0 0;
  margin: 0 0 0 60px;
  font-family: var(--heading-font);
  font-size: 14px;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
  padding: 20px 0;
}

.clients .client-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.clients .client-logo img {
  padding: 20px 40px;
  max-width: 90%;
  transition: 0.3s;
  opacity: 0.5;
  filter: grayscale(100);
}

.clients .client-logo img:hover {
  filter: none;
  opacity: 1;
}

@media (max-width: 640px) {
  .clients .client-logo img {
    padding: 20px;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  text-align: center;
  padding: 20px;
  transition: all ease-in-out 0.3s;
  height: 100%;
}

.services .service-item .icon {
  background-color: var(--surface-color);
  color: var(--accent-color);
  margin: 0 auto;
  width: 80px;
  height: 80px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: 0.3s;
  font-size: 32px;
  transition: ease-in-out 0.3s;
  box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
}

.services .service-item h3 {
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 15px;
  font-size: 22px;
  transition: 0.3s;
  position: relative;
}

.services .service-item h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  bottom: 0;
  left: calc(50% - 25px);
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item:hover .icon {
  box-shadow: 0px 0 40px rgba(0, 0, 0, 0.1);
}

.services .service-item:hover h3 {
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Why Us Section
--------------------------------------------------------------*/
.why-us .card-item {
  background: color-mix(in srgb, var(--default-color), transparent 97%);
  padding: 50px 30px;
  transition: all ease-in-out 0.3s;
  height: 100%;
  position: relative;
}

.why-us .card-item span {
  color: var(--accent-color);
  display: block;
  font-size: 28px;
  font-weight: 700;
}

.why-us .card-item h4 {
  font-size: 24px;
  font-weight: 600;
  padding: 0;
  margin: 20px 0;
}

.why-us .card-item h4 a {
  color: var(--heading-color);
}

.why-us .card-item p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
  padding: 0;
}

.why-us .card-item:hover {
  background: var(--accent-color);
  padding: 30px 30px 70px 30px;
}

.why-us .card-item:hover span,
.why-us .card-item:hover h4 a,
.why-us .card-item:hover p {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  margin: 0 10px;
  line-height: 1;
  text-transform: uppercase;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-item {
  position: relative;
}

.portfolio .portfolio-item .portfolio-info {
  background-color: color-mix(in srgb, var(--surface-color), transparent 10%);
  opacity: 0;
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  font-weight: 600;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  margin-bottom: 0;
  padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 50px;
  font-size: 24px;
  top: calc(50% - 14px);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  transition: 0.3s;
  line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 14px;
  font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
  bottom: 20px;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team {
  --default-color: #ffffff;
}

.team .member {
  text-align: center;
  position: relative;
  height: 100%;
}

.team .member .member-info {
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
  transition: 0.2s;
}

.team .member .member-info-content {
  margin-top: -50px;
  transition: margin 0.2s;
}

.team .member:hover .member-info {
  background: rgba(0, 0, 0, 0.6);
  opacity: 1;
  transition: 0.4s;
}

.team .member:hover .member-info-content {
  margin-top: 0;
  transition: margin 0.4s;
}

.team .member h4 {
  color: var(--contrast-color);
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 18px;
}

.team .member span {
  font-style: italic;
  display: block;
  font-size: 13px;
}

.team .member .social {
  margin-top: 15px;
}

.team .member .social a {
  transition: 0.3s;
  color: var(--default-color);
}

.team .member .social a:hover {
  color: var(--accent-color);
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
  background-color: var(--surface-color);
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
  height: 100%;
  position: relative;
}

.pricing h3 {
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.pricing h4 {
  font-size: 48px;
  color: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 400;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 18px;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.pricing ul i {
  color: #059652;
  font-size: 24px;
  padding-right: 3px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na i {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  background-color: var(--background-color);
  display: inline-block;
  padding: 8px 35px 10px 35px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: var(--heading-font);
  transition: 0.3s;
}

.pricing .buy-btn:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  z-index: 10;
}

.pricing .featured .pricing-item {
  background: var(--accent-color);
}

@media (min-width: 992px) {
  .pricing .featured .pricing-item {
    transform: scale(1.02, 1.1);
  }
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
  color: var(--contrast-color);
}

.pricing .featured .buy-btn {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--contrast-color);
}

.pricing .featured .buy-btn:hover {
  background: color-mix(in srgb, var(--background-color), transparent 92%);
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: 0.3s;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 18px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item h3 span {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 20px;
  line-height: 0;
  transition: 0.3s;
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active {
  background-color: var(--accent-color);
  transition: 0.3s;
}

.faq .faq-container .faq-active h3,
.faq .faq-container .faq-active h3:hover,
.faq .faq-container .faq-active .faq-toggle,
.faq .faq-container .faq-active .faq-icon,
.faq .faq-container .faq-active .faq-content {
  color: var(--contrast-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item i {
  font-size: 20px;
  color: var(--accent-color);
  font-size: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  transition: all 0.3s ease-in-out;
}

.contact .info-item h3 {
  font-size: 24px;
  font-weight: 700;
  margin: 20px 0;
}

.contact .info-item p {
  padding: 0;
  margin-bottom: 0;
  font-size: 14px;
}

@media (min-width: 992px) {
  .contact .info-item.info-item-borders {
    border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  }
}

.contact .php-email-form {
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  padding: 30px;
  margin-top: 30px;
}

@media (max-width: 575px) {
  .contact .php-email-form {
    padding: 20px;
  }
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  color: var(--contrast-color);
  background: var(--accent-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  background-color: var(--surface-color);
  padding: 30px;
  box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
  background-color: var(--surface-color);
  padding: 10px 30px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  margin-bottom: 20px;
}

.service-details .services-list a {
  display: block;
  line-height: 1;
  padding: 8px 0 8px 15px;
  border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
  margin: 20px 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.service-details .services-list a.active {
  color: var(--heading-color);
  font-weight: 700;
  border-color: var(--accent-color);
}

.service-details .services-list a:hover {
  border-color: var(--accent-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details h4 {
  font-size: 20px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/* ============================================================
   bp447 (Elsanor) — correctif menu vitrine : entre 1200 et
   1500px, les 11 entrees + logo + selecteur de langue debordent
   a droite (burger seulement < 1200px dans ce theme). On resserre
   les liens sur CETTE plage uniquement ; rien ne change au-dela.
   ============================================================ */
@media (min-width: 1200px) and (max-width: 1500px) {
  .navmenu a,
  .navmenu a:focus {
    padding: 15px 7px;
    font-size: 13.5px;
  }
}

/* ============================================================
   bp448 (Elsanor) — page statistiques publique : cartes des
   graphiques + liens de races (maquette 1 validee).
   ============================================================ */
.race-link { color: var(--accent-color); font-weight: 600; text-decoration: none; }
.race-link:hover { text-decoration: underline; }
.ps-card { border: 0; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.ps-card .card-header { background: #fff; border-bottom: 2px solid var(--accent-color); border-radius: 14px 14px 0 0; }
.ps-note { font-size: .85rem; color: #7a7a7a; }
.ps-canvas { min-height: 220px; width: 100%; }
.ps-race-select { max-width: 260px; }

/* ============================================================
   bp449 (Elsanor) — fiche race : bandeau chevauchant + tuiles
   caracteristiques + graphique Performances (maquette v5).
   ============================================================ */
.rp-strip { margin-top: -2.4rem; position: relative; z-index: 5; }
.rp-stat { background: #fff; border-radius: 14px; box-shadow: 0 8px 22px rgba(0, 0, 0, .10); padding: .8rem 1rem; text-align: center; height: 100%; }
.rp-stat b { font-family: var(--heading-font); font-size: 1.4rem; color: var(--heading-color); display: block; }
.rp-stat b.rp-big { font-size: 1.9rem; color: var(--accent-color); }
.rp-stat span { font-size: .75rem; color: #7a7a7a; display: block; line-height: 1.2; }
.rp-stat .rp-sub { font-size: .68rem; }
.rp-accent { color: var(--accent-color); }
.rp-tile { background: #fff; border: 1px solid #edeee8; border-radius: 12px; padding: .6rem .8rem; display: flex; align-items: center; gap: .6rem; height: 100%; }
.rp-tile i { color: var(--accent-color); width: 20px; text-align: center; }
.rp-tile .k { font-size: .68rem; color: #8a8a82; text-transform: uppercase; letter-spacing: .4px; }
.rp-tile .v { font-weight: 600; color: var(--heading-color); font-size: .9rem; line-height: 1.2; }
.rp-crit-lab { font-weight: 600; }

/* ============================================================
   bp450 (Elsanor) — index production : pastille oeufs/an sur
   les photos de la grille + bandeau "Nos chiffres".
   ============================================================ */
.rp-photo { position: relative; display: block; }

/* ============================================================
   bp1262 (demande MV) — PHOTOS DE RACE : UN SEUL FORMAT, CARRE.
   Constat : .rp-photo n'avait aucune dimension et l'image portait
   `img-fluid`, donc chaque vignette s'affichait a SON ratio. Avec la
   grille en masonry, les hauteurs variaient librement — d'ou
   l'irregularite que MV veut supprimer.
   Le carre est le seul format qui tienne aussi bien en UNE colonne
   qu'en TROIS, sur mobile comme sur grand ecran.
   CADRAGE PAR LE HAUT (arbitrage MV) : `object-position: center top`.
   J'avais propose un centrage legerement remonte, MV a tranche pour le
   haut — c'est son cadrage, applique tel quel.
   `object-fit: cover` remplit le carre sans deformer : une photo n'est
   JAMAIS etiree, elle est rognee. Une race mal cadree se corrige en
   recadrant la photo SOURCE, pas en ajoutant un cas particulier ici.
   Les pastilles (oeufs, trophee, revendeurs) restent positionnees par
   rapport a .rp-photo, donc sur le carre : rien a changer pour elles.
   ============================================================ */
.rp-photo { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; }
.rp-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }

/* bp1264 (demande MV) — MEME CARRE SUR LA PAGE DE RACE.
   DEUX grilles y sont concernees, et une seule aurait suffi a creer une
   incoherence a quelques centaines de pixels d'ecart :
    - .groupe_image : la galerie des VARIANTES (couleurs) ;
    - .rp-related   : les RACES VOISINES, meme grille que l'index.
   PAS DE CONTENEUR ICI, contrairement a .rp-photo : `aspect-ratio` est
   pose sur l'IMAGE elle-meme. Avec width:100%, la hauteur est calculee
   par le ratio, et `cover` rogne. Aucun HTML a toucher.
   LA PHOTO ENTIERE RESTE ACCESSIBLE : la galerie des variantes est
   enveloppee d'un lien glightbox qui ouvre l'original au clic. Le
   rognage ne cache donc rien, il aligne.
   Les TROIS AUTRES images de la page ne sont PAS touchees : la photo
   d'oeuf (l.416), la photo d'un revendeur (l.457) et le logo. Elles ne
   sont pas dans une grille et n'ont pas a etre carrees. */
.groupe_image img,
.rp-related-grid img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; object-position: center top; }
/* bp1953 — photo d'oeuf dans le bandeau (carte oeufs/an) et, a defaut, dans la tuile couleur d'oeuf.
   Le PNG est detoure et borde (bp1952) : aucun cadre CSS. La carte passe en flex, alignee a gauche. */
.rp-stat.rp-stat-egg { display: flex; align-items: center; gap: 12px; text-align: left; }
.rp-stat-egg-img { width: 84px; height: 84px; flex: none; display: block; border-radius: 50%; object-fit: cover; }
.rp-tile-egg-img { width: 66px; height: 66px; flex: none; display: block; border-radius: 50%; object-fit: cover; }
/* bp1955 — +50 % (56 → 84, 44 → 66), a l'echelle de la pastille de l'index (96 px, bp1954) ;
   .rp-egg-zoom : le lien glightbox autour de l'oeuf ne doit ni souligner ni decaler. */
.rp-egg-zoom { display: block; flex: none; line-height: 0; cursor: zoom-in; }
/* bp2441 — Visionneuse de la GALERIE race (liens .rp-lb ; classe rp-lb-on posée à l'ouverture par production_race.js) :
   la légende passe SUR la photo, sur un dégradé sombre (comme la version mobile de GLightbox), au lieu du bandeau blanc ;
   compteur « 3 / 12 ». Le zoom de l'œuf (.glightbox, réglage du thème) n'est pas concerné. */
@media (min-width: 769px) {
    .rp-lb-on .ginner-container.desc-bottom { position: relative; }
    .rp-lb-on .gslide-description.description-bottom { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .72) 100%); }
    .rp-lb-on .gdesc-inner { padding: 40px 20px 16px; }
    .rp-lb-on .gslide-title { color: #fff; margin: 0; font-family: inherit; font-size: 1rem; }
}
.rp-lb-count { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 10; color: #fff; font-size: .9rem; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, .35); padding: 2px 10px; border-radius: 999px; pointer-events: none; }
/* bp2442 (constat MV 05/10 : « selon la largeur de la page les chevrons ne sont pas visibles ») — GLightbox (habillage
   clean) range les flèches HORS ÉCRAN sous 769 px de large (top:-100% ; top:45% seulement au-dessus) : en fenêtre étroite et
   sur téléphone, seul le glissé permettait de changer de photo. Pour CETTE galerie, flèches visibles à toutes les largeurs,
   centrées sur les bords de la photo, fond un peu plus sombre pour rester lisibles sur une photo claire. */
@media (max-width: 768px) {
    .rp-lb-on .gprev, .rp-lb-on .gnext { top: 50%; transform: translateY(-50%); width: 36px; height: 48px; background-color: rgba(0, 0, 0, .45); }
    .rp-lb-on .gprev { left: 8px; }
    .rp-lb-on .gnext { right: 8px; }
}
/* bp1953b — border-radius + object-fit : une photo d'oeuf ANTERIEURE a bp1952 (non carree, non detouree)
   s'affiche quand meme en disque, recadree, au lieu d'etre deformee ; sans effet sur un PNG deja rond. */
.rp-eggs-pill { position: absolute; left: 10px; bottom: 10px; background: rgba(92, 159, 36, .94); color: #fff; border-radius: 999px; padding: .28rem .7rem; font-size: .85rem; font-weight: 600; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.rp-eggs-pill i { margin-right: .35rem; }
.rp-eggs-pill small { font-weight: 400; opacity: .9; }
.rp-headline { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; background: #fff; border-radius: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .06); padding: .9rem 1.2rem; text-decoration: none; color: var(--default-color); margin-bottom: 1.5rem; }
.rp-headline:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .12); }
.rp-headline-title { font-family: var(--heading-font); font-weight: 700; color: var(--heading-color); line-height: 1.15; }
.rp-headline-title small { color: #7a7a7a; font-weight: 400; font-size: .78rem; }
.rp-headline-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin-left: auto; }
.rp-headline-stats span { font-size: .78rem; color: #7a7a7a; text-align: center; }
.rp-headline-stats b { display: block; font-family: var(--heading-font); font-size: 1.4rem; color: var(--accent-color); }
.rp-headline-cta { color: var(--accent-color); font-weight: 600; white-space: nowrap; }
@media (max-width: 576px) { .rp-headline-stats { margin-left: 0; } }

/* bp453 (Elsanor) — conteneur dedie des graphiques a hauteur pilotee (pattern Chart.js). */
.ps-chart-box { position: relative; width: 100%; }

/* bp454 (Elsanor) — renvois "graphique de performance" du bandeau + ancre sous header fixe. */
.rp-stat-link { display: inline-block; margin-top: .25rem; font-size: .72rem; font-weight: 600; color: var(--accent-color); text-decoration: none; }
.rp-stat-link:hover { text-decoration: underline; }
#rp-perf { scroll-margin-top: 110px; }

/* bp462 (Elsanor) — libelle gris de la case "Moyenne toutes races" (page stats). */
.ps-avg-lab { color: #6c757d; font-weight: 600; font-size: .85rem; }

/* bp467 (Elsanor) — chips du comparateur de races (page stats). */
.ps-chip { display: inline-flex; align-items: center; gap: .35rem; background: #eef3e6; border: 1px solid #d9e4c8; color: #3f5b1c; border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; font-weight: 600; }
.ps-chip button { border: 0; background: none; color: inherit; font-weight: 700; line-height: 1; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -3px -6px -3px 0; border-radius: 50%; font-size: 1.05rem; } /* bp523 — cible de clic agrandie */
.ps-chip button:hover { background: #d9e4c8; color: #24380e; } /* bp523 */

/* bp471 (Elsanor) — libelles colores des criteres du graphique barres (palette fiche). */
.ps-bc-laying { color: #5c9f24; font-weight: 600; }
.ps-bc-fec { color: #2980b9; font-weight: 600; }
.ps-bc-ecl { color: #e67e22; font-weight: 600; }
.ps-bc-hb { color: #8e44ad; font-weight: 600; }

/* bp474 (Elsanor) — fleche de tri au clic sur chaque critere du graphique barres. */
.ps-sort-btn { border: 0; background: none; padding: 0 .2rem; font-size: .8rem; line-height: 1; cursor: pointer; opacity: .55; }
.ps-sort-btn.active { opacity: 1; font-weight: 700; }

/* ============================================================
   bp479 (Elsanor) — fleches de tri BIEN VISIBLES (retour MV) :
   petits boutons bordes, etat actif en accent plein. Remplace
   visuellement le style discret bp474 (opacite/har).
   ============================================================ */
.ps-sort-btn { border: 1px solid #cfe0b8; border-radius: 6px; background: #f2f7ea; color: #4c6b23; padding: .1rem .4rem; font-size: .9rem; line-height: 1.1; margin-left: .2rem; opacity: 1; }
.ps-sort-btn:hover { background: #e4efd4; }
.ps-sort-btn.active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; font-weight: 700; }

/* bp480 (Elsanor) — etiquettes de races du comparateur : encart colore au-dessus du graphique. */
.ps-notes-box:empty { display: none; }
.ps-notes-box { background: #f2f7ea; border-left: 3px solid var(--accent-color); border-radius: 0 8px 8px 0; padding: .5rem .8rem; margin-bottom: .6rem; font-size: .88rem; color: #3d4a2e; }
.ps-notes-box strong { color: var(--accent-color); }

/* bp485 (Elsanor) — comparateur : 3 niveaux de choix clairement separes (retour MV). */
.ps-ctl-row { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .35rem 0; }
.ps-ctl-row + .ps-ctl-row { border-top: 1px dashed #e3ead6; }
.ps-ctl-lab { font-weight: 700; font-size: .85rem; color: #3d4a2e; }

/* bp488 (Elsanor) — badge "Etape N" devant chaque rangee du comparateur. */
.ps-ctl-step { background: var(--accent-color); color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .02em; border-radius: 6px; padding: .2rem .55rem; white-space: nowrap; }

/* bp500 (Elsanor) — mise en page des articles du Carnet : images bornees, typo lisible, figures. */
.article-body { font-size: 1.05rem; line-height: 1.75; color: #2b2b2b; }
.article-body h2 { margin-top: 2rem; margin-bottom: .75rem; color: #3d4a2e; font-weight: 700; }
.article-body h3 { margin-top: 1.25rem; margin-bottom: .5rem; }
.article-body p { margin-bottom: 1rem; }
.article-body .lead { font-size: 1.2rem; color: #4a5a35; }
.article-body img { max-width: 100%; height: auto; border-radius: 10px; }
.article-body figure { margin: 1.25rem 0; }
.article-body figure img { display: block; width: 100%; }
.article-body figure figcaption { margin-top: .35rem; }
/* figures flottantes bornees (plus de photos geantes) */
.article-body figure.float-md-end,
.article-body figure.float-md-start { max-width: 340px; }
.article-body figure.w-25 { max-width: 220px; }
.article-body figure.w-50 { max-width: 420px; }
@media (max-width: 767.98px) {
  .article-body figure.float-md-end,
  .article-body figure.float-md-start,
  .article-body figure.w-25,
  .article-body figure.w-50 { float: none !important; max-width: 100%; width: 100%; margin-inline: 0; }
}
.article-body blockquote { font-style: italic; }
.article-body hr { margin: 2rem 0; opacity: .15; }
.ps-crit-info { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: .4rem; border-radius: 50%; color: #c79327; font-size: 1rem; font-weight: 700; cursor: help; } /* bp525 — definitions ponte/eclosabilite */
.ps-crit-info:hover { background: #fdf9ef; } /* bp525 */
/* bp538 — bandeau "donnees reelles" (audit associe) : creme + filet dore, 3 emplacements */
.rp-data-sig { display: flex; gap: .75rem; align-items: flex-start; background: #fdf9ef; border-left: 4px solid #c79327; border-radius: .5rem; padding: .85rem 1rem; margin: 0 0 1.25rem; text-align: left; }
.rp-data-sig > i { color: #c79327; font-size: 1.4rem; line-height: 1; margin-top: .15rem; }
.rp-data-sig strong { display: block; color: #3f5b1c; margin-bottom: .15rem; }
.rp-data-sig p { color: #555; font-size: .92rem; margin: 0; }

/* bp551 — FAQ /production : accordeon aux couleurs du site, item ouvert nettement distinct */
#prodfaq-acc { border: 1px solid #e6e0d2; border-radius: 10px; overflow: hidden; }
#prodfaq-acc .accordion-item { border: 0; border-bottom: 1px solid #eee7d8; background: transparent; }
#prodfaq-acc .accordion-item:last-child { border-bottom: 0; }
#prodfaq-acc .accordion-button { font-weight: 600; color: #16261c; background: #fff; box-shadow: none; }
#prodfaq-acc .accordion-button:hover { background: #f7f4ec; }
#prodfaq-acc .accordion-button:not(.collapsed) { background: #0f5d2d; color: #fff; }
#prodfaq-acc .accordion-button:not(.collapsed)::after { filter: brightness(0) invert(1); }
#prodfaq-acc .accordion-button:focus { box-shadow: none; border-color: transparent; }
#prodfaq-acc .accordion-body { background: #fdf9ef; border-left: 4px solid #c79327; color: #3f5347; }

/* bp559 — lien "En savoir plus" du bandeau donnees reelles */
.rp-data-sig-more { display:inline-block; margin-top:.4rem; font-size:.9rem; font-weight:600; color:#3b6d11; text-decoration:none; }
.rp-data-sig-more:hover { text-decoration:underline; }

/* bp2085 (demande MV) — PAGE SALONS GÉNÉRÉE : reprend, en classes, les styles en ligne du tableau écrit à la main
   dans le CMS en juin 2026 (en-tête vert, quatre bandeaux : vert plein « chaque édition », or « première
   participation », vert clair « à venir », gris « envisagée »). Ce fichier est la seule feuille propre au site
   production (bp447 et suivants y ajoutent déjà leurs blocs) ; pas de bundle à recompiler. */
.prod-salons { max-width: 960px; margin: 0 auto; overflow-x: auto; border-radius: 14px; border: 1px solid #e2ece5;
  box-shadow: 0 14px 34px -24px rgba(15, 93, 45, .3); font-family: 'Roboto', Helvetica, Arial, sans-serif; }
.prod-salons table { width: 100%; min-width: 720px; border-collapse: collapse; }
.prod-salons thead th { background: #0f5d2d; color: #fff; text-align: left; padding: 10px 12px; font-size: 12px;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 700; }
.prod-salons tbody td { padding: 9px 12px; border-bottom: 1px solid #eef3ef; font-size: 13.5px; color: #3f5347; vertical-align: top; }
.prod-salons tbody tr.prod-salons-alt td { background: #f7faf8; }
.prod-salons td.prod-salons-name { font-weight: 700; color: #0f5d2d; white-space: nowrap; }
.prod-salons td.prod-salons-nowrap { white-space: nowrap; }
.prod-salons tbody td a { color: #16823f; font-weight: 600; text-decoration: none; }
.prod-salons tr.prod-salons-band td { font-weight: 700; text-align: center; padding: 8px 10px; font-size: 12.5px;
  letter-spacing: .05em; text-transform: uppercase; }
.prod-salons tr.prod-salons-band-regular td        { background: #16823f; color: #ffffff; }
.prod-salons tr.prod-salons-band-first_done td     { background: #c79327; color: #231a06; }
.prod-salons tr.prod-salons-band-first_upcoming td { background: #eaf3ec; color: #0f5d2d; }
.prod-salons tr.prod-salons-band-considered td     { background: #f1f3f5; color: #5a6e62; }