/* ========================================================================== */
/* Bandeaux condensation — page Spa & hôtellerie                              */
/* ========================================================================== */

:root {
  --spa-condensation-image: url("../assets/images/metiers/condensationjour.webp");
}

html.theme-dark {
  --spa-condensation-image: url("../assets/images/metiers/condensationnuit.webp");
}

/* Mode jour : voile blanc léger sur les deux bandeaux pour éclaircir l'image. */
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua {
  background-color: transparent !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.33), rgba(255, 255, 255, 0.33)),
    var(--spa-condensation-image) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Mode nuit inchangé. */
html.theme-dark body.spa-page #contenu > .section.section-aqua {
  background-color: transparent !important;
  background-image: var(--spa-condensation-image) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* Second bandeau uniquement : éclaircissement progressif à gauche pour améliorer la lisibilité. */
html:not(.theme-dark) body.spa-page #contenu > .section.section-mist.section-aqua {
  background-image:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.61) 0%,
      rgba(255, 255, 255, 0.51) 36%,
      rgba(255, 255, 255, 0.37) 58%,
      rgba(255, 255, 255, 0.27) 75%),
    var(--spa-condensation-image) !important;
}

/* En mode nuit, même principe avec un léger renfort sombre pour le texte clair. */
html.theme-dark body.spa-page #contenu > .section.section-mist.section-aqua {
  background-image:
    linear-gradient(90deg,
      rgba(8, 14, 40, 0.30) 0%,
      rgba(8, 14, 40, 0.20) 36%,
      rgba(8, 14, 40, 0.08) 58%,
      rgba(8, 14, 40, 0) 75%),
    var(--spa-condensation-image) !important;
}

/* Aucun pseudo-element ne doit recouvrir ou flouter l'image. */
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua::before,
html.theme-dark body.spa-page #contenu > .section.section-aqua::before,
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua::after,
html.theme-dark body.spa-page #contenu > .section.section-aqua::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  filter: none !important;
  transform: none !important;
}

/* Les cartes du premier bandeau restent lisibles tout en laissant percevoir le fond. */
html:not(.theme-dark) body.spa-page .section-aqua .sector-editorial-chapter {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.theme-dark body.spa-page .section-aqua .sector-editorial-chapter {
  background: rgba(17, 24, 61, 0.78) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Mobile : même image nette, sans répétition, avec éclaircissement plus étendu sur le second bandeau. */
@media (max-width: 720px) {
  html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.35)),
      var(--spa-condensation-image) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  html.theme-dark body.spa-page #contenu > .section.section-aqua {
    background-image: var(--spa-condensation-image) !important;
    background-position: center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }

  html:not(.theme-dark) body.spa-page #contenu > .section.section-mist.section-aqua {
    background-image:
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.63) 0%,
        rgba(255, 255, 255, 0.53) 55%,
        rgba(255, 255, 255, 0.39) 78%,
        rgba(255, 255, 255, 0.29) 92%),
      var(--spa-condensation-image) !important;
  }

  html.theme-dark body.spa-page #contenu > .section.section-mist.section-aqua {
    background-image:
      linear-gradient(90deg,
        rgba(8, 14, 40, 0.34) 0%,
        rgba(8, 14, 40, 0.24) 55%,
        rgba(8, 14, 40, 0.10) 78%,
        rgba(8, 14, 40, 0) 92%),
      var(--spa-condensation-image) !important;
  }

  body.spa-page #contenu > .section.section-aqua h2 {
    text-wrap: balance;
  }
}

/* Mode nuit : aucun halo violet ni nuée sur la page Spa & hôtellerie, tous supports. */
html.theme-dark body.spa-page #contenu > .section:not(.conversion-band)::before,
html[data-theme="dark"] body.spa-page #contenu > .section:not(.conversion-band)::before,
html.theme-dark body.spa-page #contenu > .section:not(.conversion-band)::after,
html[data-theme="dark"] body.spa-page #contenu > .section:not(.conversion-band)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

/* Mode jour : aucun halo violet ni nuée sur la page Spa & hôtellerie, tous supports. */
html:not(.theme-dark) body.spa-page #contenu > .section:not(.conversion-band)::before,
html:not(.theme-dark) body.spa-page #contenu > .section:not(.conversion-band)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

@media (prefers-color-scheme: light) {
  html:not(.theme-dark):not([data-theme="dark"]) body.spa-page #contenu > .section:not(.conversion-band)::before,
  html:not(.theme-dark):not([data-theme="dark"]) body.spa-page #contenu > .section:not(.conversion-band)::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }
}

