/* Promotions : la bande qui defile, la section, et les prix qui changent.
 *
 * Le balisage est engendre par `outils/publier.mjs` (voir « Les promotions » dans
 * ce fichier) et reajuste a l'ouverture de la page par `assets/js/promos.js`.
 * L'un et l'autre parlent le meme langage : `data-promo-etat` vaut
 * `en-cours`, `a-venir` ou `terminee`, et c'est cette feuille de style — pas le
 * script — qui decide de ce que chaque etat montre ou cache. Sans JavaScript,
 * l'etat est celui de la construction.
 *
 * Meme vocabulaire visuel que `offres.css` : le rose de la marque assombri pour
 * le texte (4,5 pour 1 sur le fond creme), Georgia pour les titres, Poppins pour
 * le reste. La bande et la section vivent hors des blocs Zyro, donc les variables
 * de police du site ne les atteignent pas : les valeurs sont ecrites en clair. */

/* ---------------------------------- Etats ---------------------------------- */

.bande-promo[data-promo-etat="a-venir"],
.bande-promo[data-promo-etat="terminee"],
.bande-promo[hidden],
.bande-promo__bloc[data-promo-etat="a-venir"],
.bande-promo__bloc[data-promo-etat="terminee"],
.promos[data-promo-etat="a-venir"],
.promos[data-promo-etat="terminee"],
.promo[data-promo-etat="a-venir"],
.promo[data-promo-etat="terminee"] {
  display: none;
}

/* Lu par un lecteur d'ecran, invisible a l'ecran : « Au lieu de », « Prix de la
   promotion ». Un prix barre se lit comme un prix de plus sans eux. */
.promo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------- La bande -------------------------------- */

