/* =========================
   SECTION : Service Detail
========================= */

/* Bandeau navbar pleine largeur avec ton dégradé */
.navband{
  /* full-bleed */
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;

  /* ton dégradé */
  background:
    radial-gradient(1200px 600px at 90% 10%, rgba(255,255,255,.08) 0 40%, transparent 60%),
    linear-gradient(90deg, var(--blue-900) 0%, var(--blue-700) 60%, var(--blue-600) 100%);
  color: var(--text-100);
}

/* Si .navbar ajoute déjà une couleur de fond, on la neutralise ici */
.navband .navbar{ background: transparent; }

/* Lisibilité liens/logo sur le fond coloré */
.navband .logo,
.navband .navbar a{ color: #fff; }
.navband .navbar a:hover{ opacity: 1; text-decoration: underline; }

/* Padding confort et z-index si sticky */
.navband .bar{ padding: 20px 0; }
.navband .navbar{ position: sticky; top: 0; z-index: 1000; } /* garde si tu veux le sticky */


#service-detail {
  background: #fff;
  padding: 60px 0;
}

.detail-wrap {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* En-tête du service */
.detail-header {
  display: flex;
  flex-direction: column;   /* icône au-dessus du texte */
  align-items: center;      /* centre horizontalement */
  text-align: center;       /* centre le texte */
  gap: 12px;                /* espace plus fin */
  margin-bottom: 24px;
}


.detail-header h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 36px);
  color: var(--blue-900);
}

.detail-header .subtitle {
  margin: 4px 0 0;
  font-weight: 600;

  font-size: 18px;
}

.detail-icon {
  width: clamp(150px, 12vw, 180px); /* min 80px, max 180px, variable selon largeur écran */
  height: auto;
  object-fit: contain;
  margin-bottom: 8px;
}

/* Texte d’introduction */
.intro {
  margin-bottom: 24px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-700);
}

/* Liste des prestations */
.service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.service-list li {
  padding: 10px 0;
  font-size: 16px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.service-list li::before {
  content: "✔";
  color: var(--blue-700);
  font-weight: bold;
  margin-right: 6px;
}

/* Illustration */
.detail-image img {
  width: 100%;
  max-height: 280px;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: var(--card-shadow);
  margin-bottom: 24px;
}

/* CTA */
.cta-row {
  text-align: center;
  margin-top: 20px;
}

.cta-row .btn {
  font-size: 16px;
  padding: 14px 28px;
  background: var(--blue-700);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.cta-row .btn:hover {
  background: var(--blue-900);
}

/* =========================
   Responsivité
========================= */

@media (max-width: 600px) {
  .detail-header {
    flex-direction: column;
    text-align: center;
  }
  .detail-icon {
    width: 80px;
    height: 80px;
  }
}


.detail-icon {
  display:inline-block;
  width:100px;   /* adapte la taille */
  height:100px;
  background-color: var(--blue-700);
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
  margin-right: 20px;
}

/* Icônes par service */
.icon-vie-pratique {
  -webkit-mask-image: url("{% static 'ZenGoApp/img/panier_de_courses.svg' %}");
  mask-image: url("{% static 'ZenGoApp/img/panier_de_courses.svg' %}");
}
.icon-maison-entretien {
  -webkit-mask-image: url("{% static 'ZenGoApp/img/maison_et_entretien.svg' %}");
  mask-image: url("{% static 'ZenGoApp/img/maison_et_entretien.svg' %}");
}
.icon-deplacements {
  -webkit-mask-image: url("{% static 'ZenGoApp/img/deplacements_et_mobilite.svg' %}");
  mask-image: url("{% static 'ZenGoApp/img/deplacements_et_mobilite.svg' %}");
}
.icon-loisirs {
  -webkit-mask-image: url("{% static 'ZenGoApp/img/loisirs_et_lifestyle.svg' %}");
  mask-image: url("{% static 'ZenGoApp/img/loisirs_et_lifestyle.svg' %}");
}
.icon-administratifs {
  -webkit-mask-image: url("{% static 'ZenGoApp/img/services_administratifs.svg' %}");
  mask-image: url("{% static 'ZenGoApp/img/services_administratifs.svg' %}");
}
.icon-sur-mesure {
  -webkit-mask-image: url("{% static 'ZenGoApp/img/services_sur_mesure.svg' %}");
  mask-image: url("{% static 'ZenGoApp/img/services_sur_mesure.svg' %}");
}

/* Effet hover (optionnel) */
.detail-header:hover .detail-icon {
  background-color: var(--blue-900);
  transition: background-color .3s ease;
}

.detail-icon {
  display:inline-block;
  width:100px;   /* adapte la taille */
  height:100px;
  background-color: var(--blue-700);
  -webkit-mask: center/contain no-repeat;
  mask: center/contain no-repeat;
  margin-right: 20px;
}

/* Icônes par service */
.icon-vie-pratique {
  -webkit-mask-image: url("../img/panier_de_courses.svg");
  mask-image: url("../img/panier_de_courses.svg");
}
.icon-maison-entretien {
  -webkit-mask-image: url("../img/maison_et_entretien.svg");
  mask-image: url("../img/maison_et_entretien.svg");
}
.icon-deplacements {
  -webkit-mask-image: url("../img/deplacements_et_mobilite.svg");
  mask-image: url("../img/deplacements_et_mobilite.svg");
}
.icon-loisirs {
  -webkit-mask-image: url("../img/loisirs_et_lifestyle.svg");
  mask-image: url("../img/loisirs_et_lifestyle.svg");
}
.icon-administratifs {
  -webkit-mask-image: url("../img/services_administratifs.svg");
  mask-image: url("../img/services_administratifs.svg");
}
.icon-sur-mesure {
  -webkit-mask-image: url("../img/services_sur_mesure.svg");
  mask-image: url("../img/services_sur_mesure.svg");
}

/* Effet hover (optionnel) */
.detail-header:hover .detail-icon {
  background-color: var(--blue-900);
  transition: background-color .3s ease;
}