/* ==========================================================================
   ESPACE CLIENTE — dans le prolongement de vitaminhlagree.com
   Chargee APRES vitaminh.css, dont elle garde la structure et remplace la
   peau.

   La cliente arrive ici en cliquant sur "Book" depuis son site. Si la page
   change de couleur, de police et de forme de bouton au passage, elle croit
   avoir quitte VITAMINH pour un prestataire, et une hesitation a ce moment
   precis coute une vente. Les jetons ci-dessous sont ceux de son depot
   (app/globals.css, bloc @theme), releves le 20 aout 2026 :
     vl-cream #faf3e0 · vl-terra #c4623e · vl-dark #1c0f09
     vl-beige #f0e6d3 · vl-light-terra #e8c5b0 · vl-muted #4a2a1e
   Polices : MarvinVision pour les titres, Sora pour le texte, Tabular pour
   les boutons. Ce sont ses fichiers, copies depuis public/fonts.
   ========================================================================== */

@font-face {
  font-family: "MarvinVision";
  src: url("/static/fonts/MarvinVisionsBig-Medium.woff2") format("woff2");
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora-ExtraLight.woff2") format("woff2");
  font-weight: 200; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora-Light.woff2") format("woff2");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/Sora-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "Tabular";
  src: url("/static/fonts/Tabular-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}

/* ---- Ses jetons, substitues aux notres ---------------------------------- */
:root {
  /* Sa palette, relevee dans la feuille de style de vitaminhlagree.com, avec
     ses proportions REELLES : le creme et le terracotta y apparaissent onze
     fois chacun, l'espresso trois fois seulement.
     La premiere version faisait l'inverse et posait un fond sombre partout :
     l'espace cliente ne ressemblait a son site que par la couleur des boutons.
     Le sombre redevient ce qu'il est chez elle, un accent rare. */
  --terracotta: #c4623e;          /* --color-vl-terra */
  --rouille:    #8b2500;          /* le rouille profond, lisible sur creme */
  --espresso:   #1c0f09;          /* --color-vl-dark */
  --creme:      #faf3e0;          /* --color-vl-cream */

  --fond:       #faf3e0;
  --carte:      #fffdf6;          /* un souffle plus clair que le fond */
  --peche:      #f4e3d2;          /* --color-vl-light-terra, adouci */
  --bordure:    rgba(28, 15, 9, .10);
  --bordure-f:  rgba(28, 15, 9, .22);
  --texte:      #1c0f09;
  --texte-doux: rgba(28, 15, 9, .60);
  --tres-doux:  rgba(28, 15, 9, .40);

  --vert:       #607040;          /* le vert de ses cours de yoga */
  --rouge:      #8b2500;

  --radius: 14px;
  --ombre: 0 1px 2px rgba(59,35,24,.05), 0 10px 30px -18px rgba(59,35,24,.28);
}

html { background: var(--fond); }

body, body.mob {
  background: var(--fond);
  color: var(--texte);
  font-family: "Sora", -apple-system, "Segoe UI", sans-serif;
  font-weight: 300;
  letter-spacing: .01em;
}

/* ---- Titres ------------------------------------------------------------- */
h1, h2, h3, .mtitre, .invite-t, .pmarque, .recap-nom {
  font-family: "MarvinVision", Georgia, serif;
  font-weight: 500;
  letter-spacing: .01em;
}
.mtitre {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--tres-doux); margin: 34px 0 14px;
}
.mtitre:first-child { margin-top: 0; }

/* Le sur-titre de son site : Sora 700, tres espace, terracotta. */
.places, .disc, .tagd {
  font-family: "Sora", sans-serif;
  font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  font-size: 9.5px;
}

/* ---- En-tete de vue : sa grammaire exacte -------------------------------
   Sur son site, chaque section s'ouvre sur un sur-titre en petites capitales
   terracotta, un titre au clamp(36px, 5vw, 60px) en MarvinVision avec une
   interligne de 1, puis une ligne de metadonnees en Sora tres espacee. Notre
   titre de section faisait 12 px : c'est ce qui donnait l'impression d'un
   outil pose a cote du site plutot que dans son prolongement. */
.vue-tete { margin: 6px 0 34px; }
.eyebrow {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .36em; text-transform: uppercase;
  color: var(--terracotta); margin: 0 0 18px;
}
.vue-tete h1 {
  font-family: "MarvinVision", Georgia, serif; font-weight: 500;
  font-size: clamp(30px, 5vw, 54px); line-height: 1; letter-spacing: .005em;
  color: var(--espresso); margin: 0 0 16px;
}
.vue-meta {
  font-family: "Sora", sans-serif; font-weight: 300;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tres-doux); margin: 0; line-height: 1.7;
}

