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


/* ===================================================================
   🔔 HIGHLIGHT NOTIFICATIONS (modern)
=================================================================== */

@keyframes askpert-focus {
  0%   { box-shadow: 0 0 0 rgba(83,122,190,0); transform: translateY(0); }
  30%  { box-shadow: 0 0 0 4px rgba(83,122,190,.22), 0 18px 44px rgba(2,12,27,.12); transform: translateY(-2px); }
  100% { box-shadow: 0 0 0 rgba(83,122,190,0); transform: translateY(0); }
}

/* ✅ highlight sur cartes (qcard / card / question-card) */
.highlighted-card {
  position: relative;
  border-radius: 16px;
  outline: 2px solid rgba(83,122,190,.45);
  outline-offset: 3px;
  animation: askpert-focus 1.15s ease-in-out 2;

  /* petit “tint” très léger pour attirer l’œil */
  background-image: linear-gradient(
    to right,
    rgba(83,122,190,.10),
    rgba(83,122,190,0)
  );
}

/* ✅ accent à l’intérieur (pour éviter le cut si overflow-hidden) */
.highlighted-card::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: rgba(83,122,190,.9);
  opacity: .95;
  pointer-events:none;
}

/* ♿ Respect "réduire les animations" */
@media (prefers-reduced-motion: reduce) {
  .highlighted-card {
    animation: none;
    box-shadow: 0 0 0 4px rgba(83,122,190,.18);
    transform: none;
  }
}
/* ====================================================== */



/* ========= */ /* // 🎨 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) */
}

/* ======================================================
   🔘 CTA — base + variations BLEU / ORANGE / CONNEXION / RÉPERTOIRE
   (À GARDER)
====================================================== */

/* 🧱 Base commune aux CTA */
.btn-cta-blue,
.btn-cta-orange,
.btn-cta-connexion,
.btn-cta-signup {
  --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 */
.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) */
.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é */
.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 */
}

/* Help items */
.aide-card .help-row{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.aide-card .help-input{
  flex: 1;
  min-width: 0;
}

.aide-card .help-input input.form-control{
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #e7e7e7;
  background: #fff;
}

.aide-card .help-btn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid #ededed;
  background: #fafafa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  user-select: none;
}

.aide-card .help-btn:hover{
  background: #f3f3f3;
}


/* ✅ Help items: compteur mots + état limite */
.help-hint {
  font-size: 0.85rem;
  line-height: 1.1;
}

.help-row.is-limit .help-hint,
.help-row.is-limit .help-words {
  color: #dc3545 !important; /* Bootstrap danger */
  font-weight: 600;
}

/* petit feedback visuel (optionnel) */
.help-row.is-limit input.form-control {
  border-color: #dc3545;
}
.help-row.is-limit input.form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.2);
}



/* ======================================================
   🏷️ 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;
}


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

:root { --search-h: 44px; }

.search-bar-wrap { width: min(100%, 760px); margin-left: auto; }
@media (min-width: 992px){ .search-bar-wrap { width: min(100%, 700px); } }
@media (min-width: 1400px){ .search-bar-wrap { width: min(100%, 640px); } }

.search-input-group,
.input-group.rounded-pill {
  position: relative;
  background-clip: padding-box;
  height: var(--search-h);
  border-radius: 999px;
  display: flex;
  align-items: center;
}

.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;
  box-shadow: none !important;
  border-color: transparent !important;
  background-clip: padding-box;
}

.search-input-group .form-control,
.input-group.rounded-pill .form-control {
  height: calc(var(--search-h) - 10px);
  line-height: calc(var(--search-h) - 10px);
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 999px !important;
  background: transparent !important;
  border: 0;
}

.search-input-group .btn {
  height: calc(var(--search-h) - 10px);
  border-radius: 999px !important;
  display: inline-flex;
  align-items: center;
}

.search-input-group,
.input-group.rounded-pill {
  --bs-focus-ring-color: transparent;
}


/* ======================================================
   🖼️ 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}




/* ============================= */
/* 🎨 Notifications – item “premium” (ajustements responsive) */
/* ============================= */

