/* 🎨 Askpert - styles.css */   /* 📌 En-tête du fichier, rappel du projet */


/* ===================================================================
   🔔 HIGHLIGHT NOTIFICATIONS
=================================================================== */

/* 🔵 Style appliqué aux lignes de tableau mises en valeur (ex: notif) */
.highlighted-row td {
  background-color: #0d6efd !important;   /* ✅ Fond bleu forcé */
  transition: background-color 0.5s ease; /* 🎬 Transition douce */
}

/* 🌟 Définition d’une animation "clignotement" pour mettre en évidence */
@keyframes pulse-glow {
  0%   { background-color: #fff3cd; }   /* Début : jaune pâle */
  50%  { background-color: #ffec99; }   /* Milieu : jaune plus vif */
  100% { background-color: #fff3cd; }   /* Fin : retour au jaune pâle */
}

/* 🎬 Applique l’animation à une carte (par ex: notification ou question) */
.highlighted-card {
  animation: pulse-glow 1s ease-in-out 3; /* ⏳ Durée 1s, alternance douce, 3 répétitions */
}

/* ✅ Étendre le highlight aux entêtes de tableau et lisser le retour */
.highlighted-row td,                      /* // Cible les cellules standard */
.highlighted-row th {                     /* // ...et les cellules d'entête si la ligne est surlignée */
  transition: background-color 0.5s ease; /* // Assure une transition douce quand la classe est retirée */
}

/* ♿ Respect du réglage "réduire les animations" du système */
@media (prefers-reduced-motion: reduce) { /* // Media query activée si l'utilisateur préfère moins d'animations */
  .highlighted-card {                     /* // Pour les cartes (non <tr>) */
    animation: none;                      /* // Désactive le clignotement */
    outline: 2px solid var(--bs-warning, #ffc107); /* // Met en évidence via un contour lisible */
    outline-offset: 2px;                  /* // Décale légèrement le contour pour le rendre visible */
    background-color: #fff3cd;            /* // Fond jaune pâle statique (cohérent avec ton thème) */
  }
  .highlighted-row td,
  .highlighted-row th {                   /* // Pour les lignes de tableau surlignées */
    background-color: #fff3cd !important; /* // Remplace le bleu animé par un fond statique doux */
  }
}






/* ========= */ /* // 🎨 TOKENS — réhaussés pour un haut de dégradé plus sombre */
:root {                                                        /* // Espace global de variables */
  --askpert-primary: #537ABE;                                  /* // Bleu pétrole principal */
  --askpert-primary-dark: #3E5F9F;                             /* // Bleu pétrole foncé (hover) */
  --askpert-primary-weak: #EAF1FF;                             /* // Bleu très clair (fonds hover doux) */
  --askpert-accent: #EE9B00;                                   /* // Orange sable (CTA principal) */
  --askpert-bg: #F6F6F6;                                       /* // Fond global #f6f6f6 */
  --askpert-surface: #FFFFFF;                                  /* // Fond des cartes/sections blanches */
  --askpert-text: #0A0A0A;                                     /* // Texte principal foncé */
  --askpert-muted: #6C757D;                                    /* // Texte secondaire */
  --askpert-border: rgba(10,10,10,.08);                        /* // Bordures subtiles */
  --askpert-radius-md: 10px;                                   /* // Rayon standard (boutons) */
  --askpert-radius-lg: 16px;                                   /* // Rayon large (images/sections) */
  --askpert-shadow-1: 0 6px 18px rgba(2,12,27,.06);            /* // Ombre douce */
  --askpert-shadow-2: 0 10px 28px rgba(2,12,27,.10);           /* // Ombre hover */
  --nav-grad-top: rgba(83,122,190,.12);                        /* // Teinte bleu très légère (haut NAV) */
  --nav-grad-mid: rgba(83,122,190,.06);                        /* // Teinte encore plus légère (milieu NAV) */
  --nav-grad-bottom: #F6F6F6;                                  /* // Bas NAV = #f6f6f6 (continuité HERO) */
  --page-bg: #eaeef4;                                          /* // Couleur pleine pour le reste de la page */

  --tint-top: rgba(83,122,190,0.48);                           /* // ⬆️ Plus sombre en haut (était 0.34) */
  --tint-mid: rgba(83,122,190,0.28);                           /* // ⬆️ Milieu renforcé (était 0.20) */
  --tint-low: rgba(83,122,190,0.14);                           /* // ⬆️ Proche bas du hero un peu plus présent (était 0.10) */

  --hero-end: 84vh;                                            /* // Hauteur cible du hero (desktop) */
  --hero-end-mobile: 94vh;                                     /* // Hauteur cible du hero (mobile) */
}
/* ====================================================== */ /* // 🧱 Couverture du fond sur toute la hauteur */
html, body {                                                   /* // Racines du document */
  min-height: 100%;                                            /* // Assure un fond sur toute la page */
}
/* ====================================================== */ /* // 🌈 Dégradé porté par le BODY (plus sombre en haut, fin au bas du hero) */
body {                                                          /* // Élément support du dégradé */
  background-color: var(--page-bg);                             /* // Base unie sous le dégradé */
  background-image: linear-gradient(                            /* // Dégradé vertical */
    to bottom,                                                  /* // Direction : du haut vers le bas */
    var(--tint-top) 0,                                          /* // Démarre sombre en haut */
    var(--tint-top) 8vh,                                        /* // Maintient la teinte sombre sous la navbar (~8vh) */
    var(--tint-mid) calc(var(--hero-end) * 0.50),               /* // Transition vers une teinte moyenne au milieu du hero */
    var(--tint-low) calc(var(--hero-end) * 0.80),               /* // Allègement proche du bas du hero */
    var(--page-bg) var(--hero-end),                             /* // ✅ Fin du dégradé pile au bas du hero */
    var(--page-bg) 100vh                                        /* // Au-delà : fond uniforme de la page */
  );                                                            /* // Fin du background-image */
  background-repeat: no-repeat;                                 /* // Pas de répétition */
  background-size: 100% 100%;                                   /* // Couvre toute la zone visible */
  background-attachment: scroll;                                /* // Défilement normal (mettre fixed pour parallaxe) */
}

/* ======================================================
   🧭 Navbar
====================================================== */
/* ======================================================
   🧭 Navbar TRANSPARENTE (laisse voir le dégradé du body)
====================================================== */
/* Navbar transparente pour laisser voir le dégradé du body */
.custom-navbar {                       /* // Cible ta navbar personnalisée */
  position: static !important;         /* // Force le mode normal (elle défile avec la page) */
  top: auto !important;                /* // Annule tout 'top: 0' qui viendrait d’anciens styles */
  z-index: auto !important;            /* // Reprend la pile normale (pas besoin de niveau élevé) */
  box-shadow: none !important;         /* // Supprime toute ombre résiduelle (au cas où) */
  background: transparent !important;  /* // Garde la transparence pour voir le dégradé du body derrière */
}
/* (si tu ne peux pas modifier l’HTML et que 'shadow-sm' reste) */
.custom-navbar.shadow-sm {             /* // Cible la combinaison avec la classe Bootstrap */
  box-shadow: none !important;         /* // Écrase l’ombre ajoutée par 'shadow-sm' */
}
.hero {                                  /* // Bloc de la section hero */
  margin-top: 0 !important;              /* // Garde le hero collé sous la navbar (pas d’espace) */
}


/* ======================================================*/
/* ========= NAVBAR & BOUTONS =========== */
/* ======================================================*/

.nav-link-custom {
  color: #0A0A0A;       /* Couleur principale */
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
}

.nav-link-custom:hover {
  background-color: #537ABE;
  color: white;
}

/* 🔐 Bouton Connexion – style clean avec hover orange */
.btn-connexion-nav {
  border: 2px solid #0A0A0A;
  color: #0A0A0A;
  background-color: transparent;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  transition: all 0.2s ease-in-out;
}

.btn-connexion-nav:hover {
  background-color: #f47849;
  color: white;
  border-color: #f47849;
}

/* 🔵 Bouton Créer un compte (nav) */
.btn-inscription-nav {
  background-color: #537ABE;
  color: #fffbe6;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 1000;
  transition: background-color 0.2s ease;
}

.btn-inscription-nav:hover {
  background-color: #4369ab;
}

.btn-deconnexion-nav {
  background-color: #537ABE;
  color: #FAF9F6;
  border: none;
  padding: 6px 14px;
  font-weight: 500;
  border-radius: 6px;
}

.btn-deconnexion-nav:hover {
  background-color: #3E5F9F;
}

/* 🧠 Bouton "Découverte humaine" (style outline bleu) */
.btn-outline-bleu {
  border: 2px solid #537ABE;
  background-color: transparent;
  color: #537ABE;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}

.btn-outline-bleu:hover {
  background-color: #537ABE;
  color: white;
}


/* ====================================================== */
/* 🔘 CTA — base + variations BLEU / ORANGE / CONNEXION / RÉPERTOIRE */
/* ====================================================== */

/* 🧱 Base commune aux CTA */
.btn-cta-blue,                                 /* Bouton bleu "brand" */
.btn-cta-orange,                               /* Bouton orange "accent" */
.btn-cta-connexion,                            /* Bouton Connexion (plus foncé que Répertoire) */
.btn-cta-signup {                              /* Bouton Répertoire (#8eb2f0) */
  --btn-radius: 10px;
  --btn-border: rgba(0,0,0,.06);
  --btn-shadow: 0 6px 14px rgba(2,12,27,.08);
  --btn-shadow-hover: 0 10px 22px rgba(2,12,27,.12);
  --btn-shadow-press: 0 4px 10px rgba(2,12,27,.10);

  border-radius: var(--btn-radius);
  border: 1px solid var(--btn-border);
  padding: 12px 22px;
  font-weight: 600;
  letter-spacing: .1px;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  box-shadow: var(--btn-shadow);
  transition:
    transform .15s ease,
    box-shadow .2s ease,
    filter .2s ease,
    background-color .2s ease,
    border-color .2s ease;
  will-change: transform, box-shadow, filter;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  user-select: none;
}

/* 🎯 Contraste garanti (boutons ET contenu interne, tous états) */
.btn-cta-blue,
.btn-cta-orange,
.btn-cta-connexion,
.btn-cta-signup,
.btn-cta-blue:visited,
.btn-cta-orange:visited,
.btn-cta-connexion:visited,
.btn-cta-signup:visited,
.btn-cta-blue:hover,
.btn-cta-orange:hover,
.btn-cta-connexion:hover,
.btn-cta-signup:hover,
.btn-cta-blue:active,
.btn-cta-orange:active,
.btn-cta-connexion:active,
.btn-cta-signup:active {
  color: #fff !important;
  text-decoration: none !important;
}

.btn-cta-blue *, .btn-cta-orange *,
.btn-cta-connexion *, .btn-cta-signup *,
.btn-cta-blue:hover *, .btn-cta-orange:hover *,
.btn-cta-connexion:hover *, .btn-cta-signup:hover *,
.btn-cta-blue:active *, .btn-cta-orange:active *,
.btn-cta-connexion:active *, .btn-cta-signup:active * {
  color: #fff !important;
  fill:  #fff !important;
  stroke:#fff !important;
}

/* 🔷 BLEU (brand) */
.btn-cta-blue {
  background-color: #537ABE;
}
.btn-cta-blue:hover {
  background-color: #3E5F9F;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
  filter: saturate(110%);
}
.btn-cta-blue:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-press);
}
.btn-cta-blue:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(83,122,190,.35),
              var(--btn-shadow-hover);
}

/* 🟠 ORANGE (accent) */
.btn-cta-orange {
  background-color: #f8764d;
}
.btn-cta-orange:hover {
  background-color: #e06840;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
  filter: saturate(110%);
}
.btn-cta-orange:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-press);
}
.btn-cta-orange:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(248,118,77,.35),
              var(--btn-shadow-hover);
}