/* ---- Les trois gammes, comme en haut de sa page tarifs ------------------ */
.gammes {
  display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 34px;
}
.gamme {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 1px solid var(--bordure);
  border-radius: var(--radius); padding: 17px 19px;
  transition: border-color .25s ease, background .25s ease;
}
.gamme:hover { border-color: rgba(196,98,62,.55); background: rgba(196,98,62,.06); }
.gamme-n {
  display: block; font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tres-doux); margin-bottom: 9px;
}
.gamme-p {
  display: block; font-family: "MarvinVision", Georgia, serif;
  font-size: 25px; line-height: 1; color: var(--terracotta); margin-bottom: 7px;
}
.gamme-a {
  display: block; font-family: "Sora", sans-serif; font-weight: 300;
  font-size: 12.5px; color: var(--texte-doux); line-height: 1.5;
}
.gamme-l {
  display: block; margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--bordure);
  font-family: "Tabular", sans-serif; font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--terracotta);
  opacity: .75; transition: opacity .25s ease;
}
.gamme:hover .gamme-l { opacity: 1; }
.gamme:hover .gamme-p { color: var(--rouille); }

/* Le vide laisse par un filtre trop restrictif. */
.mjour .vide {
  grid-column: 1 / -1; text-align: center; padding: 26px 16px;
  border: 1px dashed var(--bordure); border-radius: var(--radius);
  font-family: "Sora", sans-serif; font-size: 12.5px;
}

/* ---- En-tete ------------------------------------------------------------ */
.mtop {
  background: rgba(250, 243, 224, .94);
  border-bottom: 1px solid var(--bordure);
  backdrop-filter: blur(12px);
}
.marque, .pmarque {
  font-family: "MarvinVision", Georgia, serif;
  color: var(--espresso); letter-spacing: .06em;
}
.marque small, .pmarque small {
  font-family: "Sora", sans-serif; font-weight: 700;
  letter-spacing: .28em; color: var(--terracotta);
}
.lien-crm, .retour-cliente, .lien-bas {
  font-family: "Tabular", sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  font-size: 10.5px; color: var(--texte-doux);
}
.lien-crm:hover, .retour-cliente:hover, .lien-bas:hover { color: var(--terracotta); }

/* ---- Cartes ------------------------------------------------------------- */
.carte, .mpack, .mcours, .pcarte, .ccarte, .recap, .invite, .jcours {
  background: var(--carte);
  border: 1px solid var(--bordure);
  border-radius: var(--radius);
  color: var(--texte);
}
.mpack-h, .mcours.pris, .jcours-h { background: var(--peche); }
.mpack.fane { opacity: .5; }

/* ---- Pastilles de solde ------------------------------------------------- */
.pastille {
  background: var(--peche);
  border: 1px solid var(--bordure);
  border-radius: 12px; color: var(--texte);
}
.pastille b { font-family: "MarvinVision", Georgia, serif; color: var(--texte); }
.pastille span { color: var(--texte-doux); }
.pastille.illim { border-color: rgba(196, 98, 62, .55); }
.pastille.vide { opacity: .55; }

/* ---- Boutons : la pilule de son site ------------------------------------ */
.btn, button.btn, a.btn {
  font-family: "Tabular", sans-serif;
  font-size: 12.5px; font-weight: 400;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 34px; border-radius: 100px;
  border: 1.5px solid var(--terracotta);
  background: transparent; color: var(--terracotta);
  transition: background .3s ease, color .3s ease;
}
.btn:hover { background: var(--terracotta); color: var(--creme); }
.btn.plein {
  background: var(--terracotta); color: var(--creme);
  border-color: var(--terracotta);
}
.btn.plein:hover { background: transparent; color: var(--terracotta); }
.btn.petit { padding: 10px 22px; font-size: 11px; letter-spacing: .13em; }
.btn.creux { background: transparent; color: var(--texte-doux); border-color: var(--bordure-f); }
.btn.creux:hover { color: var(--terracotta); border-color: var(--terracotta); background: transparent; }

