/* ========================================================================== */
/* Bandeaux aquatiques - reglages complementaires                            */
/* ========================================================================== */
/* Feuille chargee UNIQUEMENT par thalasso-thermal/index.html,               */
/* APRES css/bandeaux-aqua.css dont elle reutilise la variable --aqua-image. */
/* Ne contient aucune image : uniquement des reglages.                       */
/* ========================================================================== */

html:not(.theme-dark) #contenu > .section.section-aqua {
  --aqua-veil: rgba(248, 250, 255, 0.74);
}

html.theme-dark #contenu > .section.section-aqua {
  --aqua-veil: rgba(17, 24, 61, 0.82);
}

html:not(.theme-dark) .section-aqua .sector-editorial-chapter {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

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

html:not(.theme-dark) #contenu > .section.section-soft.section-aqua,
html.theme-dark #contenu > .section.section-soft.section-aqua {
  background: var(--color-soft) !important;
}

html:not(.theme-dark) #contenu > .section.section-soft.section-aqua::before,
html.theme-dark #contenu > .section.section-soft.section-aqua::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: scaleX(-1);
  background:
    linear-gradient(var(--aqua-veil), var(--aqua-veil)),
    var(--aqua-image) center / cover no-repeat !important;
}

@media (max-width: 720px) {
  html:not(.theme-dark) #contenu > .section.section-aqua,
  html.theme-dark #contenu > .section.section-aqua {
    background:
      linear-gradient(var(--aqua-veil), var(--aqua-veil)) center / cover no-repeat,
      var(--aqua-image) top center / 170vw auto repeat-y,
      var(--color-soft) !important;
  }

  html:not(.theme-dark) #contenu > .section.section-soft.section-aqua::before,
  html.theme-dark #contenu > .section.section-soft.section-aqua::before {
    --aqua-veil: rgba(248, 250, 255, 0.85);
    background:
      linear-gradient(var(--aqua-veil), var(--aqua-veil)) center / cover no-repeat,
      var(--aqua-image) top center / 170vw auto repeat-y,
      var(--color-soft) !important;
  }
}

@media (max-width: 720px) {
  html.theme-dark #contenu > .section.section-soft.section-aqua::before {
    --aqua-veil: rgba(17, 24, 61, 0.86);
  }
}

html.theme-dark #contenu > .section:not(.conversion-band)::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
}

html.theme-dark #contenu > .section:not(.conversion-band)::before {
  background: none !important;
}

@media (max-width: 720px) {
  #contenu > .section.section-aqua h2 {
    text-wrap: balance;
  }
}

@media (max-width: 720px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua::before {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }
}

html:not(.theme-dark) body.thalasso-page #contenu > .section.section-aqua h2 {
  color: #142044;
  font-weight: 500;
}

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

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

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

@media (max-width: 720px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua {
    --aqua-veil: rgba(248, 250, 255, 0.87);
  }
}

html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
html:not(.theme-dark) body.thalasso-page .faq-accordion-item summary {
  color: #5422b3;
}

@media (max-width: 1050px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3 {
    font-weight: 600;
  }
}

html:not(.theme-dark) body.thalasso-page .thalasso-system-link {
  color: #5422b3;
}

@media (min-width: 721px) and (max-width: 1050px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua {
    --aqua-veil: rgba(248, 250, 255, 0.79);
  }
}

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

html:not(.theme-dark) body.thalasso-page {
  --halo-violet-primary: transparent;
  --halo-violet-secondary: transparent;
}

html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua .thalasso-spa-link,
html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua a[href*="spa-hotelier"] {
  color: #5422b3 !important;
  -webkit-text-fill-color: #5422b3 !important;
}

html.theme-dark body.thalasso-page #contenu > .section.section-mist.section-aqua .thalasso-spa-link,
html.theme-dark body.thalasso-page #contenu > .section.section-mist.section-aqua a[href*="spa-hotelier"] {
  color: #9b7cff !important;
  -webkit-text-fill-color: #9b7cff !important;
}

@media (max-width: 720px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.faq-section::before {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }
}

