/* Grille 4 colonnes */
.hai-services-4cols {
    width: 100%;
    margin: 2rem auto;
}

.hai-profile-specialty {
    margin: 0.15rem 0 0.9rem;
    font-size: 0.9rem;
    color: #6b5b4b;
    font-style: italic;
}


.hai-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr)); /* 4 colonnes égales */
    gap: 2rem;
    justify-items: stretch;
}

/* Responsive */
@media (max-width: 1679px) {
    .hai-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .hai-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hai-services-grid {
        grid-template-columns: 1fr;
    }
}

/* Chaque cellule de service devient un conteneur fixe */
.hai-service-col {
    display: block;
    position: relative;
    min-height: 320px;
    width: 100%;
}

/* Badge nombre d'avis + étoile en haut à gauche */
.hai-profile-reviews-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f5efe1;
    font-size: 13px;
    font-family: serif;
    color: #b5995a;
    border: 1px solid #e1cfaa;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hai-profile-badge-star {
    font-size: 14px;
    line-height: 1;
    color: #7ba389;
}

.hai-profile-badge-count {
    line-height: 1;
}

/* Carte premium */
.hai-profile-card {
    background: #ffffff !important;
    border-radius: 20px;
    border: 1px solid #eddcc4;
    padding: 16px 20px !important;
    width: 100% !important;
    max-width: none;
    text-align: center;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hai-profile-avatar-wrapper,
.hai-profile-name,
.hai-profile-service,
.hai-profile-cta {
    flex-shrink: 0;
}


.hai-profile-avatar {
    width: 76px !important;
    height: 76px !important;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #cc4385;
}

.hai-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nom + service */
.hai-profile-name{
    margin: 0;
    font-size: 1.05rem !important;
    font-weight: 600;
    font-family: serif;
    color: #7ba389 !important;
}

.hai-profile-service {
    display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom: 15px;
    gap: 6px;
}

.hai-service-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: inline-block;
}

/* Bouton Je consulte */
.hai-profile-cta {
    display: inline-block;
    padding: 4px 14px !important;
    border-radius: 5px !important;
    background: #cc4385 !important;
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hai-profile-cta:hover {
    background: #b47f26;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Étoile bouton CTA */
.hai-profile-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hai-cta-star {
    color: #ffffff; /* or doux premium */
    font-size: 14px;
    line-height: 1;
}


/* Les cartes qui tournent se superposent dans la cellule */
.hai-service-rotating-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

/* Grille 4 colonnes */
.hai-services-4cols {
    width: 100%;
    margin: 2rem auto;
}

.hai-profile-specialty {
    margin: 0.15rem 0 0.9rem;
    font-size: 0.9rem;
    color: #6b5b4b;
    font-style: italic;
}


.hai-services-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(260px, 1fr)); /* 4 colonnes égales */
    gap: 2rem;
    justify-items: stretch;
}

/* Responsive */
@media (max-width: 1679px) {
    .hai-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1280px) {
    .hai-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .hai-services-grid {
        grid-template-columns: 1fr;
    }
}

/* Chaque cellule de service devient un conteneur fixe */
.hai-service-col {
    display: block;
    position: relative;
    min-height: 320px;
    width: 100%;
}

/* Badge nombre d'avis + étoile en haut à gauche */
.hai-profile-reviews-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 2px 10px;
    border-radius: 999px;
    background: #f5efe1;
    font-size: 13px;
    font-family: serif;
    color: #b5995a;
    border: 1px solid #e1cfaa;
    display: flex;
    align-items: center;
    gap: 4px;
}

.hai-profile-badge-star {
    font-size: 14px;
    line-height: 1;
    color: #7ba389;
}

.hai-profile-badge-count {
    line-height: 1;
}

.hai-profile-avatar-wrapper,
.hai-profile-name,
.hai-profile-service,
.hai-profile-cta {
    flex-shrink: 0;
}

/* Photo ronde en haut */
.hai-profile-avatar-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 25px;
}

.hai-profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #cc4385;
}

.hai-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Nom + service */
.hai-profile-name{
    margin: 0;
    font-size: 1.05rem !important;
    font-weight: 600;
    font-family: serif;
    color: #7ba389 !important;
}

.hai-profile-service {
    display: flex;
    align-items: center;
    justify-content: center;
	margin-bottom: 15px;
    gap: 6px;
}

.hai-service-icon {
    width: 35px;
    height: 35px;
    object-fit: contain;
    display: inline-block;
}