#notificationsModal .noti-item {
  padding: clamp(0.65rem, 0.6vw + 0.55rem, 0.85rem)
           clamp(0.75rem, 0.8vw + 0.65rem, 1rem);
}

/* Texte principal : responsive + lisible */
#notificationsModal .noti-message {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;

  font-size: clamp(0.85rem, 0.35vw + 0.75rem, 0.95rem);
  line-height: 1.25;
  font-weight: 600;
  word-break: break-word;
}

/* Meta (date) : plus discret + responsive */
#notificationsModal .noti-meta small {
  font-size: clamp(0.72rem, 0.25vw + 0.65rem, 0.82rem);
}

/* Icône gauche : reste alignée visuellement */
#notificationsModal .noti-leading {
  font-size: 0.95rem;
}

/* ✅ Point non lu : visible à coup sûr */
#notificationsModal .unread-dot {
  display: inline-block !important;          /* au cas où une règle le cache */
  width: 10px;                                /* taille lisible */
  height: 10px;
  border-radius: 999px;
  background: var(--bs-primary, #0d6efd) !important;
  box-shadow: 0 0 0 3px rgba(13,110,253,.15); /* halo léger pour visibilité */
  flex: 0 0 auto;                             /* évite qu’il “s’écrase” en flex */
  margin-top: 6px;                            /* aligne verticalement */
}

/* Fallback si le modal n'a pas l'id exact */
.noti-item .unread-dot{
  display:inline-block !important;
  width:10px;
  height:10px;
  border-radius:999px;
  background: var(--bs-primary, #0d6efd) !important;
  box-shadow: 0 0 0 3px rgba(13,110,253,.15);
  flex: 0 0 auto;
  margin-top: 6px;
}



/* =============================== */
/* ⏳ Notifications — loading non bloquant */
/* =============================== */
#notificationsModal.is-loading,
#notificationsModal.is-loading *{
  pointer-events: auto;
}

/* Si un overlay existe, il ne doit JAMAIS bloquer */
#notificationsModal.is-loading .loading-overlay,
#notificationsModal.is-loading .loading-overlay *{
  pointer-events: none !important;
}

/* =============================== */
/* 🔔 Notifications Modal — plus clair / premium */
/* =============================== */

/* Backdrop global */
.modal-backdrop.show{ opacity: .15 !important; }

/* Backdrop un peu + foncé seulement quand notifications est ouvert */
body:has(#notificationsModal.show) .modal-backdrop.show{
  opacity: .25 !important;
}


/* Carte du modal */
#notificationsModal .modal-content{
  background: rgba(17, 24, 39, .96) !important; /* slate-900 */
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow: 0 25px 60px rgba(0,0,0,.45) !important;
  border-radius: 16px !important;
}

/* Header/footer clean */
#notificationsModal .modal-header,
#notificationsModal .modal-footer{
  border-color: rgba(255,255,255,.08) !important;
}

/* Titre + texte */
#notificationsModal .modal-title{
  color: #f1f5f9 !important;
}
#notificationsModal .modal-body{
  color: rgba(241,245,249,.88) !important;
}

/* Bouton X plus lisible */
#notificationsModal .btn-close{
  filter: invert(1) opacity(.85);
}
#notificationsModal .btn-close:hover{
  opacity: 1;
}



/* ===================================================================== */
/* Askpert — TW overrides (base_tw.html + Liste Experts + Offcanvas/Modal) */
/* ===================================================================== */

/* ===============================
   1) LISTE EXPERTS — Search + bouton filtres
   =============================== */

/* Barre de recherche (ap-search) */
.ap-search,
.ap-search *{
  outline: none !important;
  box-shadow: none !important;
}
.ap-search > form > div{
  border-color: rgba(15, 23, 42, .85) !important; /* slate-900-ish */
}

/* Bouton filtres (ap-filters-btn) */
.ap-filters-btn{
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(15, 23, 42, .85) !important;
}
.ap-filters-btn:focus,
.ap-filters-btn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* ===============================
   2) OFFCANVAS — overlay + z-index stable
   =============================== */

/* Bootstrap offcanvas defaults: offcanvas=1045, backdrop=1040
   On remonte juste un peu pour être au-dessus de ton layout,
   mais on reste cohérent et proche des valeurs BS. */