/* 🔹 CONNEXION — un peu plus foncé que Répertoire (#8eb2f0) */
.btn-cta-connexion {
  background-color: #7aa1ea;
}
.btn-cta-connexion:hover {
  background-color: #6f95e3;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
  filter: saturate(110%);
}
.btn-cta-connexion:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-press);
}
.btn-cta-connexion:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(122,161,234,.35),
              var(--btn-shadow-hover);
}

/* 🔹 RÉPERTOIRE (HERO) — #8eb2f0 */
.btn-cta-signup {
  background-color: #8eb2f0;
}
.btn-cta-signup:hover {
  background-color: #7aa1ea;
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
  filter: saturate(110%);
}
.btn-cta-signup:active {
  transform: translateY(0);
  box-shadow: var(--btn-shadow-press);
}
.btn-cta-signup:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(142,178,240,.35),
              var(--btn-shadow-hover);
}

/* ♿ Désactivé (optionnel) */
.btn-cta-blue[disabled],
.btn-cta-orange[disabled],
.btn-cta-connexion[disabled],
.btn-cta-signup[disabled] {
  opacity: .6;
  pointer-events: none;
  transform: none;
  box-shadow: var(--btn-shadow);
}


/* ======================================================
   📊 Stats accueil — séparateurs verticaux + horizontaux
====================================================== */