/* Intitules de section violets sur tous supports. */
html:not(.theme-dark) body.spa-page #contenu > .section:not(.conversion-band) > .container > .eyebrow {
  color: #5e17eb !important;
}

html.theme-dark body.spa-page #contenu > .section:not(.conversion-band) > .container > .eyebrow {
  color: #9b7cff !important;
}

/* Réassurance : intitulé renforcé pour rester lisible sur le fond photographique. */
body.spa-page #contenu > .section.section-mist.section-aqua > .container > .eyebrow {
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Réassurance jour : puces bleues comme dans La réalité d'un spa premium, tous supports. */
html:not(.theme-dark) body.spa-page #contenu > .section.section-mist.section-aqua .feature-list li::marker {
  color: #00b0ff !important;
}

html:not(.theme-dark) body.spa-page #contenu > .section.section-mist.section-aqua .feature-list li::before {
  color: #00b0ff !important;
  background: #00b0ff !important;
  background-color: #00b0ff !important;
}

/* Lien éditorial sous les quatre étapes : CTA discret et premium. */
body.spa-page .spa-method-cta {
  margin: 1.45rem 0 0;
}

body.spa-page .spa-method-cta a {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.65rem;
  color: #5e17eb !important;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

body.spa-page .spa-method-cta-icon {
  display: inline-grid;
  width: 1.85rem;
  height: 1.85rem;
  flex: 0 0 1.85rem;
  place-items: center;
  border: 1px solid rgba(94, 23, 235, 0.28);
  border-radius: 50%;
  color: #5e17eb;
  background: rgba(94, 23, 235, 0.07);
  transition: transform 0.2s ease, background-color 0.2s ease;
}

body.spa-page .spa-method-cta a:hover .spa-method-cta-icon {
  background: rgba(94, 23, 235, 0.13);
  transform: translateX(3px);
}

html.theme-dark body.spa-page .spa-method-cta a,
html.theme-dark body.spa-page .spa-method-cta-icon {
  color: #b69cff !important;
}

html.theme-dark body.spa-page .spa-method-cta-icon {
  border-color: rgba(182, 156, 255, 0.4);
  background: rgba(182, 156, 255, 0.1);
}

/* Enjeu transversal turnover — page Spa & hôtellerie uniquement. */
body.spa-page .spa-turnover-block {
  display: grid;
  grid-template-columns: minmax(190px, 0.75fr) minmax(280px, 1.35fr) minmax(230px, 0.9fr);
  gap: 1.5rem;
  align-items: center;
  width: 100%;
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-bg);
}

body.spa-page .spa-turnover-heading {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

body.spa-page .spa-turnover-pictogram {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

body.spa-page .spa-turnover-heading h3,
body.spa-page .spa-turnover-copy,
body.spa-page .spa-turnover-benefit {
  margin: 0;
}

body.spa-page .spa-turnover-heading h3 {
  color: var(--color-accent);
  font-family: var(--font-structure);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.25;
}

body.spa-page .spa-turnover-copy,
body.spa-page .spa-turnover-benefit {
  font-size: 0.95rem;
  line-height: 1.6;
}

body.spa-page .spa-turnover-benefit {
  position: relative;
  overflow: hidden;
  padding: 0.9rem 1rem;
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: #eaf5ff;
  color: var(--color-primary);
}

body.spa-page .spa-turnover-benefit::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, rgba(94, 23, 235, 0.82), rgba(0, 176, 255, 0.76));
}

body.spa-page .spa-turnover-benefit strong {
  color: var(--color-primary);
}