.bande-promo {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #ad4a63 0%, #c0536f 50%, #ad4a63 100%);
  color: #fff;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* La marge, et non un remplissage : le texte est coupe au bord du lien, donc avant
   la croix. Un remplissage laisserait defiler le texte dessous. */
.bande-promo__lien {
  display: block;
  margin-right: 48px;
  padding: 11px 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.bande-promo__lien:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* Deux groupes identiques, et la piste glisse d'un groupe exactement : a la fin
   du tour, le second est la ou etait le premier, et la boucle ne se voit pas.
   La duree suit le nombre de caracteres (`--car`, pose par le generateur), pour
   que la vitesse reste celle d'un texte qu'on lit : ~55 px par seconde. */
.bande-promo__piste {
  display: flex;
  width: max-content;
  animation: bande-promo-defile calc(var(--car, 120) * .2s) linear infinite;
  will-change: transform;
}

.bande-promo__groupe {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-around;
  /* Un groupe plus court que l'ecran laisserait un trou avant le suivant. */
  min-width: 100vw;
}

.bande-promo__bloc {
  display: inline-flex;
  align-items: center;
}

.bande-promo__item {
  display: inline-flex;
  align-items: baseline;
  gap: .45em;
  white-space: nowrap;
}

.bande-promo__item strong { font-weight: 600; }

/* Le separateur ouvre chaque element, le premier compris : c'est ce qui rend le
   raccord des deux groupes invisible. */
.bande-promo__item::before {
  content: '\2726';
  margin: 0 1.7em;
  font-size: .8em;
  opacity: .75;
}

@keyframes bande-promo-defile {
  to { transform: translateX(-50%); }
}

/* Le texte s'arrete sous le doigt ou la souris, et au clavier : lire une offre
   qui bouge est penible, et rien ne l'oblige. */
.bande-promo:hover .bande-promo__piste,
.bande-promo:focus-within .bande-promo__piste {
  animation-play-state: paused;
}

.bande-promo__fermer {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.bande-promo__fermer[hidden] { display: none; }

.bande-promo__fermer:hover,
.bande-promo__fermer:focus-visible {
  background: rgba(255, 255, 255, .2);
}

.bande-promo__fermer:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 1px;
}

@media (max-width: 700px) {
  .bande-promo { font-size: 12px; letter-spacing: .06em; }
  .bande-promo__lien { margin-right: 42px; padding: 10px 0; }
  .bande-promo__fermer { right: 6px; }
}

/* Sans mouvement, la bande n'est plus une piste mais un texte : les elements se
   replient sur plusieurs lignes, centres, et le doublon disparait. */
@media (prefers-reduced-motion: reduce) {
  .bande-promo__piste {
    width: auto;
    animation: none;
  }

  .bande-promo__groupe[aria-hidden="true"] { display: none; }

  .bande-promo__lien {
    padding: 9px 0 9px 16px;
    text-align: center;
  }

  .bande-promo__groupe {
    flex-wrap: wrap;
    justify-content: center;
    min-width: 0;
    row-gap: 4px;
  }

  .bande-promo__bloc { flex-wrap: wrap; justify-content: center; }
}

/* ------------------------------ La section ------------------------------ */

.promos {
  --rose: #ad4a63;
  --rose-vif: #d8738b;
  --rose-sourd: #f6e6ea;
  --encre: #1d1e20;
  --encre-douce: #56585e;

  /* `section.block` donne deja l'espace vertical du site. */
  background: linear-gradient(180deg, #fdf0f3 0%, #faf7f5 100%);
  color: var(--encre);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* L'ancre arrive sous l'en-tete collant du site, bande comprise : 90 px
     d'en-tete, 38 px de bande. */
  scroll-margin-top: 136px;
}

.promos__cadre {
  display: grid;
  gap: 64px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

.promo {
  display: grid;
  gap: 36px;
  align-items: center;
  scroll-margin-top: 136px;
}

/* Avec une affiche, le texte passe a gauche et l'affiche a droite ; sans elle,
   tout est centre et la liste se range sur deux colonnes, comme sur l'affiche
   du salon. */
@media (min-width: 960px) {
  .promo--affiche {
    grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
    gap: 64px;
  }
}

.promo__corps { min-width: 0; text-align: center; }

.promo--affiche .promo__corps { text-align: left; }

@media (max-width: 959px) {
  .promo--affiche .promo__corps { text-align: center; }
}

.promo__periode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 7px 16px 7px 14px;
  border-radius: 999px;
  background: var(--rose);
  color: #fff;
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
}

.promo__icone { flex: none; }

.promo__titre {
  margin: 0 0 12px;
  color: var(--rose);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 400;
  line-height: 1.12;
}

.promo__accroche {
  max-width: 54ch;
  margin: 0 auto;
  color: var(--encre-douce);
  font-size: 1.0625rem;
  line-height: 1.65;
}

.promo--affiche .promo__accroche { margin-left: 0; }

@media (max-width: 959px) {
  .promo--affiche .promo__accroche { margin-left: auto; }
}

.promo__liste {
  display: grid;
  gap: 14px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

@media (min-width: 760px) {
  .promo:not(.promo--affiche) .promo__liste { grid-template-columns: 1fr 1fr; }
}

.promo__carte {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: 100%;
  padding: 20px 24px;
  box-sizing: border-box;
  border: 1px solid #f0dfe4;
  border-radius: 18px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.promo__carte:hover,
.promo__carte:focus-visible {
  transform: translateY(-2px);
  border-color: var(--rose-vif);
  box-shadow: 0 14px 30px rgba(173, 74, 99, .14);
}

.promo__carte:focus-visible { outline: 2px solid var(--rose); outline-offset: 2px; }

.promo__intitule {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.promo__nom {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
}

.promo__duree {
  color: var(--rose);
  font-size: .875rem;
}

.promo__detail {
  color: var(--encre-douce);
  font-size: .875rem;
  line-height: 1.5;
}

.promo__prix {
  display: grid;
  flex: none;
  justify-items: end;
  gap: 2px;
  line-height: 1.1;
  text-align: right;
}

.promo__nouveau {
  color: var(--rose);
  font-size: 1.625rem;
  font-weight: 600;
  white-space: nowrap;
}

.promo__monnaie {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .04em;
}

.promo__ancien {
  color: #7d7f85;
  font-size: .875rem;
  white-space: nowrap;
}

.promo__reduction {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--rose-sourd);
  color: var(--rose);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.promo__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin: 28px 0 0;
  color: var(--encre-douce);
  font-size: .9375rem;
  line-height: 1.5;
}

/* Sur deux lignes, la phrase se partage a parts egales plutot que de laisser un
   mot seul. */
.promo__validite { text-wrap: balance; }

.promo--affiche .promo__pied { justify-content: flex-start; }

@media (max-width: 959px) {
  .promo--affiche .promo__pied { justify-content: center; }
}

/* « Reserver » n'a pas de regle ici : c'est le bouton des autres sections, et sa
   forme vit dans `structure.css` avec celle de « Voir tous les articles ». Deux
   boutons qui se ressemblent finissent par ne plus se ressembler. */

.promo__affiche {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  background: var(--rose-sourd);
  box-shadow: 0 26px 60px rgba(173, 74, 99, .22);
}

.promo__affiche img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 959px) {
  .promo__affiche { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .promo__carte { padding: 16px 18px; gap: 12px; }
  .promo__nouveau { font-size: 1.375rem; }
}

/* ---------------------- Les prix, sur « Nos offres » ---------------------- */

/* Une prestation en promotion porte deux prix dans la page. Celui de la
   promotion ne se montre que si elle est en cours : sinon le prix habituel
   reparait de lui-meme, sans qu'on ait a reconstruire quoi que ce soit. */
.prestation--promo .prix-promo,
.prestation--promo .prestation__badge,
.prestation--promo .prestation__promo {
  display: none;
}

.prestation--promo[data-promo-etat="en-cours"] .prix-habituel { display: none; }

.prestation--promo[data-promo-etat="en-cours"] .prestation__badge {
  display: inline-block;
}

.prestation--promo[data-promo-etat="en-cours"] .prestation__promo {
  display: inline;
}

/* Le nouveau prix passe en premier et garde la ligne de base du nom ; l'ancien
   se range dessous, petit et barre. Cote a cote, les deux auraient pris toute la
   largeur d'un telephone. */
.prestation--promo[data-promo-etat="en-cours"] .prix-promo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.25;
}

.prix-nouveau { order: -1; }

.prix-ancien {
  color: #7d7f85;
  font-size: .8125rem;
  font-weight: 400;
}

.prestation__badge {
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: #f6e6ea;
  color: #ad4a63;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 1.5;
  text-transform: uppercase;
  vertical-align: middle;
}

.prestation__promo { color: #ad4a63; font-size: .875rem; }

.prestation__detail > span + .prestation__promo::before {
  content: '\00B7';
  margin: 0 .5em;
  color: #e4dedb;
}

/* ------------------- Le formulaire de reservation ------------------- */

/* Le selecteur de soin barre le prix d'avant quand une promotion s'applique. */
.choix__prix-ancien {
  margin-right: .55em;
  font-size: .85em;
  font-weight: 400;
  opacity: .6;
  text-decoration: line-through;
}

@media (prefers-reduced-motion: reduce) {
  .promo__carte { transition: none; }
  .promo__carte:hover,
  .promo__carte:focus-visible { transform: none; }
}