/*
   Fonds composes des pages secondaires

   Chaque image est placee sur une section dont le sujet la justifie : papier
   illustre pour informer, textile bordeaux pour engager, brocart pour offrir.
   Cette couche est chargee apres fidelity.css pour rester independante des
   feuilles de page et pouvoir etre reprise dans le CSS additionnel WordPress.
*/

:root{
  --fond-titre-compose: url("../assets/img/background-title.png");
  --fond-carte-compose: url("../assets/img/background-map.png");
  --fond-cadeau-compose: url("../assets/img/background-gift.png");
  --fond-bienetre-compose: url("../assets/img/background-wellbeing.png");
  --fond-papier-compose: url("../assets/img/background-paper.png");
  --fond-appel-compose: url("../assets/img/background-cta.png");
  --fond-rituel-compose: url("../assets/img/background-ritual.png");
  --fond-avis-compose: url("../assets/img/background-reviews.png");
  --fond-praticienne-compose: url("../assets/img/background-practitioner.png");
  --fond-ceremonie-compose: url("../assets/img/background-ceremony.png");
  --fond-cadeau-papier-compose: url("../assets/img/background-gift-paper.png");
}

/* Les pages Soins, A propos et Infos commencent sur le meme papier clair,
   avec les lotus deja inclus dans l'illustration plutot que poses a part. */
/* Les deux classes sont volontaires. Ce selecteur n'en portait qu'une, il
   valait donc (0,1,0) et perdait contre .section:not(.hero) de fidelity.css,
   qui vaut (0,2,0) et s'applique au meme element : la texture ne s'affichait
   sur aucune des trois pages a titre. Toutes les autres regles de ce fichier
   ont deja deux classes et passent devant sans rien changer. */
.bande.bande-titre{
  background-color: var(--fond);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 15%, transparent), color-mix(in srgb, var(--fond) 34%, transparent)),
    var(--fond-titre-compose);
  background-position: center;
  background-size: cover;
}

.bande-titre::before,
.bande-titre::after{ opacity: 0.16; }

/* Les longues sections explicatives gardent une texture tangible sans voler
   la lecture. Le voile clair conserve le contraste des textes et des cartes. */
/* .bande-choix a rejoint le groupe le 02/09. Elle avait sa propre copie
   de ces valeurs dans pages/soins.css, ou l'URL relative se resolvait
   depuis styles/pages/ et pointait donc sur styles/assets/img/, qui
   n'existe pas : la texture etait en 404 et seule la teinte s'affichait.
   REGLE A TENIR : deux sections qui partagent un fond partagent la MEME
   regle, jamais une copie. Une copie derive, et ici elle derivait en
   silence.
   Trois classes pour .bande-titre.bande-choix, sans quoi la regle
   .bande-titre de cette feuille, plus haut, l'emporterait. */
.page-soins .bande-formules,
.page-soins .bande-titre.bande-choix,
.page-soins .bande-versions,
.page-apropos .bande-bienfaits{
  background-color: var(--fond);
  background-image:
    linear-gradient(120deg, color-mix(in srgb, var(--fond) 88%, transparent), color-mix(in srgb, var(--fond) 66%, transparent)),
    var(--fond-rituel-compose);
  background-position: center;
  background-size: cover;
}

/* Un papier plus vivant pour les retours clients, assez calme pour garder les
   cartes au premier plan. */
.page-soins .bande-avis{
  background-color: var(--fond);
  background-image:
    linear-gradient(120deg, color-mix(in srgb, var(--fond) 82%, transparent), color-mix(in srgb, var(--fond) 55%, transparent)),
    var(--fond-avis-compose);
  background-position: center;
  background-size: cover;
}

/* Le papier botanique reste reserve aux contenus sur la tradition et Margo.
   Il n'est pas utilise pour les avertissements medicaux. */
.page-apropos .bande-intro,
.page-apropos .bande-praticienne{
  background-color: var(--fond);
  background-image:
    linear-gradient(100deg, color-mix(in srgb, var(--fond) 86%, transparent), color-mix(in srgb, var(--fond) 60%, transparent)),
    var(--fond-praticienne-compose);
  background-position: center;
  background-size: cover;
}

/* Les mentions, FAQ et avertissements sont factuels. Le papier neutre evite
   de leur donner une connotation medicale ou promotionnelle. */
.page-soins .bande-mention,
.page-apropos .bande-medical,
.page-apropos .bande-mention,
.page-infos .bande-faq{
  background-color: var(--fond);
  background-image:
    linear-gradient(100deg, color-mix(in srgb, var(--fond) 88%, transparent), color-mix(in srgb, var(--fond) 68%, transparent)),
    var(--fond-papier-compose);
  background-position: center;
  background-size: cover;
}

