/* ==========================================================================
   CUSTOM STYLE - TEMPLATE CASSIOPEIA / FAVOURITE
   ========================================================================== */

:root {
  --body-bg: #ffffff;
  --body-text: #000000;
  --header-bg: #ffffff;
  --main-bottom-bg: #025b7d;
  --footer-bg: #025b7d;
  --brand-pink: #e73078;
  --brand-teal: #025b7d;
  --link-hover-color: #e73078;
}

/* ==========================================================================
   TOP SLOGAN BAR
   ========================================================================== */
.site-container {
  padding-top: 24px !important; /* Espace pour le bandeau supérieur */
}

.top-slogan-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: var(--brand-pink) !important;
  margin: 0 !important;
  padding: 5px 0 !important;
  line-height: 1 !important;
}

.slogan-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.top-slogan-bar .slogan-container {
  text-align: left;
  padding-left: 10px;
}

.slogan-text {
  color: #ffffff !important;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.0em;
  letter-spacing: 0.5px;
  display: inline-block;
  line-height: 1 !important;
}

.slogan-text.left { text-align: left; flex: 2; }
.slogan-text.center { text-align: center; flex: 1; }
.slogan-text.right { text-align: right; flex: 1; }

.container-topbar p {
  margin: 0 !important;
}

/* ==========================================================================
   EN-TÊTE (HEADER) ET MENU / NAVIGATION MOBILE
   ========================================================================== */
.header {
  background-color: var(--header-bg) !important;
  color: #000000 !important;
  border-bottom: 1px solid #eaeaea;
}

.header a, .header {
  color: #000000 !important;
}

.container-header {
  position: relative;
  z-index: 1000;
}

.container-banner.full-width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.container-banner.full-width .slideshowck {
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}

/* Menu principal desktop */
.mod-menu_dropdown-metismenu .metismenu-item a,
.mod-menu_dropdown-metismenu .metismenu-item button {
  font-weight: 500;
  font-size: 1.0em;
  color: #333333 !important;
  background-color: transparent !important;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.mod-menu_dropdown-metismenu .metismenu-item a:hover,
.mod-menu_dropdown-metismenu .metismenu-item button:hover,
.mod-menu_dropdown-metismenu .metismenu-item.active > a,
.mod-menu_dropdown-metismenu .metismenu-item.current > a {
  color: var(--brand-pink) !important;
  background-color: transparent !important;
}

.mod-menu_dropdown-metismenu .metismenu-item.active > a {
  font-weight: 600;
  font-size: 1.1em;
}

@media (min-width: 992px) {
  .container-header .mod-menu {
    justify-content: flex-end !important;
    width: 100%;
  }
}

/* Navigation Mobile & Burger */
@media (max-width: 991.98px) {
  .container-nav,
  .site-grid .header-inner, 
  .container-header .header-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    gap: 15px !important;
    width: 100% !important;
  }

  .container-nav .navbar,
  .header-inner .navbar-toggler,
  .header-inner .navbar {
    display: flex !important;
    align-items: center !important;
    order: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
  }

  .container-nav .moduletable:has(.custom-logo-container),
  .header-inner .navbar-brand {
    order: 2 !important;
    margin: 0 !important;
  }

  .navbar-toggler {
    padding: 0.4rem 0.6rem !important;
    border: 1px solid #91bee7 !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .navbar-collapse,
  .header-inner .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15) !important;
    padding: 15px !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
  }

  .navbar-collapse ul.mod-menu {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }
}

/* Bouton Burger FontAwesome */
.navbar-toggler .icon-menu,
.navbar-toggler svg,
.navbar-toggler-icon {
  display: none !important;
}

.navbar-toggler::before {
  content: "\f0c9"; 
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--brand-pink) !important;
}

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler[aria-expanded="true"] {
  border: 1px solid #91bee7 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Logo & Responsive Scaling */
.custom-logo-container {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.custom-logo-img {
  max-height: 180px;
  width: auto;
  max-width: 250px;
  display: block;
}

@media (max-width: 1440px) { .custom-logo-img { max-width: 225px !important; } }
@media (max-width: 1280px) { .custom-logo-img { max-width: 175px !important; } }
@media (max-width: 1150px) { .custom-logo-img { max-width: 125px !important; } }
@media (max-width: 1080px) { .custom-logo-img { max-width: 85px !important; } }
@media (max-width: 1025px) { .custom-logo-img { max-width: 50px !important; } }
@media (max-width: 991.98px) {
  .custom-logo-img { max-width: 125px !important; height: auto !important; }
  .custom-logo-container { padding: 10px 0 !important; }
}


.container-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 5px !important;  
  margin-bottom: 0 !important;
  
}

.container-nav {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;  
  margin-bottom: 0 !important;
}

/* ==========================================================================
   SECTION MAIN-BOTTOM & FOOTER PRINCIPAL
   ========================================================================== */
.container-main-bottom, 
.wrapper-main-bottom,
[class*="main-bottom"] {
  background-color: var(--main-bottom-bg) !important;
  color: #ffffff !important;
}

.container-main-bottom h1, .container-main-bottom h2, .container-main-bottom h3, 
.container-main-bottom p, .container-main-bottom span {
  color: #ffffff !important;
}

.container-main-bottom a {
  color: #ffffff !important;
  text-decoration: underline;
}
.container-main-bottom a:hover {
  color: var(--link-hover-color) !important;
}

.footer {
  background-color: var(--footer-bg) !important;
  color: #ffffff !important;
  border-top: 1px solid #eaeaea;
}

.footer a {
  color: var(--brand-pink) !important;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #ffffff !important;
  text-decoration: none;
}


/* ==========================================================================
   VISFORMS - FORMULAIRES PERSONNALISÉS
   ========================================================================== */
div.visfield-container.custom-visforms-style {
  margin-top: 30px !important;
}

div.visfield-container {
  margin: 0 !important;
  padding: 0 !important;
  margin-bottom: 5px !important;
}

div.visfield-container .form-group.row,
div.visfield-container .row,
div.visfield-container [class*="col-"] {
  margin: 0 !important;
  padding: 0 !important;
  row-gap: 0 !important;
}

label.custom-visforms-style {
  font-size: 1.125em !important;
  color: var(--brand-pink) !important;
  line-height: 1.1 !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  padding-top: 6px !important;
}

input.form-control.custom-visforms-style,
textarea.form-control.custom-visforms-style,
select.form-control.custom-visforms-style {
  font-size: 1.125em !important;
  color: var(--brand-teal) !important;
  border: 2px solid var(--brand-pink) !important;
  background-color: #ffffff !important;
  border-radius: 3px !important;
  padding: 4px 8px !important;
  margin-bottom: 0 !important;
  width: 100% !important;
}

input.form-control.custom-visforms-style:focus,
textarea.form-control.custom-visforms-style:focus {
  outline: none !important;
  border-color: var(--brand-pink) !important;
  color: var(--brand-teal) !important;
  box-shadow: 0 0 0 0.25rem rgba(231, 48, 120, 0.25) !important;
}

div.fc-tbxfield2, 
div[data-error-field-id] {
  margin: 0 !important;
}

/* Largeurs spécifiques des champs Visforms */
#field1.custom-visforms-style,
#field2.custom-visforms-style,
#field3.custom-visforms-style,
#field5.custom-visforms-style,
#field6.custom-visforms-style,
#field7.custom-visforms-style {
  width: 400px !important;
  min-width: 175px !important;
  padding: 0.15rem 0.4rem !important;
  font-size: 1.125rem !important;
  height: auto !important;
}