html.theme-dark body.spa-page .spa-turnover-benefit {
  color: #f3f6ff;
  border-color: #9b7cff;
  background: linear-gradient(135deg, #26365f 0%, #2a3e68 52%, #304673 100%);
}

html.theme-dark body.spa-page .spa-turnover-benefit strong {
  color: #fff;
}

@media (min-width: 721px) and (max-width: 960px) {
  body.spa-page .spa-turnover-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  body.spa-page .spa-turnover-block > summary {
    width: 100%;
    box-sizing: border-box;
  }

  body.spa-page .spa-turnover-heading {
    min-width: 0;
    flex: 1 1 auto;
  }
}

@media (max-width: 720px) {
  body.spa-page .spa-turnover-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    padding: 1.2rem;
  }

  body.spa-page .spa-turnover-heading {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  body.spa-page .spa-turnover-pictogram {
    order: 1;
  }

  body.spa-page .spa-turnover-heading h3 {
    order: 2;
  }

  body.spa-page .spa-turnover-copy {
    order: 3;
  }

  body.spa-page .spa-turnover-benefit {
    order: 4;
  }

  body.spa-page .spa-method-cta a {
    align-items: flex-start;
    font-size: 0.92rem;
  }

  body.spa-page .spa-method-cta-icon {
    margin-top: 0.05rem;
  }
}

/* Mode jour : typographie renforcée sur les bandeaux photographiques Spa. */
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua h2 {
  color: #142044;
  font-weight: 500;
}

html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua h3,
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua p:not(.eyebrow),
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua li {
  color: #172447;
}

html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua p:not(.eyebrow),
html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua li {
  font-weight: 500;
}

html:not(.theme-dark) body.spa-page #contenu > .section.section-aqua > .container > .eyebrow {
  font-weight: 700;
}

/* FAQ Spa : questions en violet profond légèrement rehaussé, mode jour uniquement. */
html:not(.theme-dark) body.spa-page .faq-accordion-item summary {
  color: #5422b3;
}

/* Lien interne Spa vers Thalasso : même violet que Réassurance, sans apparence de bouton. */
body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta,
body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta:hover,
body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta:focus-visible,
html.theme-dark body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta,
html.theme-dark body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta:hover,
html.theme-dark body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta:focus-visible,
html[data-theme="dark"] body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta,
html[data-theme="dark"] body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta:hover,
html[data-theme="dark"] body.spa-page #contenu .section.section-mist.section-aqua .sector-crosslink-cta:focus-visible {
  display: inline !important;
  padding: 0 !important;
  color: var(--color-accent) !important;
  -webkit-text-fill-color: var(--color-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  text-decoration: none !important;
}

/* Titres des quatre cartes Spa : même violet que les questions FAQ. */
html:not(.theme-dark) body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3 {
  color: #5422b3;
}

/* CTA méthode Spa : texte aligné sur le violet premium de la FAQ. */
html:not(.theme-dark) body.spa-page .spa-method-cta a {
  color: #5422b3 !important;
}

/* Mobile nuit : la carte turnover devient la copie visuelle des autres cartes du bandeau. */
@media (max-width: 720px) {
  html.theme-dark body.spa-page .section-aqua .spa-turnover-block,
  html[data-theme="dark"] body.spa-page .section-aqua .spa-turnover-block {
    background: rgba(17, 24, 61, 0.78) !important;
    border-color: var(--color-border) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html.theme-dark body.spa-page .spa-turnover-benefit,
  html[data-theme="dark"] body.spa-page .spa-turnover-benefit,
  html.theme-dark body.spa-page .sector-editorial-benefit,
  html[data-theme="dark"] body.spa-page .sector-editorial-benefit {
    background: #a9c0dc !important;
    color: #14244a !important;
    border-left: 0 !important;
  }

  html.theme-dark body.spa-page .spa-turnover-benefit strong,
  html[data-theme="dark"] body.spa-page .spa-turnover-benefit strong,
  html.theme-dark body.spa-page .sector-editorial-benefit strong,
  html[data-theme="dark"] body.spa-page .sector-editorial-benefit strong {
    color: #14244a !important;
  }
}

/* Tous les blocs Bénéfice de la page Spa : un seul liseré fin violet → bleu. */
body.spa-page .sector-editorial-benefit,
body.spa-page .spa-turnover-benefit {
  position: relative;
  border-left: 0 !important;
}

body.spa-page .sector-editorial-benefit::before,
body.spa-page .spa-turnover-benefit::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, #540ce4 0%, #00b0ff 100%) !important;
}

/* Harmonisation des quatre titres de cartes avec le bloc Turnover. */
body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3 {
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
}

body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading .title-pictogram {
  width: 30px !important;
  height: 30px !important;
  flex: 0 0 30px !important;
}

/* Blocs bleu clair : texte plus dense pour renforcer le contraste. */
body.spa-page .sector-reality-conclusion,
body.spa-page .sector-editorial-benefit {
  color: #0b1738 !important;
  font-weight: 600 !important;
}

body.spa-page .sector-reality-conclusion strong,
body.spa-page .sector-editorial-benefit strong {
  color: #07112d !important;
}

html:not(.theme-dark) body.spa-page .spa-turnover-benefit {
  color: #0b1738 !important;
  font-weight: 600 !important;
}

