/* ============================================================ */
/* AMILI — DOMAIN HARMONY v9.12                                 */
/* Aligne la DA des pages domaines sur l'accueil :              */
/* - cartes en glass premium (comme .metier-mini)              */
/* - rythme des fonds de section                                */
/* - CTA cohérents                                              */
/* ============================================================ */

/* ============================================================ */
/* 1. CARTES SERVICES : style glass premium (comme accueil)     */
/* ============================================================ */
.service-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--papier) !important;
  border: 1px solid rgba(15,27,45,0.07) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.8), 0 1px 3px rgba(15,27,45,0.04) !important;
  transition: transform .35s var(--ease-out), box-shadow .35s ease !important;
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .service-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px -24px rgba(15,27,45,0.32), inset 1px 1px 1px rgba(255,255,255,0.9) !important;
  }
}
/* Liseré orange subtil en haut de carte (accent métier) */
.service-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--metier), transparent 70%);
  opacity: 0; transition: opacity .35s ease;
  z-index: 1;
}
.service-card:hover::before { opacity: 1; }

.service-card__tag {
  color: var(--metier-ink);
  font-weight: var(--w-metiers, 800);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: var(--t-12);
}

/* ============================================================ */
/* 2. CARTES "OVERVIEW" (clim : 3 domaines) : glass premium     */
/* ============================================================ */
.overview-card {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-lg) !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.8), 0 1px 3px rgba(15,27,45,0.04) !important;
  transition: transform .35s var(--ease-out), box-shadow .35s ease !important;
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .overview-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 30px 60px -24px rgba(15,27,45,0.32), inset 1px 1px 1px rgba(255,255,255,0.9) !important;
  }
}

/* ============================================================ */
/* 3. PROMESSES (fond nuit) : carte glass sombre cohérente      */
/* ============================================================ */
.domain-promise .promise-item {
  position: relative; isolation: isolate; overflow: hidden;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: var(--r-lg) !important;
  padding: 30px !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.06) !important;
  transition: transform .35s var(--ease-out), background .35s ease !important;
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .domain-promise .promise-item:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.07) !important;
  }
}
.domain-promise .promise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-6, 24px);
}
@media (max-width: 860px) {
  .domain-promise .promise-grid { grid-template-columns: 1fr; }
}

/* ============================================================ */
/* 4. RYTHME DES FONDS : casser la monotonie paper/paper-2      */
/* La section "engagements" (clim) et "back" passent en alt     */
/* pour créer une respiration comme sur l'accueil.              */
/* ============================================================ */
.domain-back.section--paper-2 {
  background: var(--papier-2) !important;
}

/* ============================================================ */
/* 5. CTA RETOUR : harmoniser le btn--ghost en plein lisible    */
/* (déjà géré globalement par premium.css, on renforce le halo) */
/* ============================================================ */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .domain-back .btn--ghost:hover,
  .domain-rdv .btn--ghost:hover {
    box-shadow: inset 1px 1px 1px rgba(255,255,255,0.75), 0 0 20px 1px rgba(15,27,45,0.25) !important;
  }
}

/* ============================================================ */
/* 6. INTRO SECTIONS : centrer + cohérence avec l'accueil       */
/* ============================================================ */
.domain-section-intro .frame { max-width: 820px; }

/* ============================================================ */
/* 7. CTA FINAL domaine : un peu plus de présence (proche ink)  */
/* ============================================================ */
.domain-cta-final.section--paper-2 {
  background: var(--papier-2) !important;
}

/* ============================================================ */
/* 8. MOBILE : alléger les hovers                               */
/* ============================================================ */
@media (max-width: 820px) {
  .service-card, .overview-card, .domain-promise .promise-item {
    transition: transform .25s ease !important;
  }
}

/* ============================================================ */
/* 9. HERO CLIM : 3 boutons (Entretien + Devis + Urgence)       */
/* ============================================================ */
.hero-domain__cta--triple {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.hero-domain__cta--triple .btn { white-space: nowrap; }
@media (max-width: 600px) {
  .hero-domain__cta--triple { flex-direction: column; align-items: stretch; }
  .hero-domain__cta--triple .btn { width: 100%; justify-content: center; }
}

/* ============================================================ */
/* 10. LIEN RETOUR DISCRET (fin de page domaine)                */
/* ============================================================ */
.domain-back-link {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted, #6B6B68);
  font-weight: 700;
  font-size: var(--t-16);
  text-decoration: none;
  transition: color .25s ease, transform .25s ease;
}
.domain-back-link:hover {
  color: var(--metier-ink);
  transform: translateX(-4px);
}

/* ============================================================ */
/* 11. PRESTATIONS sur fond NUIT : cartes glass sombres         */
/* ============================================================ */
.domain-prestations.section--night .prestation-item {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.06) !important;
}
.domain-prestations.section--night .prestation-item__title { color: #fff !important; }
.domain-prestations.section--night .prestation-item__desc { color: var(--text-on-night-dim, #8A94A6) !important; }
.domain-prestations.section--night .prestation-item__icon {
  background: rgba(242,107,44,0.15) !important;
  color: var(--metier-ink) !important;
}
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .domain-prestations.section--night .prestation-item:hover {
    transform: translateY(-6px);
    background: rgba(255,255,255,0.07) !important;
  }
}

/* ============================================================ */
/* 12. SERVICES sur fond NUIT (multi) : cartes glass + icônes   */
/* ============================================================ */
.domain-services.section--night .service-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 1px 1px 1px rgba(255,255,255,0.06) !important;
}
.domain-services.section--night .service-card__title { color: #fff !important; }
.domain-services.section--night .service-card__desc { color: var(--text-on-night-dim, #8A94A6) !important; }
.domain-services.section--night .service-card__tag { color: var(--metier-ink) !important; }
.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: 16px;
  border-radius: var(--r-md);
  background: rgba(242,107,44,0.15);
  font-size: var(--t-24);
  line-height: 1;
}
.domain-services.section--night .service-card::before { background: var(--metier) !important; }
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .domain-services.section--night .service-card:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,0.07) !important;
  }
}

/*  La ligne sous le bouton d'appel de la page urgence (19/08).
    Elle repond a la seule question que se pose quelqu'un qui compose un
    numero avec de l'eau au sol : est-ce que quelqu'un va repondre.
    Discrete a dessein : c'est une precision, pas un argument. */
.hero-urgence__decroche {
  margin-top: var(--s-4);
  font-size: var(--t-16);
  font-weight: 700;
  color: #CDD4DF;
}