@keyframes hero-thumb-animation {
  0% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes hero-thumb-sm-animation {
  0% {
    transform: translateY(-20px) translateX(50px);
  }
  100% {
    transform: translateY(-20px) translateX(0px);
  }
}
@keyframes hero-thumb-sm-2-animation {
  0% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
.shape-1 {
  animation: hero-thumb-animation 2s linear infinite alternate;
}

/* Icône à l'intérieur du select, bien alignée */
.select-style .select2-location-icon {
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #88929b;
  font-size: 1.17rem;
  pointer-events: none;
  position: absolute;
  line-height: 1;
}

/* Laisse la place à l’icône */
.select-style .select-active,
.select-style .select2-selection--single {
  padding-left: 2.5rem !important;
}

/* Select2 pill style */
.select-style .select2-container--default .select2-selection--single {
  background: #fff !important;
  border: thin solid transparent !important;
  border-radius: 50px !important;
  min-height: 44px !important;
  height: 44px !important;
  font-size: 0.87rem;
  box-shadow: none !important;
  display: flex !important;
  align-items: center;
  width: 100% !important;
  padding-left: 2.5rem !important; /* pour l’icône */
}

/* Contour visible uniquement sur mobile */
@media (max-width: 767.98px) {
  .select-style .select2-container--default .select2-selection--single {
    border: thin solid #cbd5e1 !important;
    border-radius: 18px !important;
    background: #fff !important;
    min-height: 44px !important;
    height: 44px !important;
  }
}

/* Forcer un contour visible du select2 uniquement sur la page d'inscription */

/* Réglage pour le select2 */
#page-inscription .select2-container--default .select2-selection--single {
  height: 40px !important; /* même hauteur que le champ file */
  display: flex;
  align-items: center;
  border: thin solid #ced4da;
  border-radius: 6px;
  padding: 0 0.75rem;
  font-size: 1rem;
}

/* Réglage du texte à l’intérieur du select */
#page-inscription .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: normal !important;
  padding: 0 !important;
  margin: 0;
  color: #6c757d;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Texte et flèche page inscription*/
#page-inscription .select2-selection__arrow {
  position: absolute !important;
  top: 18px !important;
  right: 0.90rem !important;
  transform: translateY(-50%);
  pointer-events: none;
  color: #b3b3c1 !important;
}



/* Texte et flèche */
.select-style .select2-selection__rendered {
  color: #88929b !important;
  font-size: 1.07rem;
  padding-left: 0 !important;
  line-height: 44px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.select-style .select2-selection__arrow {
  position: absolute !important;
  top: 50% !important;
  right: 1.3rem !important;
  transform: translateY(-50%);
  pointer-events: none;
  color: #b3b3c1 !important;
}

/* Dropdown aérée, sans contour */
.select-style .select2-container .select2-dropdown {
  border: thin solid white !important;
  padding: 18px 0 12px 0 !important;
  border-radius: 18px !important;
  min-width: 0 !important;
  width: 100% !important;
  box-shadow: 0 8px 32px 0 rgba(31,31,51,0.10);
  z-index: 99999;
}
.select-style .select2-results__option {
  padding: 15px 28px !important;
  font-size: 1rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 10px !important;
}

/* Option highlight (bleu doux) */
.select-style .select2-results__option--highlighted {
  background: #e7f2fa !important;
  color: #263047 !important;
}


.select2-container--default .select2-search--dropdown .select2-search__field {
  border: thin solid #ececec;
  border-radius: 8px;
  height: 40px;
  padding-left: 10px;
}

.select2-dropdown {
  border-color: #ffffff;
  box-shadow: 0px 9px 26px 0px rgba(31, 31, 51, 0.06);
}

.select2-container--open .select2-dropdown--below {
  border: thin solid #ececec;
  padding: 10px;
  margin-top: 5px;
  border-radius: 10px;
}

.orangeBp
{
  background-color: #ff8061;
  color: white;
}

.bleu{
  background-color: #0260a4;
  color: white;
}

.bleuClair
{
  background-color: #ddecf6;
  color: #384b5b;
}

.grisClair{
  background-color: #f1f1f1;
  color: #384b5b;
}

.vertClair{
  background-color: #cceddf;
  color: #384b5b;
}

.textBleu{
  color: #0260a4;
}

.textGris{
  color: #425A8B;
}

.textBleuFonce{
  color: #384b5b;
}

.textOrange
{
  color: #ff8061;
}

.suggestion-item {
  cursor: pointer !important;
  transition: all 0.2s ease;
}

.suggestion-item:hover {
  color: #0d6efd; /* Bootstrap primary */
  background-color: #f8f9fa !important;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0.2); /* plus transparent */
  }
  70% {
    box-shadow: 0 0 0 8px rgba(14, 165, 233, 0); /* rayon réduit */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
  }
}