#field4.custom-visforms-style {
  width: 100px !important;
  min-width: 100px !important;
  padding: 0.15rem 0.4rem !important;
  font-size: 1.125rem !important;
  height: auto !important;
}

#field8.custom-visforms-style {
  width: 100% !important;
  padding: 0.15rem 0.4rem !important;
  font-size: 1.125rem !important;
  height: auto !important;
}


/* ==========================================================================
   EFFETS VISUELS & HALOS
   ========================================================================== */
.image-halo-fixe {
  filter: drop-shadow(0px 0px 25px #ffffff);
  transition: filter 0.3s ease; 
}

.image-halo {
  filter: drop-shadow(0px 0px 40px #ffffff);
  transition: filter 0.3s ease; 
}

.image-halo:hover {
  filter: drop-shadow(0px 0px 25px #ffffff);
}


/* ==========================================================================
   BLOCS INFO, PROMOTIONS & COMPOSANTS
   ========================================================================== */
.afficher-box-info {
  position: relative;
  z-index: 1;
}

.afficher-box-info .info-box-flex-two-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background-color: #ffffff;
  border: 1px solid var(--brand-pink) !important;
  border-radius: 8px;
  padding: 2px !important;
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(231, 48, 120, 0.18), 0 1px 3px rgba(0, 0, 0, 0.8);
  position: absolute;
  right: 0;
  top: -10px;
  width: 325px;
  max-width: 325px;
  z-index: 99;
}

.afficher-box-info .com-content-article .titre {
  font-size: 1.6rem !important;
  line-height: 1.0 !important;
  margin: 0 !important;
  padding: 0 345px 0 0 !important;
}

.afficher-box-info .info-box-header {
  background-color: var(--brand-teal);
  color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 1.0rem;
  padding: 5px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.afficher-box-info .info-box-body {
  background-color: #ffffff;
  color: var(--brand-pink);
  font-family: 'Open Sans', sans-serif;
  font-size: 1.0rem;
  font-weight: 500;
  line-height: 1.6;
  padding: 2px;
}

@media (max-width: 992px) {
  .afficher-box-info .info-box-flex-two-lines {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    margin: 15px 0 5px 0 !important;
  }
  .afficher-box-info .com-content-article .titre {
    padding-right: 0 !important;
  }
}

/* Blocs Promotionnels & Vidéo */
.promote-box, .promo-block {
  background: #ffffff;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.promote-box:hover, .promo-block:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.promote-link { display: block; width: 100%; }
.promote-img { max-width: 100%; height: auto; display: block; margin: 0 auto; transition: transform 0.3s ease; }
.promote-box:hover .promote-img { transform: scale(1.03); }

.promo-block {
  border: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  opacity: 0;
  animation: fadeInPromo 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.promo-icon-wrapper {
  width: 60px;
  height: 60px;
  background-color: #fceaf1;
  color: var(--brand-pink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem auto;
}

.promo-title { color: #333333; font-size: 1.25rem; font-weight: 700; margin-bottom: 0.75rem; }
.promo-block p { color: #666666; font-size: 0.9rem; line-height: 1.5; margin-bottom: 1.5rem; flex-grow: 1; }

.promo-video-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 4px;
  background-color: #000;
}

.promo-video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}

.promo-img-link { display: block; overflow: hidden; border-radius: 6px; }
.promo-img-link img { transition: transform 0.3s ease, filter 0.3s ease; }
.promo-img-link:hover img { transform: scale(1.05); filter: brightness(1.05); }


/* ==========================================================================
   TYPOGRAPHIE, CITATIONS & LISTES
   ========================================================================== */
blockquote, .favth-blockquote {
  padding: 1rem 1.5rem !important;
  margin: 1.5rem 0 !important;
  font-size: 1.2rem !important;
  font-style: italic !important;
  background-color: #fcf8fa !important;
  border-left: 5px solid var(--brand-pink) !important;
  border-radius: 0 4px 4px 0;
  text-align: left;
}

blockquote p, .favth-blockquote p {
  margin-bottom: 0 !important;
  color: #555555 !important;
  line-height: 1.6 !important;
}

blockquote cite, blockquote footer, .favth-blockquote .quote-author {
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-style: normal !important;
  color: var(--brand-pink) !important;
  margin-top: 0.5rem !important;
}

blockquote cite::before, blockquote footer::before {
  content: "— " !important;
}

/* Liste carrée avec coche */
ul.favth-list-square, .favth-list-square {
  list-style: none !important;
  padding-left: 0.5rem !important;
  margin-bottom: 1rem;
}

ul.favth-list-square li, .favth-list-square li {
  position: relative;
  padding-left: 2.2rem !important;
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

ul.favth-list-square li::before, .favth-list-square li::before {
  content: "" !important;
  position: absolute;
  left: 0; top: 0.15rem;
  width: 1.35rem; height: 1.35rem;
  background-color: var(--brand-pink) !important;
  border-radius: 3px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 65% !important;
  display: inline-block;
}

.favth-img-rounded, img.favth-img-rounded {
  border-radius: 6px !important;
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   IMAGE CIRCULAIRE (STYLE FAVOURITE / FAVTHEMES)
   ========================================================================== */

.favth-img-circle,
img.favth-img-circle {
  border-radius: 50% !important;
  display: inline-block;
  max-width: 100%;
  height: auto;
  object-fit: cover; /* Évite la déformation de l'image si elle n'est pas carrée à la base */
}

/* ==========================================================================
   BOUTONS PERSONNALISÉS (.favth-btn & .favth2-btn)
   ========================================================================== */
.favth-btn, .favth2-btn {
  display: inline-block;
  font-weight: 500;
  line-height: 1.5;
  color: #ffffff !important;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 1.25rem;
  font-size: 1.375rem;
  border-radius: 4px;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.favth-btn { background-color: var(--brand-pink); }
.favth-btn:hover, .favth-btn:focus { background-color: var(--brand-teal); color: #ffffff !important; }

.favth2-btn { background-color: var(--brand-teal); }
.favth2-btn:hover, .favth2-btn:focus { background-color: var(--brand-pink); color: #ffffff !important; }

.favth-btn.favth-btn-small, .favth-btn-small,
.favth2-btn.favth2-btn-small, .favth2-btn-small {
  padding: 0.25rem 0.75rem;
  font-size: 1.0rem;
  font-weight: 700;
  border-radius: 3px;
}

i.fas, i.far, i.fab, i.fa {
  margin-left: 4px !important;
  margin-right: 6px !important;
  color: #fff !important;
  font-size: 1.250em;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

/* ==========================================================================
   FOOTER SOCIÉTÉ, MAGASINS & RÉSEAUX SOCIAUX
   ========================================================================== */
.footer-societe {
  margin: 5px 5px 25px 5px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  color: #ffffff;
  text-align: center;
  font-size: clamp(1.1rem, 1.5vw, 1.250rem);
}

.footer-societe div {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.footer-societe span, .txt-groupe { white-space: nowrap; }
.footer-societe p { margin-bottom: 0.75rem; line-height: 1.6; }
.footer-societe strong, .footer-societe b, .footer-societe .bold { font-weight: 700; }
.footer-societe a { color: inherit; text-decoration: underline; transition: opacity 0.2s ease-in-out; }
.footer-societe a:hover { opacity: 0.8; text-decoration: none; }
.footer-societe img { max-width: 100%; height: auto; vertical-align: middle; }

div.footer-convention {
  margin: 20px auto;
  padding: 0 15px;
  text-align: center;
  font-family: 'Open Sans', sans-serif !important;
  color: #ffffff !important;
  font-size: clamp(1.0rem, 1.5vw, 1.125rem);
}

div.footer-convention a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-color: var(--brand-pink) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  display: inline-block;
}

div.footer-convention a:hover {
  background: var(--brand-pink);
  text-decoration: none;
}

.footer-social-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

div.footer-social {
  margin: 20px 0;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 1.1em;
  color: #ffffff !important;
  text-align: center;
  flex: 1 1 250px;
  box-sizing: border-box;
}

div.footer-social a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: underline !important;
  text-decoration-color: var(--brand-pink) !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

div.footer-social a:hover {
  background: transparent !important;
  text-decoration: none !important;
}

div.footer-social i {
  font-weight: 900 !important;
  color: #ffffff !important;
  font-size: 1.0em;
  margin: 0 0.4rem 0 0 !important;
  display: inline-block;
  vertical-align: middle;
}

@media screen and (max-width: 768px) {
  div.footer-social { margin: 15px auto; font-size: 1.0em; padding: 0 10px; }
}
@media screen and (max-width: 480px) {
  div.footer-social { margin: 10px auto; font-size: 0.95em; padding: 0 8px; }
  div.footer-social i { margin-right: 0.2rem; }
}

div.footer-menu {
  font-family: 'Open Sans', sans-serif !important;
  color: #ffffff !important;
  font-size: 1.0em;
  margin: 30px auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

div.footer-menu span { display: block; width: 100%; display: flex; justify-content: center; }

div.footer-menu a {
  color: #ffffff !important;
  font-weight: 700;
  text-decoration: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 12px 20px;
  width: 100%;
  max-width: 250px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  transition: all 0.2s ease-in-out;
}

div.footer-menu a:hover {
  background: var(--brand-pink);
  border-color: var(--brand-pink);
}

div.footer-menu i {
  color: #91bee7 !important;
  font-size: 1.250em;
  margin-right: 15px;
  width: 20px;
  text-align: center;
}

.footer-magasins {
  margin: 15px 5px;
  width: 100%;
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
}

.footer-magasins .footer-adresse,
.footer-magasins .footer-tel,
.footer-magasins .footer-mail {
  margin: 5px 25px;
  font-size: 1.125em;
  font-weight: normal;
  color: #fff;
}

.footer-magasins .footer-localite {
  margin: 5px;
  font-size: 1.375em;
  font-weight: bold;
  color: #fff;
}

.footer-magasins .footer-localite a {
  color: var(--brand-pink);
  text-decoration: none;
  text-shadow: #fff 1px 0 10px;
}

.footer-magasins .footer-localite a:hover {
  background-color: var(--brand-pink);
  color: #fff;
  text-shadow: none;
}

.footer-magasins i.fas {
  color: #91bee7 !important;
  font-size: 1.250em;
  margin-right: 12px;
  width: 20px;
  text-align: center;
}


/* ==========================================================================
   MISE EN PAGE PAGES SPÉCIFIQUES & HISTORIQUE
   ========================================================================== */
#container2C { width: 100%; height: 100%; text-align: left; }
#left2C { float: left; width: 400px; min-width: 70%; max-width: 100%; height: 100%; }
#right2C { float: right; width: 200px; height: 100%; }

.container { display: flex; justify-content: center; align-items: center; }

.jb_rdv {
  font-family: 'Open Sans', sans-serif;
  font-size: 1em;
  font-weight: bold;
  color: #000;
}
.jb_rdv div {
  float: right;
  background-color: #fff;
  width: 400px;
  margin: 5px;
  text-align: left;
  padding: 15px;
}

.titre_job {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  font-weight: bold;
  color: var(--brand-teal);
}

/* ==========================================================================
   CLASSES DE TEXTE PERSONNALISÉES
   ========================================================================== */

.texte_1250B {
  margin: 1.250em;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  color: #025b7d;
}

.texte_1250R {
  margin: 10px;
  font-family: Roboto, sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.250rem) !important;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  color: #e73078;
}

.texte_R1125, .texte_R1250 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.250rem) !important;
  color: #e73078;
}

.texte_B1250 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  font-weight: bold;
  color: #025b7d;
}
.texte_R1125, .texte_R1250 {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.250rem) !important;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: #e73078;
}

/* ==========================================================================
   HISTORIQUE - PUCES ET ANNÉES
   ========================================================================== */

/* Classes historiques et styles timeline */
.style1900, .style1959, .style1980, .style1997, .style1998, .style2010, .style2013, .style_history {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  color: var(--brand-teal);
  padding: 10px;
  margin: 5px 15px;
  border-radius: 15px;
  background-color: #fff;
  /* Flexbox pour aligner l'image et le paragraphe horizontalement */
  display: flex;
  align-items: center; /* Aligne verticalement au centre (ou 'flex-start' si vous préférez en haut) */
  gap: 20px;          /* Espace propre entre l'image et le texte */
}

.style1900 { border-left: 10px solid #2d5755; }
.style1959 { border-left: 10px solid #00ada4; }
.style1980 { border-left: 10px solid #00aedd; }
.style1997 { border-left: 10px solid #875ca3; }
.style1998 { border-left: 10px solid #e7387b; }
.style2010 { border-left: 10px solid #f29c62; }
.style2013 { border-left: 10px solid #DBC00F; }
.style_history { border-left: 10px solid #00597b; background-color: #ddebf8; }

/* S'assure que l'image garde sa taille sans écraser le conteneur */
.style1900 img, .style1959 img, .style1980 img, .style1998 img {
  flex-shrink: 0;
}

/* Le paragraphe texte prend l'espace restant de manière fluide */
.style1900 p, .style1959 p, .style1980 p, .style1997 p, .style1998 p, .style2010 p, .style2013 p, .style_history p {
  margin: 0 !important;
  flex-grow: 1;
}

/* Passage en colonne sur les petits écrans (smartphones) pour éviter d'écraser l'image */
@media screen and (max-width: 768px) {
  .style1900, .style1959, .style1980, .style1997, .style1998, .style2010, .style2013, .style_history {
    flex-direction: column; /* L'image passe au-dessus et le texte en dessous */
    text-align: center;     /* Centre le contenu sur mobile */
  }
}

/*-------------------------------------------*/

/*================================================================================================
  NOUVELLE CLASS POUR LA GESTION DE L'HISTORIQUE - PUCES - COULEURS - YEAR - NOTE ...
================================================================================================*/

/* 1. Base commune pour toutes les années et textes d'historique */
.history [class^="t"],
.history [class^="year_t"],
.history [class^="note_t"] {
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  min-height: 40px;
}

/* 2. Style global du paragraphe conteneur (Flexbox pour l'alignement) */
.history [class^="t"] {
  margin: 5px 0;
  font-size: 1.250em;
  color: #00597b;
  display: flex;
  align-items: center;
}

/* 3. Base commune pour toutes les puces vectorielles */
.history [class^="puce_t"] {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url('/images/pic/puce_history.svg');
  background-size: 40px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 10px;
}

/* 4. Textes des années (mutualisés) */
.history [class^="year_t"] {
  font-size: 1.250em;
  color: #000000; /* Couleur par défaut des années, ou spécifique si besoin */
}

/* 5. Textes des notes (mutualisés) */
.history [class^="note_t"] {
  margin: 10px !important;
  padding: 5px 0 !important;
  font-size: 1.0em;
  color: #000000; /* Couleur par défaut des notes, ou spécifique si besoin */
}

/*-------------- PERSONALISATION PAR ANNEES ------------------*/

/* Couleur des puces spécifiques par année */
.history .puce_t1900 {
  filter: brightness(0) saturate(100%) invert(20%) sepia(71%) saturate(324%) hue-rotate(124deg) brightness(87%) contrast(89%);
}

.history .puce_t1959 {
  filter: brightness(0) saturate(100%) invert(28%) sepia(75%) saturate(2070%) hue-rotate(156deg) brightness(95%) contrast(102%);
}

.history .puce_t1980 {
  filter: brightness(0) saturate(100%) invert(44%) sepia(73%) saturate(5127%) hue-rotate(168deg) brightness(96%) contrast(99%);
}

.history .puce_t1997 {
  filter: brightness(0) saturate(100%) invert(28%) sepia(29%) saturate(1683%) hue-rotate(233deg) brightness(90%) contrast(88%);
}

.history .puce_t1998 {
  filter: brightness(0) saturate(100%) invert(24%) sepia(89%) saturate(2234%) hue-rotate(317deg) brightness(90%) contrast(104%);
}

.history .puce_t2010 {
  filter: brightness(0) saturate(100%) invert(58%) sepia(78%) saturate(2305%) hue-rotate(344deg) brightness(98%) contrast(91%);
}
.history .puce_t2013 {
  filter: brightness(0) saturate(100%) invert(73%) sepia(73%) saturate(657%) hue-rotate(4deg) brightness(96%) contrast(88%);
}

.history .puce_t2024 {
  filter: brightness(0) saturate(100%) invert(11%) sepia(74%) saturate(5972%) hue-rotate(185deg) brightness(98%) contrast(101%);
}

/* Couleur du texte des années spécifiques par année */
.history .year_t1900 {
  color: #1f433f;
}

.history .year_t1959 {
  color: #018780;
}

.history .year_t1980 {
  color: #0191b3;
}

.history .year_t1997 {
  color: #683e90;
}

.history .year_t1998 {
  color: #e7196c;
}

.history .year_t2010 {
  color: #ef7a2a;
}

.history .year_t2013 {
  color: #DBC00F;
}

.history .year_t2024 {
  color: #00597b;
}
 

/* Couleur du texte des notes spécifiques par année */
.history .note_t2024 {
  color: #e73078;
}

/* ==========================================================================
   BORDURES D'IMAGES - HISTORIQUE
   ========================================================================== */

.border_img_1900 {
  border: 6px #1f433f solid;
}

.border_img_1959 {
  border: 6px #018780 solid;
}

.border_img_1980 {
  border: 6px #0191b3 solid;
}

.border_img_1998 {
  border: 6px #e7196c solid;
}



/*==========================================================================================*/
/* Contact grids & bulles */
.jb_divcontact { background: #fff; width: 100%; margin: 10px auto; overflow: hidden; }
.jb_divcontact div {
  float: left;
  background-color: #fff;
  width: 400px;
  margin: 5px;
  text-align: left;
  border-left: 6px var(--brand-pink) solid;
  border-bottom: 1px var(--brand-teal) solid;
  border-radius: 10px 20px 0 70px;
  box-shadow: 0px 2px 3px #91bee7;
  padding: 35px 15px;
}
.jb_divcontact div p { font-family: 'Open Sans', sans-serif; font-size: 1.125em; }
.jb_divcontact #LOCALITE { font-size: 1.250em; color: var(--brand-teal); font-weight: bold; }

a.bulle { position: relative; color: #fff; text-decoration: none; }
a.bulle:hover { z-index: 50; background: none; }
a.bulle span { display: none; }
a.bulle:hover span {
  display: block;
  position: absolute;
  top: -100px; left: 0;
  text-align: left;
  font-size: 1.125em;
  color: #fff;
  min-width: 200px; max-width: 400px;
  background: var(--brand-pink);
  padding: 5px;
  border: #000 solid 1px;
}

/* Titres globaux & colonnes */
.titre {
  margin: 10px 5px;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem) !important;
  font-weight: bold;
  color: #000;
}

/* ==========================================================================
   CONTAINER MAGASIN - MISE EN FORME PAGE
   ========================================================================== */
/* Conteneur principal des deux box */
.magasin-container {
  display: flex;
  flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur mobile */
  gap: 20px;
  padding: 10px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
  background: #ffffff;
  border-radius: 8px;
}
/* Effet au survol spécifique pour l'ID 'mon' (fond blanc et légère élévation) */
.magasin-container.magasin-hover-mon:hover {
  background-color: #e8f5e9; /* Exemple : vert clair - Pour Mons */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 0.2);
  
}
.magasin-container.magasin-hover-fra:hover {
  background-color: #fff3e0; /* Exemple : orange clair - Pour Frameries */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(255, 152, 0, 0.2);
}
.magasin-container.magasin-hover-hor:hover {
  background-color: #e3f2fd; /* Exemple : bleu clair - Pour Hornu */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(33, 150, 243, 0.2);
}
.magasin-container.magasin-hover-tou:hover {
  background-color: #ffebee; /* Rouge très clair (pastel) - Pour Tournai */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(244, 67, 54, 0.2); /* Ombre légèrement rougeâtre */
}
.magasin-container.magasin-hover-ath:hover {
  background-color: #fff9c4; /* Jaune clair et agréable - Pour Ath */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(255, 235, 59, 0.2); /* Ombre dorée */
}
.magasin-container.magasin-hover-bel:hover {
  background-color: #bbdefb; /* Bleu plus prononcé - Pour Beloeil */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(33, 150, 243, 0.2); /* Ombre bleutée */
}

/* Box de gauche (plus grande / extensible) */
.magasin-box-left {
  flex: 2; /* Prend deux fois plus d'espace proportionnel */
  min-width: 300px; /* S'adapte proprement sur mobile */
  background: #ffffff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(194, 222, 255, 0.50);
  
}

/* Box de droite (minimum 400px de largeur) */
.magasin-box-right {
  flex: 1 0 200px; /* Prend l'espace restant mais respecte le min-width */
  min-width: 360px; /* Contrainte minimale demandée */
  background: #ffffff;
  padding: 5px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(194, 222, 255, 0.50);
}

/* Adaptation spécifique pour petits mobiles si nécessaire */
@media (max-width: 768px) {
  .magasin-container {
    padding: 10px;
  }
  .magasin-box-right {
    min-width: 100%; /* Sur très petits écrans, la box de droite prend toute la largeur */
  }
}

/* ==========================================================================
   BLOC ADRESSE & HORAIRES (.GoogleMap_adresse)
   ========================================================================== */

.GoogleMap_adresse {
  padding: 10px 10px;
  background-color: #ffffff;
  max-width: 100%;
  font-family: 'Open Sans', sans-serif;
  border: 1px solid #91bee7;
  overflow: hidden;
  font-size: clamp(1.0rem, 2.0vw, 1.250rem) !important;
  font-family: 'Open Sans', sans-serif;
  color: #000000;
  
  /* Ombre plus foncée teintée avec votre couleur #91bee7 */
  box-shadow: 0 4px 8px rgba(145, 190, 231, 0.40);
  border-radius: 6px; 
  background: #ffffff; 
  margin-bottom: 15px;
}

.GoogleMap_adresse a {
  font-family: 'Open Sans', sans-serif;
  border-radius: 1.125em;
  color: #e73078;
}

.GoogleMap_adresse a:hover { 
  background-color: var(--brand-pink, #e73078); 
  color: #ffffff !important; 
  border-radius: 0px;
}

/* Titre du bloc d'adresse */
.GoogleMap_adresse h3, 
.GoogleMap_adresse .adresse-title {
  color: #025b7d;
  font-weight: 700;
  font-size: clamp(1.0rem, 2.0vw, 1.125rem) !important;
}

/* Icônes (FontAwesome) */
.GoogleMap_adresse i.fas,
.GoogleMap_adresse i.far,
.GoogleMap_adresse i.fab,
.GoogleMap_adresse i.fa,
.GoogleMap_adresse i.fa-solid,
.GoogleMap_adresse i.fa-regular {
  margin-left: 0px !important;
  margin-right: 8px !important;
  color: #e73078 !important;
  font-size: clamp(1.0rem, 2.0vw, 1.50rem) !important;
}


/* ==========================================================================
   GESTION DES HORAIRES MAGASINS
   ==========================================================================*/

.message-card {
  padding: 2px 2px;
  background-color: #ffffff;
  max-width: 100%;
  font-family: 'Open Sans', sans-serif;
  border: 1px solid red;
  overflow: hidden;
  background: #ffffff;
  /* Ombre plus foncée avec une légère nuance rouge/bordeaux */
  box-shadow: 0 4px 8px rgba(180, 40, 40, 0.25);
  border-radius: 6px; 
  background: #ffffff; 
  margin-bottom: 15px;
  margin-bottom: 10px;
}

.message-title {
  padding: 0px 0px;
  border-bottom: 1px solid #ffffdd;
  background: red !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1.0rem, 2.0vw, 1.250rem) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: center !important;
  border-radius: 8px;
}

.message-row {
  padding: 2px 2px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ffffdd;
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1.0rem, 2.0vw, 1.125rem) !important;
  font-weight: 600 !important;
  color: red !important;
  background-color: #ffffff;
}

.message-row:last-child {
  border-bottom: none;
}

/*---------------------------------------------------------------------------*/

.horaire-card {
  padding: 2px 2px;
  background-color: #ffffff;
  max-width: 100%;
  font-family: 'Open Sans', sans-serif;
  border: 1px solid #025b7d;
  border-radius: 8px;
  overflow: hidden;
  /* Ombre plus foncée teintée avec votre bleu #025b7d */
  box-shadow: 0 4px 8px rgba(2, 91, 125, 0.30);
  border-radius: 6px; 
  background: #ffffff; 
  margin-top: 15px;
  margin-bottom: 15px;
}

.horaire-title {
  padding: 0px 0px;
  border-bottom: 1px solid #91bee7;
  background: #025b7d !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1.0rem, 2.0vw, 1.250rem) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: center !important;
  border-radius: 8px;
  display: flex;
  align-items: center;      /* Centre verticalement */
  justify-content: center;  /* Centre horizontalement */
  gap: 10px;
  margin: 0;
}

.horaire-title i.fas,
.horaire-title i.far,
.horaire-title i.fab,
.horaire-title i.fa,
.horaire-title i.fa-solid,
.horaire-title i.fa-regular {
  margin-left: 0px !important;
  margin-right: 6px !important;
  color: #ffffff !important;
  font-size: clamp(1.1rem, 2.0vw, 1.250rem) !important;
  flex-shrink: 0;
  width: 20px;         /* Largeur fixe pour l'icône */
  text-align: center;  /* Centre l'icône dans cet espace de 25px */
}

/* ------------------------------*/

.consultation-card {
  padding: 2px 2px;
  background-color: #ffffff;
  max-width: 100%;
  font-family: 'Open Sans', sans-serif;
  border: 1px solid #e73078;
  overflow: hidden;
  /* Ombre plus foncée teintée avec votre couleur #e73078 */
  box-shadow: 0 4px 8px rgba(231, 48, 120, 0.30);
  border-radius: 6px; 
  background: #ffffff; 
  margin-top: 15px;
  margin-bottom: 15px;
}

.consultation-title {
  padding: 0px 0px;
  border-bottom: 1px solid #91bee7;
  background: #e73078 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1.0rem, 2.0vw, 1.250rem) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  text-align: center !important;
  border-radius: 8px;
  display: flex;
  align-items: center;      /* Centre verticalement */
  justify-content: center;  /* Centre horizontalement */
  gap: 10px;
  margin: 0;

}

.consultation-title i.fas,
.consultation-title i.far,
.consultation-title i.fab,
.consultation-title i.fa,
.consultation-title i.fa-solid,
.consultation-title i.fa-regular {
  margin-left: 0px !important;
  margin-right: 8px !important;
  color: #ffffff !important;
  font-size: clamp(1rem, 2vw, 1.250rem) !important;
  flex-shrink: 0;
  width: 20px;         /* Largeur fixe pour l'icône */
  text-align: center;  /* Centre l'icône dans cet espace de 25px */
}

.horaire-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;
}

.horaire-row:last-child {
  border-bottom: none;
}

.horaire-jour {
  background-color: #ffffff;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
  color: #025b7d;
  font-weight: 600 !important;
  text-align: center;
  width: 120px;
}

.horaire-heures {
  padding: 2px 5px;
  flex-grow: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(0.90rem, 1.5vw, 1.125rem) !important;
  color: #000;
  font-weight: 600 !important;
  text-align: left;
  display: flex;             /* Active le mode Flexbox */
  align-items: flex-start;   /* Aligne l'icône avec la première ligne de texte en haut */
  gap: 10px;                 /* Crée un espace de 10px entre l'icône et le texte */
  margin-bottom: 10px;       /* Un peu d'espace en dessous (optionnel) */
}

.horaire-heures i.fas,
.horaire-heures i.far,
.horaire-heures i.fab,
.horaire-heures i.fa {
  margin-left: 0px !important;
  margin-right: 8px !important;
  color: #000 !important;
  font-size: clamp(1rem, 2vw, 1.125rem) !important;
  margin-top: 4px;           /* Ajustement subtil pour bien aligner l'icône avec le texte */
  min-width: 16px;           /* Largeur minimum pour que les icônes soient bien alignées entre elles */
  text-align: center;
}

/* Le texte prendra tout l'espace restant */
.horaire-heures span {
    flex: 1; 
    line-height: 1.5;          /* Améliore la lisibilité sur plusieurs lignes */
}

.statut-cabinet {
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
  background: #fafafa;
  border-top: 1px solid #91bee7;
  margin: 0;
}

.jour_exception {
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
  font-weight: 600 !important;
  background-color: #ffffff;
  color: red !important;
}

.jour_exception i.fas
.jour_exception i.far,
.jour_exception i.fab,
.jour_exception i.fa,
.jour_exception i.fa-solid,
.jour_exception i.fa-regular {
  margin-left: 0px !important;
  margin-right: 8px !important;
  color: red !important;
  background-color: #ffffff !important;
  font-size: clamp(1.0rem, 2.0vw, 1.125rem) !important;
}

.heure_exception {
  color: red !important;
}

/* ------------------------------*/

/*==========================================================================
  Consultations du jour
==========================================================================*/
/*-------------------------------------- VERSION BOX ----------------------------------------------- */
.module-consultations-jour {
  padding: 10px 10px;
  font-family: 'Open Sans', sans-serif !important;
  font-size: clamp(1.0rem, 1.5vw, 1.175rem) !important;
  font-weight: 500 !important;
  color: #000 !important;
  border-radius: 8px;
  margin-bottom : 10px;
  background: #ffffff;
  border: 1px solid #dee2e6;
  margin-bottom: 10px;
}

.module-consultations-jour p {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 10px;
  font-size: clamp(1.0rem, 1.5vw, 1.250rem) !important;
  font-weight: 600 !important;
  color: #000000 !important;
  text-align: left !important;
}

.liste-magasins-consult {
  padding: 0px 0px;
  display: grid;
  /* 
    - minmax(320px, 1fr) : Chaque box fait au minimum 320px de large, 
      mais s'élargit pour remplir l'espace.
    - Dès qu'il n'y a plus la place pour une box de 320px, 
      le navigateur fait passer automatiquement la box à la ligne suivante !
  */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 15px;
  align-items: stretch; /* Garantit que toutes les box d'une même ligne ont la même hauteur */
  width: 100%;
  box-sizing: border-box;
}

/* Style de chaque box individuelle */
.carte-consultation-item {
  min-width:320px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #025b7d;
  border-radius: 8px;
  padding: 5px;
  box-sizing: border-box;
  height: 100%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

/* Effet au survol spécifique pour l'ID 'mon' (fond blanc et légère élévation) */
.liste-magasins-consult .magasin-hover-mon:hover {
  /*background-color: #e8f5e9; /* Exemple : vert clair - Pour Mons */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(76, 175, 80, 1.2);
}
.liste-magasins-consult .magasin-hover-fra:hover {
  /*background-color: #fff3e0; /* Exemple : orange clair - Pour Frameries */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(255, 152, 0, 1.2);
}
.liste-magasins-consult .magasin-hover-hor:hover {
  /*background-color: #e3f2fd; /* Exemple : bleu clair - Pour Hornu */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(33, 150, 243, 1.2);
}
.liste-magasins-consult .magasin-hover-tou:hover {
  /*background-color: #ffebee; /* Rouge très clair (pastel) - Pour Tournai */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(244, 67, 54, 1.2); /* Ombre légèrement rougeâtre */
}
.liste-magasins-consult.magasin-hover-ath:hover {
  /*background-color: #fff9c4; /* Jaune clair et agréable - Pour Ath */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(255, 235, 59, 1.2); /* Ombre dorée */
}
.liste-magasins-consult .magasin-hover-bel:hover {
  /*background-color: #bbdefb; /* Bleu plus prononcé - Pour Beloeil */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(33, 150, 243, 1.2); /* Ombre bleutée */
}

/* Ajustements optionnels pour les petits écrans mobiles si besoin */
@media (max-width: 420px) {
    .liste-magasins-consult {
        grid-template-columns: 1fr; /* Force 1 seule colonne pleine largeur sur très petit mobile */
        gap: 12px;
    }
    
    .module-consultations-jour {
        padding: 10px; /* Réduit un peu les marges extérieures du module sur mobile */
    }
}

/* Alignement Flexbox parfait pour chaque ligne icône + texte */
.module-consultations-jour .info-ligne {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5em;
  margin-bottom: 6px;
  line-height: 1.0 !important;
}

/* Style optionnel pour mettre en valeur le nom du magasin en haut de carte */
.nom-magasin-ligne {
  padding: 2px 10px;
  color: #ffffff !important;
  background: #e73078 !important;
  font-weight: bold;
  border-radius: 6px;
  border-bottom: 1px solid #f1f3f5;
  /*padding-bottom: 8px;*/
  line-height: 1.5;        /* Hauteur de ligne proportionnelle et confortable */
  text-align: center !important;
  align-items: middle !important;
}

.module-consultations-jour .info-ligne i {
    flex-shrink: 0;
    font-size: 1em;
    margin-top: 0.2em; /* Calage optique parfait avec la première ligne de texte */
    color: #0056b3;    /* Harmonise la couleur des icônes */
}

.module-consultations-jour .info-ligne .texte {
    flex-grow: 1;
}

/* Espacement pour la ligne de téléphone tout en bas */
.telephone-ligne {
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px dashed #e9ecef;
    margin-bottom: 0 !important;
}


.info-ligne .texte_nom {
  font-size: clamp(1.125rem, 2.0vw, 1.250rem) !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  }

.info-ligne .texte_horaire {
  font-size: clamp(1.0rem, 3.1vw, 1.125rem) !important;
  font-weight: 600 !important;
  /*color: #e73078 !important;*/
  }

.info-ligne i.fas,
.info-ligne i.far,
.info-ligne i.fab,
.info-ligne i.fa,
.info-ligne i.fa-solid,
.info-ligne i.fa-regular {
  flex-shrink: 0;          /* Empêche l'icône de se rétrécir */
  margin-top: 3px;         /* Ajustement fin (en pixels) pour centrer optiquement l'icône avec la première ligne de texte */
  margin-top: 10px !important;
  margin-left: 5px !important;
  margin-right: 8px !important;
  color: #e73078 !important;
  font-size: clamp(1.0rem, 2.0vw, 1.50rem) !important;
}

.info-ligne span {
  flex-grow: 1;            /* Permet au texte de prendre toute la largeur restante */
}

.module-consultations-jour .info-ligne .texte {
  flex-grow: 1;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.0vw, 1.250rem) !important;
}

.module-consultations-jour .texte_nom {
  align-items: center;
  font-size: clamp(1.125rem, 2.0vw, 1.375rem) !important;
  font-weight: 700 !important;
  text-align: left;
  }

.module-consultations-jour .info-ligne .texte_ {
  font-size: clamp(1.1rem, 2.0vw, 1.150rem) !important;
  font-weight: 600 !important;
  }

/*------- Statut consultations -------*/

/* Style des badges de statut */
.statut-consultation {
    margin-bottom: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 5px;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 4px;
}

/* Badge Vert si en cours */
.badge-success {
  background-color: #74FF38;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.badge-success i {
  font-size: clamp(1.1rem, 2.0vw, 1.250rem) !important;
  color: #28a745;
  animation: pulse 2s infinite; /* Petite animation sympa pour attirer l'œil */
}

/* Badge Neutre si prévu mais pas à cette heure-ci */
.badge-secondary {
    background-color: #e2e3e5;
    color: #383d41;
    border: 1px solid #d6d8db;
}

.badge-secondary i {
  margin-left: 3px !important;
  margin-right: 6px !important;
  color: #fff !important;
  font-size: clamp(1.1rem, 2.0vw, 1.250rem) !important;
}

/* Animation subtile du point vert */
@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.4; }
    100% { opacity: 1; }
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

.wrapper-toutes-consultations {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Aligne les box les unes en dessous des autres */
    gap: 6px; /* Espace réduit entre chaque box de magasin */
    box-sizing: border-box;
}

.magasin-consult-box {
  width: 100%;
  background-color: #f8f9fa; /* Fond très léger et discret */
  border: 1px solid #e9ecef;
  border-radius: 4px; /* Légers coins arrondis pour faire une box propre */
  padding: 4px 4px; /* Espacements internes restreints pour rester discret */
  font-size: clamp(0.8rem, 1.0vw, 0.9rem) !important; /* Petite police */
  color: #495057;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em;
  flex-direction: row;
  align-items: baseline;
  margin-bottom: 4px;
  line-height: 1.0 !important;
}

.magasin-consult-box-message {
  width: 100%;
  background-color: #ffffff; /* Fond très léger et discret */
  padding: 4px 6px; /* Espacements internes restreints pour rester discret */
  font-size: 0.8rem; /* Petite police */
  color: #000000;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  flex-direction: row;
  margin-bottom: 4px;
}

.magasin-consult-message {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600 !important;
  font-size: clamp(1.1rem, 1.8vw, 1.250rem) !important;
  background-color: #ffffff;
  color: #000000;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.magasin-consult-nom {
  min-width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600 !important;
  font-size: clamp(0.8rem, 1.1vw, 1.0rem) !important;
  color: #343a40;
}

.magasin-consult-details {
  color: #2B3255 !important;
  font-size: clamp(0.8rem, 1.1vw, 1.1rem) !important;
}
/*-------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ==========================================================================
   TITRES AVEC PUCE EN BACKGROUND (Réalignement vertical)
   ========================================================================== */

.stitre {
  margin: 5px 5px;
  height: 30px;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  color: var(--brand-teal);
  background-image: url(/images/pic/puce.png);
  background-repeat: no-repeat;
  /* Ajustez 'center' ou les pourcentages/pixels pour remonter/descendre la puce (ex: left 5px center) */
  background-position: left 5px center; 
  padding: 0 10px 0 35px !important; /* Padding ajusté pour centrer le texte face à la puce */
  display: flex;
  align-items: center; /* Centre parfaitement le texte en hauteur sur la ligne */
}

.stitre p {
  word-wrap: break-word;
  margin: 0px 25px;
  padding: 0;
}

.scategorie {
  margin: 5px 5px;
  height: 30px;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 1.625rem) !important;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  color: var(--brand-pink);
  background-image: url(/images/pic/puce.png);
  background-repeat: no-repeat;
  background-position: left 5px center;
  padding: 0 10px 0 35px !important;
  display: flex;
  align-items: center;
}

.scategorie p {
  font-family: 'Open Sans', sans-serif;
  color: var(--brand-pink);
  word-wrap: break-word;
  margin: 0px 25px;
  padding: 0;
}

/* ==========================================================================
   PHRASE D'ACCROCHE
   ========================================================================== */

.phrase_accroche {
  margin: 1.125em;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  color: var(--brand-pink);
  text-align: center;
}

.texte {
  margin: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.125rem) !important;
}

.texte_centre {
  margin: 10px;
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
  color: var(--brand-pink);
  font-weight: bold;
  text-align: center;
}

/* Animations Keyframes */
@keyframes fadeInPromo {
  from { opacity: 0; transform: translateY(-100px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes circle {
  0% { opacity: 1; }
  40% { opacity: 1; }
  100% { width: 200%; height: 200%; opacity: 0; }
}

/* ==========================================================================
   GRILLES ET BLOCS DE MISE EN PAGE (JB_DIV)
   ========================================================================== */

.jb_div {
  background: #fff;
  width: 100%;
  margin: 15px auto;
}

.jb_div div {
  float: left;
  height: auto;
  margin: 25px;
  border: 2px;
}

.jb_div div p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: #000;
}

.jb_div div img {
  border: 0px;
}

.jb_div150 {
  background: #fff;
  width: 100%;
  margin: 15px auto;
  overflow: hidden;
}

.jb_div150 div {
  float: left;
  background: #fff;
  width: 150px;
  height: auto;
  margin: 20px;
  border: 0px;
}

.jb_div150 div p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.125em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: #000;
}

.jb_div150 div img {
  border: 0px;
}

.jb_div200 {
  background: #fff;
  width: 100%;
  margin: 10px auto;
  overflow: hidden;
}

.jb_div200 div {
  float: left;
  background: #fff;
  min-width: 75px;
  height: auto;
  margin: 5px;
  border: 0px;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.jb_div200 div p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.250em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: #000;
}

.jb_div200 div img {
  border: 0px;
  min-width: 75px;
}

.jb_div200 #categorie {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.5em;
  font-style: italic;
  font-variant: normal;
  font-weight: bold;
  text-align: center;
  color: var(--brand-pink);
}

.jb_div250 {
  background: #fff;
  width: 100%;
  margin: 10px auto;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
}

.jb_div250 div {
  float: left;
  background: #fff;
  min-width: 250px;
  height: auto;
  margin: 5px;
  border: 0px;
}

.jb_div250 div p {
  font-family: 'Open Sans', sans-serif;
  font-size: 1.250em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  color: #000;
}

.jb_div250 div img {
  border: 0px;
  min-width: 75px;
}

.jb_div250 iframe {
  margin: 0;
  padding: 10px;
}

/* ==========================================================================
   GRILLES DE COLONNES ET JB_DIV_COLONNE
   ========================================================================== */

.jb_div_colonne {
  background: #fff;
  width: 100%;
  margin: 10px auto;
  overflow: hidden;
  margin: 5px;
}

.colonne {
  float: left;  
  background: #fff;
  width: auto;
  min-width: 200px;
  max-width: 1024px;
  margin: 5px;
}

.colonne25 {
  float: left;  
  background: #fff;
  width: 25%;
  min-width: 240px;
  max-width: 320px;
  margin: 5px;
}

.colonne35 {
  float: left;  
  background: #fff;
  width: 35%;
  min-width: 360px;
  max-width: 400px;
  margin: 5px;
}

.colonne45 {
  float: left;  
  background: #fff;
  width: 45%;
  min-width: 360px;
  max-width: 450px;
  margin: 5px;
}

.colonne50 {
  float: left;  
  background: #fff;
  width: 50%;
  min-width: 360px;
  max-width: 450px;
  margin: 5px;
}

.colonne55 {
  float: left;  
  width: 55%;
  min-width: 360px;
  max-width: 600px;
  margin: 5px;
}

.colonne65 {
  float: left;  
  width: 65%;
  min-width: 360px;
  max-width: 700px;
  margin: 5px;
}

.colonne75 {
  float: left;  
  width: 75%;
  min-width: 360px;
  max-width: 800px;
  margin: 5px;
}

.colonne85 {
  float: left;  
  width: 85%;
  min-width: 400px;
  max-width: 1000px;
  margin: 5px;
}