/* Nos offres.
 *
 * Cette section n'emprunte rien a l'export Zyro : son balisage est engendre par
 * `outils/publier.mjs`, avec des classes a nous. Reutiliser les grilles Zyro
 * aurait voulu dire produire leurs dizaines de classes et leurs styles en
 * attribut, pour un resultat que personne n'aurait pu relire.
 *
 * Elle emprunte en revanche le vocabulaire visuel du site : le rose de la
 * marque, les deux familles de caracteres deja chargees, et le rythme vertical
 * de `structure.css` — la section porte la classe `block`, donc le meme
 * espacement que les autres. */

.offres {
  /* Le rose de la marque est #d8738b. Il ne sert pas ici : `--rose` ne colore
     que du texte — les prix, les durees, le nom d'une prestation survolee — et
     #d8738b sur le fond creme donne un contraste de 2,9 pour 1, la ou il en
     faut 4,5. Un prix qu'on ne lit pas est un prix qu'on ne compare pas.

     #ad4a63 est le meme rose, assombri jusqu'a 5,0 pour 1. Les aplats, les
     bordures et les icones gardent #d8738b : rien n'y est ecrit par-dessus. */
  --rose: #ad4a63;
  --rose-sourd: #f6e6ea;
  --encre: #1d1e20;
  --encre-douce: #56585e;
  --trait: #e4dedb;
  --fond: #faf7f5;

  background: var(--fond);
  color: var(--encre);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.offres__cadre {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}

/* --------------------------------- Onglets --------------------------------- */

/* L'enveloppe ne sert qu'a poser les deux fleches par-dessus la bande. Elle
   existe meme sans JavaScript, ou elle ne fait rien de visible. */
.offres__bande {
  position: relative;
  margin: 0 0 40px;
}

/* De simples ancres : le defilement est celui du navigateur, et la navigation
   entre categories tient sans une ligne de JavaScript. */
.offres__onglets {
  display: flex;
  gap: 10px;
  margin: 0;
  padding-bottom: 4px;

  /* Sur telephone la liste depasse : elle defile lateralement plutot que de se
     replier sur six lignes. */
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.offres__onglets::-webkit-scrollbar { display: none; }

.offres__onglet {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 10px 20px;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: #fff;
  color: var(--encre-douce);
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

/* Le survol reste discret : s'il empruntait le noir de l'onglet ouvert, passer
   la souris sur « Massages » le ferait passer pour la categorie affichee. */
.offres__onglet:hover,
.offres__onglet:focus-visible {
  border-color: var(--encre-douce);
  color: var(--encre);
}

/* Les deux fleches du defilement. Posees par `assets/js/offres.js`, elles
   restent cachees tant qu'il n'y a rien a faire defiler : sur grand ecran la
   bande se replie sur deux lignes, et aucune des deux ne parait.

   Elles chevauchent le premier et le dernier onglet, comme les fleches d'un
   carrousel : de la place prise a cote retrecirait la bande sur les petits
   telephones, ou chaque pixel compte. */
.offres__fleche {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;

  border: 1px solid var(--trait);
  border-radius: 50%;
  background: #fff;
  color: var(--encre);
  box-shadow: 0 2px 12px rgba(29, 30, 32, .16);
  cursor: pointer;
}

/* `hidden` ne suffit pas face au `display: flex` ci-dessus. */
.offres__fleche[hidden] { display: none; }

.offres__fleche--arriere { left: -8px; }
.offres__fleche--avant { right: -8px; }

/* Le chevron est dessine tourne vers la gauche : celui de droite le retourne,
   plutot que d'avoir deux dessins a garder en accord. */
.offres__fleche--avant svg { transform: rotate(180deg); }

.offres__fleche:hover { color: var(--rose); }

@media (min-width: 760px) {
  .offres__onglets { flex-wrap: wrap; justify-content: center; overflow-x: visible; }
}

/* ------------------------------- Une categorie ------------------------------ */

.offre {
  /* `scroll-margin-top` : sans lui, l'en-tete fixe du site recouvre le titre
     quand on arrive par une ancre — cas ou le script ne s'est pas execute. */
  scroll-margin-top: 96px;
  margin-bottom: 72px;
}

.offre:last-child { margin-bottom: 0; }

/* Une categorie a la fois. Le masquage n'a lieu que si `offres.js` a pose la
   classe `offres--onglets` : sans lui, les sept categories se suivent, toutes
   lisibles. Une feuille de style ne doit pas pouvoir faire disparaitre un tarif
   a elle seule. */
.offres--onglets .offre { display: none; margin-bottom: 0; }
.offres--onglets .offre.actif { display: block; }
.offres--onglets .offre:focus { outline: none; }

/* L'onglet ouvert, et lui seul, est plein. C'est le seul repere qui dit quelle
   categorie on regarde. */
.offres__onglet.actif,
.offres__onglet.actif:hover {
  background: var(--encre);
  border-color: var(--encre);
  color: #fff;
  font-weight: 500;
}

.offre__visuel {
  margin: 0 0 28px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--rose-sourd);
}

.offre__visuel img {
  display: block;
  width: 100%;
  height: clamp(190px, 34vw, 320px);
  object-fit: cover;
}

.offre__titre {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 4vw, 2.125rem);
  line-height: 1.25;
  margin: 0 0 10px;
}

.offre__resume {
  margin: 0 0 28px;
  max-width: 60ch;
  color: var(--encre-douce);
  font-size: 1rem;
  line-height: 1.65;
}

.offre__attente {
  margin: 0;
  color: var(--encre-douce);
  font-size: .9375rem;
  line-height: 1.6;
}

.offre__attente a { color: var(--rose); }

/* ------------------------------ Les prestations ----------------------------- */

.prestations {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px 56px;
}

@media (min-width: 900px) {
  .prestations { grid-template-columns: 1fr 1fr; }
}

.prestation__ligne {
  display: flex;
  align-items: baseline;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.prestation__nom {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 500;
}

/* Le trait qui relie le nom au prix : il prend toute la place restante, et
   descend a la hauteur de la ligne de base plutot qu'a celle du texte. */
.prestation__trait {
  flex: 1 1 auto;
  min-width: 20px;
  height: 0;
  transform: translateY(-4px);
  border-bottom: 1px solid var(--trait);
}

.prestation__prix {
  font-size: 1.125rem;
  line-height: 1.35;
  font-weight: 500;
  color: var(--rose);
  white-space: nowrap;
}

.prestation__ligne:hover .prestation__nom,
.prestation__ligne:focus-visible .prestation__nom { color: var(--rose); }

.prestation__ligne:hover .prestation__trait,
.prestation__ligne:focus-visible .prestation__trait { border-bottom-color: var(--rose); }

.prestation__detail {
  margin: 6px 0 0;
  color: var(--encre-douce);
  font-size: .9375rem;
  line-height: 1.6;
}

/* La duree ouvre la ligne de detail, detachee de la description par un point
   median. Elle vient en premier parce qu'elle est courte : le separateur reste
   ainsi colle a elle, au lieu de se retrouver seul en bout de ligne quand la
   description se replie. */
.prestation__duree {
  color: var(--rose);
  font-size: .875rem;
  white-space: nowrap;
}

.prestation__duree + .prestation__texte::before {
  content: '·';
  margin: 0 .5em;
  color: var(--trait);
}

.offres__vide {
  text-align: center;
  color: var(--encre-douce);
  margin: 0;
}

/* Les animations d'apparition du site font monter les blocs au defilement. La
   section n'en a pas besoin — et sur une longue page, retarder six images
   dessert plus qu'il n'aide. */
@media (prefers-reduced-motion: reduce) {
  .offres__onglet { transition: none; }
}

/* ------------------------- Le rappel d'ouverture ------------------------- */

/* Une notification, en bas a gauche : le bouton WhatsApp tient deja le bas a
   droite. Elle est posee par `offres.js` et jamais ecrite dans la page — sans
   JavaScript elle ne pourrait ni se fermer ni s'effacer, et resterait en
   travers.

   Elle vit en fin de <body>, hors de `main.page` : les variables de police et
   les couleurs de `.offres` ne l'atteignent pas, d'ou les valeurs en clair —
   comme pour le bouton WhatsApp. */
.rappel {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 1990;   /* sous le bouton WhatsApp (2000), au-dessus du reste */
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 360px;
  max-width: calc(100vw - 48px);
  padding: 16px;
  border: 1px solid #f0e7eb;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(56, 30, 40, 0.16);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease;
}

.rappel--montre {
  opacity: 1;
  transform: translateY(0);
}

.rappel__pastille {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f6e6ea;
  color: #ad4a63;
}

.rappel__pastille svg { width: 20px; height: 20px; }

.rappel__corps { min-width: 0; }

.rappel__titre {
  margin: 0 0 4px;
  color: #1d1e20;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
}

.rappel__texte {
  margin: 0;
  color: #56585e;
  font-size: 13.5px;
  line-height: 1.5;
}

.rappel__fermer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: -2px -2px 0 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #8c8e94;
  cursor: pointer;
}

.rappel__fermer:hover,
.rappel__fermer:focus-visible {
  background: #f6e6ea;
  color: #ad4a63;
}

.rappel__fermer svg { width: 15px; height: 15px; }

/* Sur telephone, le rappel prend la largeur et passe au-dessus du bouton
   WhatsApp : pose a cote, il le recouvrirait. */
@media (max-width: 700px) {
  .rappel {
    left: 16px;
    right: 16px;
    bottom: 96px;
    width: auto;
    max-width: none;
  }
}

/* Le mouvement se demande, il ne s'impose pas : sans lui, le rappel parait sur
   place. */
@media (prefers-reduced-motion: reduce) {
  .rappel {
    transform: none;
    transition: none;
  }
}