.card.boosted {
  animation: pulse 2s ease-in-out infinite;
  position: relative;
  z-index: 1;
}


/* Quill-like blockquote */
.rich-content blockquote {
  border-left: 4px solid #ccc !important;   /* bordure gauche */
  padding-left: 16px;            /* retrait du texte */
  margin: .5rem 0;               /* espace vertical léger */
  color: #6a737d;                /* gris doux (similaire Quill) */
  font-style: normal;            /* Quill n'italique pas le blockquote */
}

/* marges des paragraphes à l’intérieur */
.rich-content blockquote > p {
  margin: .5rem 0;
}



  /* Taille utile max sans jamais devoir scroller la page */
  #modalCrop .modal-dialog { max-width: 820px; } /* un peu + grand que lg */
  #modalCrop .modal-body { overflow: hidden; } /* pas de scroll ici, on gère dans .crop-wrap */
  #modalCrop .crop-wrap {
    position: relative;
    width: 100%;
    /* Espace visible = hauteur viewport - (marges + header + footer) */
    max-height: calc(100vh - 220px);
    overflow: auto; /* si image + grande, c’est ce bloc qui scroll */
    background: #fff;
  }
  #imageToCrop {
    max-width: 100%;
    max-height: calc(100vh - 240px);
    object-fit: contain;
    display: block;
  }

  /* Footer collé en bas de la modale, toujours visible */
  #modalCrop .sticky-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 2;
  }

  /* Overlay loader */
  #modalCrop .loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
  }


  /* Ajoute ceci dans ton fichier CSS global */
#modalCrop .modal-body{
  display:flex;align-items:center;justify-content:center;overflow:hidden;min-height:55vh;
}
#modalCrop #imageToCrop{
  max-width:100%;max-height:65vh;object-fit:contain;margin:0 auto;display:block;
}

.cat-card { overflow: visible; } /* pour laisser dépasser le panneau */
.subcat-panel{
  position:absolute; left:16px; right:16px; bottom:16px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px; padding:10px 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.08);
  opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all .18s ease;
}
.card-hover:hover .subcat-panel{ opacity:1; visibility:visible; transform: translateY(0); }
.subcat-link{ text-decoration:none; display:inline-block; padding:3px 0; }
.subcat-link:hover, .subcat-all:hover{ text-decoration:underline; }

.drag-ghost {
    opacity: 0.7;
    border: 2px dashed #0d6efd;
}


/* === Cover Profil (comme bannières accueil) === */
.profile-cover{
  width:100%;
  height:120px;                 /* mobile */
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-color:#f8f9fa;     /* neutre si image lente */
}

/* tablette */
@media (min-width:768px){
  .profile-cover{ height:150px; }
}

/* desktop */
@media (min-width:992px){
  .profile-cover{ height:220px; }
}

/* === Slider / Image Bannière === */
.banniere-img {
  height: 340px;
  object-fit: cover; /* Desktop = plein cadre */
  object-position: center;
  border-radius: 12px;
  width: 100%;
  background: #f8f9fa; /* couleur neutre pour les bandes */
  transition: transform .4s ease;
}
.banniere-img:hover { transform: scale(1.01); }

/* === Wrapper principal === */
.slider-bannieres-wrapper {
  position: relative;
  overflow: hidden;
}

/* === Flèches === */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.9);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
  z-index: 20;
  pointer-events: auto;
  transition: all 0.2s ease;
}
.slider-btn:hover {
  background: #1164BE;
  color: #fff;
}
.slider-btn.prev { left: 10px; }
.slider-btn.next { right: 10px; }

/* === Points Tiny Slider === */
.slider-bannieres-wrapper .tns-nav {
  position: absolute;
  bottom: 15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
}
.slider-bannieres-wrapper .tns-nav button {
  width: 9px;
  height: 9px;
  margin: 0 4px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.6);
  transition: all 0.2s ease;
}
.slider-bannieres-wrapper .tns-nav button.tns-nav-active {
  background: #1164BE;
  width: 11px;
  height: 11px;
}

/* === Responsive === */
@media (max-width: 991.98px) {
  .banniere-img { height: 240px; }
}
@media (max-width: 767.98px) {
  .banniere-img { height: 155px; }
  .slider-btn {
    width: 32px;
    height: 32px;
    font-size: 0.9rem;
  }
  .slider-btn.prev { left: 6px; }
  .slider-btn.next { right: 6px; }
  .slider-bannieres-wrapper { margin-bottom: 0.25rem; }
}


  /* Avatar de Profil Mobile (<= 991.98px) */
  @media (max-width: 991.98px){
    .avatar-wrap{ margin-top:-100px !important; }
    .avatar-circle{ width:120px !important; height:120px !important; }
  }
  /* Desktop (>= 992px) */
  @media (min-width: 992px){
    .avatar-wrap{ margin-top:-120px !important; }
    .avatar-circle{ width:140px !important; height:140px !important; }
  }