/* Bouton Je consulte */
.hai-profile-cta {
    display: inline-block;
    padding: 4px 14px !important;
    border-radius: 5px !important;
    background: #cc4385 !important;
    color: #fff !important;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.hai-profile-cta:hover {
    background: #b47f26;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Les cartes qui tournent se superposent dans la cellule */
.hai-service-rotating-card {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
}

/* Badge statut */
/* Ligne nom + statut à droite */
.hai-name-row{
  display:flex;
  align-items:center;
  justify-content:center; /* gardez center si vos cartes sont centrées */
  gap:10px;
}

/* Le point lumineux */
.hai-status-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
  background:#d32f2f; /* défaut rouge */
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Vert = Disponible */
.hai-status-dot.is-available{
  background:#22c55e;
  box-shadow: 0 0 10px rgba(34,197,94,.55), 0 0 18px rgba(34,197,94,.35);
  margin-bottom: 3px !important;
}

/* Orange = Occupé (voyance téléphone => busy) */
.hai-status-dot.is-busy{
  background:#f59e0b;
  box-shadow: 0 0 10px rgba(245,158,11,.55), 0 0 18px rgba(245,158,11,.35);
  margin-bottom: 3px !important;
}

/* Bleu = Pause (voyance téléphone => on_pause) */
.hai-status-dot.is-on_pause{
  background:#3b82f6;
  box-shadow: 0 0 10px rgba(59,130,246,.55), 0 0 18px rgba(59,130,246,.35);
  margin-bottom: 3px !important;
}

/* Rouge = Indisponible */
.hai-status-dot.is-unavailable{
  background:#ef4444;
  box-shadow: 0 0 10px rgba(239,68,68,.45), 0 0 18px rgba(239,68,68,.25);
  margin-bottom: 3px !important;
}

/* Le bloc doit prendre toute la largeur de la grille */
.hai-grid-howto{
  grid-column: 1 / -1;
}

.hai-grid-reviews{
  grid-column: 1 / -1;
}


/* Section moderne */
.hai-howto-modern{
  border: 1px solid #e8d7c6;
  border-radius: 18px;
  background: linear-gradient(180deg, #7ba38978 0%, #ffffff 100%);
  padding: 18px 18px 16px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.06);
}

.hai-howto-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.hai-howto-head h3 {
    margin: 0;
    font-size: 18px !important;
    letter-spacing: .2px;
    color: #000 !important;
}

.hai-howto-head p{
  margin:0;
  opacity:.75;
  font-size: 13px;
}

.hai-howto-chip {
    border: 1px solid #f0e2d6;
    background: #ffffff;
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 12px;
    opacity: .85;
    white-space: nowrap;
    color: #2c2c2c;
}

.hai-howto-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.hai-step-back{
  border: 1px solid #f0e2d6;
  background: #ffffff;
  border-radius: 14px;
  padding: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
}

.hai-step-num {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #e7c9b5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex: 0 0 auto;
    background: #cc4385;
    color: #fff;
}

.hai-step-title{
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
}

.hai-step-desc{
  font-size: 14px;
  opacity: .8;
  line-height: 1.35;
}

.hai-howto-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.hai-howto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #181818 !important;
    font-family: serif, arial;
    font-size: 17px;
}

/* Responsive */
@media (max-width: 980px){
  .hai-howto-steps{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px){
  .hai-howto-steps{
    grid-template-columns: 1fr;
  }
  .hai-howto-head{
    flex-direction: column;
    align-items:flex-start;
  }
  .hai-howto-chip{
    white-space: normal;
  }
}


/* Pleine largeur bloc avis */
.hai-grid-reviews{ grid-column: 1 / -1; }

/* Carte premium Avis */
.hai-reviews-card{
  position: relative;
  border-radius: 20px;
  border: 1px solid rgba(232,215,198,0.95);
  background: linear-gradient(180deg, #7ba38978 0%, #ffffff 100%);
  padding: 16px 16px 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.07);
  overflow: hidden;
}


.hai-reviews-card__head{ position: relative; }

.hai-reviews-card__kicker {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .35px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #cc4385;
    font-family: 'serif, arial';
}

.hai-reviews-card__kicker-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.hai-reviews-card__title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 800;
    letter-spacing: .2px;
    color: #000 !important;
}

.hai-reviews-card__badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(232,215,198,0.95);
  box-shadow: 0 8px 18px rgba(0,0,0,0.06);
  white-space: nowrap;
  color: #2c2c2c;
}

.hai-reviews-card__sub{
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  opacity: .85;
  max-width: 820px;
}

.hai-reviews-card__divider{
  height: 1px;
  margin: 12px 0 12px;
  background: linear-gradient(90deg, transparent, rgb(204 67 133), transparent);
}

.hai-reviews-card__body{
  position: relative;
  padding-top: 0px;
}

/* Mobile */
@media (max-width: 640px){
  .hai-reviews-card{ padding: 14px 12px 12px; border-radius: 18px; }
  .hai-reviews-card__kicker-row{ flex-direction: column; align-items:flex-start; }
  .hai-reviews-card__badge{ white-space: normal; }
  .hai-reviews-card__title{ font-size: 16px; }
}

.hai-reviews-card__body{
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}


/* =========================================
   FIX GRID + SLIDER : empêcher l'élargissement
   ========================================= */

/* Important : autorise les items de la grille à rétrécir (sinon overflow = grille qui se décale) */
.hai-services-grid > *{
  min-width: 0;
}

/* Le bloc avis doit occuper toute la ligne et ne jamais imposer sa largeur */
.hai-grid-reviews{
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

/* La carte avis ne doit pas forcer une largeur plus grande que l'écran */
.hai-reviews-card,
.hai-reviews-card__body{
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}


/* Slots profils masqués */
.hai-profile-hidden{ display:none !important; }
.hai-profile-hidden[hidden]{ display:none !important; }

/* Bouton "Voir plus" pleine largeur */
.hai-loadmore-wrap{
  grid-column: 1 / -1;
  display:flex;
  justify-content:center;
  margin: 18px 0 6px;
}

.hai-loadmore-btn {
    appearance: none !important;
    border: 1px solid rgb(237 220 196);
    background: linear-gradient(173deg, rgb(204 67 133), rgb(204 67 133 / 39%));
    border-radius: 999px;
    padding: 12px 18px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.07);
    color: #ffffff;
    font-family: 'serif, arial';
    font-size: 18px;
}

.hai-loadmore-btn:hover{ transform: translateY(-1px); }
.hai-loadmore-btn:active{ transform: translateY(0px); }