/* VITAMINH - Lagree Body Lab.
   Palette relevee sur le flyer tarifaire (docs/BRAND.md). Si elle fournit son
   kit de marque, seul ce bloc :root change. */

:root {
  /* Valeurs relevees dans le code de vitaminhlagree.com le 2026-08-19,
     et non plus estimees a l'oeil sur le JPEG du flyer. */
  --terracotta: #c4623e;
  --rouille:    #a34e2f;
  --espresso:   #1c0f09;
  --creme:      #faf3e0;
  --carte:      #FFF9F4;
  --peche:      #F5DAC7;
  --bordure:    #E8CDBA;
  --texte:      #1c0f09;
  --texte-doux: #7A5C4A;
  --vert:       #2F7A52;
  --rouge:      #B23A2E;
  --radius: 14px;
  --ombre: 0 1px 2px rgba(59,35,24,.06), 0 8px 24px -12px rgba(59,35,24,.18);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--creme); color: var(--texte);
  font-family: "Jost", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.55;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; letter-spacing: -.01em; }

/* ---- Bandeau ---- */
.top {
  background: var(--terracotta); color: #fff;
  padding: 14px 22px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.marque { font-weight: 800; font-size: 21px; letter-spacing: .14em; }
.marque small { display: block; font-size: 9.5px; letter-spacing: .26em; opacity: .9; font-weight: 600; }
.top nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.top nav a {
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600;
  opacity: .88; white-space: nowrap;
}
.top nav a:hover { background: rgba(255,255,255,.16); opacity: 1; }
.top nav a.on { background: #fff; color: var(--terracotta); opacity: 1; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px 70px; }
.demo {
  background: #FFF6E2; border: 1px solid #E8C98D; color: #7A5A16;
  border-radius: 10px; padding: 9px 14px; font-size: 13px; margin-bottom: 22px;
}

/* ---- Titres ---- */
.tete { margin-bottom: 22px; }
.tete h1 { font-size: 28px; }
.tete p { margin: 6px 0 0; color: var(--texte-doux); max-width: 70ch; }

/* ---- Cartes et grilles ---- */
.carte {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--ombre);
}
.grille { display: grid; gap: 14px; }
.g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.deux { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .deux { grid-template-columns: 1fr; } }

/* ---- Chiffres ---- */
.kpi .lab { font-size: 12.5px; color: var(--texte-doux); font-weight: 600; }
.kpi .val { font-size: 30px; font-weight: 800; line-height: 1.15; margin-top: 4px; }
.kpi .sub { font-size: 12px; color: var(--texte-doux); margin-top: 3px; }
.kpi .val.rouge { color: var(--rouge); }
.kpi .val.vert { color: var(--vert); }

/* ---- Etiquettes ---- */
.tag {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; border: 1px solid var(--bordure);
  background: var(--peche); color: var(--rouille); white-space: nowrap;
}
.tag.plein { background: #F6DAD5; border-color: #E4AFA6; color: var(--rouge); }
.tag.libre { background: #DFEFE5; border-color: #A9CFBA; color: var(--vert); }
.tag.gris  { background: #F0E7E0; color: var(--texte-doux); }
.tag.vide  { background: #FFF3D6; border-color: #E5C782; color: #85610F; }

/* ---- Planning ---- */
.jour { margin-bottom: 26px; }
.jour h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rouille); padding-bottom: 7px; border-bottom: 2px solid var(--peche);
  margin-bottom: 12px;
}
.cours {
  display: grid; grid-template-columns: 78px 1fr auto; gap: 14px; align-items: center;
  background: var(--carte); border: 1px solid var(--bordure);
  border-left: 4px solid var(--terracotta);
  border-radius: 10px; padding: 11px 15px; margin-bottom: 8px;
}
.cours.lagree      { border-left-color: #C25636; }
.cours.hot_pilates { border-left-color: #D98246; }
.cours.yoga        { border-left-color: #8AA37B; }
.cours.ferme { opacity: .5; }
.heure { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.nom { font-weight: 700; font-size: 15px; }
.nom small { display: block; font-weight: 500; color: var(--texte-doux); font-size: 12.5px; }

/* ---- Boutons ---- */
.btn {
  display: inline-block; border: none; cursor: pointer; font: inherit;
  background: var(--terracotta); color: #fff; font-weight: 700; font-size: 14px;
  padding: 9px 18px; border-radius: 999px;
}
.btn:hover { background: var(--rouille); }
.btn[disabled] { background: #D8C6BA; cursor: not-allowed; }
.btn.creux { background: transparent; color: var(--rouille); border: 1px solid var(--bordure); }
.btn.creux:hover { background: var(--peche); }
.btn.petit { padding: 5px 12px; font-size: 12.5px; }

/* ---- Tableaux ---- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--texte-doux); padding: 9px 10px; border-bottom: 1px solid var(--bordure);
}
td { padding: 10px; border-bottom: 1px solid #F0E4DA; vertical-align: middle; }
tr:last-child td { border-bottom: none; }
.tbl { overflow-x: auto; }

/* ---- Packs ---- */
.pack {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: var(--radius);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.pack .titre { font-weight: 700; font-size: 15.5px; }
.pack .prix { font-size: 22px; font-weight: 800; color: var(--rouille); }
.pack .unite { font-size: 12.5px; color: var(--texte-doux); }
.pack form { margin-top: auto; }
.eco { background: var(--terracotta); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11.5px; font-weight: 700; }

.solde { display: flex; gap: 10px; flex-wrap: wrap; }
.solde .b {
  background: var(--peche); border: 1px solid var(--bordure); border-radius: 10px;
  padding: 9px 14px; min-width: 108px;
}
.solde .b .n { font-size: 23px; font-weight: 800; color: var(--rouille); }
.solde .b .t { font-size: 11.5px; color: var(--texte-doux); font-weight: 600; }

.msg { border-radius: 10px; padding: 11px 15px; margin-bottom: 16px; font-size: 14px; font-weight: 600; }
.msg.ok { background: #DFEFE5; border: 1px solid #A9CFBA; color: #1E5A38; }
.msg.ko { background: #F9E3E0; border: 1px solid #E4AFA6; color: #8C2A20; }
.vide { color: var(--texte-doux); font-size: 14px; padding: 14px 0; }
.doux { color: var(--texte-doux); font-size: 13px; }
.mono { font-variant-numeric: tabular-nums; }
input, select {
  font: inherit; padding: 7px 10px; border: 1px solid var(--bordure);
  border-radius: 8px; background: #fff; color: var(--texte);
}
input[type=number] { width: 74px; }

/* ==========================================================================
   PAGE UNIQUE CLIENTE, MOBILE D'ABORD
   Les clientes reservent depuis leur telephone, souvent debout, souvent
   pressees. Une seule page, trois onglets, aucun rechargement, et des zones
   tactiles qui ne demandent pas de viser.
   ========================================================================== */

body.mob {
  padding-bottom: calc(74px + env(safe-area-inset-bottom));
  max-width: 620px; margin: 0 auto; background: var(--creme);
}

/* ---- Bandeau collant : la marque et le solde restent visibles ---- */
.mtop {
  position: sticky; top: 0; z-index: 20;
  background: var(--terracotta); color: #fff;
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
  box-shadow: 0 2px 14px -6px rgba(59,35,24,.5);
}
.mtop-h { display: flex; align-items: center; justify-content: space-between; }
.mtop .marque { font-size: 19px; letter-spacing: .13em; font-weight: 800; }
.mtop .marque small { display: block; font-size: 8.5px; letter-spacing: .24em; opacity: .85; }
.lien-crm {
  font-size: 12px; font-weight: 600; opacity: .85;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 4px 11px;
}

.msolde { display: flex; gap: 7px; margin-top: 11px; overflow-x: auto; scrollbar-width: none; }
.msolde::-webkit-scrollbar { display: none; }
.pastille {
  flex: 0 0 auto; background: rgba(255,255,255,.17); border-radius: 10px;
  padding: 5px 11px; text-align: center; min-width: 62px;
}
.pastille b { display: block; font-size: 18px; font-weight: 800; line-height: 1.1; }
.pastille span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
.pastille.illim b { font-size: 20px; }
.pastille.vide { opacity: .55; }

/* ---- Messages ephemeres ---- */
.flash { margin: 12px 16px 0; transition: opacity .5s, transform .5s; }
.flash.parti { opacity: 0; transform: translateY(-8px); }

main#vue { padding: 16px 16px 8px; }
.mtitre {
  font-size: 12px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--rouille); margin: 22px 0 10px; font-weight: 700;
}
.mtitre:first-child { margin-top: 4px; }

/* ---- Jour ---- */
.mjour { margin-bottom: 20px; }
.mjour h3 {
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--rouille); font-weight: 700; margin-bottom: 9px;
  display: flex; justify-content: space-between;
}
.mjour h3 span { color: var(--texte-doux); font-weight: 500; letter-spacing: 0; }

/* ---- Un cours : 3 colonnes, zone tactile confortable ---- */
.mcours {
  display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center;
  background: var(--carte); border: 1px solid var(--bordure);
  border-left: 4px solid var(--terracotta);
  border-radius: 12px; padding: 12px 13px; margin-bottom: 8px;
  min-height: 62px;
}
.mcours.lagree      { border-left-color: #C25636; }
.mcours.hot_pilates { border-left-color: #D98246; }
.mcours.yoga        { border-left-color: #8AA37B; }
.mcours.pris { background: #EFF6F0; border-color: #BFDCC7; }
.mheure { font-weight: 800; font-size: 15.5px; font-variant-numeric: tabular-nums; }
.mnom { font-weight: 700; font-size: 14.5px; line-height: 1.3; min-width: 0; }
.mnom small { display: block; font-weight: 500; color: var(--texte-doux); font-size: 12px; }
.mact { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mact .btn { min-height: 38px; }            /* cible tactile */
.places { font-size: 10.5px; color: var(--texte-doux); font-weight: 600; }
.places.peu { color: var(--rouille); }
.places.nul { color: var(--rouge); }

/* ---- Pack ---- */
.mpack {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 9px;
}
.mpack.fane { opacity: .5; }
.mpack-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mpack-h b { font-size: 14.5px; }
.reste { font-size: 21px; font-weight: 800; color: var(--rouille); white-space: nowrap; }
.reste small { font-size: 12px; color: var(--texte-doux); font-weight: 600; }
.prix { font-size: 17px; font-weight: 800; color: var(--rouille); white-space: nowrap; }
.jauge { height: 5px; background: var(--peche); border-radius: 3px; margin: 8px 0 7px; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--terracotta); border-radius: 3px; }
.mpack .doux { font-size: 12.5px; line-height: 1.45; }
.mpack.achat .btn { width: 100%; margin-top: 11px; min-height: 44px; }

/* ---- Barre du bas ---- */
.mbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--carte); border-top: 1px solid var(--bordure);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -3px 18px -10px rgba(59,35,24,.45);
}
.mbar button {
  position: relative; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 11px; font-weight: 700; color: var(--texte-doux);
  padding: 9px 4px 11px; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.mbar button span { font-size: 17px; line-height: 1; }
.mbar button.on { color: var(--terracotta); }
.mbar button.on span { transform: scale(1.08); }
.pastille-rouge {
  position: absolute; top: 7px; right: 50%; margin-right: -22px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--rouge);
}

/* Sur grand ecran la page reste centree et lisible, sans devenir un tableau
   de bord : c'est un outil de telephone, meme ouvert sur un portable. */
@media (min-width: 700px) {
  body.mob { border-left: 1px solid var(--bordure); border-right: 1px solid var(--bordure); min-height: 100vh; }
}

/* ---- Selecteur de jour : une ligne qui defile, un jour affiche ---- */
.mjours {
  display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
  padding: 2px 0 12px; margin: 0 -16px 4px; padding-left: 16px; padding-right: 16px;
  scroll-snap-type: x proximity;
}
.mjours::-webkit-scrollbar { display: none; }
.mchip {
  flex: 0 0 auto; scroll-snap-align: center; cursor: pointer; font: inherit;
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 12px;
  padding: 8px 12px 7px; min-width: 62px; text-align: center; color: var(--texte-doux);
  display: flex; flex-direction: column; gap: 1px; line-height: 1.15;
}
.mchip b { font-size: 11px; font-weight: 800; letter-spacing: .05em; }
.mchip span { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.mchip i {
  font-style: normal; font-size: 9.5px; font-weight: 700;
  background: var(--peche); color: var(--rouille); border-radius: 999px;
  padding: 0 6px; margin-top: 3px;
}
.mchip.on {
  background: var(--terracotta); border-color: var(--terracotta); color: #fff;
}
.mchip.on i { background: rgba(255,255,255,.24); color: #fff; }

/* ---- Page d'entree ---- */
body.porte { display: grid; place-items: center; min-height: 100vh; padding: 22px; }
.pcarte {
  background: var(--carte); border: 1px solid var(--bordure); border-radius: 18px;
  padding: 30px 26px 24px; width: 100%; max-width: 380px; box-shadow: var(--ombre);
}
.pmarque {
  font-weight: 800; font-size: 23px; letter-spacing: .14em; color: var(--terracotta);
  text-align: center; margin-bottom: 26px;
}
.pmarque small {
  display: block; font-size: 9px; letter-spacing: .26em; color: var(--texte-doux);
  font-weight: 600; margin-top: 3px;
}
.pcarte h1 { font-size: 21px; margin-bottom: 5px; }
.pcarte .doux { margin: 0 0 20px; }
.pcarte label {
  display: block; font-size: 12px; font-weight: 700; color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px;
}
.pcarte input {
  display: block; width: 100%; margin-top: 6px; font-size: 17px; padding: 12px 14px;
  border-radius: 11px; text-transform: none; letter-spacing: 0; font-weight: 500;
}
.pcarte input:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; }
.pcarte .btn { width: 100%; min-height: 48px; font-size: 15px; }
.petit { font-size: 12px; margin-top: 16px; line-height: 1.5; }
.lien-bas {
  display: block; text-align: center; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--bordure); font-size: 12.5px; color: var(--texte-doux);
  font-weight: 600;
}

/* ---- Page de paiement ---- */
.retour { display: block; font-size: 13px; color: var(--texte-doux); font-weight: 600; margin-bottom: 14px; }
.recap {
  background: var(--peche); border: 1px solid var(--bordure); border-radius: 12px;
  padding: 15px 17px; margin-bottom: 20px;
}
.recap-nom { font-weight: 700; font-size: 15.5px; }
.recap-prix { font-size: 27px; font-weight: 800; color: var(--rouille); margin: 3px 0 6px; }

/* ---- Sorties : pouvoir revenir en arriere depuis n'importe ou ----
   Une personne qui a clique par erreur doit trouver la sortie sans reflechir
   et sans compter sur le bouton retour du navigateur, qui n'existe pas dans
   une page ajoutee a l'ecran d'accueil. */
.retour {
  display: inline-flex; align-items: center; min-height: 40px;
  font-size: 13.5px; color: var(--texte-doux); font-weight: 600;
  margin-bottom: 10px;
}
.retour:hover { color: var(--terracotta); }
.lien-bas:hover { color: var(--terracotta); }
.retour-cliente {
  background: rgba(255,255,255,.16); border-radius: 999px;
}

/* ---- Invitation a prendre un pack ----
   Affichee en tete du planning quand le solde est vide. Elle ne masque pas les
   cours : une visiteuse doit pouvoir juger l'offre avant qu'on lui demande
   quoi que ce soit. */
.invite {
  background: linear-gradient(140deg, var(--terracotta), var(--rouille));
  color: #fff; border-radius: 14px; padding: 18px 18px 16px; margin-bottom: 18px;
  box-shadow: 0 8px 22px -12px rgba(59,35,24,.55);
}
.invite-t { font-weight: 800; font-size: 16.5px; letter-spacing: -.01em; }
.invite p { margin: 5px 0 13px; font-size: 13.5px; opacity: .92; line-height: 1.45; }
.invite .btn {
  background: #fff; color: var(--terracotta); width: 100%; min-height: 44px; font-size: 15px;
}
.invite .btn:hover { background: var(--creme); }

/* ==========================================================================
   PASSE ESTHETIQUE
   Reference : le flyer tarifaire et le compte instagram @vitaminhlagree
   (tons chauds, epure, "YOUR LAGREE ERA IS HERE"). On ne sort pas de la
   palette : on lui donne de la hierarchie et du rythme.
   ========================================================================== */

/* Le flyer compose "PRICING" dans un serif tres etire. On reprend ce contraste
   serif/sans pour les titres, la ou il porte l'identite. */
.pmarque, .invite-t, .pcarte h1, .recap-nom { font-family: "Prata", Georgia, serif; }
.pmarque, .marque { font-family: "Jost", sans-serif; }

/* ---- Identite des disciplines ----
   Trois pastilles de couleur plutot qu'un filet de 4px : la discipline est
   l'information qu'on cherche en premier dans un planning. */
.disc {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px; margin-bottom: 3px;
}
.d-lagree      { background: #F6DCD2; color: #A8452A; }
.d-hot_pilates { background: #FAE3CE; color: #9A5417; }
.d-yoga        { background: #E0EBDA; color: #4A6B3E; }
.d-mobility, .d-flexibility { background: #E0EBDA; color: #4A6B3E; }

.mnom b { display: block; font-weight: 600; font-size: 14px; color: var(--texte); margin-top: 1px; }
.mnom small { display: none; }
.mheure { display: flex; flex-direction: column; line-height: 1.1; }
.mheure small {
  font-size: 9.5px; font-weight: 600; color: var(--texte-doux);
  letter-spacing: .04em; margin-top: 2px;
}

.mcours {
  border-left-width: 3px; transition: transform .12s ease, box-shadow .12s ease;
  box-shadow: 0 1px 2px rgba(59,35,24,.04);
}
.mcours:active { transform: scale(.995); }
.mcours.pris { border-left-color: var(--vert); }

/* ---- Cartes de pack ---- */
.mpack.achat {
  position: relative; display: block; padding: 15px 40px 14px 16px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 1px 2px rgba(59,35,24,.04);
}
.mpack.achat:hover { border-color: var(--terracotta); box-shadow: 0 6px 18px -10px rgba(59,35,24,.4); }
.mpack.achat:active { transform: scale(.995); }
.mpack.achat.offre {
  background: linear-gradient(150deg, #FFF4EC, var(--carte));
  border-color: #E2B79A;
}
.mpack-prix { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 9px; }
.mpack-prix .prix { font-size: 20px; }
.mpack-prix .unite { font-size: 12px; color: var(--texte-doux); font-weight: 600; }
.mpack-det { display: flex; flex-wrap: wrap; gap: 5px; }
.tagd {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: var(--peche); color: var(--rouille); border: 1px solid var(--bordure);
}
.tagd.gris { background: #F3EAE3; color: var(--texte-doux); }
.tagd.or   { background: #FBEBC8; color: #8A6415; border-color: #E7CE96; }
.mpack-fl {
  position: absolute; right: 15px; top: 50%; transform: translateY(-50%);
  color: var(--bordure); font-size: 19px; font-weight: 700;
}
.mpack.achat:hover .mpack-fl { color: var(--terracotta); }
.eco {
  background: var(--terracotta); color: #fff; border-radius: 999px;
  padding: 2px 9px; font-size: 11px; font-weight: 800; letter-spacing: .02em;
}

/* ---- Titres de section ---- */
.mtitre {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .14em;
}
.mtitre::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--bordure), transparent);
}

/* ---- Puces de jour ---- */
.mchip { transition: transform .12s ease, background .12s ease; }
.mchip:active { transform: scale(.96); }
.mchip.on { box-shadow: 0 4px 12px -6px rgba(194,86,54,.8); }

/* ---- Barre du bas : icones dessinees ---- */
.mbar button svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mbar button.on svg { stroke-width: 2; }
.mbar button { transition: color .14s ease; }

/* ---- Bandeau du haut : un degrade plutot qu'un aplat ---- */
.mtop { background: linear-gradient(155deg, #CB5F3B, var(--rouille)); }
.pastille { backdrop-filter: blur(2px); }

/* ---- Invitation ---- */
.invite { position: relative; overflow: hidden; }
.invite::after {
  content: ""; position: absolute; right: -34px; top: -34px;
  width: 130px; height: 130px; border-radius: 50%;
  background: rgba(255,255,255,.09);
}
.invite-t { font-size: 19px; line-height: 1.25; }
.invite .btn { font-weight: 700; letter-spacing: .01em; }

/* ---- Etat vide ---- */
.carte.vide, .vide {
  text-align: center; border-style: dashed; color: var(--texte-doux);
}

/* Puces de famille : memes composants que les puces de jour, sans la date. */
.mfams .mchip { min-width: auto; padding: 9px 14px; flex-direction: row; align-items: center; gap: 7px; }
.mfams .mchip b { font-size: 12px; letter-spacing: .03em; }
.mfams .mchip i { margin-top: 0; font-size: 10px; }

/* ---- Voie "depuis l'etranger" : repliee par defaut, pour ne pas encombrer
   le parcours de la grande majorite qui paie par QR vietnamien. ---- */
.etranger {
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--bordure);
}
.etranger summary {
  cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--rouille);
  list-style: none; padding: 8px 0; min-height: 40px; display: flex; align-items: center;
}
.etranger summary::-webkit-details-marker { display: none; }
.etranger summary::before { content: "\2708\FE0F"; margin-right: 8px; }
.etranger[open] summary { margin-bottom: 6px; }
.etranger .doux { font-size: 12.5px; line-height: 1.5; margin-bottom: 14px; }
.facultatif { font-weight: 500; text-transform: none; letter-spacing: 0; opacity: .7; }

/* ==========================================================================
   ESPACE STUDIO
   Alexandra ouvre ca sur son telephone en arrivant au studio, souvent debout.
   Memes composants que le cote cliente, densite differente : elle lit des
   listes de noms, pas des offres a vendre.
   ========================================================================== */

body.crm .mbar { grid-template-columns: repeat(5, 1fr); }
body.crm .mbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 11px; font-size: 10px; font-weight: 700;
  color: var(--texte-doux); position: relative;
}
body.crm .mbar a svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
body.crm .mbar a.on { color: var(--terracotta); }

/* ---- Navigation entre les jours ---- */
.jbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.jbar-t { flex: 1; text-align: center; }
.jbar-t b { display: block; font-size: 15px; }
.jbar-t a { font-size: 12px; text-decoration: underline; }

/* ---- Un cours dans la journee ---- */
.jcours {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 12px; margin-bottom: 12px; overflow: hidden;
}
.jcours.passe { background: #FBF4EE; }
.jcours.vide { opacity: .62; }
.jcours-h {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 14px; background: var(--peche); border-bottom: 1px solid var(--bordure);
}
.jheure { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.jplaces { margin-left: auto; font-weight: 700; font-size: 13px; color: var(--rouille); }
.jpersonne { padding: 12px 14px; font-size: 13px; }

.jligne {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid #F3E9E1;
}
.jligne:last-child { border-bottom: none; }
.jligne.attended { background: #F0F7F2; }
.jligne.no_show { background: #FCF0EE; }
.jqui { flex: 1; min-width: 0; }
.jqui b { font-size: 14.5px; }
.jqui .doux { display: block; font-size: 11.5px; }

/* Boutons de pointage : 42px, pour se cocher au pouce sans viser. */
.jact { display: flex; gap: 6px; }
.pt {
  width: 42px; height: 42px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--bordure); background: #fff; font-size: 17px;
  font-weight: 800; color: var(--texte-doux); line-height: 1;
}
.pt.on { background: var(--vert); border-color: var(--vert); color: #fff; }
.pt.ko.on { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.pt:active { transform: scale(.94); }
.jattente {
  padding: 9px 14px; font-size: 12px; color: var(--rouille);
  background: #FFF6EC; border-top: 1px dashed var(--bordure);
}

/* ---- Relances ---- */
.relance {
  background: linear-gradient(140deg, var(--terracotta), var(--rouille));
  color: #fff; border-radius: 14px; padding: 16px 17px; margin-bottom: 18px;
}
.relance-t { font-family: "Prata", Georgia, serif; font-size: 17px; }
.relance p { margin: 5px 0 12px; font-size: 12.5px; opacity: .9; line-height: 1.45; }
.rligne {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid rgba(255,255,255,.22); font-size: 13.5px;
}
.rligne .doux { color: rgba(255,255,255,.75); }
.rligne .tag { background: rgba(255,255,255,.92); border-color: transparent; }

/* ---- Fiche cliente ---- */
.filtre { margin-bottom: 14px; }
.filtre input { width: 100%; padding: 11px 14px; font-size: 15px; border-radius: 11px; }
.ccarte {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: 12px; padding: 13px 15px; margin-bottom: 9px;
}
.ccarte-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ccarte-h b { font-size: 14.5px; }
.creste { text-align: right; white-space: nowrap; }
.creste .n { font-size: 23px; font-weight: 800; color: var(--rouille); display: block; line-height: 1.1; }
.creste .l { font-size: 10px; color: var(--texte-doux); text-transform: uppercase; letter-spacing: .06em; }
.cmeta {
  display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid #F3E9E1;
  font-size: 12px; color: var(--texte-doux);
}
.cmeta .rouge { color: var(--rouge); font-weight: 600; }
.ligne-form { display: flex; gap: 7px; margin-top: 11px; }
.ligne-form select { flex: 1; }

/* ---- Statistiques ---- */
.sligne {
  display: grid; grid-template-columns: 1fr 90px auto; gap: 10px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid #F3E9E1;
}
.sligne:last-of-type { border-bottom: none; }
.sl-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-t b { font-size: 13.5px; }
.sl-t .doux { font-size: 11px; }
.sl-b { height: 8px; background: var(--peche); border-radius: 4px; overflow: hidden; }
.sl-b i { display: block; height: 100%; background: var(--terracotta); border-radius: 4px; }
.sligne.faible .sl-b i { background: #C9A08C; }
.sl-n { font-size: 13px; font-weight: 800; text-align: right; white-space: nowrap; }
.sl-n .doux { font-weight: 500; font-size: 11px; }

.grille.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spark { display: flex; align-items: flex-end; gap: 2px; height: 60px; margin: 10px 0 4px; }
.spark-b { flex: 1; background: var(--terracotta); border-radius: 2px 2px 0 0; min-height: 2px; opacity: .85; }