html:not(.theme-dark) body.spa-page .spa-turnover-benefit strong {
  color: #07112d !important;
}

@media (max-width: 720px) {
  html.theme-dark body.spa-page .spa-turnover-benefit,
  html[data-theme="dark"] body.spa-page .spa-turnover-benefit,
  html.theme-dark body.spa-page .sector-editorial-benefit,
  html[data-theme="dark"] body.spa-page .sector-editorial-benefit {
    color: #0b1738 !important;
    font-weight: 600 !important;
  }

  html.theme-dark body.spa-page .spa-turnover-benefit strong,
  html[data-theme="dark"] body.spa-page .spa-turnover-benefit strong,
  html.theme-dark body.spa-page .sector-editorial-benefit strong,
  html[data-theme="dark"] body.spa-page .sector-editorial-benefit strong {
    color: #07112d !important;
  }
}

/* Turnover : même transparence et même bloc Bénéfice que les autres cartes, tous supports. */
html:not(.theme-dark) body.spa-page .section-aqua .spa-turnover-block {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.theme-dark body.spa-page .section-aqua .spa-turnover-block,
html[data-theme="dark"] body.spa-page .section-aqua .spa-turnover-block {
  background: rgba(17, 24, 61, 0.78) !important;
  border-color: var(--color-border) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.theme-dark body.spa-page .spa-turnover-benefit,
html[data-theme="dark"] body.spa-page .spa-turnover-benefit {
  background: #a9c0dc !important;
  color: #0b1738 !important;
  font-weight: 600 !important;
  border-left: 0 !important;
}

html.theme-dark body.spa-page .spa-turnover-benefit strong,
html[data-theme="dark"] body.spa-page .spa-turnover-benefit strong {
  color: #07112d !important;
}

/* Mode nuit : violet électrique uniforme pour les intitulés de bandeau Spa. */
html.theme-dark body.spa-page #contenu > .section:not(.conversion-band) > .container > .eyebrow,
html[data-theme="dark"] body.spa-page #contenu > .section:not(.conversion-band) > .container > .eyebrow {
  color: #6f2cff !important;
}

/* Réassurance nuit : les trois puces reprennent le même violet électrique. */
html.theme-dark body.spa-page #contenu > .section.section-mist.section-aqua .feature-list li::marker,
html[data-theme="dark"] body.spa-page #contenu > .section.section-mist.section-aqua .feature-list li::marker {
  color: #6f2cff !important;
}

html.theme-dark body.spa-page #contenu > .section.section-mist.section-aqua .feature-list li::before,
html[data-theme="dark"] body.spa-page #contenu > .section.section-mist.section-aqua .feature-list li::before {
  color: #6f2cff !important;
  background-color: #6f2cff !important;
}

/* FAQ Spa en mode nuit : questions dans le même bleu clair que les blocs Bénéfice. */
html.theme-dark body.spa-page .faq-accordion-item summary,
html[data-theme="dark"] body.spa-page .faq-accordion-item summary {
  color: #a9c0dc !important;
}

/* Mobile : respiration supplémentaire entre les titres et les textes des cartes Systèmes. */
@media (max-width: 720px) {
  body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-content {
    margin-top: 1.35rem;
  }

  body.spa-page #contenu > .section.section-soft.section-aqua .spa-turnover-heading {
    margin-bottom: 0.35rem;
  }
}

/* Ordinateur, mode jour : corps de texte allégé dans les cartes Systèmes. */
@media (min-width: 1051px) {
  html:not(.theme-dark):not([data-theme="dark"]) body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-content > p:not(.sector-editorial-benefit),
  html:not(.theme-dark):not([data-theme="dark"]) body.spa-page #contenu > .section.section-soft.section-aqua .spa-turnover-copy {
    font-weight: 400 !important;
  }
}


/* Mode nuit : titres des cartes du bandeau Systèmes Spa dans le même bleu lumineux que la page Médecine. */
html.theme-dark body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
html[data-theme="dark"] body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
html.theme-dark body.spa-page #contenu > .section.section-soft.section-aqua .spa-turnover-heading h3,
html[data-theme="dark"] body.spa-page #contenu > .section.section-soft.section-aqua .spa-turnover-heading h3 {
  color: #a9cfff !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-dark):not([data-theme="light"]) body.spa-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
  html:not(.theme-dark):not([data-theme="light"]) body.spa-page #contenu > .section.section-soft.section-aqua .spa-turnover-heading h3 {
    color: #a9cfff !important;
  }
}