/*
  Fonds composés de l'accueil.
  Trois assets de marque, chacun doublé de calques CSS pour préserver
  contraste et continuité entre les sections, sans modifier leur contenu.
*/

/* 28 aout : les filets de jointure en haut (et en bas pour les avis) de
   chaque bande sont retires. Cette feuille etant chargee en dernier sur
   l'accueil, ils repassaient devant les retraits faits ailleurs. La
   separation des bandes se fait par leur fond et par leur respiration. */

:root{
  --home-paper: url("../assets/img/background-paper.png");
  --home-burgundy: url("../assets/img/background-burgundy.png");
  --home-cta: url("../assets/img/background-cta.png");
  --home-ritual: url("../assets/img/background-ritual.png");
  --home-reviews: url("../assets/img/background-reviews.png");
  --home-map: url("../assets/img/background-map.png");
  --home-ceremony: url("../assets/img/background-ceremony.png");
}

.bande-avis,
.bande-etapes,
.bande-lieu,
.pied{
  background-color: var(--fond);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 22%, transparent), color-mix(in srgb, var(--fond) 7%, transparent)),
    var(--home-paper);
  background-size: cover;
  background-position: center;
}

.bande-avis{
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 28%, transparent), color-mix(in srgb, var(--fond) 8%, transparent)),
    var(--home-reviews);
  background-position: 54% 45%;
}

.bande-avis::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 42% 82% at 50% 50%, color-mix(in srgb, var(--fond) 50%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--fond) 8%, transparent), transparent 30%, color-mix(in srgb, var(--fond-alt) 14%, transparent));
}

.bande-avis .cadre{ position: relative; z-index: 1; }

.bande-etapes{
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 28%, transparent), color-mix(in srgb, var(--fond) 10%, transparent)),
    var(--home-ritual);
  background-position: 42% 48%;
}

.bande-etapes::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--fond) 18%, transparent), transparent 25% 75%, color-mix(in srgb, var(--fond) 18%, transparent));
}

.bande-etapes .cadre{ position: relative; z-index: 1; }

/* Note de cascade : sur .bande-etapes et .bande-lieu, ce background-image
   ne s'applique pas. La regle .section:not(.hero) de fidelity.css est plus
   specifique (deux classes contre une) et chargee avant cette feuille : le
   fond reellement rendu vient de --degrade-bande, pose dans home-upgrade.css.
   C'est donc la qu'il faut agir sur ces deux bandes. */
.bande-lieu{
  background-position: 63% 58%;
}

.bande-lieu .cadre{ position: relative; z-index: 1; }

.bande-soins{
  /* Meme fond que la section des contre-indications, demande du 30/08.
     La feuille de l'accueil ne connait pas --fond-ceremonie-compose, qui
     est declare dans page-section-backgrounds.css, non chargee ici :
     l'image est donc referencee directement. Le degrade et la texture
     sont repris a l'identique de la reference, pas approches. */
  background-color: var(--fond-sombre);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond-sombre) 16%, transparent), color-mix(in srgb, var(--fond-sombre) 34%, transparent)),
    url("../assets/img/background-ceremony.png");
  background-size: cover;
  background-position: center;
}

.bande-soins::before{
  background-color: color-mix(in srgb, var(--encre) 2.4%, transparent);
}

.bande-soins::after{
  top: auto;
  bottom: 0;
  left: auto;
  right: 0;
  translate: 38% 38%;
  opacity: .42;
}

.bande-appel{
  display: grid;
  grid-template-columns: 1fr;
  min-height: clamp(18rem, 30vw, 25rem);
  background-color: var(--fond-sombre);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond-sombre) 8%, transparent), color-mix(in srgb, var(--fond-sombre) 16%, transparent) 44%, color-mix(in srgb, var(--fond-sombre) 44%, transparent) 100%),
    radial-gradient(ellipse 44% 90% at 55% 50%, color-mix(in srgb, var(--accent-rare) 18%, transparent), transparent 74%),
    var(--home-cta);
  background-size: cover;
  background-position: center;
}


.bande-appel .appel__texte{
  grid-column: 1 / -1;
  min-height: inherit;
  justify-content: center;
  padding-inline: clamp(1.25rem, 5vw, 5rem);
  text-shadow: 0 2px 1.5rem color-mix(in srgb, var(--fond-sombre) 80%, transparent);
}

.bande-appel::after{
  right: 0;
  bottom: 0;
  translate: 31% 31%;
  width: clamp(15rem, 30vw, 27rem);
  opacity: .3;
}

.pied{
  background-position: 43% 68%;
}

@media (max-width: 52rem){
  .bande-avis,
  .bande-etapes,
  .bande-lieu{ background-size: auto 100%; }

  .bande-soins{ background-size: auto 100%; }

  .bande-appel{
    min-height: 20rem;
    background-position: 42% center;
  }
}

/* Regles .appel__photo retirees le 30/08 avec le bloc HTML qu'elles
   visaient. La photo etait livree puis masquee par display:none :
   telechargee a chaque visite pour n'etre jamais vue, jusqu'a 515 Ko
   sur l'accueil. Ne pas la remettre sans decision de la cliente. */


/* ============================================================
   FOND « DEUX FOYERS » SUR LES BANDES CLAIRES, 28 aout.
   Les regles par section de cette feuille posent un background-image
   en dur avec des selecteurs a deux classes, ce qui court-circuite
   --degrade-bande : la variable etait bien posee, jamais lue. Trois
   classes, en fin de la feuille chargee en dernier, passent devant.
   Le grain papier est repris tel quel : c'est lui qui porte la chaleur
   du fond, seul le degrade change.
   ============================================================ */
main > .bande.section:not(.hero):not(.bande-offres),
main > .bande.section--alt:not(.bande-offres){
  background-image:
    radial-gradient(circle at 0 12%, var(--fidelite-papier) 0 1px, transparent 1.25px),
    var(--deux-foyers);
  background-size: 14px 14px, auto, auto, auto;
}


/* ============================================================
   SUITES DE BANDES CLAIRES, 28 aout.
   Quand deux bandes claires se suivent, chacune relançait le degrade a
   zero : le halo sombre du bas de la premiere butait sur le halo clair
   du haut de la seconde, ce qui dessinait une couture entre deux
   sections qui devraient se lire d'un seul tenant.

   Le fond passe donc sur une enveloppe qui englobe la suite, et les
   bandes qu'elle contient deviennent transparentes. Le selecteur du
   degrade ci-dessus est passe en `main > .bande` : une bande enveloppee
   n'est plus fille directe de main, elle ne le recoit donc plus.
   ============================================================ */
.continuum{
  background-color: var(--fond);
  background-image:
    radial-gradient(circle at 0 12%, var(--fidelite-papier) 0 1px, transparent 1.25px),
    var(--deux-foyers);
  background-size: 14px 14px, auto, auto, auto;
}

/* Poids releve : sur la page Soins, .page-soins main .bande-titre.bande-choix
   pese trois classes et un element, et repeignait la bande par-dessus
   l'enveloppe. Deux elements et trois classes passent devant. */
main .continuum > section.bande.section,
main .continuum > section.bande.section--alt,
main .continuum > section.bande.section--claire{
  background-color: transparent;
  background-image: none;
}