/* Les details d'un bon cadeau ont leur propre papier, ponctue d'un ruban
   bordeaux, sans prendre le pas sur les quatre cartes. */
.page-cadeaux .bande-pratique{
  background-color: var(--fond);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 88%, transparent), color-mix(in srgb, var(--fond) 68%, transparent)),
    var(--fond-cadeau-papier-compose);
  background-position: center;
  background-size: cover;
}

/* La carte est reservee au lieu. Les questions frequentes restent neutres. */
.page-infos .bande-cabinet{
  background-color: var(--fond);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 84%, transparent), color-mix(in srgb, var(--fond) 54%, transparent)),
    var(--fond-carte-compose);
  background-position: center;
  background-size: cover;
}


/* Les moments qui demandent une decision ou une attention particuliere ont
   un textile plus graphique et moins floral. */
.page-apropos .bande-contre,
.page-infos .bande-rdv,
.page-cadeaux .bande-etapes,
/* « Les abonnements » rejoint ce groupe le 30/08 : meme fond que les
   contre-indications, demande d'Alexis. Elle portait le textile bien-etre. */
.page-soins .bande-abos{
  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)),
    var(--fond-ceremonie-compose);
  background-position: center;
  background-size: cover;
}

/* La grille cadeau se distingue du reste du site par un brocart plus riche,
   tout en gardant les trois formules strictement equivalentes. */
/* Aligne le 30/08 sur le fond des contre-indications, demande d'Alexis.
     Elle portait le brocart cadeau et un degrade a 18/38 la ou la
     reference est a 16/34 : les deux valeurs sont reprises, pas approchees. */
.page-cadeaux .bande-offres{
  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)),
    var(--fond-ceremonie-compose);
  background-position: center;
  background-size: cover;
  color: var(--encre);
}

.page-cadeaux .bande-offres > .cadre > .titre-bande,
.page-cadeaux .bande-offres .offres__note{ color: var(--encre); }

.page-cadeaux .bande-offres .offres__note{
  border-top-color: color-mix(in srgb, var(--encre) 30%, transparent);
}

/* L'appel final est une vraie composition, comme la reference fournie :
   nature morte a gauche, espace calme au centre, mandala a droite. */
.bande-appel{
  display: block;
  /* Revue 4 du 29 aout : "trop d'espaces vides entre les textes" et "bandeau
     trop large". Hauteur baissee d'environ 30 pour cent (19/28/25 deviennent
     13.5/19.5/17.5), soit 120 px de moins par page a 1440 px de large, 88 px a
     1024 px. Quatre pages portent cette bande via ce fichier : soins, a propos,
     infos, bon cadeau. L'accueil ne le charge pas, il passe par
     home-section-backgrounds.css. Gain reel parfois moindre : quand le texte et
     son padding depassent cette valeur, c'est le contenu qui fixe la hauteur.
     Couleur et texture inchangees : elle ecrit "en revanche tres jolie couleur
     et fond" sur la bande "Prenez soin de vous". */
  min-height: clamp(13.5rem, 19.5vw, 17.5rem);
  background-color: var(--fond-sombre);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond-sombre) 5%, transparent), color-mix(in srgb, var(--fond-sombre) 15%, transparent)),
    var(--fond-appel-compose);
  background-position: center;
  background-size: cover;
}

.bande-appel::after{ display: none; }

.bande-appel .appel__texte{
  /* Meme baisse que la bande elle-meme. C'est ce bloc qui impose la hauteur
     reelle quand le texte est court : ne reduire qu'un des deux laisserait le
     vide dont elle se plaint en revue 4. */
  min-height: clamp(13.5rem, 19.5vw, 17.5rem);
  justify-content: center;
}

/* Le pied referme les pages sur un papier lumineux, avec assez de voile pour
   ne pas perturber les coordonnees. */
.pied{
  background-color: var(--fond);
  background-image:
    linear-gradient(90deg, color-mix(in srgb, var(--fond) 84%, transparent), color-mix(in srgb, var(--fond) 68%, transparent)),
    var(--fond-papier-compose);
  background-position: center;
  background-size: cover;
}

@media (max-width: 45rem){
  .bande-titre,
  .bande-cabinet,
  .bande-faq{ background-position: 58% center; }

  /* Revue 4 : "moins long a scroller". Meme baisse de 30 pour cent en mobile,
     ou ses clientes reservent. Laisser 20rem ici aurait rendu la bande plus
     haute sur telephone que sur ordinateur. */
  .bande-appel,
  .bande-appel .appel__texte{ min-height: 14rem; }

  .bande-appel{ 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;
}