/* ---- Champs ------------------------------------------------------------- */
input, select, textarea {
  background: var(--peche);
  border: 1px solid var(--bordure-f);
  color: var(--texte);
  font-family: "Sora", sans-serif;
  border-radius: 10px;
}
input::placeholder { color: var(--tres-doux); }
input:focus, select:focus {
  border-color: var(--terracotta);
  outline: 2px solid rgba(196, 98, 62, .30);
}

/* ---- Filtre a selection multiple ----------------------------------------
   Chaque puce porte la pastille de couleur de sa discipline, reprise de son
   planning. Aucune puce active signifie "tout", ce qui evite d'avoir a en
   cocher quatre pour revenir a l'etat de depart. */
.filtres {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 22px; padding-bottom: 20px;
  border-bottom: 1px solid var(--bordure);
}
.filtres-t {
  font-family: "Sora", sans-serif; font-weight: 700;
  font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--tres-doux); margin-right: 4px;
}
.fchip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 100px; cursor: pointer;
  background: transparent; border: 1px solid var(--bordure);
  font-family: "Tabular", sans-serif; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; color: var(--texte-doux);
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.fchip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .55; transition: opacity .25s ease;
}
.fchip.d-lagree::before      { background: #c4623e; }
.fchip.d-hot_pilates::before { background: #e8a87c; }
.fchip.d-yoga::before        { background: #7d8f52; }
.fchip.d-mobility::before    { background: #9DC08B; }
.fchip:hover { color: var(--texte); border-color: var(--bordure-f); }
.fchip.on {
  color: var(--texte); border-color: rgba(250,243,224,.55);
  background: rgba(28, 15, 9, .06);
}
.fchip.on::before { opacity: 1; box-shadow: 0 0 0 3px rgba(250,243,224,.10); }
.fchip.raz {
  border-style: dashed; border-color: rgba(196,98,62,.5); color: var(--terracotta);
}
.fchip.raz::before { display: none; }
.fchip.raz:hover { background: rgba(196,98,62,.10); color: var(--terracotta); }
/* Une regle de classe l'emporte sur [hidden] : sans cette ligne, "Tout
   afficher" resterait visible alors qu'aucun filtre n'est actif. Meme piege
   que pour les journees, il vaut mieux le neutraliser une fois pour toutes. */
.fchip[hidden], .gamme[hidden], .vide[hidden] { display: none; }

/* ---- Chips de filtre ---------------------------------------------------- */
.mchip {
  font-family: "Tabular", sans-serif;
  letter-spacing: .12em; text-transform: uppercase; font-size: 10.5px;
  background: transparent; color: var(--texte-doux);
  border: 1px solid var(--bordure-f); border-radius: 100px;
}
.mchip.on { background: var(--terracotta); border-color: var(--terracotta); color: var(--creme); }

/* ---- Etiquettes --------------------------------------------------------- */
.tag, .et {
  background: rgba(196, 98, 62, .16);
  color: var(--rouille);
  border: 1px solid rgba(196, 98, 62, .34);
  border-radius: 100px;
  font-family: "Sora", sans-serif; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; font-size: 9.5px;
}
.tag.libre { background: rgba(96, 112, 64, .12); color: var(--vert); border-color: rgba(96, 112, 64, .30); }
.tag.plein { background: var(--terracotta); color: var(--creme); border-color: var(--terracotta); }
.places.peu { color: var(--rouille); }
.places.nul { color: var(--rouge); }

/* ---- Barre du bas (portable) -------------------------------------------- */
.mbar {
  background: rgba(250, 243, 224, .96);
  border-top: 1px solid var(--bordure);
  backdrop-filter: blur(12px);
}
.mbar a {
  font-family: "Tabular", sans-serif;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--tres-doux);
}
.mbar a.on { color: var(--terracotta); }

/* ---- Messages ----------------------------------------------------------- */
.msg, .flash {
  border-radius: 12px; font-family: "Sora", sans-serif;
  background: rgba(96, 112, 64, .12); color: var(--vert);
  border: 1px solid rgba(157, 192, 139, .30);
}
.msg.ko, .flash.ko {
  background: rgba(139, 37, 0, .10); color: var(--rouge);
  border-color: rgba(224, 138, 114, .32);
}
.demo {
  background: rgba(196, 98, 62, .10);
  border: 1px solid rgba(196, 98, 62, .28);
  color: var(--texte-doux); border-radius: 12px;
}
.demo strong { color: var(--terracotta); }

/* ---- Le bandeau d'invitation -------------------------------------------
   Sur fond clair il etait un degrade terracotta avec un bouton blanc. Sur
   fond sombre ce bouton blanc devient une tache : on garde le degrade,
   assombri, et le bouton reprend la pilule terracotta du site. */
.invite {
  background: linear-gradient(140deg, rgba(196,98,62,.14), rgba(244,227,210,.85));
  border: 1px solid rgba(196,98,62,.34);
  color: var(--texte);
  box-shadow: none;
}
.invite::after { background: rgba(196,98,62,.10); }
.invite p { color: var(--texte-doux); opacity: 1; }
.invite .btn {
  background: var(--terracotta); color: var(--creme);
  border-color: var(--terracotta);
  width: auto; font-size: 12.5px;
}
.invite .btn:hover { background: transparent; color: var(--terracotta); }

.prix, .mpack-prix, .recap-prix {
  font-family: "MarvinVision", Georgia, serif;
  color: var(--texte);
}
.doux, .facultatif { color: var(--texte-doux); }
.vide { color: var(--tres-doux); }

/* Les points de discipline, repris de ses couleurs de planning. */
.d-lagree::before      { background: #c4623e; }
.d-hot_pilates::before { background: #e8a87c; }
.d-yoga::before        { background: #7d8f52; }
.d-mobility::before    { background: #9DC08B; }

/* ==========================================================================
   ORDINATEUR
   Son site est pleine largeur ; notre espace cliente etait une colonne de
   620 px centree, ce qui donnait un telephone pose au milieu d'un grand
   ecran. Au-dela de 900 px on elargit, la barre du bas remonte en haut, et
   les cartes passent en grille.
   ========================================================================== */

@media (min-width: 900px) {
  /* La barre de navigation est APRES le contenu dans le HTML, ce qui est
     correct pour un telephone ou elle est fixee en bas. Sur ordinateur on la
     remonte par l'ordre de la grille plutot qu'en deplacant le balisage. */
  body.mob {
    max-width: 1120px;
    border-left: none; border-right: none;
    padding-bottom: 40px;
    display: flex; flex-direction: column;
  }
  .mtop { order: 1; }
  .mbar { order: 2; }
  #vue  { order: 3; }

  .mtop { position: sticky; top: 0; z-index: 40; padding-bottom: 4px; }
  .mtop-h { padding: 18px 34px 12px; }
  .marque { font-size: 22px; }
  .msolde { padding: 0 34px 16px; gap: 12px; }
  .pastille { min-width: 104px; }

  /* La navigation quitte le bas de l'ecran : au clavier et a la souris,
     on cherche les onglets en haut. */
  .mbar {
    position: static; display: flex; justify-content: center; gap: 8px;
    border-top: none; border-bottom: 1px solid var(--bordure);
    background: transparent; backdrop-filter: none;
    padding: 0 34px 14px;
  }
  .mbar a {
    flex: none; padding: 10px 26px; border-radius: 100px;
    border: 1px solid transparent; font-size: 11.5px;
  }
  .mbar a.on { border-color: var(--terracotta); color: var(--terracotta); }
  .mbar a svg { display: none; }

  #vue { padding: 26px 34px 60px; }

  /* .mjours porte les pastilles de selection du jour : une simple ligne qui
     revient a la ligne, et non une grille qui mange un tiers de l'ecran. */
  .mjours { display: flex; flex-wrap: wrap; gap: 8px; }
  .mjours .mchip { flex: 0 0 auto; }

  /* .mjour contient les cours de la journee : deux colonnes plutot qu'une
     longue pile a faire defiler. */
  .mjour { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  /* Une regle de classe l'emporte sur [hidden] du navigateur : sans cette
     ligne, les onze journees s'affichaient d'un coup, soit 47 cours a l'ecran.
     C'est ce qui rendait la page illisible sur ordinateur. */
  .mjour[hidden], .mcours[hidden] { display: none; }

  .mfams { display: flex; flex-wrap: wrap; gap: 8px; }
  [data-vue="packs"] .mpack { break-inside: avoid; }
  [data-vue="packs"] > .mtitre + * { margin-top: 4px; }
  .gammes { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .vue-tete { margin-bottom: 42px; }

  .invite { display: flex; align-items: center; gap: 26px; padding: 26px 30px; }
  .invite .btn { margin-left: auto; white-space: nowrap; }
}

@media (min-width: 1200px) {
  .mjour { grid-template-columns: repeat(3, 1fr); }
}

/* Sur telephone, on ne touche a rien : la mise en page mobile d'origine est
   deja celle qu'il faut, seule la peau change. */


/* ==========================================================================
   PAGE DE PAIEMENT
   Le moment le plus fragile du parcours : la cliente a decide d'acheter, elle
   a son application bancaire ouverte, et tout ce qui l'hesite ici coute la
   vente. Le QR domine, le libelle de virement est mis en evidence parce que
   c'est la seule chose qu'elle peut casser, et l'etat d'attente est visible
   sans avoir a chercher.
   ========================================================================== */

.payer { display: grid; grid-template-columns: 1fr; gap: 22px; }

.payer-qr {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--radius); padding: 16px;
  display: flex; align-items: center; justify-content: center;
}
.payer-qr img { display: block; width: 100%; max-width: 300px; height: auto; }

.payer-etat {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; border-radius: 100px;
  background: rgba(196, 98, 62, .12); border: 1px solid rgba(196, 98, 62, .3);
  font-family: "Tabular", sans-serif; font-size: 11.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--rouille);
}
.payer-etat .rond {
  width: 9px; height: 9px; border-radius: 50%; background: var(--rouille);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
.payer-etat.paye {
  background: rgba(96, 112, 64, .12); border-color: rgba(96, 112, 64, .35);
  color: var(--vert);
}
.payer-etat.paye .rond { background: var(--vert); animation: none; }

.payer-aide { margin: 14px 0 18px; font-size: 13px; color: var(--texte-doux); line-height: 1.55; }

.payer-det { margin: 0; }
.payer-det > div {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--bordure);
}
.payer-det > div:last-child { border-bottom: none; }
.payer-det dt {
  font-family: "Sora", sans-serif; font-weight: 700; font-size: 9.5px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tres-doux);
}
.payer-det dd { margin: 0; font-size: 14px; text-align: right; color: var(--texte); }
.payer-det .mono { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* Le libelle : la seule chose qu'elle peut effacer par megarde. */
.payer-det .cle {
  background: rgba(196, 98, 62, .12); border: 1px solid rgba(196, 98, 62, .32);
  border-radius: 10px; padding: 12px 14px; margin-top: 10px;
}
.payer-det .cle dd {
  font-family: Consolas, monospace; font-size: 16px; font-weight: 700;
  color: var(--terracotta);
}

.payer-avert {
  margin-top: 14px; font-size: 12px; color: var(--texte-doux); line-height: 1.5;
}

@media (min-width: 760px) {
  .payer { grid-template-columns: 340px 1fr; align-items: start; gap: 30px; }
}

/* Le coach du cours. Son site nomme la personne qui anime chaque creneau :
   ne pas le reprendre donnait un planning plus anonyme que le sien.
   `.mnom small` est masque plus haut pour les cartes de reservation, d'ou la
   specificite supplementaire ici plutot qu'un !important. */
.mnom small.coach {
  display: block;
  margin-top: 2px;
  font-family: var(--f-corps, inherit);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--texte-doux);
}