/* Style categories index */

.cat-card-slider {
  aspect-ratio: 4/5;
  background: #f8f9fa;
  overflow: hidden;
  position: relative;
  transition: transform .3s ease, box-shadow .3s ease;
}
.cat-card-slider:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,.15);
}
.cat-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ Dégradé bleu doux */
.cat-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(6, 35, 61, 0.65), rgba(6, 35, 61, 0));
  color: #fff;
}

/* ✅ Flèches centrées et espacées sur desktop */
.slider-categories-wrapper {
  padding-bottom: 40px;
  position: relative;
}
#sliderCategoriesControls {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  z-index: 10;
}
#sliderCategoriesControls li {
  list-style: none;
  background: #fff;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
#sliderCategoriesControls li:hover {
  background: #1164BE;
  color: #fff;
}

/* ✅ Mobile : flèches centrées en bas, bien visibles */
@media (max-width: 767.98px) {
  .cat-card-slider {
    aspect-ratio: 4/5.5;
  }

  #sliderCategoriesControls {
    display: none;
  }

  .slider-categories-wrapper {
    padding-bottom: 65px;
  }
}


/* Style tabs categories index */

/* 🔹 Scroll mobile */
.nav-wrapper-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}

/* 🔹 UL peut dépasser */
#tabs-top-categories {
  white-space: nowrap;
}

/* 🔹 Tabs ne se compressent pas */
#tabs-top-categories .nav-item {
  flex-shrink: 0;
}

/* 🔹 Style simple des tabs */
#tabs-top-categories .nav-link {
  padding: .5rem .9rem;
  white-space: nowrap;
}

#tabs-top-categories .nav-link.active {
  font-weight: 600;
}

/* 🔹 Desktop : pas de scroll visible */
@media (min-width: 768px) {
  .nav-wrapper-scroll {
    overflow-x: visible;
  }
}


/* ======== Tiny slider Sponsos Index / cartes (inchangé) ======== */
.sliderSponsos .tns-item { padding: 20px 0; }

.sliderSponsos .lbp-card{
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background:#fff;
  transition:0.2s;
}

.sliderSponsos .lbp-img{
  width:100%;
  height:240px;
  object-fit:cover;
  border-radius:12px;
  display:block;
  backface-visibility:hidden;
}

.sliderSponsos .lbp-title{
  font-size:.95rem; line-height:1.3; font-weight:600;
}
.sliderSponsos .lbp-title a:hover{ color:#1164BE; }

.sliderSponsos .lbp-price{
  font-size:.95rem; color:#111;
}

.slider-sponsos-wrapper{
  position:relative;
  padding-bottom:40px;
}

/* ======== FLECHES STYLE ======== */
#sliderSponsosControls{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:100%;
  display:flex;
  justify-content:space-between;
  pointer-events:none; /* UL ignore les clics */
  z-index:20;
}

/* flèches : desktop + mobile identiques, taille adaptée */
#sliderSponsosControls li{
  pointer-events:auto;
  list-style:none;
  background:#fff;
  border-radius:50%;
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.2s;
}
#sliderSponsosControls li:hover{
  background:#1164BE; color:#fff;
}

/* ======== POSITION EXACTE ======== */
/* Desktop : flèches proches mais pas collées */
/* Desktop : flèches proches mais NE TOUCHENT PLUS les cards */
@media (min-width: 768px){
  #sliderSponsosControls .prev{
    margin-left:-30px;   /* recul léger, look pro */
  }
  #sliderSponsosControls .next{
    margin-right:-30px;  /* symétrie parfaite */
  }
}

/* Mobile : flèches TRÈS proches du slider */
@media (max-width: 767.98px){
  .sliderSponsos .lbp-img{ height:180px; }

  #sliderSponsosControls{
    display:none !important;
  }
}


/* Bouton WhatsApp flottant */
.floating-whatsapp-btn {
    position: fixed;
    bottom: 80px;
    right: 25px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #25d366;
    display: none; /* caché par défaut */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s, opacity 0.3s;
    z-index: 9998;
    opacity: 0;
}

.floating-whatsapp-btn.show {
    display: flex;
    opacity: 1;
}

.floating-whatsapp-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.floating-whatsapp-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}