html:not(.theme-dark) body.thalasso-page .section-aqua .thalasso-turnover-block {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

html.theme-dark body.thalasso-page .section-aqua .thalasso-turnover-block {
  background: rgba(17, 24, 61, 0.78) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

html.theme-dark body.thalasso-page .thalasso-turnover-benefit {
  background: #a9c0dc !important;
  color: #0b1738 !important;
}

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

@media (prefers-color-scheme: dark) {
  html:not(.theme-dark) body.thalasso-page .section-aqua .thalasso-turnover-block {
    background: rgba(17, 24, 61, 0.78) !important;
  }

  html:not(.theme-dark) body.thalasso-page .thalasso-turnover-benefit {
    background: #a9c0dc !important;
    color: #0b1738 !important;
  }

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

html.theme-dark body.thalasso-page .faq-section h2,
html.theme-dark body.thalasso-page .faq-accordion-item summary,
html.theme-dark body.thalasso-page .faq-answer,
html.theme-dark body.thalasso-page .faq-answer p {
  color: #a9c0dc !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-dark) body.thalasso-page .faq-section h2,
  html:not(.theme-dark) body.thalasso-page .faq-accordion-item summary,
  html:not(.theme-dark) body.thalasso-page .faq-answer,
  html:not(.theme-dark) body.thalasso-page .faq-answer p {
    color: #a9c0dc !important;
  }
}

html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-heading h3 {
  color: #5422b3 !important;
  font-size: 1.18rem !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
}

html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading .title-pictogram,
html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-pictogram {
  width: 32px !important;
  height: 32px !important;
  flex: 0 0 32px !important;
}

/* Réalité de l'établissement : seuls les mots-clés d'ouverture sont légèrement renforcés. */
body.thalasso-page .sector-reality-list .thalasso-reality-key {
  font-weight: 600;
}

/* Turnover et continuité opérationnelle : contenu repliable dans la réalité de l'établissement. */
body.thalasso-page .thalasso-reality-turnover-accordion > p {
  margin: 0;
}

html.theme-dark body.thalasso-page .thalasso-reality-turnover-accordion > summary strong,
html[data-theme="dark"] body.thalasso-page .thalasso-reality-turnover-accordion > summary strong {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
  html:not(.theme-dark):not([data-theme="light"]) body.thalasso-page .thalasso-reality-turnover-accordion > summary strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
}

/* Mode jour : Turnover et continuité opérationnelle aligné sur les autres mots renforcés. */
html:not(.theme-dark) body.thalasso-page .sector-reality-list li:last-child strong {
  font-weight: 600 !important;
}

/* Mode jour : titres des cinq cartes affinés sur desktop/portable et mobile uniquement. */
@media (min-width: 1051px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-heading h3 {
    font-weight: 500 !important;
  }
}

@media (max-width: 720px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-heading h3,
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-heading h3 {
    font-weight: 500 !important;
  }
}

/* Mode jour desktop : textes bleu marine des cinq cartes légèrement affinés. */
@media (min-width: 1051px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-content > p,
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-copy,
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-benefit {
    font-weight: 400 !important;
  }

  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .sector-editorial-benefit strong,
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-benefit strong {
    font-weight: 600 !important;
  }
}

/* Mode jour : retour aux images à bulles claires d'origine. */
html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua::before {
  --aqua-veil: rgba(248, 250, 255, 0.74);
  opacity: 1;
  filter: none;
}

html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua {
  --aqua-veil: rgba(248, 250, 255, 0.74);
}

@media (min-width: 721px) and (max-width: 1050px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua::before {
    --aqua-veil: rgba(248, 250, 255, 0.74);
    opacity: 1;
    filter: none;
  }

  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua {
    --aqua-veil: rgba(248, 250, 255, 0.79);
  }
}

@media (max-width: 720px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua::before {
    --aqua-veil: rgba(248, 250, 255, 0.85);
    opacity: 1;
    filter: none;
  }

  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua {
    --aqua-veil: rgba(248, 250, 255, 0.87);
  }
}

/* Mode jour : puces Réassurance harmonisées avec La réalité de vos établissements. */
@media (min-width: 1051px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua .feature-list li::before {
    background: linear-gradient(135deg, #00b0ff, var(--color-accent)) !important;
  }
}

@media (max-width: 720px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua .feature-list li::before {
    background: linear-gradient(135deg, #00b0ff, var(--color-accent)) !important;
  }
}

@media (min-width: 721px) and (max-width: 1050px) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-mist.section-aqua .feature-list li::before {
    background: linear-gradient(135deg, #00b0ff, var(--color-accent)) !important;
  }
}

/* Mobile jour : pictogramme et titre de la carte onboarding sur la même ligne. */
@media (max-width: 720px) and (prefers-color-scheme: light) {
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-heading {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-pictogram,
  html:not(.theme-dark) body.thalasso-page #contenu > .section.section-soft.section-aqua .thalasso-turnover-heading h3 {
    order: initial !important;
  }
}