.stats-inline {
  margin-top: 0;
  margin-bottom: 0;
}

/* Base commune */
.stat-inline {
  position: relative;
  text-align: center;
  padding-inline: 2.5rem;
  padding-block: 1rem;
}

/* 📱 Mobile : colonnes empilées + séparateurs horizontaux */
@media (max-width: 767.98px) {
  .stat-inline {
    width: 100%;
  }

  .stat-inline:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* 💻 Desktop/tablette : inline + séparateurs verticaux */
@media (min-width: 768px) {
  .stat-inline + .stat-inline::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 40px;
    border-left: 1px solid rgba(0, 0, 0, 0.12);
  }
}

.stat-value {
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.1;
  color: var(--askpert-accent, #f8764d); /* orange Askpert */
}

.stat-label {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #111111;
}



/* ======================================================
   📦 Mini Cartes Accueil / Experts populaires
====================================================== */

/* Cartes génériques (Bootstrap .card customisée) */
.card {
  background-color: white;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* (Ancien style mini-carte, conservé si utilisé ailleurs) */
.expert-mini-card {
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
  padding: 6px;
  border-radius: 6px;
}
.expert-mini-card:hover {
  background-color: #f1f3f5;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

/* 👤 Avatar par défaut générique */
.default-avatar {
  width: 48px;
  height: 48px;
  background-color: #e9ecef;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 🎨 Style de base pour d'autres avatars (profil, etc.) */
.avatar-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}

@media (max-width: 576px) {
  .avatar-photo {
    width: 36px;
    height: 36px;
  }
}

@media (min-width: 1200px) {
  .avatar-photo {
    width: 56px;
    height: 56px;
  }
}

/* 🧑‍💼 Lien nom expert (générique) */
.expert-name {
  font-weight: 600;
  color: #0a0a0a;
  text-decoration: none;
}
.expert-name:hover {
  text-decoration: underline;
}

/* ======================================================
   🎨 Nouveau layout masonry pour "Experts populaires"
====================================================== */

/* Conteneur masonry (cartes éparpillées) */
.masonry-grid {
  column-count: 3;
  column-gap: 1.5rem;
}

@media (max-width: 992px) {
  .masonry-grid {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .masonry-grid {
    column-count: 1;
  }
}

/* Carte expert individuelle */
.expert-card {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  background: #ffffff;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  transition: transform .2s ease, box-shadow .2s ease;
}

.expert-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

/* Avatar dans les cartes masonry */
.expert-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.75rem auto;
}

.expert-avatar-default {
  background: #607080;
  color: white;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Texte dans les cartes masonry */
.expert-info {
  text-align: center;
}

.expert-info .expert-name {
  font-size: 0.95rem;
  margin-bottom: 0.3rem;
  text-decoration: none;
}

.expert-info .expert-name:hover {
  text-decoration: underline;
}

.expert-domains,
.expert-location {
  font-size: 0.78rem;
  line-height: 1.2;
  color: #6c757d;
}

/* ======================================================
   Photo de profil - profil expert
====================================================== */

/* 🖼️ Avatar : taille et overlay crayon */
.avatar-img {               /* // 🎯 Applique la même taille partout */
  width: 112px;             /* // 📏 Un peu plus grand que 100px pour un look pro */
  height: 112px;            /* // 📏 Carré → rond via .rounded-circle */
  object-fit: cover;        /* // ✂️ Recadre proprement */
}

.avatar-lg {                /* // 🧱 Contexte pour positionner le bouton crayon */
  width: 112px;             /* // 📏 Même gabarit */
  height: 112px;            /* // 📏 */
}

.avatar-edit-btn {          /* // ✏️ Bouton crayon en surimpression */
  position: absolute;       /* // 📍 Positionné par rapport à .avatar-lg */
  right: -4px;              /* // ↘️ Coin inférieur droit (léger débord) */
  bottom: -4px;             /* // ↘️ */
  width: 36px;              /* // 📏 Taille du bouton */
  height: 36px;             /* // 📏 */
  display: grid;            /* // 🔲 Centre le pictogramme */
  place-items: center;      /* // 🎯 */
  border: 1px solid rgba(0,0,0,.06); /* // 🪶 Léger contour */
}

/* 📦 Cadre “dropzone” léger (sans JS supplémentaire) */
.dropzone-lite {            /* // 🧱 Apparence moderne et neutre */
  background: #fafafa;      /* // 🎨 Légère mise en évidence */
  border-style: dashed;     /* // 🧵 Bordure pointillée soft (Bootstrap garde la couleur) */
}

.dropzone-lite:hover {      /* // 🐭 Feedback au survol */
  background: #f5f5f5;      /* // 🌫️ Un chouïa plus sombre */
}


/* 🎯 Bandeau profil : plus mince (~480px), fond BLANC, centré, responsive */
.profile-hero {                       /* // Cible <section class="profile-hero"> */
  background: #ffffff;                /* // 🎨 Fond blanc (plus d’orange) */
  color: #111827;                     /* // 🖋️ Texte foncé lisible (tailwind gray-900 like) */
  max-width: 480px;                   /* // 📏 Largeur max plus mince */
  width: min(480px, 92%);             /* // 📱 S’adapte sur petits écrans */
  margin: 0 auto;                     /* // 🧭 Centre horizontalement */
  border: 1px solid rgba(0,0,0,.06);  /* // 🪶 Liseré discret */
  border-radius: 1rem;                /* // 🟣 Arrondi doux (16px) */
  box-shadow: 0 6px 24px rgba(0,0,0,.06); /* // 🌫️ Ombre légère pour détacher du fond */
}
.avatar-xxl {                        /* // 🖼️ Taille avatar uniforme */
  width: 140px;                      /* // 📏 Largeur fixe */
  height: 140px;                     /* // 📏 Hauteur fixe */
  object-fit: cover;                 /* // ✂️ Recadrage propre */
}

.btn-social {                        /* // 🔗 Boutons ronds compacts */
  border-radius: 999px;              /* // 🟢 Forme pilule */
  display: inline-flex;              /* // 🧭 Aligne icône/texte */
  align-items: center;               /* // ↕️ Centre vertical */
  gap: .35rem;                       /* // ↔️ Espace icône/texte */
}



/* ======================================================
   🏷️ Badges personnalisés
====================================================== */
.badge-askpert {
  background-color: var(--askpert-accent);
  color: white;
  padding: 0.3em 0.6em;
  font-size: 0.75rem;
  border-radius: 6px;
  font-weight: 600;
}

/* ======================================================
   📄 Titres et sous-titres
====================================================== */
h1, h2, h3, h4, h5 {
  color: var(--askpert-text);
  font-weight: 700;
}

p, span, small {
  color: var(--askpert-muted);
} 

/* ======================================================
   🧾 Utilitaires divers
====================================================== */
.section-title {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  font-weight: 700;
  color: var(--askpert-text);
}

.object-fit-cover { /* l’image remplit le cadre sans déformer */
  object-fit: cover;
}
.text-truncate {    /* tronque le nom trop long sur une ligne */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================= */
/* 🎨 Notifications – item “premium” */
/* ============================= */

#notificationsModal .noti-item {                         /* // Bloc de chaque item */
  padding: 0.75rem 0.875rem;                            /* // Espacement interne confortable */
  border: 1px solid var(--bs-border-color, #e5e7eb);    /* // Liseré fin (fallback gris clair) */
  border-radius: 0.75rem;                               /* // Coins doux */
  background: var(--bs-body-bg, #fff);                  /* // Fond conforme au thème (fallback blanc) */
  transition: background-color .2s, box-shadow .2s;     /* // Hover fluide */
}

#notificationsModal .noti-item + .noti-item {           /* // Espacement entre les items */
  margin-top: 0.5rem;                                   /* // Sépare visuellement les cartes */
}

#notificationsModal .noti-item:hover,
#notificationsModal .noti-item:focus {                  /* // État d’action */
  text-decoration: none !important;                     /* // Pas de souligné */
  background-color: var(--bs-light-bg-subtle, #f8fafc); /* // Légère mise en avant au survol */
  box-shadow: 0 2px 8px rgba(0,0,0,.06);                /* // Ombre douce */
}

#notificationsModal .noti-item.is-unread {              /* // État “non lue” */
  background: var(--bs-primary-bg-subtle, #eef2ff);     /* // Fond subtil coloré (fallback bleu pâle) */
  border-color: var(--bs-primary-border-subtle, #c7d2fe);/* // Bord assorti */
}

#notificationsModal .noti-leading {                     /* // Capsule/Avatar à gauche */
  width: 2rem;                                          /* // Taille fixe (cercle) */
  height: 2rem;                                         /* // Idem */
  flex: 0 0 2rem;                                       /* // Ne grandit pas */
  display: grid;                                        /* // Centre le contenu */
  place-items: center;                                  /* // Centrage parfait */
  border-radius: 9999px;                                /* // Cercle */
  background: var(--bs-primary-bg-subtle, #eef2ff);     /* // Fond doux */
  color: var(--bs-primary-text-emphasis, #1d4ed8);      /* // Couleur du pictogramme */
  font-size: 1rem;                                      /* // Taille de l’icône */
}

#notificationsModal .min-w-0 {                          /* // Hack flex: autorise la troncature dans la colonne */
  min-width: 0;                                         /* // Sans ça, clamp peut ne pas s’appliquer */
}

#notificationsModal .noti-message {                     /* // Texte principal multi-ligne */
  display: -webkit-box;                                 /* // Modèle de boîte pour clamp WebKit */
  -webkit-box-orient: vertical;                         /* // Orientation verticale */
  -webkit-line-clamp: 2;                                /* // Limite à 2 lignes */
  overflow: hidden;                                     /* // Coupe l’excédent */
}

#notificationsModal .noti-meta {                        /* // Ligne d’infos discrète */
  margin-top: 0.15rem;                                  /* // Respiration sous le message */
}

#notificationsModal .unread-dot {                       /* // Point “non lu” à droite */
  display: inline-block;                                /* // Élément en ligne */
  width: 0.5rem;                                        /* // Diamètre */
  height: 0.5rem;                                       /* // Diamètre */
  margin-left: 0.5rem;                                  /* // Décalage visuel depuis le badge */
  border-radius: 9999px;                                /* // Rond parfait */
  background: var(--bs-danger, #dc3545);                /* // Rouge (fallback Bootstrap) */
  vertical-align: middle;                               /* // Alignement avec le texte/badge */
}




/*=====================================================================*/ /* // 🧭 Début section : barre de recherche + bouton Filtres */
 /* ====== Styles unifiés (hauteur, halo, largeur max, bouton) ====== */  /* // 🎨 Thème cohérent */
/*=====================================================================*/ /* // 🧭 Fin en-tête */

/* ── Variable commune : hauteur de référence ───────────────────────── */
:root {                                                                  /* // 🌐 Portée globale */
  --search-h: 44px;                                                      /* // 📏 Hauteur (barre + bouton Filtres) */
}

/* ── Largeur contrôlée de la barre de recherche ────────────────────── */
.search-bar-wrap {                                                       /* // 🎯 Conteneur qui limite la largeur */
  width: min(100%, 760px);                                               /* // 📏 Max 760px, sinon 100% en petit écran */
  margin-left: auto;                                                     /* // ↔️ Plaque la barre côté droit (à côté du bouton) */
}
@media (min-width: 992px) {                                              /* // 💻 ≥ LG */
  .search-bar-wrap { width: min(100%, 700px); }                          /* // 📏 Légèrement plus court en large */
}
@media (min-width: 1400px) {                                             /* // 🖥️ ≥ XXL */
  .search-bar-wrap { width: min(100%, 640px); }                          /* // 📏 Plus compact sur très grands écrans */
}

/* ── Groupe de recherche (état normal) : monobloc + ombre externe ──── */
.search-input-group,                                                     /* // 🎯 Ton groupe custom */
.input-group.rounded-pill {                                              /* // 🎯 Variante Bootstrap arrondie */
  position: relative;                                                    /* // 📐 Supporte halo/ombre */
  background-clip: padding-box;                                          /* // 🧼 Bord propre */
  height: var(--search-h);                                               /* // ⬆️ Hauteur unifiée */
  border-radius: 999px;                                                  /* // 🟣 Pilule nette */
  display: flex; align-items: center;                                    /* // 📐 Centre vertical */
  box-shadow: 0 8px 16px rgba(13,110,253,.08),                           /* // ✨ Ombre EXTERNE douce */
              0 3px 8px rgba(0,0,0,.05) !important;                      /* // ✨ Ombre secondaire (prioritaire) */
}

/* ── Neutralise TOUT focus/ombre interne (input + bouton) ──────────── */
.search-input-group .form-control:focus,
.search-input-group .form-control:focus-visible,
.input-group.rounded-pill .form-control:focus,
.input-group.rounded-pill .form-control:focus-visible,
.search-input-group .btn:focus,
.search-input-group .btn:focus-visible,
.input-group.rounded-pill .btn:focus,
.input-group.rounded-pill .btn:focus-visible {
  outline: none !important;                                              /* // 🚫 Pas de contour natif */
  box-shadow: none !important;                                           /* // 🚫 Pas d’ombre interne Bootstrap */
  border-color: transparent !important;                                  /* // 🚫 Pas de liseré interne */
  background-clip: padding-box;                                          /* // 🧼 Bord net */
}

/* ── Focus global du groupe : halo collé au bord (aucun inset) ─────── */
.search-input-group:focus-within,
.input-group.rounded-pill:focus-within {
  outline: none !important;                                              /* // 🧼 Pas d’outline externe */
  outline-offset: 0 !important;                                          /* // 🧼 Pas d’espace ajouté */
  border-color: rgba(73,140,240,.46) !important;                         /* // 🔵 Contour renforcé */
  box-shadow:
    0 0 0 4px rgba(13,110,253,.18),                                      /* // 🔵 Halo collé AU BORD */
    0 8px 16px rgba(13,110,253,.10),                                     /* // ✨ Ombre principale externe */
    0 3px 8px rgba(0,0,0,.06)                                            /* // ✨ Ombre secondaire */
    !important;                                                          /* // 🔒 Prioritaire */
  border-radius: 999px !important;                                       /* // 🟣 Pilule conservée */
}

/* ── Input interne : suit la hauteur sans déborder ─────────────────── */
.search-input-group .form-control,
.input-group.rounded-pill .form-control {
  height: calc(var(--search-h) - 10px);                                  /* // 📏 Un peu moins haut que le conteneur */
  line-height: calc(var(--search-h) - 10px);                             /* // 📏 Texte centré verticalement */
  padding-top: 0; padding-bottom: 0;                                     /* // 🧼 Pas de padding vertical excessif */
  border-radius: 999px !important;                                       /* // 🟣 Pilule homogène */
  background: transparent !important;                                    /* // 🪟 Fond monobloc */
  border: 0;                                                             /* // 🧼 Pas de bord local */
}

/* ── Bouton “Rechercher” interne : même hauteur visuelle ───────────── */
.search-input-group .btn {
  height: calc(var(--search-h) - 10px);                                  /* // 📏 Aligné avec l’input */
  border-radius: 999px !important;                                       /* // 🟣 Pilule */
  display: inline-flex; align-items: center;                             /* // 📐 Centre vertical */
}

/* ── Désactive l’anneau de focus Bootstrap par variable CSS ────────── */
.search-input-group,
.input-group.rounded-pill {
  --bs-focus-ring-color: transparent;                                    /* // 🛡️ Pas d’anneau BS parasite */
}

/* ===================================================================== */
/* ===== Bouton “Filtres” — même forme que “Rechercher” (pilule) ======= */
/* ===================================================================== */

.filter-btn {                                                            /* // 🎯 Bouton principal Filtres */
  height: var(--search-h);                                               /* // 📏 Même hauteur que la barre */
  border-radius: 999px;                                                  /* // 🟣 Pilule parfaite */
  border: 0;                                                             /* // 🧼 Sans bord */
  padding-inline: 1rem;                                                  /* // ↔️ Confort horizontal */
  display: inline-flex; align-items: center; gap: .5rem;                 /* // 🔁 Icône + texte alignés */
  color: #fff;                                                           /* // 🎨 Texte clair */
  background: linear-gradient(180deg, #5d96ec 0%, #6989b9 100%);         /* // 💎 Gradient (peut matcher celui du CTA) */
  box-shadow: none;                                                      /* // 🧯 Pas d’ombre locale */
  transition: transform .12s ease, filter .2s ease;                      /* // 🎬 Animations douces */
}
.filter-btn:hover { transform: translateY(-1px); filter: brightness(1.03); } /* // 🐭 Hover : léger lift & lumière */
.filter-btn:active { transform: translateY(0); }                          /* // 👆 Active : repose */
.filter-btn:focus, .filter-btn:focus-visible {                            /* // ♿ Focus clavier/souris */
  outline: none;                                                          /* // 🧼 Pas d’outline natif */
  box-shadow: 0 0 0 4px rgba(13,110,253,.18);                             /* // 🔵 Halo externe collé au bord */
}

/* ── Variante mobile : un poil plus compact si besoin ───────────────── */
@media (max-width: 575.98px) {                                            /* // 📱 XS/SM */
  :root { --search-h: 40px; }                                             /* // 📏 Hauteur un peu réduite */
}


/* ======================================================
   🖼️ page "Paiement success" 
====================================================== */

/* --- Paiement succès --- */
.pay-success-wrap{max-width:640px;margin:48px auto;padding:0 16px}
.pay-card{border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.06);overflow:hidden;background:#fff}
.pay-header{display:flex;align-items:center;gap:12px;padding:20px 24px;background:#f0fff4;border-bottom:1px solid #e5e7eb}
.pay-badge{width:40px;height:40px;display:grid;place-items:center;border-radius:999px;background:#10b981;color:#fff;font-size:20px}
.pay-title{margin:0}
.pay-body{padding:20px 24px}
.kv{display:flex;gap:10px;margin:6px 0;color:#374151}
.kv .k{min-width:140px;color:#6b7280}
.pay-actions{display:flex;align-items:center;gap:12px;margin-top:16px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;text-decoration:none}
.btn-primary{background:#1f2a44;color:#fff}
.muted{color:#6b7280;font-size:14px}