.offcanvas{
  position: fixed !important;
  z-index: 1600 !important;
}
.offcanvas-backdrop{
  position: fixed !important;
  inset: 0 !important;
  z-index: 1590 !important;
}

/* ===============================
   3) TAGIFY — Offcanvas Filtres (Liste Experts)
   =============================== */

#offcanvasFiltres .tagify{
  --placeholder-color: #94A3B8 !important;

  --tag-bg: rgba(255,255,255,.08) !important;
  --tag-hover: rgba(255,255,255,.12) !important;
  --tag-text-color: #E5E7EB !important;
  --tag-text-color--edit: #E5E7EB !important;

  --input-color: #E5E7EB !important;
}

#offcanvasFiltres .tagify__tag > div{
  background: var(--tag-bg) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
}

#offcanvasFiltres .tagify__input::before{
  color: var(--placeholder-color) !important;
}

/* ===============================
   4) MODAL — laisser Bootstrap gérer le stacking
   =============================== */

/* IMPORTANT:
   ❌ Ne pas override .modal / .modal-backdrop z-index
   (ça crée exactement le bug "modal grisé"/backdrop au-dessus)
*/

/* Optionnel: si tu as un parent qui met un filter/transform,
   ça peut casser le stacking context des modals.
   Ce fix doit viser TON conteneur (ex: #app, .page-wrap), pas .modal.
   -> laisse vide ici tant que tu n'as pas identifié le parent.
*/

/* ===============================
   5) Bootstrap checkboxes → style Tailwind (global base_tw.html)
   =============================== */

.form-check-input{
  width: 1.1rem;
  height: 1.1rem;
  border-radius: .4rem;
  border: 1px solid rgba(15, 23, 42, .20);
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
}

.form-check-input:focus{
  border-color: rgba(100, 116, 139, .55);
  box-shadow: 0 0 0 .25rem rgba(148, 163, 184, .25);
}

.form-check-input:checked{
  background-color: #0f172a;
  border-color: #0f172a;
}

.form-check-label{
  color: #334155;
  font-size: .95rem;
}

.ap-safe-content img { max-width: 100%; height: auto; }
.ap-safe-content iframe, .ap-safe-content video { max-width: 100%; }
.ap-safe-content table { width: 100%; }
.ap-safe-content pre { white-space: pre-wrap; }


/* ✅ Modal "Détails question" : titres bien noirs */
[id^="detailsQuestion"] h6,
[id^="detailsQuestion"] .fw-semibold,
[id^="detailsQuestion"] .modal-body h6,
[id^="detailsQuestion"] .modal-body .text-muted {
  color: #0f172a !important; /* slate-900 */
}

/* Si tu veux aussi les petits labels (Sujet, etc.) */
[id^="detailsQuestion"] .small.text-muted {
  color: #0f172a !important;
  opacity: .75; /* optionnel: garde un petit contraste */
}

/* ✅ EDIT PROFIL — <details> "Je peux t'aider si..." (force visible) */
.aide-card details{
  background: #0b1220 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.aide-card details > summary{
  list-style: none !important;
  cursor: pointer !important;

  background: #ffffff !important;
  color: #0b1220 !important;

  padding: 14px 16px !important;
  border-bottom: 1px solid rgba(15,23,42,.10) !important;
  font-weight: 700 !important;
}

/* enlève le triangle par défaut */
.aide-card details > summary::-webkit-details-marker{ display:none; }

/* contenu quand ouvert */
.aide-card details[open]{
  background: #0b1220 !important;
}

.aide-card details[open] > summary{
  background: #ffffff !important;
  color: #0b1220 !important;
}


/* ✅ Modal détails question — commentaire d'évaluation toujours noir */
[id^="detailsQuestion"] .evaluation-comment,
[id^="detailsQuestion"] .evaluation-comment *{
  color: #0f172a !important;
}



/* FIX accordéon profil public — conflit Tailwind/Bootstrap */
#helpItemsCollapse,
#helpItemsCollapse.collapse,
#helpItemsCollapse.collapsing,
#helpItemsCollapse.show {
visibility: visible !important;
}