/*!
 * Bookal — logiciel de réservation pour salons et instituts.
 *
 * @author     Michel Jandy — EI, SIRET 807 995 238 00019
 * @copyright  2026 Michel Jandy. Tous droits réservés.
 * @distributor Lemon Impact — branche de l'agence Swiloweb
 * @license    Licence commerciale nominative. Revente et redistribution du
 *             code source interdites.
 */
/* ==========================================================================
   BOOKAL — Design system
   Crème chaud, cartes blanches très arrondies, tuiles pastel, noir profond.
   ========================================================================== */

:root{
  /* Fond gris-lavande froid : plus net que le beige, il fait ressortir
     le blanc des cartes et les pastels sans jaunir à l'écran. */
  --canvas:#F2F2F7;
  --surface:#FFFFFF;
  --surface-2:#F6F6FA;
  --ink:#15141B;
  --ink-2:#45434F;
  --muted:#86848F;
  --line:#E4E3EC;
  --line-2:#EFEFF4;

  --peach:#F7DFC8;
  --peach-2:#EFCBA9;
  --lilac:#E3DCF5;
  --lilac-2:#CFC3EE;
  --mint:#DEEBDC;
  --mint-2:#BFD9BC;
  --sky:#D9E6F2;
  --sky-2:#B7D0E6;
  --rose:#F5D9DC;
  --amber:#F6E5C0;

  --r-xl:28px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;

  --sidebar:280px;
  --font:'Outfit','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--font);font-size:15px;line-height:1.5;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.02em;line-height:1.2}
h1{font-size:30px}h2{font-size:21px}h3{font-size:17px}
p{margin:0 0 10px}
hr{border:0;border-top:1px solid var(--line);margin:20px 0}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
::selection{background:var(--lilac)}

/* ---------- Utilitaires ---------- */
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:500}
.center{text-align:center}
.right{text-align:right}
.row{display:flex;gap:12px;align-items:center}
.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:14px}
.mt{margin-top:16px}.mt-lg{margin-top:26px}.mb{margin-bottom:16px}
.hide{display:none !important}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nowrap{white-space:nowrap}

/* ---------- Layout ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{
  /* Le fond suit le style choisi, ou la couleur réglée dans Apparence */
  width:var(--sidebar);flex:0 0 var(--sidebar);background:var(--sidebar-bg,var(--surface));
  border-right:1px solid var(--line-2);padding:26px 18px 22px;position:sticky;top:0;height:100vh;
  overflow-y:auto;display:flex;flex-direction:column;
}
.brand{display:flex;align-items:center;gap:10px;padding:0 10px 26px;font-size:19px;font-weight:600;letter-spacing:-.03em}
.brand .mark{width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.brand .mark svg{width:16px;height:16px}
.nav-group{margin-bottom:22px}
/* Intertitres du menu : couleur réglable depuis Apparence */
.nav-group>.tiny{padding:0 12px 10px;color:var(--sidebar-muted,var(--muted))}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:14px;
  /* Couleur réglable depuis Apparence, avec la teinte du thème par défaut */
  color:var(--sidebar-text,var(--ink-2));
  font-weight:500;font-size:14.5px;transition:background .18s var(--ease),color .18s var(--ease);
}
.nav-item svg{width:19px;height:19px;flex:none;opacity:.85}
.nav-item:hover{background:var(--surface-2);color:var(--sidebar-text,var(--ink))}
.nav-item.active{background:var(--ink);color:#fff}
.nav-item.active svg{opacity:1}
.nav-sep{height:1px;background:var(--line-2);margin:6px 12px 18px}
.sidebar-foot{margin-top:auto;padding-top:16px}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{
  display:flex;align-items:center;gap:16px;padding:20px 30px;
  background:var(--surface);border-bottom:1px solid var(--line-2);position:sticky;top:0;z-index:40;
}
.content{padding:26px 30px 60px;max-width:1560px;width:100%}

/* ---------- Recherche ---------- */
.search{position:relative;flex:1;max-width:440px}
.search input{
  width:100%;border:1px solid var(--line);background:var(--surface-2);border-radius:999px;
  padding:11px 16px 11px 44px;font-size:14.5px;
}
.search input:focus{outline:none;border-color:var(--ink);background:#fff}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted)}

/* ---------- Avatars ---------- */
.avatar{
  width:38px;height:38px;border-radius:50%;object-fit:cover;flex:none;
  background:var(--lilac);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;
}
.avatar.sm{width:30px;height:30px;font-size:11px}
.avatar.lg{width:56px;height:56px;font-size:17px}
.avatar.xl{width:84px;height:84px;font-size:24px}
.avatar img{width:100%;height:100%;object-fit:cover}

/* ---------- Boutons (sans ombre) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:999px;border:1px solid transparent;background:var(--ink);color:#fff;
  font-weight:500;font-size:14.5px;cursor:pointer;transition:opacity .18s var(--ease),background .18s var(--ease);
  white-space:nowrap;box-shadow:none;
}
.btn:hover{opacity:.86}
.btn:active{transform:translateY(1px)}
.btn svg{width:17px;height:17px}
.btn-light{background:var(--surface-2);color:var(--ink);border-color:var(--line)}
.btn-light:hover{background:#fff}
.btn-ghost{background:transparent;color:var(--ink-2);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2);color:var(--ink)}
.btn-danger{background:#fff;color:#B4453F;border-color:#EBD3D1}
.btn-danger:hover{background:#FDF3F2}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;pointer-events:none}
.icon-btn{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);
  border:1px solid var(--line);cursor:pointer;flex:none;transition:background .18s var(--ease);
}
.icon-btn:hover{background:#fff}
.icon-btn svg{width:18px;height:18px}
.icon-btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.icon-btn.rect{border-radius:12px}

/* ---------- Cartes ---------- */
.card{background:var(--surface);border-radius:var(--r-xl);padding:24px;border:1px solid var(--line-2)}
.card.pad-sm{padding:18px}
.card-head{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-bottom:18px}
/* Le titre pousse boutons, badges et poignée vers la droite : sans cela,
   un troisième élément se retrouvait planté au milieu de l'en-tête. */
.card-head>div:first-child,.card-head>h2:first-child,.card-head>h3:first-child{margin-right:auto;min-width:0}
.card-head h2,.card-head h3{letter-spacing:-.02em}

/* ---------- Tuiles statistiques pastel ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px}
.tile{
  border-radius:var(--r-xl);padding:22px 24px 18px;position:relative;overflow:hidden;min-height:172px;
  display:flex;flex-direction:column;justify-content:space-between;background:var(--peach);
}
.tile.lilac{background:var(--lilac)}.tile.mint{background:var(--mint)}
.tile.sky{background:var(--sky)}.tile.peach{background:var(--peach)}
.tile.ink{background:var(--ink);color:#fff}
.tile.ink .tile-label,.tile.ink .tile-foot{color:rgba(255,255,255,.68)}
.tile-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--ink-2);position:relative;z-index:1}
.tile-value{font-size:52px;font-weight:300;letter-spacing:-.045em;line-height:1;margin-top:8px;position:relative;z-index:1}
.tile-value small{font-size:24px;font-weight:400;letter-spacing:-.02em}
.tile-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;color:var(--ink-2);position:relative;z-index:1}
.tile-deco{position:absolute;right:-10px;top:14px;width:120px;height:120px;opacity:.5;pointer-events:none}
.tile-go{width:28px;height:28px;border-radius:50%;background:rgba(22,21,15,.86);color:#fff;display:grid;place-items:center;flex:none}
.tile-go svg{width:13px;height:13px}
.tile.ink .tile-go{background:#fff;color:var(--ink)}
.delta{font-size:12.5px;font-weight:500;padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.6)}
.delta.up{color:#2F6B3A}.delta.down{color:#A5453F}

/* ---------- Carte visuelle (photo) ---------- */
.hero-card{
  border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:172px;background:var(--ink) center/cover no-repeat;
  display:flex;align-items:flex-end;padding:14px;
}
.hero-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.45))}
.hero-inner{position:relative;z-index:1;background:#fff;border-radius:var(--r-lg);padding:16px;width:100%;text-align:center}
.hero-inner h3{font-size:18px;margin-bottom:12px;letter-spacing:-.02em}

/* ---------- Badges ---------- */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;
  font-size:12.5px;font-weight:500;background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55}
.badge.plain::before{display:none}
.badge.mint{background:var(--mint);color:#33603A}
.badge.sky{background:var(--sky);color:#2F5578}
.badge.lilac{background:var(--lilac);color:#4B3E7A}
.badge.peach,.badge.amber{background:var(--amber);color:#7A5A22}
.badge.rose{background:var(--rose);color:#9A4046}
.badge.grey{background:var(--surface-2);color:var(--muted)}
.badge.dark{background:var(--ink);color:#fff}

/* ---------- Tableaux ---------- */
.table-wrap{overflow-x:auto;margin:0 -6px}
table.tbl{width:100%;border-collapse:collapse;min-width:640px}
table.tbl th{
  text-align:left;font-size:12.5px;font-weight:500;color:var(--muted);padding:0 14px 12px;white-space:nowrap;
}
table.tbl td{padding:14px;border-top:1px solid var(--line-2);vertical-align:middle;font-size:14.5px}
table.tbl tbody tr{transition:background .15s var(--ease)}
table.tbl tbody tr:hover{background:var(--surface-2)}
table.tbl .cell-main{font-weight:500}
table.tbl .cell-sub{font-size:12.5px;color:var(--muted)}
.tabs{display:flex;gap:26px;border-bottom:1px solid var(--line-2);margin-bottom:6px;overflow-x:auto}
.tabs a{padding:0 0 14px;font-size:15px;font-weight:500;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.active{color:var(--ink);border-color:var(--ink)}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:22px;flex-wrap:wrap}
.pager a,.pager span{min-width:36px;height:36px;border-radius:12px;display:grid;place-items:center;font-size:14px;color:var(--ink-2);padding:0 10px}
.pager a:hover{background:var(--surface-2)}
.pager .on{background:var(--ink);color:#fff;font-weight:500}

/* ---------- Formulaires ---------- */
.field{display:block;margin-bottom:16px}
.field>span,.label{display:block;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea,.input{
  width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:15px;transition:border-color .16s var(--ease),background .16s var(--ease);
}
.field textarea{min-height:90px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus,.input:focus{outline:none;border-color:var(--ink);background:#fff}
.field .hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 16px}
.switch{display:flex;align-items:center;gap:12px;padding:11px 0;cursor:pointer}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch .track{width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .2s var(--ease);flex:none}
.switch .track::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.switch input:checked+.track{background:var(--ink)}
.switch input:checked+.track::after{transform:translateX(18px)}
.switch span.txt{font-size:14.5px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
  font-size:14px;cursor:pointer;transition:.16s var(--ease);white-space:nowrap;
}
.chip:hover{background:#fff}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip input{position:absolute;opacity:0;pointer-events:none}

/* ---------- Alertes ---------- */
.alert{padding:13px 16px;border-radius:var(--r-md);font-size:14.5px;margin-bottom:18px;border:1px solid var(--line)}
.alert.ok{background:var(--mint);border-color:#CFE2CC;color:#315E38}
.alert.err{background:var(--rose);border-color:#EED2D5;color:#9A4046}
.alert.info{background:var(--sky);border-color:#CEDFEE;color:#2F5578}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:200;
  background:var(--ink);color:#fff;padding:13px 20px;border-radius:999px;font-size:14.5px;
  opacity:0;pointer-events:none;transition:.25s var(--ease);max-width:90vw;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Modale / feuille mobile ---------- */
.modal{position:fixed;inset:0;z-index:150;display:none;overflow-y:auto;overscroll-behavior:contain}
.modal.open{display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px 40px}
.modal-bg{position:absolute;inset:0;background:rgba(22,21,15,.42);backdrop-filter:blur(3px)}
.modal-box{
  position:relative;background:var(--surface);border-radius:var(--r-xl);width:min(620px,100%);
  margin:0 auto;max-height:88vh;overflow-y:auto;padding:26px;animation:pop .22s var(--ease);
}
.modal-box.wide{width:min(880px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}

/* ---------- Calendrier ---------- */
.cal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:transparent;padding:8px 15px;border-radius:999px;font-size:13.5px;cursor:pointer;color:var(--ink-2);font-weight:500}
.seg button.on{background:var(--ink);color:#fff}

.cal-grid{
  display:grid;grid-template-columns:62px repeat(var(--cols,1),minmax(116px,1fr));
  background:var(--surface);border-radius:var(--r-md);overflow:clip;
}
@supports not (overflow:clip){ .cal-grid{overflow:visible} }
.cal-head{
  position:sticky;top:0;z-index:6;padding:14px 8px 12px;text-align:center;
  background:var(--surface);border-bottom:1px solid var(--line);
  box-shadow:0 6px 12px -10px rgba(21,20,27,.35);
}
.cal-corner{position:sticky;top:0;left:0;z-index:7;background:var(--surface)}
.cal-head .dw{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cal-head .dn{font-size:18px;font-weight:500;margin-top:3px;letter-spacing:-.02em}
.cal-head.today .dn{background:var(--ink);color:#fff;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;margin:3px auto 0}
.cal-head .cnt{font-size:11px;color:var(--muted);margin-top:3px}
.cal-corner{position:sticky;top:0;background:var(--surface);z-index:4;border-bottom:1px solid var(--line)}
.cal-time{
  font-size:11px;color:var(--muted);text-align:right;padding-right:11px;transform:translateY(-7px);
  font-variant-numeric:tabular-nums;
}
.cal-col{position:relative;border-left:1px solid var(--line-2)}
.cal-col:nth-child(2){border-left:0}
.cal-slot{height:26px;cursor:pointer;transition:background .12s}
.cal-slot.hour{border-top:1px solid var(--line-2)}
.cal-slot.half{border-top:1px dotted #EFEDE6}
.cal-slot:hover{background:var(--surface-2)}
.cal-slot.closed{background:#FAFAFD;cursor:default}
.cal-slot.closed:hover{background:#FAFAFD}
.cal-slot.drop{background:var(--mint)}
.cal-ev{
  position:absolute;border-radius:11px;overflow:hidden;cursor:grab;display:flex;gap:0;
  background:var(--surface);border:1px solid var(--line-2);box-shadow:0 1px 2px rgba(22,21,15,.05);
  font-size:12.5px;line-height:1.25;z-index:2;transition:box-shadow .15s;
}
.cal-ev:hover{box-shadow:0 4px 12px rgba(22,21,15,.12);z-index:5}
.cal-ev-bar{width:5px;flex:0 0 5px;display:block}
.cal-ev-in{padding:6px 9px;min-width:0;overflow:hidden}
.cal-ev .t{font-weight:500;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev .s{color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev.dragging{opacity:.4}
.cal-ev.st-cancelled,.cal-ev.st-noshow{opacity:.55}
.cal-ev.st-cancelled .t{text-decoration:line-through}
.cal-now{position:absolute;left:0;right:0;height:2px;background:#D0574F;z-index:4;pointer-events:none}
.cal-now::before{content:'';position:absolute;left:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:#D0574F}

.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.month-dow{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;padding-bottom:6px}
.month-cell{background:var(--surface-2);border-radius:var(--r-md);min-height:104px;padding:8px;cursor:pointer;transition:.15s}
.month-cell:hover{background:var(--line-2)}
.month-cell.out{opacity:.4}
.month-cell .n{font-size:14px;font-weight:500;margin-bottom:5px}
.month-cell.today .n{background:var(--ink);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.mev{font-size:11.5px;padding:3px 7px;border-radius:8px;margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Sélecteur de dates (réservation) ---------- */
.daypick{display:flex;gap:9px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:none}
.daypick::-webkit-scrollbar{display:none}
.dp{
  flex:none;width:62px;padding:12px 0;border-radius:18px;background:var(--surface-2);border:1px solid var(--line);
  text-align:center;cursor:pointer;transition:.16s var(--ease);
}
.dp .dw{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dp .dn{font-size:19px;font-weight:500;letter-spacing:-.02em;margin-top:2px}
.dp.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dp.on .dw{color:rgba(255,255,255,.7)}
.dp[disabled]{opacity:.35;pointer-events:none}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px}
.slot{
  padding:12px 6px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
  text-align:center;font-size:14.5px;cursor:pointer;transition:.15s var(--ease);
}
.slot:hover{background:#fff}
.slot.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Mini calendrier mensuel (client / réservation) */
.mini-cal{background:var(--surface-2);border-radius:var(--r-lg);padding:14px}
.mini-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.mini-grid .h{font-size:12px;color:var(--muted);padding:4px 0}
.mini-d{aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:14px;cursor:pointer;background:#fff;border:0}
.mini-d.out{background:transparent;color:var(--muted);opacity:.5;cursor:default}
.mini-d.off{background:transparent;color:var(--muted);opacity:.4;cursor:not-allowed}
.mini-d.on{background:var(--ink);color:#fff;font-weight:500}

/* ---------- Listes / vignettes ---------- */
.list-row{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:var(--r-md);transition:background .15s;
}
.list-row+.list-row{border-top:1px solid var(--line-2)}
.list-row:hover{background:var(--surface-2)}
.thumb{width:52px;height:52px;border-radius:15px;object-fit:cover;flex:none;background:var(--surface-2)}
.thumb.lg{width:76px;height:76px;border-radius:18px}
.ph{background:linear-gradient(135deg,var(--peach),var(--lilac));display:grid;place-items:center;color:var(--ink);font-weight:600}

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.mini-card{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.mini-card .cover{height:132px;background:var(--surface-2) center/cover no-repeat}
.mini-card .body{padding:15px}

.empty{padding:52px 20px;text-align:center;color:var(--muted)}
.empty svg{width:38px;height:38px;opacity:.35;margin-bottom:12px}
.empty h3{font-weight:500;color:var(--ink-2);margin-bottom:6px}

/* ---------- Barre d'actions fixe (mobile) ---------- */
.tabbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
}
/* Chaque onglet occupe la même largeur : sinon les libellés inégaux
   (« Rendez-vous » contre « Profil ») décalent le bouton central. */
.tabbar-inner{display:flex;align-items:center;max-width:560px;margin:auto}
.tab{display:flex;flex:1 1 0;min-width:0;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;color:var(--muted);padding:6px 4px;border-radius:14px;font-weight:500;
     border:0;background:none;font-family:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab svg{width:22px;height:22px}
.tab.active{color:var(--ink)}
.tab.mid{background:var(--ink);color:#fff;flex:0 0 52px;width:52px;height:52px;border-radius:18px;justify-content:center;
         margin:-18px 6px 0;padding:0;border:0;box-shadow:0 8px 20px rgba(21,20,27,.28)}
.tab.mid svg{width:22px;height:22px}
.tab.mid span{display:none}
.actionbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line-2);gap:10px;
}
.mobile-only{display:none}

/* ---------- Pages publiques ---------- */
.bkx{max-width:980px;margin:0 auto;padding:22px 18px 120px}
.bkx-hero{
  border-radius:var(--r-xl);overflow:hidden;position:relative;min-height:230px;background:var(--ink) center/cover no-repeat;
  display:flex;align-items:flex-end;padding:22px;margin-bottom:22px;
}
.bkx-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.62))}
.bkx-hero .t{position:relative;z-index:1;color:#fff}
.bkx-hero h1{font-size:32px;font-weight:600;letter-spacing:-.03em}
/* Le fil des étapes est devenu une liste : on neutralise la puce et la
   coche, que le mobile n'affiche pas. */
.steps{display:flex;gap:8px;margin:0 0 22px;padding:0;list-style:none}
.step-dot{
  flex:1;height:4px;border-radius:999px;background:var(--line);
  font-size:0;overflow:hidden;
}
.step-dot i,.step-dot b{display:none}
.step-dot.on,.step-dot.done{background:var(--ink)}
.step-dot.on{background:var(--ink)}
.svc-item{
  display:flex;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);cursor:pointer;transition:.16s var(--ease);margin-bottom:10px;
}
.svc-item:hover{border-color:var(--ink)}
.svc-item.on{border-color:var(--ink);background:var(--surface-2)}
.svc-price{font-weight:600;letter-spacing:-.02em;white-space:nowrap}

.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.auth-card{background:var(--surface);border-radius:var(--r-xl);padding:34px;width:min(430px,100%);border:1px solid var(--line-2)}
.auth-card .brand{justify-content:center;padding-bottom:18px}
.auth-split{display:grid;grid-template-columns:1.05fr .95fr;min-height:100vh}
.auth-visual{background:var(--ink) center/cover no-repeat;position:relative;display:flex;align-items:flex-end;padding:44px}
.auth-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.6))}
.auth-visual .q{position:relative;z-index:1;color:#fff;max-width:420px}
.auth-visual .q h2{font-size:30px;font-weight:500;letter-spacing:-.03em;line-height:1.22}
.auth-form{display:grid;place-items:center;padding:40px 24px;background:var(--canvas)}

/* ---------- Barres de progression ---------- */
.bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#4B3F9E,#8B72D9 55%,#B9A9EE)}
.spark{display:flex;align-items:flex-end;gap:6px;height:120px}
.spark i{flex:1;background:linear-gradient(180deg,var(--ink),#57544A);border-radius:6px 6px 3px 3px;min-height:4px;position:relative}
.spark i span{position:absolute;bottom:-20px;left:0;right:0;text-align:center;font-size:11px;color:var(--muted)}

/* ---------- Menu déroulant ---------- */
.dd{position:relative}
.dd-menu{
  position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:6px;min-width:210px;z-index:60;display:none;
}
/* Une transition ne peut pas partir de « display:none ». Le panneau reste
   donc dans la page, rendu inerte par sa visibilité, ce qui laisse
   l'animation se dérouler. */
.dd-menu{
  display:block;visibility:hidden;pointer-events:none;
  opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top right;
  transition:opacity .18s var(--ease),transform .2s var(--ease),visibility 0s linear .2s;
}
.dd.open .dd-menu{
  visibility:visible;pointer-events:auto;
  opacity:1;transform:translateY(0) scale(1);
  transition:opacity .18s var(--ease),transform .2s var(--ease),visibility 0s;
}
@media (prefers-reduced-motion:reduce){
  .dd-menu{transition:none;transform:none}
}

/* Effacement d'une notification : elle se replie sur place, le panneau
   reste ouvert. */
.notif-row{overflow:hidden;transition:opacity .18s var(--ease),max-height .28s var(--ease),
           margin .28s var(--ease),transform .18s var(--ease)}
.notif-row.part{opacity:0;max-height:0 !important;margin:0 !important;transform:translateX(14px)}
.notif-vide{
  padding:18px 12px;text-align:center;font-size:13px;color:var(--muted);
  animation:notifApparait .25s var(--ease);
}
@keyframes notifApparait{from{opacity:0}to{opacity:1}}
.dd-menu a,.dd-menu button{
  display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;
  font-size:14px;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink-2);
}
.dd-menu a:hover,.dd-menu button:hover{background:var(--surface-2);color:var(--ink)}
.dd-menu svg{width:16px;height:16px}
.dd-menu hr{margin:6px 0}
.notif-item{display:flex;gap:10px;padding:11px 12px;border-radius:12px}
.notif-item:hover{background:var(--surface-2)}
.notif-item .dot{width:8px;height:8px;border-radius:50%;background:var(--ink);margin-top:6px;flex:none}
.notif-item.read .dot{background:var(--line)}
.bell{position:relative}
.bell .n{
  position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;border-radius:999px;
  background:#D0574F;color:#fff;padding:0 5px;border:2px solid var(--surface);
  display:grid;place-items:center;
  /* Une police système à chiffres de même largeur : le nombre reste net
     et centré, là où la police du site le déformait à cette taille. */
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:11.5px;font-weight:700;line-height:1;letter-spacing:0;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  box-shadow:0 2px 6px -2px rgba(208,87,79,.8);
}

/* ==========================================================================
   Responsive — l'admin devient une application mobile
   ========================================================================== */
@media (max-width:1080px){
  .content{padding:20px}
  .topbar{padding:14px 20px}
}

@media (max-width:860px){
  body{font-size:15px;padding-bottom:0}
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;z-index:120;transform:translateX(-100%);
    transition:transform .28s var(--ease);width:278px;height:100dvh;
  }
  .sidebar.open{transform:none}
  .sidebar-bg{position:fixed;inset:0;background:rgba(22,21,15,.4);z-index:110;display:none}
  .sidebar-bg.open{display:block}
  .main{padding-bottom:96px}
  .topbar{padding:12px 16px;gap:10px}
  .search{max-width:none}
  .content{padding:16px 16px 40px}
  h1{font-size:25px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .tile{min-height:150px;padding:18px}
  .tile-value{font-size:40px}
  .card{padding:18px;border-radius:var(--r-lg)}
  .tabbar{display:block}
  .mobile-only{display:block}
  .desktop-only{display:none !important}
  .modal-box{
    margin:0;position:absolute;left:0;right:0;bottom:0;width:100%;max-height:92dvh;
    border-radius:26px 26px 0 0;animation:sheet .28s var(--ease);padding:22px 18px calc(22px + env(safe-area-inset-bottom));
  }
  @keyframes sheet{from{transform:translateY(100%)}to{transform:none}}
  .modal-box::before{content:'';display:block;width:40px;height:4px;border-radius:999px;background:var(--line);margin:-6px auto 16px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .auth-split{grid-template-columns:1fr}
  .auth-visual{display:none}
  .table-wrap{margin:0 -18px;padding:0 18px}
  .actionbar.on{display:flex}
  .actionbar.on+.tabbar,.has-actionbar .tabbar{display:none}
  .bkx{padding:16px 14px 130px}
  .bkx-hero{min-height:180px}
  .bkx-hero h1{font-size:26px}
  .month-cell{min-height:72px;padding:5px}
  .month-cell .n{font-size:12.5px}
  .cards-grid{grid-template-columns:1fr 1fr;gap:12px}
  .mini-card .cover{height:104px}
}

@media (max-width:420px){
  .tiles{grid-template-columns:1fr 1fr;gap:10px}
  .tile{padding:16px;min-height:136px}
  .tile-value{font-size:34px}
  .cards-grid{grid-template-columns:1fr}
}

@media print{
  .sidebar,.topbar,.tabbar,.actionbar,.btn,.icon-btn{display:none !important}
  body{background:#fff}
  .card{border:1px solid #ddd;break-inside:avoid}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ═══════════════════════════════════════════════════════════════
   v1.2 — mobile d'abord : tableaux en cartes, agenda tactile,
   accordéons de planning, extensions
   ═══════════════════════════════════════════════════════════════ */

/* Aucun bouton ne doit se casser sur plusieurs lignes */
.btn{white-space:nowrap}
.btn.wrap{white-space:normal}

/* Badge PRO */
.pro-tag{
  display:inline-flex;align-items:center;padding:2px 7px;border-radius:6px;
  background:var(--amber,#F6D889);color:#5C4708;font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.6;
}
.nav-group.ext{border-top:1px solid var(--line);margin-top:6px;padding-top:18px}
.nav-group.ext>.tiny{color:#9A7B12}
.nav a .pro-tag{margin-left:auto}

/* Carte praticien / accordéon */
.acc{border:1px solid var(--line-2);border-radius:var(--r-md);margin-bottom:10px;background:var(--surface);overflow:hidden}
.acc>summary{
  list-style:none;cursor:pointer;padding:14px 16px;display:flex;align-items:center;gap:12px;
  font-size:15px;font-weight:500;
}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary .chev{margin-left:auto;transition:transform .2s var(--ease);opacity:.5;display:flex}
.acc[open]>summary{border-bottom:1px solid var(--line-2);background:var(--surface-2)}
.acc[open]>summary .chev{transform:rotate(180deg)}
.acc .acc-body{padding:16px}

/* Ligne d'horaire compacte et responsive */
.hrow{
  display:grid;grid-template-columns:104px 92px 1fr 1fr;gap:10px;align-items:center;
  padding:10px 0;border-top:1px solid var(--line-2);
}
.hrow:first-of-type{border-top:0}
.hrow .d{font-size:14px;font-weight:500}
.hrow input[type=time]{padding:9px 10px;font-size:14px;width:100%}
.hrow.off .times{opacity:.35;pointer-events:none}
@media (max-width:700px){
  .hrow{grid-template-columns:1fr 1fr;grid-template-areas:'d sw' 'a b';gap:8px;padding:12px 0}
  .hrow .d{grid-area:d}
  .hrow .sw{grid-area:sw;justify-self:end}
  .hrow .t1{grid-area:a}
  .hrow .t2{grid-area:b}
}

/* ── Tableaux : cartes empilées sur mobile, plus aucun défilement latéral ── */
@media (max-width:760px){
  .tbl.cards,.tbl.cards thead,.tbl.cards tbody,.tbl.cards tr,.tbl.cards td{display:block;width:100%}
  .tbl.cards thead{display:none}
  .tbl.cards tr{
    background:var(--surface-2);border-radius:var(--r-md);padding:14px;margin-bottom:10px;
    border:1px solid var(--line-2);
  }
  .tbl.cards td{
    border:0;padding:5px 0;display:flex;align-items:center;justify-content:space-between;
    gap:14px;text-align:right;
  }
  .tbl.cards td::before{
    content:attr(data-l);font-size:12px;color:var(--muted);text-align:left;
    flex:0 0 auto;font-weight:400;
  }
  .tbl.cards td[data-l='']::before,.tbl.cards td:not([data-l])::before{content:''}
  .tbl.cards td.head{
    display:block;text-align:left;font-size:16px;font-weight:500;padding-bottom:10px;
    margin-bottom:6px;border-bottom:1px solid var(--line-2);
  }
  .tbl.cards td.head::before{display:none}
  .tbl.cards td.right{text-align:right}
  .tbl.cards .cell-sub{text-align:right}
  .table-wrap{overflow:visible;margin:0;padding:0}
}

/* ── Agenda mobile ─────────────────────────────────────────── */
.daystrip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.daystrip::-webkit-scrollbar{display:none}
.daystrip button{
  flex:0 0 auto;width:52px;padding:9px 0;border-radius:16px;border:1px solid var(--line-2);
  background:var(--surface);text-align:center;cursor:pointer;transition:.15s;position:relative;
}
.daystrip button .dw{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.daystrip button .dn{font-size:17px;font-weight:500;margin-top:2px}
.daystrip button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.daystrip button.on .dw{color:rgba(255,255,255,.6)}
.daystrip button .dot{
  display:block;width:5px;height:5px;border-radius:50%;background:var(--ink);
  margin:4px auto 0;opacity:.55;
}
.daystrip button.on .dot{background:#fff}
.daystrip button.today .dn{text-decoration:underline;text-underline-offset:3px}

/* Rendez-vous en cartes (vue liste + jour mobile) */
.ag-day{margin-bottom:18px}
.ag-day>.tiny{position:sticky;top:0;background:var(--surface);padding:8px 0;z-index:2}
/* Ligne de rendez-vous : l'heure d'abord, le client sur sa ligne, la
   prestation en dessous, le montant et l'état alignés à droite.
   Le nom et la prestation se retrouvaient sur la même ligne, et le montant
   empilait l'état : la ligne devenait haute et illisible. */
.ag-card{
  display:flex;gap:14px;align-items:center;background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:12px 14px;margin-bottom:9px;cursor:pointer;transition:.15s;
}
.ag-card:hover{background:var(--line-2)}
.ag-card .bar{align-self:stretch;width:4px;border-radius:999px;flex:0 0 4px;background:var(--lilac)}
.ag-card .h{display:flex;flex-direction:column;justify-content:center;flex:0 0 auto;min-width:56px;line-height:1.2}
.ag-card .h b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ag-card .h span{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}
.ag-card .m{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ag-card .m .n{
  display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-card .m .s{
  display:block;font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ag-card .r{
  display:flex;align-items:center;gap:10px;flex:0 0 auto;text-align:right;
}
.ag-card .r b{font-size:15.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.ag-card .r .badge{flex:none}
@media (max-width:560px){
  .ag-card{gap:11px;padding:11px 12px}
  .ag-card .r{flex-direction:column;align-items:flex-end;gap:5px}
  .ag-card .h{min-width:48px}
}
.ag-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:10px}

/* Mois : pastilles + jour sélectionné détaillé en dessous */
.mcal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mcal .dw{text-align:center;font-size:11px;color:var(--muted);padding-bottom:6px;text-transform:uppercase}
.mcal button{
  aspect-ratio:1;border:0;background:none;border-radius:14px;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:15px;
  color:var(--ink);transition:.15s;position:relative;
}
.mcal button:hover{background:var(--surface-2)}
.mcal button.out{opacity:.3}
.mcal button.today{box-shadow:inset 0 0 0 1.5px var(--line)}
.mcal button.on{background:var(--ink);color:#fff}
.mcal .dots{display:flex;gap:2.5px;height:5px}
.mcal .dots i{width:5px;height:5px;border-radius:50%;display:block}
.mcal button.on .dots i{background:#fff !important}
.mcal .cnt{font-size:10px;color:var(--muted)}
.mcal button.on .cnt{color:rgba(255,255,255,.7)}

@media (min-width:861px){
  .mcal button{aspect-ratio:auto;min-height:56px}
}

/* ── Forfaits sur la page de réservation ───────────────────── */
.tabs-seg{margin:0 0 18px;width:100%;display:flex}
.tabs-seg button{flex:1;justify-content:center;display:inline-flex;align-items:center;gap:7px}
.tabs-seg .pill{
  background:rgba(22,21,15,.12);border-radius:999px;padding:1px 7px;font-size:11px;line-height:1.6;
}
.tabs-seg button.on .pill{background:rgba(255,255,255,.22)}

.pack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pack-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  cursor:pointer;transition:.18s var(--ease);display:flex;flex-direction:column;
}
.pack-card:hover{border-color:var(--line)}
.pack-card.on{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.pack-img{height:112px;background-size:cover;background-position:center;background-color:var(--surface-2)}
.pack-body{padding:16px 17px;display:flex;flex-direction:column;gap:12px;flex:1}
.pack-inc{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pack-inc li{
  display:flex;align-items:baseline;gap:8px;font-size:13.5px;padding:7px 11px;
  background:var(--surface-2);border-radius:11px;
}
.pack-inc li .q{font-weight:600;font-size:12.5px;background:var(--lilac);border-radius:7px;padding:1px 6px;flex:0 0 auto}
.pack-inc li small{margin-left:auto;color:var(--muted);font-size:11.5px;flex:0 0 auto}
.pack-foot{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:auto;
  padding-top:12px;border-top:1px solid var(--line-2);flex-wrap:wrap;
}
.pack-foot>div{display:flex;flex-direction:column;gap:1px;min-width:0}
.pack-price{font-size:22px;font-weight:500;letter-spacing:-.02em}
.pack-card.on .pack-pick{background:var(--ink);color:#fff}

/* Séances déjà payées, en réserve chez le client */
.mypack{background:var(--mint);border-radius:var(--r-lg);padding:16px 18px;margin-bottom:18px}
.mypack-list{display:flex;gap:9px;overflow-x:auto;padding-top:12px;scrollbar-width:none}
.mypack-list::-webkit-scrollbar{display:none}
.mypack-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.75);
  border:1px solid transparent;border-radius:14px;padding:9px 14px;cursor:pointer;text-align:left;
  font-size:13.5px;color:var(--ink);
}
.mypack-chip .n{
  width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font-size:12.5px;font-weight:500;flex:0 0 26px;
}
.mypack-chip small{display:block;color:var(--muted);font-size:11px}
.mypack-chip.on{background:#fff;border-color:var(--ink)}

@media (max-width:520px){
  .pack-grid{grid-template-columns:1fr}
  .pack-img{height:92px}
  .pack-foot{flex-direction:column;align-items:stretch}
  .pack-foot .btn{width:100%}
}
.chip.static{cursor:default;pointer-events:none;background:var(--surface-2);border-color:var(--line-2);font-size:12px}
/* Icône décorative d'en-tête de carte : discrète et de taille fixe */
.head-ic{display:inline-flex;flex:0 0 auto;opacity:.35}
.head-ic svg{width:20px;height:20px}
.card-head>svg{width:20px;height:20px;flex:0 0 20px;opacity:.35}

/* ── Éditeur de modèles d'e-mails ─────────────────────────────── */
.mail-preview{
  border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden;background:#F2F2F7;
  height:230px;position:relative;
}
.mail-preview.tall{height:440px;overflow:auto}
.mail-scale{transform:scale(.62);transform-origin:top left;width:161%;pointer-events:none}
.mail-preview.tall .mail-scale{transform:scale(.78);width:128%;pointer-events:auto}
.mail-canvas{
  background:#F2F2F7;border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:0;min-height:420px;max-height:60vh;overflow:auto;outline:none;
}
.mail-canvas:focus{border-color:var(--line)}
.editor-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:8px;margin-bottom:10px;
  background:var(--surface-2);border-radius:var(--r-md);
}
.editor-bar button{
  min-width:32px;height:32px;padding:0 9px;border:0;background:transparent;border-radius:9px;
  cursor:pointer;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;justify-content:center;
}
.editor-bar button:hover{background:var(--surface)}
.editor-bar button svg{width:15px;height:15px}
.editor-bar .sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.code-area{
  width:100%;min-height:420px;max-height:60vh;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px;line-height:1.6;padding:14px;border-radius:var(--r-md);border:1px solid var(--line-2);
  background:var(--surface-2);resize:vertical;
}
@media (max-width:900px){
  .mail-editor{grid-template-columns:1fr !important}
  .mail-scale{transform:scale(.55);width:182%}
}

/* ═══════════════════════════════════════════════════════════════
   v1.3 — graphiques, cartes de synthèse, carte d'extension
   ═══════════════════════════════════════════════════════════════ */

.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.card.kpi{padding:18px 20px;display:block;text-decoration:none;color:inherit;transition:.18s var(--ease)}
a.card.kpi:hover{transform:translateY(-2px);border-color:var(--line)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.kpi-label{font-size:13.5px;color:var(--muted);font-weight:400}
.kpi-ic{width:32px;height:32px;border-radius:50%;background:var(--surface-2);display:grid;place-items:center;flex:0 0 32px}
.kpi-ic svg{width:15px;height:15px;opacity:.55}
.kpi-body{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.kpi-value{font-size:32px;font-weight:300;letter-spacing:-.03em;line-height:1.05}
.kpi-value small{font-size:16px;opacity:.5}
.kpi-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.kpi-trend{display:inline-flex;align-items:center;gap:2px;font-weight:500}
.kpi-trend.up{color:#3F7A4B}.kpi-trend.down{color:#9A4046}
.kpi-trend svg{width:12px;height:12px}
.kpi-chart{flex:0 0 auto;opacity:.95}
.kpi-chart .ch{display:block}

.ch-bars{width:100%;height:auto;display:block}
.ch-wrap{overflow-x:auto;overflow-y:hidden;margin:0 -4px;padding:0 4px}
.ch-donut{display:block;margin:0 auto}
.ch-legend{margin-top:16px;display:grid;gap:9px;font-size:13.5px}
.ch-legend i{width:9px;height:9px;border-radius:50%;display:block;flex:0 0 9px}
.ch-gauge{display:block;margin:0 auto}

/* Cartes « prochains rendez-vous » façon fiches */
.next-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.next-card{
  background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:14px;text-decoration:none;color:inherit;display:block;transition:.15s;
}
.next-card:hover{background:var(--line-2)}
.next-card .who{display:flex;gap:10px;align-items:center;margin-bottom:10px}
.next-card .who b{font-size:14.5px;font-weight:500;display:block}
.next-card .who span{font-size:12px;color:var(--muted)}
.next-card .meta{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted);padding-top:9px;border-top:1px dashed var(--line-2)}
.next-card .meta svg{width:13px;height:13px;opacity:.6}

/* Encart premium d'extension */
.promo{
  position:relative;overflow:hidden;border-radius:var(--r-lg);padding:26px 28px;color:#fff;
  background:linear-gradient(135deg,#211F17 0%,#3B3550 45%,#6E5A86 100%);
  display:flex;gap:24px;align-items:center;flex-wrap:wrap;
}
.promo::after{
  content:'';position:absolute;right:-60px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,rgba(247,223,200,.55),rgba(201,190,236,.25) 55%,transparent 70%);
}
.promo .txt{position:relative;z-index:1;flex:1;min-width:240px}
.promo h3{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:8px;color:#fff}
.promo p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.78);max-width:60ch}
.promo ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.promo ul li{font-size:13.5px;color:rgba(255,255,255,.9);display:flex;gap:8px;align-items:center}
.promo ul li svg{width:14px;height:14px;opacity:.8}
.promo .cta{position:relative;z-index:1;display:flex;flex-direction:column;gap:9px;min-width:200px}
.promo .cta .btn{background:#fff;color:var(--ink)}
.promo .cta .btn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.promo .tagline{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:10px}
@media (max-width:700px){.promo{padding:22px}.promo .cta{width:100%}}

/* Zone de dépôt de fichier */
.drop{
  display:block;width:100%;box-sizing:border-box;
  border:1.5px dashed var(--line);border-radius:var(--r-md);padding:26px 20px;text-align:center;
  background:var(--surface-2);cursor:pointer;transition:.15s;
}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--surface)}
.drop svg{width:26px;height:26px;opacity:.4;margin-bottom:10px}
.drop input[type=file]{
  position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;clip:rect(0 0 0 0);
}
.drop{position:relative}
.up-form .field{margin-top:16px}
.drop .fname{font-size:13.5px;font-weight:500;margin-top:8px}

/* ═══════════════════════════════════════════════════════════════
   v1.3 — garde-fous de responsivité : rien ne dépasse jamais
   ═══════════════════════════════════════════════════════════════ */
html,body{max-width:100%;overflow-x:hidden}
.main,.content{min-width:0;max-width:100%}
.card,.tile,.kpi{min-width:0}
img,video,iframe{max-width:100%}
svg{max-width:100%}
pre,code{white-space:pre-wrap;word-break:break-word}
.grid-2,.grid-3,.tiles,.kpi-grid,.cards-grid,.next-cards{min-width:0}
.grid-2>*,.grid-3>*,.tiles>*,.kpi-grid>*,.cards-grid>*,.next-cards>*{min-width:0}
.row,.row-between{min-width:0}
.cell-main,.cell-sub,.kpi-value{overflow-wrap:anywhere}

@media (max-width:760px){
  .grid-2,.grid-3{grid-template-columns:1fr !important}
  .table-wrap{overflow:visible !important}
  .tbl.cards td .row{flex-wrap:nowrap;min-width:0}
  .tbl.cards td .row>div{min-width:0}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .kpi-chart{display:none}
  .kpi-value{font-size:26px}
  .card.kpi{padding:15px 16px}
  .next-cards{grid-template-columns:1fr}
  .modal.open{padding:0;align-items:flex-end}
  .modal-box{
    width:100%;max-width:100%;border-radius:var(--r-xl) var(--r-xl) 0 0;
    max-height:92vh;padding:22px 18px calc(22px + env(safe-area-inset-bottom));
    animation:sheet .24s var(--ease);
  }
  @keyframes sheet{from{transform:translateY(30px);opacity:.6}to{transform:none;opacity:1}}
}
@media (max-width:420px){ .kpi-grid{grid-template-columns:1fr} }

/* Forfaits dans l'espace client */
.pack-use{margin-top:16px;display:grid;gap:10px}
.pack-use-row{
  display:flex;align-items:center;gap:14px;background:var(--surface-2);
  border-radius:var(--r-md);padding:13px 15px;
}
.pack-use-row .btn{flex:0 0 auto}
@media (max-width:520px){
  .pack-use-row{flex-wrap:wrap}
  .pack-use-row .btn{width:100%}
}

/* Composition d'un forfait, côté back-office */
.pk-list{display:grid;gap:8px;max-height:320px;overflow-y:auto;padding-right:4px}
.pk-row{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid transparent;transition:.15s;
}
.pk-row.on{background:var(--surface);border-color:var(--ink)}
.stepper{display:inline-flex;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;flex:0 0 auto}
.stepper button{
  width:32px;height:32px;border:0;background:none;font-size:17px;line-height:1;cursor:pointer;color:var(--ink);
  border-radius:50%;
}
.stepper button:hover{background:var(--surface-2)}
.stepper input{
  width:40px;border:0;background:none;text-align:center;font-size:14px;padding:0;
  -moz-appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pk-sum{margin-top:14px;padding:13px 15px;border-radius:var(--r-md);background:var(--surface-2);display:grid;gap:7px;font-size:13.5px}

/* Grille d'équipe : jamais de débordement sur petit écran */
.team-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.team-grid .mini-card .body{padding:16px}
.team-grid .row{min-width:0}
.team-grid .row>div{min-width:0}
.team-grid strong,.team-grid .cell-main{overflow-wrap:anywhere}
@media (max-width:620px){
  .team-grid{grid-template-columns:1fr}
  .team-grid .mini-card .cover{height:88px}
}

/* Page de mise à jour */
.up-hero{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:stretch}
.up-state{
  background:linear-gradient(150deg,#211F17,#3B3550);color:#fff;border-radius:var(--r-lg);padding:24px 26px;
  display:flex;flex-direction:column;justify-content:center;
}
.up-state .tiny{color:rgba(255,255,255,.55)}
.up-state .small.muted{color:rgba(255,255,255,.6)}
.up-version{font-size:42px;font-weight:300;letter-spacing:-.04em;line-height:1.05;margin:6px 0 8px}
.up-form{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:20px}
/* Une sauvegarde par ligne : la date à gauche, les actions à droite.
   L'ancienne mise en page se disloquait dès que la colonne se resserrait. */
.bk-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-top:1px solid var(--line-2);flex-wrap:wrap;
}
.bk-when{min-width:0}
.bk-when b{display:block;font-size:14px;font-weight:500;white-space:nowrap}
.bk-when small{font-size:12px;color:var(--muted)}
.bk-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-form{display:flex;align-items:center;gap:8px}
.bk-form input[type=password]{
  width:170px;padding:9px 13px;font-size:13.5px;border:1px solid var(--line);
  border-radius:11px;background:var(--surface-2);font-family:inherit;
}
.bk-form input[type=password]:focus{outline:none;border-color:var(--ink);background:#fff}
@media (max-width:760px){
  .bk-row{flex-direction:column;align-items:stretch;gap:10px}
  .bk-act{width:100%}
  .bk-form{flex:1}
  .bk-form input[type=password]{flex:1;width:auto}
}
.bk-row:first-of-type{border-top:0}
@media (max-width:860px){
  .up-hero{grid-template-columns:1fr}
}

/* ── Icônes : taille par défaut, jamais d'étirement ─────────── */
svg.ic{width:20px;height:20px;flex:0 0 auto;display:inline-block;vertical-align:middle}
.acc>summary svg.ic{width:18px;height:18px;opacity:.5}
.acc>summary .chev svg.ic{width:16px;height:16px}
.drop svg.ic{width:26px;height:26px;opacity:.4;margin-bottom:10px;display:block;margin-left:auto;margin-right:auto}
.empty svg.ic{width:38px;height:38px;opacity:.35;margin:0 auto 12px;display:block}
.promo ul li svg.ic{width:14px;height:14px;opacity:.8}
.kpi-ic svg.ic{width:15px;height:15px}
.head-ic svg.ic{width:20px;height:20px}
.card-head>svg.ic{width:20px;height:20px;opacity:.35}
.next-card .meta svg.ic{width:13px;height:13px;opacity:.6}
.pack-hint svg.ic{width:13px;height:13px}
.editor-bar button svg.ic{width:15px;height:15px}
/* Les graphiques, eux, doivent bien occuper toute la largeur */
svg.ch-bars{width:100%;height:auto}

/* ═══════════════════════════════════════════════════════════════
   v1.4 — harmonisation : colonne de gauche pleine hauteur,
   en-têtes, cartes et rythme identiques sur toutes les pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Colonne de gauche : elle ne s'arrête plus en cours de page ── */
@media (min-width:861px){
  .shell{
    display:block;min-height:100dvh;
    background:linear-gradient(90deg,var(--surface) 0 var(--sidebar),transparent var(--sidebar));
  }
  .sidebar{
    position:fixed;left:0;top:0;bottom:0;width:var(--sidebar);height:100dvh;
    padding:22px 16px 18px;overflow-y:auto;overscroll-behavior:contain;z-index:60;
    scrollbar-width:thin;scrollbar-color:var(--line) transparent;
  }
  .sidebar::-webkit-scrollbar{width:6px}
  .sidebar::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
  .sidebar::-webkit-scrollbar-track{background:transparent}
  .main{margin-left:var(--sidebar);min-height:100dvh;display:flex;flex-direction:column}
  /* Scopé à la barre latérale : sinon la marque de la page de connexion
     héritait de ce fond blanc et débordait sur la photo. */
  .sidebar .brand{
    position:sticky;top:-22px;background:var(--surface);z-index:2;
    margin:-22px -16px 18px;padding:22px 26px 16px;
  }
}

/* ── Barre du haut : même respiration que le contenu ── */
.topbar{
  padding:14px 32px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);min-height:64px;
}
.content{padding:24px 32px 72px;max-width:1500px;margin:0 auto}

/* ── En-tête de page : identique partout, actions accessibles au doigt ── */
.page-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid var(--line-2);
}
.page-head-txt{min-width:0}
.page-head h1{font-size:28px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:5px}
.page-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}

/* ── Cartes : un seul rythme pour toute l'application ── */
.card{padding:22px}
.card-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-bottom:16px;min-height:32px;
}
.card-head h3{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.card-head .small.muted{margin-top:3px;font-weight:400}
.card.pad-sm{padding:16px}
.mt-lg{margin-top:22px}
.tiny{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:500}

/* Deux colonnes de blocs : même gouttière partout */
.cols{display:grid;gap:18px;align-items:start}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}

/* ── Accessibilité : cible tactile et focus toujours visibles ── */
.btn,.icon-btn,.nav-item,.tab,.chip,.seg button{min-height:40px}
.btn-sm{min-height:34px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ink);outline-offset:2px;border-radius:8px;
}
.nav-item:focus-visible{outline-offset:-2px}

/* ── Ajustements mobiles ── */
@media (max-width:860px){
  .topbar{padding:10px 16px;min-height:58px}
  .content{padding:16px 16px 110px}
  .page-head{
    padding-bottom:14px;margin-bottom:16px;align-items:flex-start;
    flex-direction:column;gap:12px;
  }
  .page-head h1{font-size:23px}
  .page-actions{width:100%}
  .page-actions .btn{flex:1;justify-content:center}
  .card{padding:18px 16px}
  .cols-2{grid-template-columns:1fr;gap:14px}
}
.cols-split{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.cols-aside{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.cols-main{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:1100px){
  /* minmax(0,1fr) et non 1fr : sans cela, un contenu large impose sa largeur
     à la colonne et fait déborder toute la page. */
  .cols-split,.cols-aside,.cols-main{grid-template-columns:minmax(0,1fr)}
}
.cols>*{min-width:0}

/* Onglets : même respiration que les en-têtes, défilables au doigt */
.tabs{gap:22px;margin-bottom:20px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:0 0 12px}
@media (max-width:760px){
  .tabs{margin:0 -16px 18px;padding:0 16px;gap:18px}
}

/* Alertes : icône implicite par la couleur, texte lisible, pas d'à-plat criard */
.alert{display:flex;gap:10px;align-items:flex-start;line-height:1.5}
.alert .grow{min-width:0}

/* États vides : même hauteur et même ton partout */
.empty{padding:44px 20px;text-align:center;color:var(--muted)}
.empty h3{font-size:16px;font-weight:500;color:var(--ink-2);margin-bottom:6px}
.empty p{font-size:13.5px;max-width:44ch;margin:0 auto}
.empty .btn{margin-top:16px}

/* Tuiles pastel : même hauteur que les cartes de synthèse */
.tiles{gap:14px}

/* Barre d'outils de l'agenda alignée sur l'en-tête de page */
.cal-toolbar{gap:10px;margin-bottom:16px}
@media (max-width:760px){
  .cal-toolbar{margin:0 -16px 14px;padding:0 16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .cal-toolbar::-webkit-scrollbar{display:none}
  .cal-toolbar>*{flex:0 0 auto}
}

/* Titres de section, hors carte */
.sec{font-size:18px;font-weight:600;letter-spacing:-.02em;margin:26px 0 12px}
.sec:first-child{margin-top:0}
.sec-lead{font-size:20px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}

/* Barre d'agenda : les vues restent toujours atteignables */
.cal-label{font-size:17px;letter-spacing:-.02em;min-width:180px}

/* Carte de partage du lien public */
.share-card{
  color:#fff;border:0;background:linear-gradient(150deg,#211F17,#3B3550 70%,#6E5A86);
  background-size:cover;background-position:center;
}
.share-card .tiny{color:rgba(255,255,255,.55)}
.share-card h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:6px 0 8px}
.share-card p{color:rgba(255,255,255,.78);line-height:1.55}
.share-card .btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22)}
.share-card .btn-light:hover{background:rgba(255,255,255,.24)}

/* Champs de fichier : même langage visuel que les boutons */
input[type=file]{
  width:100%;padding:9px 12px;border:1px dashed var(--line);border-radius:var(--r-sm);
  background:var(--surface-2);font-size:13.5px;color:var(--muted);cursor:pointer;
}
input[type=file]:hover{border-color:var(--ink);background:#fff}
input[type=file]::file-selector-button{
  margin-right:12px;padding:8px 15px;border:0;border-radius:999px;
  background:var(--ink);color:#fff;font:inherit;font-size:13px;font-weight:500;cursor:pointer;
}
input[type=file]::file-selector-button:hover{opacity:.86}
.drop input[type=file]{border:0;padding:0;background:none}

/* En mode cartes, plus rien n'impose sa largeur à la page */
@media (max-width:760px){
  .tbl.cards td.nowrap,.tbl.cards .nowrap{white-space:normal}
  .tbl.cards td,.tbl.cards td *{max-width:100%;overflow-wrap:anywhere}
  .tbl.cards{table-layout:fixed;width:100%}
}
@media (max-width:760px){
  table.tbl.cards{min-width:0}
}

/* ═══════════════════════════════════════════════════════════════
   v1.5 — espace client sur ordinateur, expérience mobile en app
   ═══════════════════════════════════════════════════════════════ */

/* L'espace client réutilise le socle de l'admin */
.client-app .content{max-width:1100px}
.client-app .sidebar .nav-item{font-size:14.5px}

/* ── Mobile : tout devient une application ─────────────────── */
@media (max-width:860px){
  .tabbar{display:block}
  .client-app .content{padding-bottom:110px}

  /* Barre du haut plus légère, titre dans la page */
  .topbar{
    position:sticky;top:0;z-index:70;background:rgba(242,242,247,.94);
    border-bottom:0;padding:10px 16px;
  }
  .page-head{border-bottom:0;padding-bottom:6px;margin-bottom:14px}
  .page-head h1{font-size:26px;font-weight:600}

  /* Sur mobile, les créations passent par le bouton « + » de la barre.
     Les actions de navigation — ouvrir un devis, revenir à la liste — sont
     marquées « keep » et restent accessibles : sans elles, des écrans
     devenaient inatteignables au téléphone. */
  .page-actions:not(.keep){display:none !important}

  /* Cartes plus généreuses, séparations plus douces */
  .card{border-radius:20px;padding:17px 16px}
  .cols,.cols-2{gap:12px}
  .mt-lg{margin-top:16px}
}

/* ── Modales : vraies feuilles plein écran sur mobile ──────── */
@media (max-width:760px){
  .modal.open{padding:0;align-items:stretch}
  .modal-box{
    width:100%;max-width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    padding:0 0 calc(84px + env(safe-area-inset-bottom));display:flex;flex-direction:column;
    animation:sheetUp .26s var(--ease);
  }
  @keyframes sheetUp{from{transform:translateY(24px);opacity:.7}to{transform:none;opacity:1}}
  .modal-box>form,.modal-box>.stack{padding:0 18px}
  .modal-head{
    position:sticky;top:0;z-index:3;background:var(--surface);margin:0 -0 18px;
    padding:16px 18px;border-bottom:1px solid var(--line-2);
  }
  .modal-head h2{font-size:19px}
  /* Le bouton d'enregistrement reste visible en bas de la feuille */
  .modal-box form>.btn:last-child,
  .modal-box form>.row:last-child,
  .modal-box .modal-actions{
    position:fixed;left:0;right:0;bottom:0;z-index:4;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line-2);
    margin:0;
  }
  .modal-box form>.btn:last-child{width:calc(100% - 32px);margin:0 16px;min-height:50px;border-radius:16px}
  .modal-box form>.row:last-child>*{flex:1}
}

/* ── Écran « Menu » de l'application mobile ─────────────────── */
.hub-banner{
  border-radius:22px;padding:22px;position:relative;overflow:hidden;margin-bottom:18px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--ink);
}
.hub-banner::after{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--ink),var(--accent,var(--lilac)));
}
.hub-banner .tiny{color:var(--muted);position:relative}
.hub-banner .v{font-size:34px;font-weight:600;letter-spacing:-.03em;margin:4px 0 14px;position:relative}
.hub-banner .btn{position:relative;background:var(--surface-2);color:var(--ink);border:1px solid var(--line-2)}

.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hub-tile{
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;padding:16px 15px;
  display:flex;flex-direction:column;gap:12px;text-decoration:none;color:inherit;min-height:104px;
}
.hub-tile:active{background:var(--surface-2)}
.hub-tile .ic{
  width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 40px;
}
.hub-tile .ic svg{width:19px;height:19px}
.hub-tile b{font-size:14.5px;font-weight:500;line-height:1.3}
.hub-tile small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.hub-list{background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;margin-top:14px}
.hub-list a{
  display:flex;align-items:center;gap:12px;padding:15px 16px;text-decoration:none;color:inherit;
  border-top:1px solid var(--line-2);font-size:14.5px;
}
.hub-list a:first-child{border-top:0}
.hub-list a .chev{margin-left:auto;opacity:.35}

/* Prochain rendez-vous, espace client */
/* Teinte plus franche : le brun tirait vers le terne. Un dégradé profond
   vers le violet du thème donne du relief sans jurer avec le reste. */
.next-hero{
  background:linear-gradient(140deg,#1A1826 0%,#2E2748 46%,#5B4BC4 100%);
  color:#fff;border:0;position:relative;overflow:hidden;
}
.next-hero::after{
  content:'';position:absolute;right:-60px;top:-70px;width:220px;height:220px;
  border-radius:50%;background:rgba(255,255,255,.07);
}
.next-hero > *{position:relative;z-index:2}
.next-hero .tiny{color:rgba(255,255,255,.55)}
.next-hero .h{font-size:38px;font-weight:300;letter-spacing:-.04em;margin:8px 0 2px}
.next-hero .d{font-size:15.5px}
.next-hero .s{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:10px}
.next-hero .btn-light{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.22)}
.next-hero .btn-light:hover{background:rgba(255,255,255,.24)}
/* Sur mobile, le bouton central de la barre d'onglets suffit */
@media (max-width:860px){ .client-app .page-actions{display:none} }

/* ═══════════════════════════════════════════════════════════════
   v1.6 — bannières, cartes-modules, tableau de bord embriqué
   ═══════════════════════════════════════════════════════════════ */

/* ── Bannière d'action : dégradé sidéral et bulles photo ────── */
.banner{
  position:relative;overflow:hidden;border-radius:22px;padding:28px 30px;color:#fff;
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:18px;min-height:170px;
  background:
    radial-gradient(120% 140% at 88% 50%, #C86BB4 0%, #7B4BC9 26%, #3A2470 52%, #14121C 76%),
    linear-gradient(100deg,#0C0B12 0%,#171522 46%,#2A2140 100%);
}
.banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(70% 120% at 8% 50%, #0C0B12 30%, rgba(12,11,18,.86) 55%, transparent 78%);
}
.banner.mint{background:radial-gradient(120% 140% at 88% 50%,#7FBE8C 0%,#3E7A5C 28%,#1E3A33 55%,#12140F 78%),linear-gradient(100deg,#0C0F0B,#182018)}
.banner.peach{background:radial-gradient(120% 140% at 88% 50%,#E8A96A 0%,#B9713C 28%,#5A3524 55%,#17110C 78%),linear-gradient(100deg,#100D0A,#221A13)}
.banner.sky{background:radial-gradient(120% 140% at 88% 50%,#6FA8DA 0%,#3C6C9E 28%,#1E3550 55%,#0D1219 78%),linear-gradient(100deg,#0B0E12,#161C24)}
.banner .b-txt{position:relative;z-index:2;flex:1;min-width:260px;max-width:640px}
.banner .b-txt .tiny{color:rgba(255,255,255,.55)}
.banner h3{font-size:22px;font-weight:600;letter-spacing:-.02em;margin:6px 0 8px;color:#fff}
.banner p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82)}
.banner .b-cta{position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:16px}
.banner .b-cta .btn{background:#fff;color:var(--ink);border:0}
.banner .b-cta .btn.ghost{background:transparent;color:#fff;border:0;padding-left:4px}
.banner .b-cta .btn.ghost:hover{text-decoration:underline}
.b-close-form{position:absolute;top:0;right:0;z-index:4}
.banner .b-close{
  position:absolute;top:14px;right:14px;z-index:3;width:32px;height:32px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;display:grid;place-items:center;
}
/* Bulles photo, à droite */
.b-bubbles{position:absolute;right:-10px;top:0;bottom:0;width:46%;z-index:1;pointer-events:none}
.b-bubbles i{
  position:absolute;display:block;border-radius:50%;background-size:cover;background-position:center;
  background-color:rgba(255,255,255,.1);box-shadow:0 14px 34px rgba(0,0,0,.34);
}
.b-bubbles i:nth-child(1){width:74px;height:74px;right:56%;top:8%}
.b-bubbles i:nth-child(2){width:96px;height:96px;right:30%;top:-4%}
.b-bubbles i:nth-child(3){width:118px;height:118px;right:2%;top:14%}
.b-bubbles i:nth-child(4){width:86px;height:86px;right:44%;top:56%}
.b-bubbles i:nth-child(5){width:104px;height:104px;right:12%;top:62%}
@media (max-width:900px){ .b-bubbles{width:58%;opacity:.55} }
@media (max-width:700px){
  .banner{padding:22px;border-radius:20px}
  .b-bubbles{display:none}
  .banner .b-cta{width:100%}
  .banner .b-cta .btn{flex:1;justify-content:center}
}

/* ── Cartes-modules (extensions, maintenance) ───────────────── */
.tool-grid,.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.tool-card,.mod-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:22px;
  display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:.18s var(--ease);
}
.tool-card:hover,.mod-card:hover{border-color:var(--line);transform:translateY(-2px)}
.tool-card .ic,.mod-card .ic{
  width:46px;height:46px;border-radius:15px;display:grid;place-items:center;flex:0 0 46px;margin-bottom:4px;
}
.tool-card .ic svg,.mod-card .ic svg{width:21px;height:21px;color:var(--ink)}
.ic.lilac{background:linear-gradient(140deg,#E9E3FB,#C9BEEC)}
.ic.mint{background:linear-gradient(140deg,#E6F1E4,#B9D8B4)}
.ic.peach{background:linear-gradient(140deg,#FCEBDA,#F2C79A)}
.ic.sky{background:linear-gradient(140deg,#E6EFF8,#A9C9E8)}
.ic.rose{background:linear-gradient(140deg,#FBE7EA,#EFB9C0)}
.tool-card b,.mod-card b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.tool-card p{font-size:13.5px;color:var(--muted);line-height:1.6;flex:1}
/* Sur une carte d'extension, la liste suit le résumé et les boutons se
   posent en bas : les cartes s'alignent sans trou au milieu. */
.mod-card p{font-size:13.5px;color:var(--muted);line-height:1.6}
.mod-card .row{margin-top:auto}
.tool-card .go{display:inline-flex;align-items:center;gap:5px;font-size:13.5px;font-weight:500;margin-top:4px}
.tool-card .go svg{width:14px;height:14px}
.mod-card .row{margin-top:6px}
.mod-card .chips{margin-top:2px}

/* ── Tableau de bord : blocs alignés en haut, rythme unique ─── */
.cols{align-items:start}
.cols.stretch{align-items:stretch}
.cols>.stack{display:flex;flex-direction:column;gap:16px}
.cols>.stack>.card{margin:0}
.card.flex{display:flex;flex-direction:column}
.card.flex .ch-wrap{margin-top:auto}
.next-cards.one{grid-template-columns:1fr}
.next-cards.one .next-card{display:flex;align-items:center;gap:12px;padding:12px 14px}
.next-cards.one .next-card .who{margin:0;flex:1;min-width:0}
.next-cards.one .next-card .meta{border:0;padding:0;white-space:nowrap;flex:0 0 auto}

/* ═══════════════════════════════════════════════════════════════
   Page de réservation — version ordinateur
   Parti pris : une seule colonne, pleine largeur, du haut en bas.
   Le résumé descend dans la barre d'action : plus de colonne latérale,
   donc plus de vide à droite. Le mobile n'est pas concerné.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width:861px){

  .bkx{
    max-width:none;width:100%;padding:0 0 96px;display:block;
  }
  .bkx > *{max-width:1320px;margin-left:auto;margin-right:auto}
  /* La barre fixe et l'en-tête couvrent l'écran entier */
  .bkx > .bkx-bar,.bkx > .bkx-top{max-width:none;margin:0}

  /* En-tête et photo ne font qu'un : le menu se pose par-dessus l'image */
  .bkx-top{max-width:none;padding:0 0 34px;margin:0 0 24px}
  .bkx-top-in{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
  .bkx-topbar{max-width:1320px;margin:0 auto;padding:18px clamp(20px,4vw,40px) 0}
  .bkx-top h1{font-size:clamp(34px,3.4vw,46px)}
  .bkx-top .lead{font-size:16.5px;margin-top:7px}

  /* Fil des étapes : pastilles reliées, coche verte une fois franchi */
  .bkx .steps{
    display:flex;align-items:flex-start;gap:0;padding:0;list-style:none;
    margin:0 auto 18px;width:calc(100% - clamp(40px,8vw,80px));max-width:1320px;
  }
  .bkx .steps .step-dot{
    flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;
    width:auto;height:auto;background:none;border-radius:0;font-size:12.5px;color:var(--muted);
  }
  .bkx .steps .step-dot::before{
    content:'';position:absolute;top:10px;left:calc(-50% + 16px);right:calc(50% + 16px);
    height:2px;background:var(--line-2);border-radius:2px;transition:background .3s var(--ease);
  }
  .bkx .steps .step-dot:first-child::before{display:none}
  .bkx .steps .step-dot i{
    width:22px;height:22px;border-radius:50%;flex:none;position:relative;z-index:2;
    background:var(--surface-2);border:2px solid var(--line-2);
    display:grid;place-items:center;color:transparent;
    transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease);
  }
  .bkx .steps .step-dot i svg{width:11px;height:11px;display:block}
  .bkx .steps .step-dot b{font-weight:500;letter-spacing:-.01em}
  .bkx .steps .step-dot.on{color:var(--ink)}
  .bkx .steps .step-dot.on i{
    background:var(--surface);border-color:#1DA05A;
    box-shadow:inset 0 0 0 4px var(--surface),inset 0 0 0 10px #1DA05A;
  }
  .bkx .steps .step-dot.done{color:#1DA05A}
  .bkx .steps .step-dot.done i{background:#1DA05A;border-color:#1DA05A;color:#fff;box-shadow:none}
  .bkx .steps .step-dot.done::before,.bkx .steps .step-dot.on::before{background:#1DA05A}

  /* Chaque étape : une carte pleine largeur, sans voisine vide */
  .bkx section[data-step]{
    background:var(--surface);border:1px solid var(--line-2);border-radius:22px;
    padding:30px clamp(24px,3vw,36px);margin:0 auto 18px;
    width:calc(100% - clamp(40px,8vw,80px));max-width:1320px;
  }
  .bkx .sec-lead{font-size:23px;font-weight:600;letter-spacing:-.03em;margin:0 0 4px}
  .bkx .tabs-seg{width:auto;display:inline-flex;margin-bottom:6px}
  .bkx .tabs-seg button{padding:0 20px;height:36px;font-size:13.5px;flex:none}
  .bkx section[data-step] > .muted.small{margin-bottom:22px}

  /* Prestations : la grille remplit toute la largeur */
  /* La grille vit maintenant dans .svc-grid ; le conteneur redevient neutre */
  .bkx #tabUnit{display:block}
  .bkx .pack-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

  /* Carte de prestation : exactement le dessin des cartes « Avec qui ? » —
     une petite image carrée, le nom, la description, le prix à droite. */
  .bkx #tabUnit .svc-item,
  .bkx .staff-grid .svc-item{
    display:flex;align-items:center;gap:14px;margin:0;padding:14px;
    border:1px solid var(--line-2);border-radius:18px;background:var(--surface);
    transition:border-color .16s var(--ease),background .16s var(--ease);
  }
  .bkx #tabUnit .svc-item:hover,
  .bkx .staff-grid .svc-item:hover{border-color:var(--line)}
  .bkx #tabUnit .svc-item.on,
  .bkx .staff-grid .svc-item.on{border-color:var(--ink);background:var(--surface-2)}
  .bkx #tabUnit .svc-item .thumb,
  .bkx .staff-grid .svc-item .thumb{width:62px;height:62px;border-radius:15px;flex:none;font-size:20px}
  .bkx #tabUnit .svc-item .grow{padding:0;min-width:0}
  .bkx #tabUnit .svc-item .grow strong{font-size:15.5px;letter-spacing:-.01em}
  .bkx #tabUnit .svc-item .right{padding:0;text-align:right;flex:none}
  .bkx #tabUnit .svc-item .svc-price{background:none;padding:0;font-size:15.5px;font-weight:600}

  /* Une prestation sur devis se place après les prestations tarifées */
  .bkx #tabUnit .svc-item.is-quote{order:2}

  /* Praticiens : même principe */
  .bkx .staff-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .bkx .staff-grid .svc-item{margin:0;border:1px solid var(--line-2);border-radius:16px;padding:14px;width:auto}

  /* Date et heure : calendrier à gauche, créneaux sur tout le reste */
  .when-grid{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:30px;align-items:start}
  .when-cal{border-right:1px solid var(--line-2);padding-right:30px}
  .bkx .mini-cal{max-width:none}
  .when-day{margin:0 0 14px}
  .when-slots .slots{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px;max-height:none}
  .when-slots .slots button{min-height:46px;border-radius:14px;font-size:15px}

  /* Coordonnées : deux colonnes de champs */
  .bkx section[data-step="4"] > .card:first-of-type{display:none}
  .bkx section[data-step="4"] .grid-2{gap:0 16px}

  /* Le résumé quitte la colonne de droite : il vit dans la barre du bas */
  .bkx .actionbar{display:none !important}

  /* Barre d'action : pleine largeur, résumé à gauche, boutons à droite */
  .bkx-bar{
    position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
    border-top:1px solid var(--line-2);
  }
  .bkx-bar .in{
    max-width:none;margin:0;padding:13px clamp(20px,4vw,40px);
    display:flex;align-items:center;gap:14px;
  }
  .bkx-bar .tot{flex:1;min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
  .bkx-bar .tot .r-chip{
    display:inline-flex;align-items:center;gap:7px;background:var(--surface-2);
    border-radius:999px;padding:6px 13px;font-size:13px;color:var(--ink-2);
  }
  .bkx-bar .tot .r-chip b{font-weight:600;color:var(--ink)}
  .bkx-bar .tot .r-tot{margin-left:auto;font-size:14px;color:var(--muted)}
  .bkx-bar .tot .r-tot b{font-size:19px;font-weight:600;color:var(--ink);margin-left:8px;font-variant-numeric:tabular-nums}
  .bkx-bar .btn{min-height:48px;border-radius:15px;font-size:15px;padding:0 32px}
  .bkx-bar .btn.btn-ghost{padding:0 18px}

  /* Confirmation : centrée, l'écran se vide de tout le reste */
  .bkx section[data-step="5"]{max-width:760px}
}


.side-sum{display:grid;gap:7px;font-size:14px;margin-bottom:6px}
.side-sum .small.muted{margin:0}
@media (max-width:860px){ .side-sum{display:none} }

/* ── Feuille de choix du bouton « + » ───────────────────────── */
.choice-list{display:grid;gap:10px;padding:4px 0 8px}
.choice{
  display:flex;align-items:center;gap:14px;padding:15px 16px;border-radius:18px;
  background:var(--surface-2);text-decoration:none;color:inherit;
}
.choice:active{background:var(--line-2)}
.choice .ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:0 0 44px}
.choice .ic svg{width:20px;height:20px}
.choice .t{flex:1;min-width:0}
.choice .t b{display:block;font-size:15.5px;font-weight:500}
.choice .t small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.choice .chev{opacity:.35;display:flex}
@media (max-width:760px){
  .modal-box.sheet-choice{height:auto;max-height:84dvh;border-radius:24px 24px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .modal-box.sheet-choice .choice-list{padding:0 18px 8px}
  .modal.open:has(.sheet-choice){align-items:flex-end}
}
/* Sur mobile, les actions d'en-tête passent par le bouton « + » */
@media (max-width:860px){ .page-actions:not(.keep){display:none} }
/* Client de passage : on ne demande que le strict nécessaire */
#newClientForm.walkin .field.opt{display:none}
#newClientForm.walkin .grid-2{grid-template-columns:1fr}

/* ═══════════════════════════════════════════════════════════════
   v1.7 — catalogue, forfaits, promotions : cartes soignées,
   et listes mobiles pensées au doigt
   ═══════════════════════════════════════════════════════════════ */

.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.mini-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:.18s var(--ease);
}
.mini-card:hover{border-color:var(--line);transform:translateY(-2px)}
.mini-card .cover{
  height:128px;background-size:cover;background-position:center;position:relative;
}
.mini-card .cover::after{
  content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(21,20,27,.28),transparent 55%);
}
.mini-card .cover .price-tag{
  position:absolute;right:12px;bottom:12px;z-index:2;background:rgba(255,255,255,.95);
  border-radius:999px;padding:5px 12px;font-size:14px;font-weight:600;letter-spacing:-.01em;
}
.mini-card .cover .flags{position:absolute;left:12px;top:12px;z-index:2;display:flex;gap:6px}
.mini-card .body{padding:16px 17px;display:flex;flex-direction:column;gap:8px;flex:1}
.mini-card .body h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.mini-card .foot{display:flex;gap:8px;margin-top:auto;padding-top:12px}

/* Promotions en cartes */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px}
.promo-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:18px;
  display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden;
}
.promo-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,#8B72D9,#5B4BC4);
}
.promo-card.off{opacity:.6}
.promo-card .code{
  font-size:19px;font-weight:600;letter-spacing:.06em;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.promo-card .val{font-size:26px;font-weight:300;letter-spacing:-.03em}
.promo-card .meta{display:grid;gap:5px;font-size:12.5px;color:var(--muted)}
.promo-card .foot{display:flex;gap:8px;margin-top:auto;padding-top:8px}

/* ── Listes mobiles : une ligne = une cible ────────────────── */
.mlist{display:none}
@media (max-width:760px){
  .mlist{display:block;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
  .mlist .row-link{
    display:flex;align-items:center;gap:12px;padding:13px 14px;border-top:1px solid var(--line-2);
    text-decoration:none;color:inherit;
  }
  .mlist .row-link:first-child{border-top:0}
  .mlist .row-link:active{background:var(--surface-2)}
  .mlist .row-link .t{flex:1;min-width:0}
  .mlist .row-link .t b{display:block;font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mlist .row-link .t small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mlist .row-link .r{flex:0 0 auto;text-align:right;font-size:14px;font-weight:500}
  .mlist .row-link .r small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
  .mlist .sec-row{padding:11px 14px;background:var(--surface-2);font-size:11px;letter-spacing:.1em;
                  text-transform:uppercase;color:var(--muted);border-top:1px solid var(--line-2)}
  .hide-mobile{display:none !important}
  /* Recherche collante en haut des listes */
  .list-search{position:sticky;top:58px;z-index:20;background:var(--canvas);padding:0 0 12px;margin:0}
}

/* Mention Pro discrète, en tête des pages fournies par une extension */
.pro-mark{
  display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted);
  margin-bottom:10px;
}
.pro-mark .pro-tag{margin:0}

/* ── Page d'erreur ──────────────────────────────────────────── */
.err-page{min-height:100dvh;display:grid;place-items:center;padding:24px}
.err-card{
  background:var(--surface);border:1px solid var(--line-2);border-radius:26px;
  padding:40px 34px;max-width:520px;text-align:center;
}
.err-faces{display:flex;justify-content:center;margin-bottom:22px}
.err-faces i{
  width:62px;height:62px;border-radius:50%;background-size:cover;background-position:center;
  border:3px solid var(--surface);margin-left:-14px;display:block;
}
.err-faces i:first-child{margin-left:0}
.err-faces i:nth-child(3){width:78px;height:78px;margin-top:-8px}
.err-code{font-size:13px;letter-spacing:.22em;color:var(--muted);margin-bottom:8px}
.err-card h1{font-size:26px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.err-card p{color:var(--muted);font-size:15px;line-height:1.6}

/* ── Agenda mobile : bandeau de jours, résumé, créneaux libres ── */
.daystrip button .cnt{
  display:block;font-size:11px;color:var(--muted);margin-top:3px;font-weight:500;
}
.daystrip button.on .cnt{color:rgba(255,255,255,.75)}
.daystrip button.closed{opacity:.45}
.dayhead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:14px 0 8px;
}
.dayhead b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.dayhead span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.dayhead .r{text-align:right}
.dayhead .r b{font-size:17px}
.daybar{margin-bottom:6px}
.gap-slot{
  display:block;width:100%;margin:8px 0;padding:12px;border-radius:14px;cursor:pointer;
  border:1.5px dashed var(--line);background:transparent;color:var(--muted);
  font:inherit;font-size:13px;text-align:center;
}
.gap-slot:hover,.gap-slot:active{border-color:var(--ink);color:var(--ink);background:var(--surface)}
.gap-slot.wide{border-style:solid;background:var(--surface)}
/* Ligne de tableau entièrement cliquable */
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover{background:var(--surface-2)}

/* ── Formulaires longs : avatar, sections, repli ────────────── */
.form-avatar{display:flex;justify-content:center;padding:6px 0 18px}
.form-avatar .avatar.xl{
  width:96px;height:96px;font-size:30px;background:var(--lilac);color:#4B3E7A;
}
.form-avatar .avatar.xl svg{width:38px;height:38px;opacity:.6}
.form-sec{padding:16px 0;border-top:1px solid var(--line-2)}
.form-sec:first-of-type{border-top:0;padding-top:0}
.form-sec-t{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.form-more{border-top:1px solid var(--line-2);margin-bottom:18px}
.form-more>summary{
  list-style:none;cursor:pointer;padding:15px 0;font-size:14.5px;font-weight:500;
  display:flex;align-items:center;gap:10px;
}
.form-more>summary::-webkit-details-marker{display:none}
.form-more>summary .chev{margin-left:auto;opacity:.45;transition:transform .2s var(--ease);display:flex}
.form-more[open]>summary .chev{transform:rotate(180deg)}

/* Logo du salon à la place de la marque par défaut */
.brand .mark.img{background:none;padding:0;overflow:hidden}
.brand .mark.img img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.brand .mark.light{background:#fff;color:var(--ink)}
.brand .mark.light.img{background:#fff}

/* Choix du style d'établissement */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.theme-opt{
  display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:14px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--surface-2);
}
.theme-opt.on{border-color:var(--ink);background:var(--surface)}
.theme-opt input{display:none}
.theme-opt .sw{width:30px;height:30px;border-radius:10px;position:relative;flex:0 0 30px}
.theme-opt .sw i{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;border:2px solid var(--surface)}
.theme-opt .lb{font-size:13.5px;font-weight:500}
.avatar.img{background:none;overflow:hidden}
.avatar.img img{width:100%;height:100%;object-fit:cover}

/* ── Histogrammes en HTML : lisibles à toutes les largeurs ──── */
.cbars{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:stretch;min-width:0}
.cb-axis{
  display:flex;flex-direction:column;justify-content:space-between;height:var(--h,230px);
  font-size:11px;color:var(--muted);text-align:right;padding-bottom:22px;
}
.cb-plot{
  display:flex;align-items:flex-end;gap:2%;height:var(--h,230px);position:relative;min-width:0;overflow:hidden;
  background:repeating-linear-gradient(to top,transparent 0,transparent calc((100% - 22px)/4 - 1px),
             var(--line-2) calc((100% - 22px)/4 - 1px),var(--line-2) calc((100% - 22px)/4));
  background-size:100% calc(100% - 22px);background-repeat:no-repeat;background-position:top;
}
.cb-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.cb-track{position:relative;flex:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px}
.cb-track i{
  display:block;width:min(78%,42px);border-radius:10px 10px 3px 3px;position:absolute;bottom:2px;
}
.cb-col.zero .cb-fill{display:none}
.cb-ghost{background:var(--line-2)}
.cb-fill{background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff))}
.cb-lbl{
  height:20px;line-height:20px;text-align:center;font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Trop de colonnes : on n'affiche qu'un libellé sur n, à toutes les largeurs */
.cb-lbl.thin{visibility:hidden}
@media (max-width:760px){
  .cbars{grid-template-columns:26px minmax(0,1fr);gap:7px}
  .cb-track i{width:min(80%,26px)}
}
/* Repli si color-mix n'est pas géré */
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .cb-fill{background:var(--c)}
}

/* Connexion client embarquée : le panneau visuel disparaît */
.auth-split.embed{grid-template-columns:1fr;min-height:0}
.auth-split.embed .auth-visual{display:none}
.auth-split.embed .auth-form{padding:24px 20px}
.embed-cat{padding:16px !important;display:block !important;max-width:none !important}

/* ── Constructeur d'intégration ─────────────────────────────── */
.wsel{display:grid;gap:10px}
.wsel-opt{
  display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:16px;cursor:pointer;
  border:1.5px solid var(--line-2);background:var(--surface-2);
}
.wsel-opt.on{border-color:var(--ink);background:var(--surface)}
.wsel-opt input{display:none}
.wsel-opt .ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 40px}
.wsel-opt .ic svg{width:19px;height:19px}
.wsel-opt .t b{display:block;font-size:14.5px;font-weight:500}
.wsel-opt .t small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.code-box{
  background:var(--surface-2);border-radius:14px;padding:15px;font-size:12.5px;line-height:1.6;
  overflow:auto;white-space:pre-wrap;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.link-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line-2)}
.link-row:first-of-type{border-top:0}
.link-row .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 38px}
.link-row .ic svg{width:18px;height:18px}
.link-row b{font-size:14.5px;font-weight:500}
.link-input{margin-top:7px;font-size:12.5px;padding:8px 11px}
.prev-btn-wrap{text-align:center;padding:10px 0 18px;border-bottom:1px dashed var(--line-2);margin-bottom:16px}
.prev-frame{
  border:1px solid var(--line-2);border-radius:18px;overflow:hidden;background:var(--canvas);height:560px;
}
.prev-frame iframe{width:100%;height:100%;border:0;display:block}

/* ── Planning : aperçu de la semaine type ───────────────────── */
.wk{position:relative;padding-top:22px}
.wk-scale{position:absolute;top:0;left:78px;right:96px;height:18px}
.wk-scale span{position:absolute;transform:translateX(-50%);font-size:11px;color:var(--muted)}
.wk-row{display:grid;grid-template-columns:78px 1fr 96px;align-items:center;gap:10px;padding:6px 0}
.wk-d{font-size:13.5px;font-weight:500}
.wk-track{position:relative;height:26px;border-radius:9px;background:var(--surface-2);display:block}
.wk-track i{
  position:absolute;top:3px;bottom:3px;border-radius:7px;
  background:linear-gradient(90deg,#5B4BC4,#8B72D9 60%,#B9A9EE);
}
.wk-h{font-size:12.5px;color:var(--muted);text-align:right}
.wk-row.off .wk-h{opacity:.6}
@media (max-width:700px){
  .wk-scale{left:56px;right:0}
  .wk-row{grid-template-columns:56px 1fr;gap:8px}
  .wk-h{grid-column:1 / -1;text-align:left;margin-top:-4px}
}
/* Le planning respire en deux colonnes larges sur ordinateur */
@media (min-width:1100px){
  .sched-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
}

/* ── Extension Équipe Pro : pointage et absences ────────────── */
.clock-hero{
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  background:linear-gradient(140deg,#15141B,#2C2740 70%,#4B4270);color:#fff;border:0;
}
.clock-hero.on{background:linear-gradient(140deg,#15141B,#26402F 65%,#3F6F5B)}
.clock-hero .tiny{color:rgba(255,255,255,.55)}
.clock-hero .v{font-size:34px;font-weight:300;letter-spacing:-.03em;margin:6px 0 2px}
.clock-hero .small.muted{color:rgba(255,255,255,.65)}
.clock-hero input{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);color:#fff}
.clock-hero input::placeholder{color:rgba(255,255,255,.5)}
.clock-hero .btn{background:#fff;color:var(--ink)}
.clock-hero .btn-light{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.24)}
.abs-row{
  display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--line-2);flex-wrap:wrap;
}
.abs-row:first-of-type{border-top:0}
.abs-row b{font-size:14.5px;font-weight:500}
@media (max-width:700px){
  .clock-hero{flex-direction:column;align-items:stretch;text-align:left}
  .clock-hero form{width:100%}
  .clock-hero .btn{width:100%;justify-content:center}
  .clock-hero input{width:100% !important}
  .abs-row .row{width:100%}
  .abs-row .row .btn{flex:1;justify-content:center}
}


/* ── Menus déroulants sur mobile : jamais hors écran ────────── */
@media (max-width:760px){
  .dd-menu{
    position:fixed !important;top:64px !important;left:12px !important;right:12px !important;
    min-width:0 !important;width:auto !important;max-height:70dvh;overflow:auto;
    border-radius:18px;padding:8px;box-shadow:0 18px 44px rgba(21,20,27,.18);
  }
}

/* Sous-menu d'extension : un onglet, ses pages en dessous */
.nav-sub{margin-bottom:2px}
/* Onglet d'extension dépliable */
.nav-sub>summary{list-style:none;cursor:pointer}
.nav-sub>summary::-webkit-details-marker{display:none}
.nav-sub>summary .chev{margin-left:auto;opacity:.4;display:flex;transition:transform .2s var(--ease)}
.nav-sub>summary .chev svg{width:15px;height:15px}
.nav-sub[open]>summary .chev{transform:rotate(180deg)}
.nav-sub>summary .pro-tag{margin-left:auto}
.nav-sub>summary .pro-tag+.chev{margin-left:8px}
.nav-sub-items{display:block;padding:2px 0 10px 46px;position:relative}
.nav-sub-items::before{
  content:'';position:absolute;left:26px;top:2px;bottom:12px;width:1.5px;background:var(--line-2);border-radius:2px;
}
.nav-sub-item{
  display:block;padding:8px 12px;border-radius:10px;font-size:13.5px;color:var(--muted);
}
.nav-sub-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-sub-item.active{color:var(--ink);font-weight:600;background:var(--surface-2)}
.nav-sub-item.active::before{
  content:'';position:absolute;left:25px;width:3.5px;height:16px;margin-top:5px;border-radius:2px;background:var(--ink);
}
.nav-sub-item{position:relative}
.nav-sub>.nav-item .pro-tag{margin-left:auto}
/* La carte entière est cliquable, et le curseur le dit */
.theme-opt,.wsel-opt{-webkit-tap-highlight-color:transparent}
.theme-opt:active,.wsel-opt:active{transform:scale(.995)}

/* Colonnes de même hauteur : les cartes remplissent leur rangée */
.cols.stretch>.card,.cols.stretch>.stack{height:100%}
.cols.stretch>.stack{display:flex;flex-direction:column}
.cols.stretch>.stack>.card:last-child{flex:1}
.cols.stretch>.card{display:flex;flex-direction:column}
.cols.stretch>.card>.ch-wrap,.cols.stretch>.card>.cbars{margin-top:auto}
.switch.big{padding:6px 0}
.switch.big .txt{font-size:15px;font-weight:500}

/* ── Sélecteur déroulant (prestations d'une réservation) ────── */
.picker{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);overflow:hidden}
.picker>summary{
  list-style:none;cursor:pointer;padding:13px 14px;display:flex;align-items:center;gap:10px;
  font-size:15px;color:var(--ink);
}
.picker>summary::-webkit-details-marker{display:none}
.picker>summary .chev{margin-left:auto;opacity:.45;transition:transform .2s var(--ease);display:flex}
.picker[open]>summary{border-bottom:1px solid var(--line-2);background:var(--surface)}
.picker[open]>summary .chev{transform:rotate(180deg)}
.picker-list{max-height:320px;overflow:auto;background:var(--surface);padding:6px}
.picker-sec{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:10px 10px 6px;
}
.picker-row{
  display:flex;align-items:center;gap:12px;width:100%;padding:11px 10px;border:0;border-radius:12px;
  background:none;cursor:pointer;text-align:left;font:inherit;color:var(--ink);
}
.picker-row:hover{background:var(--surface-2)}
.picker-row .tick{
  width:22px;height:22px;border-radius:8px;border:1.5px solid var(--line);display:grid;place-items:center;
  flex:0 0 22px;color:transparent;
}
.picker-row .tick svg{width:14px;height:14px}
.picker-row.on .tick{background:var(--ink);border-color:var(--ink);color:#fff}
.picker-row .t{flex:1;min-width:0}
.picker-row .t b{display:block;font-size:14.5px;font-weight:500}
.picker-row .t small{display:block;font-size:12px;color:var(--muted)}
.picker-row .p{font-size:14px;font-weight:500;flex:0 0 auto}
.picked-sum{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:9px;font-size:13px;color:var(--muted);
}
.picked-sum strong{color:var(--ink);white-space:nowrap}

/* ── Feuilles mobiles : marges internes cohérentes ──────────── */
@media (max-width:760px){
  .modal-box{padding:0 0 calc(84px + env(safe-area-inset-bottom))}
  .modal-box>*{padding-left:18px;padding-right:18px}
  .modal-box>.modal-head{padding:16px 18px}
  .modal-box>form{padding-left:18px;padding-right:18px}
  .modal-box .field:first-of-type{margin-top:16px}
  .picker-list{max-height:46dvh}
}

/* Agenda : bandes de fond hors ouverture, week-end légèrement teinté */
.cal-col{background:linear-gradient(to bottom,transparent,transparent)}
.cal-slot.closed{background:#FAFAFD}
.cal-head .cnt{font-variant-numeric:tabular-nums}
.cal-wrap{background:var(--surface);border-radius:var(--r-md)}

/* ── Codes promotionnels : cartes en forme de coupon ────────── */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:16px}
.ticket{
  background:var(--surface);border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 1px 2px rgba(21,20,27,.05),0 0 0 1px var(--line-2);transition:.18s var(--ease);
}
.ticket:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(21,20,27,.10),0 0 0 1px var(--line)}
.ticket.off{opacity:.6}
.tk-top{padding:22px 20px 18px;position:relative;color:var(--ink)}
.ticket.lilac .tk-top{background:linear-gradient(140deg,#EDE8FC,#D9CFF5)}
.ticket.mint  .tk-top{background:linear-gradient(140deg,#E7F3E5,#C8E4C3)}
.ticket.peach .tk-top{background:linear-gradient(140deg,#FDEEE0,#F6D3AC)}
.ticket.sky   .tk-top{background:linear-gradient(140deg,#E8F1FA,#BFD8EF)}
.ticket.rose  .tk-top{background:linear-gradient(140deg,#FCE9EC,#F3C7CF)}
.tk-top .badge{position:absolute;top:16px;right:16px}
.tk-val{font-size:40px;font-weight:300;letter-spacing:-.04em;line-height:1}
.tk-val small{font-size:22px;font-weight:400;margin-left:2px}
.tk-sub{font-size:13px;color:var(--ink-2);margin-top:6px;opacity:.8}
/* Perforation façon ticket */
.tk-rip{position:relative;height:16px;background:var(--surface)}
.tk-rip::before{
  content:'';position:absolute;left:14px;right:14px;top:50%;
  border-top:2px dashed var(--line);transform:translateY(-50%);
}
.tk-rip i{
  position:absolute;top:50%;width:20px;height:20px;border-radius:50%;
  background:var(--canvas);transform:translateY(-50%);
}
.tk-rip i:first-child{left:-10px}
.tk-rip i:last-child{right:-10px}
.tk-bot{padding:6px 20px 20px;display:flex;flex-direction:column;gap:11px}
.tk-code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:600;
  letter-spacing:.08em;
}
.tk-meta{display:grid;gap:5px;font-size:12.5px;color:var(--muted)}
.tk-meta span{display:flex;align-items:center;gap:6px}
.tk-meta svg{width:14px;height:14px;opacity:.6}
.tk-foot{display:flex;gap:8px;margin-top:2px}

/* ── Bandeau d'installation de l'application (mobile) ───────── */
.pwa-bar{display:none}
@media (max-width:860px){
  .pwa-bar{
    display:flex;align-items:center;gap:12px;padding:11px 14px;
    background:#15141B;color:#fff;position:sticky;top:0;z-index:95;
  }
  .pwa-bar[hidden]{display:none}
  .pw-logo{
    width:38px;height:38px;border-radius:11px;background:#fff;
    display:grid;place-items:center;flex:0 0 38px;overflow:hidden;
  }
  .pw-logo img{padding:3px;object-fit:contain}
  .pw-logo svg{color:var(--ink)}
  .pw-logo img{width:100%;height:100%;object-fit:cover}
  .pw-logo svg{width:18px;height:18px;color:#fff}
  .pw-txt{flex:1;min-width:0;line-height:1.25}
  .pw-txt b{display:block;font-size:14px;font-weight:600}
  .pw-txt small{display:block;font-size:11.5px;color:rgba(255,255,255,.6)}
  .pwa-bar .btn{background:#fff;color:#15141B;flex:0 0 auto;min-height:34px;padding:0 15px}
  .pw-close{
    background:none;border:0;color:rgba(255,255,255,.5);cursor:pointer;padding:4px;display:flex;
  }
  .pw-close svg{width:16px;height:16px}
  .topbar{top:0}
}

/* ── Écrans de connexion sur mobile : photo en haut, feuille blanche ── */
@media (max-width:860px){
  .auth-split{display:block;min-height:100dvh;background:var(--surface)}
  .auth-visual{
    display:block !important;height:46dvh;min-height:280px;position:relative;
    background-size:cover;background-position:center;
  }
  .auth-visual::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(21,20,27,.45) 0%,rgba(21,20,27,.15) 45%,rgba(21,20,27,.55) 100%);
  }
  .auth-visual .q{
    position:absolute;left:22px;right:22px;bottom:64px;z-index:2;color:#fff;
  }
  .auth-visual .q h2{font-size:26px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
  .auth-visual .brand{padding:0 0 14px}
  .auth-form{
    position:relative;z-index:3;margin-top:-40px;border-radius:28px 28px 0 0;background:var(--surface);
    padding:28px 22px calc(32px + env(safe-area-inset-bottom));min-height:60dvh;display:block;
  }
  .auth-form h1{font-size:26px}
  .auth-form .field input{min-height:52px;border-radius:999px;padding:14px 20px}
  .auth-form .btn{min-height:54px;border-radius:999px;font-size:16px}
  .auth-form .field>span{font-size:14px;font-weight:600;color:var(--ink);padding-left:4px}
}

/* Histogramme principal : barres pleines, valeur au sommet, mois en relief */
.cbars.big .cb-plot{gap:1.6%}
.cbars.big .cb-track i{width:min(86%,54px);border-radius:12px 12px 4px 4px}
.cbars.big .cb-ghost{background:var(--surface-2)}
.cbars.big .cb-fill{
  background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 42%,#fff));
  box-shadow:0 4px 14px color-mix(in srgb,var(--c) 30%,transparent);
}
.cbars.big .cb-col.top .cb-fill{
  background:linear-gradient(180deg,var(--ink),color-mix(in srgb,var(--ink) 62%,var(--c)));
  box-shadow:0 6px 18px rgba(21,20,27,.22);
}
.cbars.big .cb-v{
  position:absolute;left:0;right:0;bottom:calc(var(--vh) + 8px);text-align:center;font-size:11.5px;
  font-weight:600;color:var(--ink-2);z-index:2;pointer-events:none;
}
.cbars.big .cb-track{position:relative;padding-bottom:4px}
.cbars.big .cb-lbl{font-size:11.5px;color:var(--ink-2);font-weight:500}
.cbars.big .cb-col.top .cb-lbl{color:var(--ink);font-weight:600}
@media (max-width:760px){
  .cbars.big .cb-v{display:none}
  .cbars.big .cb-track i{width:min(88%,30px)}
}
/* Nom et prénom sur une seule ligne dans les listes mobiles */
.mlist .row-link .t b,.tbl.cards td.head .cell-main{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;
}
@media (max-width:760px){
  .tbl.cards td.head .row{flex-wrap:nowrap}
  .tbl.cards td.head .row>div{min-width:0;flex:1}
}
/* Liste compacte utilisable aussi sur ordinateur */
.mlist.always{display:block;background:none;border:0;border-radius:0}
.mlist.always .row-link{border-top:1px solid var(--line-2);padding:12px 2px}
.mlist.always .row-link:first-child{border-top:0}
.mlist .row-link .hm{
  flex:0 0 auto;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;
  min-width:46px;
}
.mlist .row-link .r small{display:block;margin-top:4px}

/* ── Agenda du jour, tableau de bord ────────────────────────── */
.today-list{display:flex;flex-direction:column;gap:8px}
.today-row{
  display:grid;grid-template-columns:auto 4px minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:11px 13px;border-radius:14px;background:var(--surface-2);text-decoration:none;color:inherit;
  transition:.15s var(--ease);
}
.today-row:hover{background:var(--line-2)}
.tr-h{display:flex;flex-direction:column;line-height:1.15;min-width:0;white-space:nowrap}
.tr-h b{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-h small{font-size:11px;color:var(--muted)}
.tr-bar{align-self:stretch;min-height:32px;border-radius:99px;display:block}
.tr-m{min-width:0}
.tr-m b{display:block;font-size:14.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-m small{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:0 0 auto}
.tr-r b{font-size:14px;font-weight:600}
@media (max-width:520px){
  .today-row{grid-template-columns:50px 4px minmax(0,1fr);row-gap:6px}
  .tr-r{grid-column:3;flex-direction:row;align-items:center;justify-content:space-between;width:100%}
}

/* ═══════════════════════════════════════════════════════════════
   Agenda mobile : bandeau de jours + ligne de temps
   ═══════════════════════════════════════════════════════════════ */
.dstrip{display:flex;gap:6px;overflow-x:auto;padding:2px 0 14px;scrollbar-width:none}
.dstrip::-webkit-scrollbar{display:none}
.dstrip button{
  flex:0 0 auto;width:46px;padding:8px 0 7px;border:0;background:none;border-radius:16px;
  cursor:pointer;text-align:center;font-family:inherit;color:var(--ink);
}
.dstrip button .dw{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dstrip button .dn{
  display:grid;place-items:center;width:38px;height:38px;margin:4px auto 0;border-radius:50%;
  font-size:16px;font-weight:500;
}
.dstrip button.today .dn{box-shadow:inset 0 0 0 1.5px var(--line)}
.dstrip button.on .dn{background:var(--ink);color:#fff;box-shadow:none}
.dstrip button .dt{display:flex;gap:2.5px;justify-content:center;height:5px;margin-top:5px}
.dstrip button .dt i{width:4px;height:4px;border-radius:50%;background:var(--lilac-2)}
.dstrip button.on .dt i{background:var(--ink)}

.timeline{position:relative;margin:6px 0 10px}
.tl-grid{position:absolute;inset:0}
.tl-h{position:absolute;left:0;right:0;display:flex;align-items:center;gap:8px;height:0}
.tl-h span{
  flex:0 0 46px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;
  transform:translateY(-50%);
}
.tl-h i{flex:1;height:1px;background:var(--line-2);display:block}
*.tl-closed{position:absolute;left:54px;right:2px;background:repeating-linear-gradient(
  135deg,transparent 0 6px,var(--surface-2) 6px 12px);border-radius:10px;opacity:.7}
.tl-body{position:absolute;left:54px;right:2px;top:0;bottom:0}
.tl-ev{
  position:absolute;border-radius:14px;overflow:hidden;cursor:pointer;padding:9px 11px;
  background:color-mix(in srgb,var(--c) 40%,#fff);
  border-left:3px solid color-mix(in srgb,var(--c) 82%,#000);
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.tl-ev.st-cancelled,.tl-ev.st-noshow{opacity:.5}
.tl-ev.st-cancelled .tl-t{text-decoration:line-through}
.tl-in{min-width:0;flex:1}
.tl-t{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
.tl-s{font-size:11.5px;color:var(--ink-2);opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tl-p{font-size:12.5px;font-weight:600;flex:0 0 auto;opacity:.85}
.tl-now{position:absolute;left:-6px;right:0;height:2px;background:#D0574F;z-index:3;pointer-events:none}
.tl-now i{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:#D0574F}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .tl-ev{background:var(--surface-2);border-left-color:var(--ink)}
}

/* ── Page Stripe ────────────────────────────────────────────── */
.stripe-hero{
  display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:26px 28px;border-radius:22px;color:#fff;
  background:radial-gradient(120% 150% at 88% 40%,#8B72D9 0%,#5B4BC4 30%,#2A2557 60%,#14121C 82%),
             linear-gradient(100deg,#0C0B12,#1B1A28);
}
.sh-logo{width:84px;height:84px;display:grid;place-items:center;flex:0 0 84px}
.sh-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 26px rgba(0,0,0,.35))}
.sh-txt{flex:1;min-width:260px}
.sh-txt .tiny{color:rgba(255,255,255,.55)}
.sh-txt h2{font-size:23px;font-weight:600;letter-spacing:-.02em;margin:6px 0 8px}
.sh-txt p{font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.82);max-width:64ch}
.sh-state{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.sh-cta{display:flex;flex-direction:column;gap:9px;min-width:190px}
.sh-cta .btn{background:#fff;color:var(--ink);justify-content:center}
.sh-cta .btn.ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.26)}

.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ms-opt{
  text-align:left;border:1.5px solid var(--line-2);background:var(--surface-2);border-radius:16px;
  padding:14px;cursor:pointer;font:inherit;color:var(--ink);
}
.ms-opt.on{border-color:var(--ink);background:var(--surface)}
.ms-t{display:block;font-size:15px;font-weight:600}
.ms-d{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}
@media (max-width:600px){ .mode-switch{grid-template-columns:1fr} .stripe-hero{padding:22px} }

/* ── Fiche rendez-vous : une action principale, le reste compact ── */
.bd-actions{display:flex;flex-direction:column;gap:12px}
.bd-status{margin:0}
.bd-cash{min-height:52px;font-size:16px;border-radius:16px}
.bd-quick{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bd-quick:has(.bd-ic:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}
.bd-ic{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:12px 6px;border:0;border-radius:14px;background:var(--surface-2);cursor:pointer;
  font:inherit;font-size:11.5px;color:var(--ink-2);text-decoration:none;text-align:center;
}
.bd-ic:hover{background:var(--line-2);color:var(--ink)}
.bd-ic svg{width:19px;height:19px}
.bd-ic.danger{color:#9A4046}
.bd-ic.danger:hover{background:#FBE3E6}

/* ── Page « module » (paiements, futures extensions) ────────── */
.module-page{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:24px;align-items:center;
  background:linear-gradient(115deg,#FFFFFF 0%,#F9F8FE 42%,#EFEAFB 70%,#E4DCFA 100%);
  border-radius:26px;padding:38px 40px;overflow:hidden;position:relative;
}
.mp-txt{min-width:0;max-width:720px}
.mp-badge{
  display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;margin-bottom:22px;
}
.mp-badge .ic{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(140deg,#8B72D9,#5B4BC4);color:#fff;
}
.mp-badge .ic svg{width:18px;height:18px}
.module-page h2{font-size:38px;line-height:1.1;font-weight:600;letter-spacing:-.035em;margin-bottom:16px}
.mp-lead{font-size:16px;line-height:1.65;color:var(--ink-2);max-width:60ch}
.mp-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.mp-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:var(--ink-2)}
.mp-list li svg{width:18px;height:18px;flex:0 0 18px;margin-top:2px;color:var(--ink)}
.mp-price{margin-top:26px;padding-top:22px;border-top:1px solid var(--line-2)}
.mp-rates{display:flex;gap:26px;flex-wrap:wrap;margin:12px 0 10px}
.mp-rates b{display:block;font-size:21px;font-weight:600;letter-spacing:-.02em}
.mp-rates span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.mp-stats{display:flex;gap:28px;flex-wrap:wrap;margin:24px 0 6px}
.mp-stats b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em}
.mp-stats span{display:block;font-size:12.5px;color:var(--muted)}
.mp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.mp-cta .btn{min-height:48px;font-size:15.5px}
.mp-visual{display:flex;align-items:center;justify-content:center}
.mp-visual img{width:100%;max-width:360px;filter:drop-shadow(0 26px 54px rgba(91,75,196,.28))}
@media (max-width:980px){
  .module-page{grid-template-columns:1fr;padding:26px 22px;gap:8px}
  .module-page h2{font-size:29px}
  .mp-visual{order:-1}
  .mp-visual img{max-width:210px}
  .mp-cta .btn{flex:1;justify-content:center}
}

/* Aperçu du thème, mis à jour en direct */
.theme-preview{border:1px solid var(--line-2);border-radius:16px;overflow:hidden;margin:6px 0 18px}
.tp-bar{
  display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--ink);color:#fff;font-size:12.5px;
}
.tp-dot{width:9px;height:9px;border-radius:50%;background:var(--accent,var(--lilac))}
.tp-body{padding:18px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface-2)}
.tp-badge{background:var(--accent,var(--lilac));color:var(--ink)}
.tp-bar2{flex:1;min-width:140px;height:8px;background:var(--line-2);border-radius:99px;overflow:hidden}
.tp-bar2 i{display:block;height:100%;background:var(--ink);border-radius:99px}
/* Repère du sous-onglet mal placé : supprimé */
.nav-sub-item.active::before{content:none}

/* Vignette sans photo : aplat discret et initiale, plutôt qu'un dégradé */
.mini-card .cover[data-empty="1"]{
  background:var(--surface-2);
  background-image:
    radial-gradient(circle at 26% 30%, color-mix(in srgb, var(--sc,var(--lilac)) 55%, #fff) 0, transparent 58%),
    radial-gradient(circle at 78% 74%, color-mix(in srgb, var(--sc,var(--lilac)) 34%, #fff) 0, transparent 62%);
}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .mini-card .cover[data-empty="1"]{background:var(--surface-2)}
}

/* Informations du salon, page publique */
.studio-infos{
  margin:0 0 22px;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
}
.studio-infos>summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:14px 16px;
}
.studio-infos>summary::-webkit-details-marker{display:none}
.studio-infos>summary:hover{background:var(--surface-2)}
.si-ic{
  width:40px;height:40px;border-radius:13px;background:var(--lilac);display:grid;place-items:center;flex:0 0 40px;
}
.si-ic svg{width:19px;height:19px}
.si-t{flex:1;min-width:0}
.si-t b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.si-t small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.si-call{flex:0 0 auto}
.studio-infos>summary .chev{opacity:.4;display:flex;transition:transform .2s var(--ease)}
.studio-infos[open]>summary{border-bottom:1px solid var(--line-2)}
.studio-infos[open]>summary .chev{transform:rotate(180deg)}
.si-body{padding:16px}
.si-body .card{background:var(--surface-2);border:0}
@media (max-width:600px){
  .si-call span,.si-call{font-size:0}
  .si-call svg{width:17px;height:17px}
  .si-call{padding:0 12px}
}
.studio-infos .card{padding:16px 17px}
.studio-infos .card-head h3{font-size:14px}
@media (min-width:861px){ .bkx .studio-infos{grid-column:1} }
.si-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.si-row{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:14px;border-top:1px solid var(--line-2)}
.si-row:first-of-type{border-top:0}
.si-row svg{width:17px;height:17px;color:var(--muted);flex:0 0 17px}
.si-days{display:grid;gap:2px}
.si-day{display:flex;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:10px;font-size:14px}
.si-day.now{background:var(--surface-2);font-weight:500}
.si-day b{font-variant-numeric:tabular-nums;font-weight:500}

/* ── Statistiques : blocs de même hauteur, réorganisables ───── */
.stat-grid{columns:2;column-gap:18px;margin-top:18px}
.stat-grid>.stat-block{break-inside:avoid;margin:0 0 16px;display:block}
.stat-block.wide{column-span:all}
.stat-block{display:flex;flex-direction:column}
.stat-block.wide{grid-column:1 / -1}
.stat-block .cbars{margin-top:auto}
.stat-block .card-head{align-items:flex-start}
.stat-block .drag{
  border:0;background:none;cursor:grab;color:var(--muted);padding:4px;display:flex;margin-left:6px;
  opacity:.45;transition:opacity .15s;
}
.stat-block:hover .drag{opacity:1}
.stat-block .drag svg{width:16px;height:16px}
.stat-block.dragging{opacity:.45;outline:2px dashed var(--line)}
.rank-row{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;align-items:center;gap:12px;padding:9px 0}
.rk-n{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-v{text-align:right;font-size:14px;font-weight:600;white-space:nowrap}
.rk-v small{display:block;font-weight:400;font-size:11.5px;color:var(--muted)}
@media (max-width:900px){
  .stat-grid{columns:1}
  .rank-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .rank-row .bar{grid-column:1 / -1}
}

/* ═══════════════════════════════════════════════════════════════
   Agenda sur ordinateur : blocs colorés par praticien, grille douce
   ═══════════════════════════════════════════════════════════════ */
.cal-ev{
  background:color-mix(in srgb,var(--c,#E3DCF5) 34%,#fff);
  box-shadow:none;border:0;border-radius:14px;padding:0;
}
.cal-ev::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:14px 0 0 14px;
  background:color-mix(in srgb,var(--c,#E3DCF5) 88%,#000);
}
.cal-ev-bar{display:none}
.cal-ev-in{padding:7px 10px 7px 13px;min-width:0;overflow:hidden;width:100%}
.cal-ev .t{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink);
           white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev .s{font-size:11.5px;color:var(--ink-2);opacity:.8;margin-top:2px;font-variant-numeric:tabular-nums}
.cal-ev .s2{font-size:11.5px;color:var(--ink-2);opacity:.62;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-ev .who{
  display:inline-block;margin-top:6px;font-size:10.5px;padding:2px 8px;border-radius:99px;
  background:rgba(255,255,255,.7);color:var(--ink-2);
}
.cal-ev:hover{
  box-shadow:0 10px 24px rgba(21,20,27,.16);transform:translateY(-1px);z-index:6;
}
.cal-ev.st-cancelled,.cal-ev.st-noshow{background:var(--surface-2);opacity:.6}
.cal-ev.st-cancelled .t{text-decoration:line-through}

/* Colonne du jour et en-têtes */
.cal-head.today .dn,.cal-head.today strong{
  background:var(--ink);color:#fff;border-radius:12px;padding:3px 10px;display:inline-block;
}
.cal-col.today{background:linear-gradient(to bottom,rgba(139,114,217,.05),rgba(139,114,217,.02))}

/* Heure courante : trait fin et pastille horaire */
.cal-now{height:1.5px;background:#D0574F;z-index:4}
.cal-now span{
  position:absolute;left:-52px;top:-11px;background:var(--ink);color:#fff;font-size:11px;
  padding:3px 8px;border-radius:99px;font-variant-numeric:tabular-nums;
}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .cal-ev{background:var(--surface-2)}
  .cal-ev::before{background:var(--ink)}
}

/* Tableau de bord : la première carte est mise en avant, sans lourdeur */
@media (min-width:900px){
  .kpi-grid.lead-first{grid-template-columns:1.25fr 1fr 1fr 1fr}
  .kpi-grid.lead-first>.kpi:first-child .kpi-value{font-size:40px}
}

/* ═══════════════════════════════════════════════════════════════
   Vue semaine : une colonne par jour, lecture immédiate
   ═══════════════════════════════════════════════════════════════ */
.wk-cols{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}
.wk-col{background:var(--surface-2);border-radius:16px;padding:10px 9px;min-width:0}
.wk-col.today{background:var(--surface);box-shadow:0 0 0 1.5px var(--ink) inset}
.wk-col.closed{opacity:.55}
.wk-head{text-align:center;padding:4px 0 10px;border-bottom:1px solid var(--line-2);margin-bottom:10px}
.wk-head .wd{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.wk-head .dn{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.wk-col.today .wk-head .dn{color:var(--ink)}
.wk-head .meta{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.wk-list{display:flex;flex-direction:column;gap:7px}
.wk-ev{
  display:block;width:100%;text-align:left;border:0;cursor:pointer;font:inherit;color:var(--ink);
  background:color-mix(in srgb,var(--c,#E3DCF5) 32%,#fff);
  border-left:3px solid color-mix(in srgb,var(--c,#E3DCF5) 85%,#000);
  border-radius:10px;padding:8px 9px;min-width:0;
}
.wk-ev:hover{filter:brightness(.97)}
.wk-ev .h{display:block;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.wk-ev .n{display:block;font-size:13px;font-weight:500;margin-top:1px;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-ev .s,.wk-ev .w{display:block;font-size:11px;color:var(--ink-2);opacity:.72;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-ev.st-cancelled,.wk-ev.st-noshow{background:var(--line-2);border-left-color:var(--line);opacity:.65}
.wk-ev.st-cancelled .n{text-decoration:line-through}
.wk-add{
  border:1.5px dashed var(--line);background:none;border-radius:10px;padding:8px;cursor:pointer;
  font:inherit;font-size:12px;color:var(--muted);width:100%;
}
.wk-add:hover{border-color:var(--ink);color:var(--ink)}
@media (max-width:1100px){
  .wk-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .wk-cols{grid-template-columns:1fr;gap:12px}
  .wk-col{padding:12px}
  .wk-head{display:flex;align-items:baseline;gap:10px;text-align:left}
  .wk-head .dn{font-size:19px}
  .wk-head .meta{margin-left:auto}
}


/* ═══════════════════════════════════════════════════════════════
   Grille hebdomadaire : colonnes larges, cartes lisibles
   ═══════════════════════════════════════════════════════════════ */
/* 116 px de large au minimum : les sept jours tiennent dans la grille.
   Au-delà de 158 px, le dimanche sortait du cadre et restait inatteignable. */
.cal-grid{grid-template-columns:64px repeat(var(--cols,1),minmax(116px,1fr))}
.cal-slot{height:30px}
.cal-head{padding:12px 8px 10px}
.cal-head .dw{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.cal-head .dn{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:1px}
.cal-head .cnt{font-size:11px;color:var(--muted);margin-top:2px}
.cal-ev{min-height:38px}
.cal-ev .t{font-size:12.5px;color:color-mix(in srgb,var(--c,#8B72D9) 72%,#000)}
.cal-ev .s{font-size:11px;margin-top:1px}
.cal-now{background:transparent;border-top:1.5px dashed #D0574F}
.cal-now span{left:-58px;top:-10px}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .cal-ev .t{color:var(--ink)}
}

/* ── Tableau de bord : blocs homogènes et déplaçables ───────── */
.dash-grid{columns:2;column-gap:18px;margin-top:18px}
.dash-grid>.dash-block{break-inside:avoid;margin:0 0 16px;display:block}
.dash-block{display:flex;flex-direction:column}

.dash-block .drag{
  border:0;background:none;cursor:grab;color:var(--muted);padding:4px;display:flex;margin-left:6px;opacity:.4;
}
.dash-block:hover .drag{opacity:1}
.dash-block .drag svg{width:16px;height:16px}
.dash-block.dragging{opacity:.45;outline:2px dashed var(--line)}
.dash-block .cbars{margin-top:auto}
.dash-block .today-list{max-height:none}
@media (max-width:1000px){ .dash-grid{columns:1} }


/* ── Créneaux bloqués et menu de créneau ────────────────────── */
.cal-block{
  position:absolute;left:3px;right:3px;z-index:3;border-radius:10px;cursor:pointer;
  background:repeating-linear-gradient(135deg,rgba(21,20,27,.06) 0 6px,rgba(21,20,27,.12) 6px 12px);
  box-shadow:0 0 0 1px var(--line) inset;display:flex;align-items:center;padding:0 9px;overflow:hidden;
}
.cal-block span{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-block:hover{box-shadow:0 0 0 1.5px var(--ink) inset}
.slot-menu{
  position:fixed;z-index:2000;min-width:238px;background:var(--surface);border-radius:16px;
  box-shadow:0 20px 48px rgba(21,20,27,.22),0 0 0 1px var(--line-2);padding:6px;
}
.sm-h{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px 8px;
  font-size:15px;font-weight:600;border-bottom:1px solid var(--line-2);margin-bottom:4px;
}
.sm-x{border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--muted)}
.sm-i{
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:0;background:none;
  border-radius:11px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);text-align:left;
}
.sm-i:hover{background:var(--surface-2)}
.sm-i svg{width:17px;height:17px;opacity:.7}

/* ── Écran de démarrage de l'application installée ──────────── */
.app-splash{
  position:fixed;inset:0;z-index:3000;background:#fff;display:grid;place-items:center;
  transition:opacity .3s var(--ease);
}
.app-splash[hidden]{display:none}
.app-splash.out{opacity:0}
.app-splash img,.app-splash .sp-mark{
  width:88px;height:88px;object-fit:contain;animation:splashTurn 1.1s var(--ease) infinite;
}
.app-splash .sp-mark{display:grid;place-items:center;color:#15141B}
.app-splash .sp-mark svg{width:52px;height:52px}
@keyframes splashTurn{
  0%{transform:rotate(-16deg)}
  50%{transform:rotate(16deg)}
  100%{transform:rotate(-16deg)}
}
@media (prefers-reduced-motion:reduce){ .app-splash img,.app-splash .sp-mark{animation:none} }

/* ── Menu « Ajouter » de l'agenda ───────────────────────────── */
.add-dd{position:relative}
.add-dd>summary{list-style:none;cursor:pointer}
.add-dd>summary::-webkit-details-marker{display:none}
.add-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;padding:6px;
  background:var(--surface);border-radius:16px;box-shadow:0 20px 48px rgba(21,20,27,.2),0 0 0 1px var(--line-2);
}
.add-menu button{
  display:flex;align-items:center;gap:11px;width:100%;padding:11px 12px;border:0;background:none;
  border-radius:11px;cursor:pointer;font:inherit;font-size:14px;color:var(--ink);text-align:left;
}
.add-menu button:hover{background:var(--surface-2)}
.add-menu svg{width:17px;height:17px;opacity:.7}

/* ── Types de blocage prêts à l'emploi ──────────────────────── */
.bt-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bt{
  border:1.5px solid var(--line-2);background:var(--surface-2);border-radius:14px;padding:12px 8px;
  cursor:pointer;font:inherit;text-align:center;color:var(--ink);
}
.bt.on{border-color:var(--ink);background:var(--surface)}
.bt b{display:block;font-size:13.5px;font-weight:600}
.bt span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
@media (max-width:600px){ .bt-row{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* Fenêtres centrées : marges et arrondi sur tous les écrans */
@media (min-width:761px){
  .modal.open{align-items:center;justify-content:center;padding:32px 20px}
  .modal-box{
    max-height:calc(100dvh - 64px);overflow-y:auto;border-radius:24px;padding:26px;
    box-shadow:0 30px 70px rgba(21,20,27,.28);
  }
  .modal-box.wide{max-width:640px}
  .modal-head{
    position:sticky;top:-26px;background:var(--surface);z-index:3;
    margin:-26px -26px 20px;padding:22px 26px 16px;border-bottom:1px solid var(--line-2);
    border-radius:24px 24px 0 0;
  }
}
/* Avatar du praticien en tête de colonne, en vue jour */
.ch-av{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;margin:0 auto 6px;
  font-size:12.5px;font-weight:600;color:var(--ink);
}
.cal-head .dn.nm{font-size:14px;font-weight:600;letter-spacing:-.01em}


/* Horaires au survol : l'heure s'affiche sur les cases libres,
   le détail du rendez-vous passe par l'info-bulle native du navigateur. */
.cal-slot[data-dt]:hover::after{
  content:attr(data-h);position:absolute;left:6px;top:-9px;font-size:10.5px;color:var(--muted);
  background:var(--surface);padding:0 4px;border-radius:6px;pointer-events:none;
}
.cal-slot{position:relative}


/* Bouton officiel de connexion Stripe */
.btn-stripe{
  background:#635BFF;color:#fff;border:0;display:inline-flex;align-items:center;gap:10px;
}
.btn-stripe:hover{background:#5147e6}
.btn-stripe img{border-radius:6px;background:#fff;padding:2px}

/* ═══════════════════════════════════════════════════════════════
   Agenda : corrections de mise en page signalées
   ═══════════════════════════════════════════════════════════════ */

/* Vue liste : une colonne pleine largeur, total du jour aligné dessus */
.ag-cards-grid{display:grid;grid-template-columns:1fr;gap:8px}
.ag-day{max-width:820px}
.ag-day>.tiny{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  border-bottom:1px solid var(--line-2);margin-bottom:10px;
}

/* Barre d'outils sur mobile : chaque chose sur sa ligne, rien ne se chevauche */

/* Ligne de temps mobile : le premier libellé d'heure ne heurte plus le résumé */
.timeline{padding-top:14px}
.dayhead{margin-bottom:16px}
.tl-ev{min-height:44px}
.tl-in{overflow:hidden}
.tl-t{line-height:1.25}
.tl-s{line-height:1.3}

/* Bandeau de jours : dates plus lisibles */
.dstrip button{width:52px}
.dstrip button .dw{font-size:11px;font-weight:600;color:var(--ink-2)}
.dstrip button .dn{width:42px;height:42px;font-size:18px;font-weight:600}
.dstrip button.on .dw{color:var(--ink)}

/* ── Agenda mobile : filtres à taille normale ───────────────── */

/* ── Prochains rendez-vous : la date ne passe plus sous le filet ── */
@media (max-width:520px){
  .today-row{grid-template-columns:auto 4px minmax(0,1fr);row-gap:6px;column-gap:11px}
  .tr-h b{font-size:13.5px}
  .tr-h small{font-size:11px}
}

/* ── Cibles tactiles : tout se touche confortablement sur mobile ── */
@media (max-width:860px){
  .btn-sm,.icon-btn,.chip,.seg button,.drag,.pager a{min-height:36px}
  .icon-btn.rect{min-width:36px}
  .switch .track{width:46px;height:27px}
  .switch .track::after{width:21px;height:21px}
  input[type=time],input[type=date],select,.field input{min-height:46px}
  .sched-row .field input{min-height:44px}
  .stat-block .drag,.dash-block .drag{min-width:36px;opacity:1}
  .kpi{min-height:110px}
}

/* ── Agenda mobile : barre d'outils remise à plat ───────────── */
@media (max-width:860px){

  /* Les sous-titres de page disparaissent : l'écran est déjà étroit */
  .page-head .sub{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   Agenda : barre d'outils lisible, mobile comme ordinateur
   ═══════════════════════════════════════════════════════════════ */
.cal-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.ct-nav{display:flex;align-items:center;gap:8px}
.ct-right{display:flex;align-items:center;gap:10px;margin-left:auto;flex-wrap:wrap}
.ct-filter{position:relative;display:inline-flex;align-items:center;gap:8px}
.ct-filter svg{width:16px;height:16px}
.fbadge{
  background:var(--ink);color:#fff;border-radius:99px;min-width:19px;height:19px;
  display:grid;place-items:center;font-size:11px;font-weight:600;padding:0 5px;
}
.fbadge[hidden]{display:none}
.ct-chips{display:flex;gap:8px;flex-wrap:wrap;margin:-4px 0 12px}
.ct-chips:empty{display:none}
.ct-chips .chip{cursor:pointer}

@media (max-width:760px){
  .cal-toolbar{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
  .cal-label{grid-column:1;grid-row:1;font-size:20px;font-weight:600;margin:0;text-align:left}
  .ct-filter{grid-column:2;grid-row:1;min-height:42px;flex:0 0 auto}
  .ct-nav{grid-column:1 / -1;grid-row:2;display:flex;gap:10px;align-items:center}
  .ct-nav .grow{flex:1}
  .ct-nav .btn-light{margin:0;min-height:44px}
  .ct-right{grid-column:1 / -1;grid-row:3;display:flex;gap:10px;align-items:center;margin:0}
  .seg.views{flex:1;display:flex;min-width:0}
  .seg.views button{flex:1;font-size:13.5px;padding:11px 4px;min-width:0}
  .ct-chips{margin-top:0}
}

/* Résumé du jour, sans redite de la date */
.dayhead b{font-size:15px}
.dayhead .r b{font-size:19px}


/* Fiches de l'accueil : même présentation que la vue liste */
.ag-list{display:flex;flex-direction:column;gap:0}
.ag-list .ag-card{margin-bottom:9px}
.ag-list .ag-card:last-child{margin-bottom:0}
.ag-card .h b{font-variant-numeric:tabular-nums}

/* ── Page Stripe : deux colonnes qui remplissent la largeur ── */
.stripe-grid{columns:2;column-gap:16px}
.stripe-grid>*{break-inside:avoid;margin:0 0 16px;display:block}
.stripe-grid .stack{display:flex;flex-direction:column;gap:16px}
.stripe-adv{width:100%}
@media (max-width:900px){ .stripe-grid{columns:1} }

/* Bouton de filtre : icône seule */
.ct-filter{padding:0 14px}
.ct-filter svg{width:18px;height:18px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Bandeau du menu mobile : teinte du thème, en dégradé léger */
.hub-banner{
  background:linear-gradient(135deg,
      color-mix(in srgb, var(--ink) 92%, #fff) 0%,
      color-mix(in srgb, var(--ink) 74%, var(--accent, var(--lilac))) 62%,
      color-mix(in srgb, var(--accent, var(--lilac)) 72%, #fff) 100%);
  border:0;color:#fff;
}
.hub-banner::after{content:none}
.hub-banner .tiny{color:rgba(255,255,255,.62)}
.hub-banner .v{color:#fff}
.hub-banner .btn{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.24)}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .hub-banner{background:linear-gradient(135deg,var(--ink),var(--lilac-2))}
}

/* ═══════════════════════════════════════════════════════════════
   Accueil sur mobile : l'essentiel d'abord, et de la couleur
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:860px){
  /* L'agenda du jour passe en tête, avant les chiffres */
  .dash-grid{display:flex;flex-direction:column;gap:14px;columns:auto}
  .dash-grid>.dash-block{margin:0}
  .dash-block[data-block="agenda"]{order:-2}
  .dash-block[data-block="next"]{order:-1}

  /* Cartes de synthèse : deux par ligne, teintées, compactes */
  .kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .kpi{padding:15px 14px;min-height:0;border:0}
  .kpi.tone-mint{background:linear-gradient(150deg,#E7F3E5,#F4FAF3)}
  .kpi.tone-lilac{background:linear-gradient(150deg,#EDE8FC,#F7F5FE)}
  .kpi.tone-sky{background:linear-gradient(150deg,#E6EFF9,#F5F9FD)}
  .kpi.tone-peach{background:linear-gradient(150deg,#FCEBDA,#FEF8F2)}
  .kpi-value{font-size:30px}
  .kpi .ch-line,.kpi .ch-mini{display:none}          /* mini-courbes illisibles */
  .kpi-foot{font-size:11.5px}

  /* Ordre voulu : bannière, agenda du jour, revenus, puis les chiffres.
     L'espacement vient de la gouttière, pas des marges : rien ne se colle. */
  .content{display:flex;flex-direction:column;gap:14px}
  .content>*{margin-bottom:0}
  .dash-grid>.dash-block,.dash-block{margin:0}
  .kpi-grid{margin:0}
  .content>.page-head{order:-6}
  .content>.alert{order:-5}
  .content>.banner.mobile-only{order:-4;margin:0 0 14px}
  .dash-grid{display:contents}
  .dash-block[data-block="agenda"]{order:-3}
  .dash-block[data-block="week"]{order:-2}
  .content>.kpi-grid{order:-1}
  .dash-block[data-block="next"]{order:1}
  .dash-block[data-block="ca12"]{order:2}
  .dash-block[data-block="mix"]{order:3}
  .dash-block[data-block="top"]{order:4}


  /* Bannière mobile : compacte, texte court, photos visibles */
  .banner.mobile-only{display:flex;min-height:0;padding:20px}
  .banner.mobile-only h3{font-size:19px;max-width:64%}
  .banner.mobile-only p{display:none}
  .banner.mobile-only .b-txt{min-width:0}
  .banner.mobile-only .b-cta{margin-top:12px}
  /* Trois visages plus petits et bien écartés : à 64-78 px ils se chevauchaient
     et l'un d'eux passait sous le bouton de fermeture. */
  .banner.mobile-only .b-bubbles{display:block;width:38%;right:10px;opacity:.9}
  .banner.mobile-only .b-bubbles i:nth-child(4),
  .banner.mobile-only .b-bubbles i:nth-child(5){display:none}
  .banner.mobile-only .b-bubbles i{width:46px;height:46px;box-shadow:0 8px 20px rgba(0,0,0,.3)}
  /* On laisse le coin haut-droit libre : c'est là que vit la croix de fermeture */
  .banner.mobile-only .b-bubbles i:nth-child(1){right:64%;top:30%}
  .banner.mobile-only .b-bubbles i:nth-child(2){right:32%;top:16%;width:50px;height:50px}
  .banner.mobile-only .b-bubbles i:nth-child(3){right:4%;top:56%;width:42px;height:42px}

  /* Titres de blocs plus francs */
  .dash-block .card-head h3,.stat-block .card-head h3{font-size:16px}
}


/* Bannière réservée au mobile : masquée sur ordinateur, quelle que soit la règle */
@media (min-width:861px){ .banner.mobile-only{display:none} }

/* Mobile : encarts distingués par l'ombre et le fond, sans bordure */
@media (max-width:860px){
  .card,.dash-block,.stat-block{
    border:0;box-shadow:0 1px 2px rgba(21,20,27,.04),0 6px 18px -12px rgba(21,20,27,.16);
  }
  .kpi{box-shadow:0 1px 2px rgba(21,20,27,.05)}
  .ag-card{border:0;background:var(--surface-2)}
  .mlist{border:0;box-shadow:0 1px 2px rgba(21,20,27,.04),0 6px 18px -12px rgba(21,20,27,.16)}
}


/* ═══════════════════════════════════════════════════════════════
   v3.6 — Agenda : barre d'outils, praticiens en photo, rail
   ═══════════════════════════════════════════════════════════════ */

/* ── Barre d'outils : dates à gauche, réglages et vues à droite ── */
.cal-bar{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;
}
@media (min-width:861px){
  /* Sur un écran de portable, la barre passait à la ligne et « Ajouter »
     tombait tout seul en dessous : on resserre et on laisse la date rétrécir. */
  .cal-bar{flex-wrap:nowrap}
  .ct-date{min-width:0}
  .ct-date .cal-label{
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 4px;
  }
  .ct-staff>summary{max-width:190px}
  .ct-staff #stPillName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (min-width:861px) and (max-width:1400px){
  .ct-pill{padding:0 14px;font-size:14px}
  .ct-ic{width:40px;height:40px}
  .ct-date button{width:36px;height:36px}
}
.cal-bar .ct-sep{flex:1 1 auto;min-width:8px}
.cal-bar .cb-break{display:none}

.ct-pill{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;
  border:1px solid var(--line);border-radius:999px;background:var(--surface);
  font-size:14.5px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.ct-pill:hover{border-color:var(--ink);background:var(--surface)}
.ct-pill.dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.ct-pill.dark:hover{opacity:.88}
.ct-pill svg{width:18px;height:18px;flex:none}

/* Date : les flèches font partie de la pastille */
.ct-date{
  display:inline-flex;align-items:center;height:44px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);overflow:hidden;
}
.ct-date button{
  width:42px;height:42px;border:0;background:none;cursor:pointer;display:grid;place-items:center;
  color:var(--ink-2);border-radius:50%;
}
.ct-date button:hover{background:var(--surface-2);color:var(--ink)}
.ct-date button svg{width:17px;height:17px}
.ct-date .cal-label{
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;padding:0 6px;min-width:150px;
  text-align:center;font-variant-numeric:tabular-nums;
}

/* Bouton rond : réglages, planning, rafraîchir, filtres */
.ct-ic{
  width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;cursor:pointer;color:var(--ink-2);position:relative;flex:none;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.ct-ic:hover{border-color:var(--ink);color:var(--ink)}
.ct-ic svg{width:19px;height:19px}
.ct-ic .fbadge{
  position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:10.5px;font-weight:600;display:grid;place-items:center;padding:0 5px;
}
.ct-ic .fbadge[hidden]{display:none}
.ct-ic.spin svg{animation:ctspin .6s var(--ease)}
@keyframes ctspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* Menus déroulants de la barre (praticien, vue, ajouter) */
.ct-dd{position:relative}
.ct-dd>summary{list-style:none;display:inline-flex}
.ct-dd>summary::-webkit-details-marker{display:none}
.ct-dd>summary .chev{display:flex;opacity:.5;transition:transform .18s var(--ease)}
.ct-dd[open]>summary .chev{transform:rotate(180deg)}
.ct-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:60;min-width:230px;
  /* Le menu ne peut plus déborder de l'écran : sur un écran étroit il
     s'ouvrait au-delà du bord et paraissait collé à gauche. */
  max-width:min(320px, calc(100vw - 28px));
  max-height:min(70vh, 460px);overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:7px;
  box-shadow:0 18px 44px -18px rgba(21,20,27,.4);
}
.ct-dd.left .ct-menu{right:auto;left:0}
.ct-menu button{
  width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;border-radius:13px;
  background:none;cursor:pointer;font-size:14.5px;text-align:left;color:var(--ink-2);
}
.ct-menu button:hover{background:var(--surface-2);color:var(--ink)}
.ct-menu button.on{background:var(--surface-2);color:var(--ink);font-weight:500}
.ct-menu button svg{width:18px;height:18px;flex:none;opacity:.8}
.ct-menu .ct-menu-t{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:9px 12px 5px}
.ct-menu .tick{margin-left:auto;opacity:0;color:var(--ink)}
.ct-menu button.on .tick{opacity:1}

/* Pastille praticien avec sa photo */
.ct-staff .st-av{width:28px;height:28px;font-size:11px;margin-left:-6px}
.ct-menu .st-av{width:28px;height:28px;font-size:11px}

/* ── Vignette praticien : photo ou initiales, anneau à sa couleur ── */
.st-av{
  width:38px;height:38px;border-radius:50%;flex:none;overflow:hidden;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c,#E3DCF5) 26%,#fff);
  color:color-mix(in srgb,var(--c,#E3DCF5) 55%,#1B3A55);
  box-shadow:0 0 0 2px #fff,0 0 0 4px color-mix(in srgb,var(--c,#E3DCF5) 62%,#fff);
  font-size:13px;font-weight:600;letter-spacing:.02em;
}
.st-av img{width:100%;height:100%;object-fit:cover;display:block}
.st-av.sm-av{width:30px;height:30px;font-size:11px;box-shadow:0 0 0 2px #fff,0 0 0 3px color-mix(in srgb,var(--c,#E3DCF5) 62%,#fff)}
.st-av.lg{width:62px;height:62px;font-size:19px;box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--c,#E3DCF5) 62%,#fff)}
.st-av.xl{width:74px;height:74px;font-size:22px;box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--c,#E3DCF5) 62%,#fff)}
@supports not (background:color-mix(in srgb,#000 50%,#fff)){
  .st-av{background:var(--surface-2);color:var(--ink-2);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--line)}
}

/* La première heure ne remonte pas : sinon elle disparaît sous l'en-tête */
.cal-gutter .cal-slot:first-child .cal-time{transform:translateY(3px)}

/* ── En-tête de colonne praticien (vue jour) ── */
.cal-head.staff{padding:16px 8px 14px}
.cal-head[data-staff-col]{cursor:pointer;transition:background .14s var(--ease)}
.cal-head[data-staff-col]:hover{background:var(--surface-2)}
.cal-head[data-staff-col]:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cal-head.staff .st-av{margin:0 auto 9px}
.cal-head.staff .nm{
  font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Bandeau équipe au-dessus de la grille (vue semaine) ──
   Une seule ligne de vignettes : la grille garde toute sa largeur. */
.team-strip{
  display:flex;gap:6px;overflow-x:auto;padding:2px 2px 14px;margin-bottom:2px;
  scrollbar-width:none;
}
.team-strip::-webkit-scrollbar{display:none}
.team-strip .ts-i{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;
  width:78px;padding:8px 4px 9px;border:0;border-radius:16px;background:none;cursor:pointer;
  color:var(--ink-2);transition:background .14s var(--ease);
}
.team-strip .ts-i:hover{background:var(--surface-2)}
.team-strip .ts-i.on{background:var(--surface-2);color:var(--ink)}
.team-strip .ts-i .st-av{width:42px;height:42px;font-size:13px}
.team-strip .ts-i.on .st-av{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}
.team-strip .ts-i .nm{
  font-size:11.5px;line-height:1.2;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.team-strip .ts-i.on .nm{font-weight:600}



@media (max-width:860px){
  .cal-bar{margin:0 -16px 12px;padding:0 16px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:8px}
  .cal-bar::-webkit-scrollbar{display:none}
  .cal-bar>*{flex:0 0 auto}
  .cal-bar .ct-sep{display:none}
  .ct-date .cal-label{min-width:120px;font-size:14px}
  .ct-pill{height:42px;padding:0 15px;font-size:14px}
  .ct-ic{width:42px;height:42px}
  .ct-menu{position:fixed;left:12px;right:12px;top:auto;bottom:12px;min-width:0}
}

/* ═══════════════════════════════════════════════════════════════
   v3.6 — Sélecteur multiple (prestations)
   ═══════════════════════════════════════════════════════════════ */
.ms{position:relative}
.ms-control{
  display:flex;align-items:center;gap:10px;min-height:50px;padding:8px 12px 8px 14px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.ms-control:hover{background:#fff}
.ms.open .ms-control,.ms-control:focus-visible{border-color:var(--ink);background:#fff;outline:none}
.ms-tags{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.ms-ph{color:var(--muted);font-size:15px;padding:3px 0}
.ms-tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 6px 5px 12px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:500;max-width:100%;
}
.ms-tag>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-rm{
  width:20px;height:20px;min-height:0;border:0;border-radius:50%;background:rgba(255,255,255,.18);
  color:#fff;display:grid;place-items:center;cursor:pointer;padding:0;flex:none;
}
.ms-rm:hover{background:rgba(255,255,255,.34)}
.ms-rm svg{width:11px;height:11px}
.ms-caret{display:flex;color:var(--muted);transition:transform .2s var(--ease)}
.ms-caret svg{width:18px;height:18px}
.ms.open .ms-caret{transform:rotate(180deg)}

.ms-pop{
  display:none;margin-top:8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);overflow:hidden;
}
.ms.open .ms-pop{display:block;animation:msIn .18s var(--ease)}
@keyframes msIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ms-search{display:flex;align-items:center;gap:9px;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.ms-search svg{width:16px;height:16px;color:var(--muted);flex:none}
.ms-search input{border:0;background:none;flex:1;font-size:14.5px;padding:2px 0;width:100%}
.ms-search input:focus{outline:none}
.ms-opts{max-height:290px;overflow:auto;padding:6px}
.ms-group{
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  padding:11px 10px 5px;font-weight:500;
}
.ms-opt{
  width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border:0;border-radius:13px;
  background:none;cursor:pointer;text-align:left;
}
.ms-opt:hover{background:var(--surface-2)}
.ms-box{
  width:21px;height:21px;border-radius:7px;border:1.5px solid var(--line);flex:none;
  display:grid;place-items:center;color:transparent;background:var(--surface);transition:.14s var(--ease);
}
.ms-box svg{width:13px;height:13px}
.ms-opt.on .ms-box{background:var(--ink);border-color:var(--ink);color:#fff}
.ms-lb{flex:1;min-width:0}
.ms-lb b{display:block;font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-lb small{display:block;font-size:12px;color:var(--muted)}
.ms-pr{font-size:14px;font-weight:500;flex:none}
.ms-empty{padding:18px 12px;text-align:center;font-size:13.5px;color:var(--muted)}
.ms-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;border-top:1px solid var(--line-2);background:var(--surface-2);
}
.ms-sum{font-size:13px;color:var(--muted)}
.ms-sum b{color:var(--ink);font-weight:600}
.ms-done{
  border:0;background:var(--ink);color:#fff;border-radius:999px;padding:8px 18px;
  font-size:13.5px;font-weight:500;cursor:pointer;
}
.ms-done:hover{opacity:.86}
@media (max-width:860px){
  .ms-opts{max-height:44dvh}
  .ms-control{min-height:52px}
}

/* ── Prestations réalisées, dans la fiche du rendez-vous ── */
.bd-items .bd-it{display:flex;align-items:center;gap:10px;padding:8px 0}
.bd-items .bd-it .nm{flex:1;min-width:0}
.bd-items .bd-it .nm b{display:block;font-weight:500;font-size:14.5px}
.bd-items .bd-it .nm small{color:var(--muted);font-size:12.5px}
.bd-items .bd-it .pr{font-weight:500;white-space:nowrap}
.bd-done-tag{
  font-size:11px;padding:2px 9px;border-radius:999px;background:var(--mint);color:#2F6B3A;font-weight:500;
}
.bd-plan-tag{font-size:11px;padding:2px 9px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.bd-svc-edit{margin-top:12px}


/* ═══════════════════════════════════════════════════════════════
   v3.6.1 — menu repliable, agenda mobile, visuels pastel
   ═══════════════════════════════════════════════════════════════ */

/* ── Menu repliable sur ordinateur : les icônes restent, le texte s'efface ── */
@media (min-width:861px){
  /* Une seule variable commande la largeur : la colonne, le fond et la marge
     du contenu suivent ensemble, sans bande blanche laissée derrière. */
  body.nav-collapsed{--sidebar:82px}
  .sidebar{transition:width .2s var(--ease),padding .2s var(--ease)}
  .main{transition:margin-left .2s var(--ease)}
  /* « overflow:visible » servait à laisser dépasser les info-bulles, mais il
     supprimait le défilement : le bas du menu devenait inaccessible.
     On rétablit le défilement vertical et on laisse respirer l'horizontale. */
  body.nav-collapsed .sidebar{
    padding:22px 10px 18px;
    overflow-y:auto;overflow-x:visible;
    scrollbar-width:none;
  }
  body.nav-collapsed .sidebar::-webkit-scrollbar{width:0}
  body.nav-collapsed .sidebar .brand{margin:-22px -10px 18px;padding:22px 0 16px}
  body.nav-collapsed .sidebar .brand{justify-content:center;padding:0 0 26px;font-size:0}
  body.nav-collapsed .sidebar .brand .mark{font-size:19px}
  body.nav-collapsed .sidebar .nav-group>.tiny,
  body.nav-collapsed .sidebar .nav-item>span,
  body.nav-collapsed .sidebar .nav-sub-items,
  body.nav-collapsed .sidebar .pro-tag,
  body.nav-collapsed .sidebar .nav-item .chev{display:none}
  body.nav-collapsed .sidebar .nav-group{margin-bottom:12px}
  body.nav-collapsed .sidebar .nav-item{justify-content:center;padding:12px 0;position:relative}
  body.nav-collapsed .sidebar .nav-item svg{width:21px;height:21px}
  /* Le nom réapparaît au survol, sans déplacer la mise en page */
  body.nav-collapsed .sidebar .nav-item::after{
    content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:var(--ink);color:#fff;font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:9px;
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s var(--ease);z-index:90;
  }
  body.nav-collapsed .sidebar .nav-item:hover::after{opacity:1}
  #navToggle{flex:none}
}
@media (max-width:860px){ #navToggle{display:none !important} }

/* ── Visuels sans photo : dégradé pastel, comme les codes promotionnels ── */
.mini-card .cover[data-empty="1"]{background:linear-gradient(140deg,#EDE8FC,#D9CFF5)}
.mini-card .cover[data-empty="1"].tn-mint {background:linear-gradient(140deg,#E7F3E5,#C8E4C3)}
.mini-card .cover[data-empty="1"].tn-peach{background:linear-gradient(140deg,#FDEEE0,#F6D3AC)}
.mini-card .cover[data-empty="1"].tn-sky  {background:linear-gradient(140deg,#E8F1FA,#BFD8EF)}
.mini-card .cover[data-empty="1"].tn-rose {background:linear-gradient(140deg,#FCE9EC,#F3C7CF)}
/* Pas de voile sombre sur un aplat pastel : il ternirait la couleur */
.mini-card .cover[data-empty="1"]::after{content:none}
.mini-card .cover[data-empty="1"] .ghost{
  position:absolute;left:18px;bottom:16px;width:34px;height:34px;opacity:.34;color:var(--ink);
}
.mini-card .cover[data-empty="1"] .ghost svg{width:100%;height:100%;display:block}

/* ── Planning : le praticien se reconnaît à sa photo ── */
.acc>summary .st-av{margin-right:2px}
.sched-who{display:flex;align-items:center;gap:11px}

/* ── Vignette « tout le salon » : le logo, jamais les visages empilés ── */
.st-av.team{background:var(--surface-2);color:var(--ink-2)}
.st-av.team svg{width:52%;height:52%}
.st-av.team img{object-fit:contain;padding:14%;background:#fff}

/* ── Agenda sur mobile : tout tient à l'écran, sans défilement latéral ── */
@media (max-width:860px){
  /* Le titre de page ferait doublon avec l'onglet Agenda de la barre du bas */
  .content[data-page="bookings.php"]>.page-head{display:none}
  .content[data-page="bookings.php"]>.card{padding:12px 12px 14px}

  .cal-bar{
    display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:0;overflow:visible;
  }
  .cal-bar>*{flex:0 0 auto}
  .cal-bar .ct-sep{display:none}
  /* Première ligne : aujourd'hui, la date, le rafraîchissement */
  .cal-bar .ct-pill.ct-today{order:1}
  .cal-bar .ct-date{order:2;flex:1 1 auto;min-width:0}
  .cal-bar #btnReload{order:3}
  .cal-bar .cb-break{order:4;flex:1 1 100%;height:0;margin:0}
  /* Seconde ligne : vue, praticien, filtres. Le choix de vue était rejeté
     seul sur une troisième ligne ; il passe en tête de rangée, à largeur
     fixe, et le praticien absorbe la place restante. */
  .cal-bar .ct-dd.ct-viewdd{order:5;flex:0 0 auto}
  .cal-bar .ct-viewdd>summary{padding:0 11px;gap:5px}
  .cal-bar .ct-staff{order:6;flex:1 1 90px;min-width:0}
  .cal-bar .ct-staff>summary{width:100%;padding:0 11px}
  .cal-bar .ct-filter{order:7;flex:0 0 auto;width:40px;padding:0;justify-content:center}
  .cal-bar .ct-filter svg{margin:0}

  .ct-pill{height:40px;padding:0 13px;font-size:13.5px}
  .ct-ic{width:40px;height:40px}
  .ct-ic svg{width:17px;height:17px}
  .ct-date{height:40px;min-width:0}
  .ct-date button{width:32px;height:32px;flex:none}
  .ct-date button svg{width:16px;height:16px}
  .ct-date .cal-label{
    min-width:0;flex:1;font-size:13.5px;padding:0 2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .ct-staff #stPillName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
  .ct-staff .chev{margin-left:auto}
  /* Réglages, horaires et « Ajouter » vivent déjà dans le menu et la barre du bas */
  .cal-bar .ct-ic.desktop-only,.cal-bar .ct-add{display:none !important}
  .ct-menu{position:absolute;left:0;right:auto;top:calc(100% + 6px);bottom:auto;min-width:210px}
  .ct-dd.ct-viewdd .ct-menu{left:auto;right:0}

  /* Bandeau d'équipe resserré : toute l'équipe tient sur une ligne */
  /* Défilement horizontal réservé à ces vignettes : le reste de la barre
     tient à l'écran, seules les photos glissent quand l'équipe est nombreuse. */
  .team-strip{
    gap:2px;padding:0 12px 10px;margin:0 -12px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  }
  .team-strip .ts-i{scroll-snap-align:start}
  .team-strip .ts-i{width:60px;padding:6px 2px 7px;gap:5px}
  .team-strip .ts-i .st-av{width:36px;height:36px;font-size:11.5px}
  .team-strip .ts-i .nm{font-size:10.5px}
  .dstrip{padding:0 0 10px}
}


/* ── Accès de l'équipe : une case par écran et par rôle ── */
.acl{border:1px solid var(--line-2);border-radius:var(--r-md);overflow:hidden}
.acl-row{
  display:grid;grid-template-columns:1fr repeat(3,86px);align-items:center;
  gap:8px;padding:11px 16px;border-top:1px solid var(--line-2);
}
.acl-row:first-child{border-top:0}
.acl-row>span:not(.acl-n){text-align:center}
.acl-head{
  background:var(--surface-2);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
}
.acl-n{font-size:14.5px}
.acl-box{display:inline-grid;place-items:center;cursor:pointer;position:relative}
.acl-box input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.acl-box i{
  width:23px;height:23px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:transparent;transition:.14s var(--ease);
}
.acl-box i svg{width:14px;height:14px}
.acl-box input:checked+i{background:var(--ink);border-color:var(--ink);color:#fff}
.acl-box input:focus-visible+i{outline:2px solid var(--ink);outline-offset:2px}
@media (max-width:640px){
  .acl-row{grid-template-columns:1fr repeat(3,54px);padding:10px 12px;gap:4px}
  .acl-n{font-size:13.5px}
  .acl-head{font-size:10px}
}

/* Page e-mails : réglages SMTP à gauche, test et modèles à droite */
.cols-mail{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
@media (max-width:900px){ .cols-mail{grid-template-columns:1fr} }

/* ── Vue liste de l'agenda : la date se lit d'un coup d'œil ── */
.ag-day{margin-bottom:26px}
.ag-day>.ag-date{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:0 0 10px;margin-bottom:12px;border-bottom:1px solid var(--line-2);
}
.ag-day>.ag-date .d{font-size:19px;font-weight:600;letter-spacing:-.02em;color:var(--ink);text-transform:capitalize}
.ag-day>.ag-date .n{font-size:13px;color:var(--muted)}
.ag-day>.ag-date .s{margin-left:auto;font-size:15px;font-weight:600}
/* Une réservation par ligne, sur toute la largeur : plus lisible qu'en colonnes.
   La largeur maximale héritée bridait la liste bien avant le bord de la carte. */
.ag-day{max-width:none}
.ag-day .ag-cards-grid{grid-template-columns:1fr}

/* Sur une même journée, une seule étiquette d'heure courante suffit */
.cal-now.mute>span{display:none}

/* ── Extensions : les fonctionnalités en liste simple, sans cadre ── */
.feat-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.feat-list li{display:flex;align-items:flex-start;gap:9px;font-size:14px;color:var(--ink-2);line-height:1.4}
/* La coche portait la classe « ic » et héritait de la vignette encadrée
   de la carte : on la ramène à une simple icône de 17 px. */
.feat-list li svg,.feat-list li svg.ic{
  width:17px;height:17px;min-width:0;flex:none;margin:2px 0 0;padding:0;
  background:none;border:0;border-radius:0;color:#3E8E52;display:block;
}
/* Les deux icônes d'action étaient bien plus grosses que le bouton voisin */
.mod-card .icon-btn.rect{width:38px;height:38px}
.mod-card .icon-btn.rect svg{width:17px;height:17px}

/* ── Transfert des rendez-vous d'une personne absente ── */
.tr-box{
  margin:0 0 14px 46px;padding:14px 16px;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line-2);
}
.tr-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;margin-bottom:10px}
.tr-t svg{width:17px;height:17px;color:#B8703A;flex:none}
.tr-row{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 0;border-top:1px solid var(--line-2);
}
.tr-when{flex:0 0 auto;min-width:132px}
.tr-when b{display:block;font-size:14px;font-weight:500}
.tr-when span{font-size:12.5px;color:var(--muted)}
.tr-what{flex:1;min-width:150px}
.tr-what b{display:block;font-size:14px;font-weight:500}
.tr-what span{font-size:12.5px;color:var(--muted)}
.tr-form{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.tr-form select{
  height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  padding:0 30px 0 12px;font-size:14px;min-width:160px;
}
.tr-none{font-size:13px;color:var(--muted);flex:0 0 auto}
.tr-none a{text-decoration:underline}
.tr-hint{font-size:12px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
@media (max-width:700px){
  .tr-box{margin-left:0}
  .tr-row{gap:8px}
  .tr-form{width:100%}
  .tr-form select{flex:1;min-width:0}
}

/* ═══════════════════════════════════════════════════════════════
   Remplacement : choisir un remplaçant en voyant sa journée
   ═══════════════════════════════════════════════════════════════ */
.rp-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:14px;align-items:end;margin-bottom:16px}
.rp-filters .field{margin:0}
@media (max-width:760px){ .rp-filters{grid-template-columns:1fr 1fr} .rp-filters .field:first-child{grid-column:1/-1} }

.rp-note{
  display:flex;align-items:flex-start;gap:10px;padding:13px 16px;margin-bottom:16px;
  border-radius:var(--r-md);background:var(--peach);font-size:14px;line-height:1.5;
}
.rp-note svg{width:18px;height:18px;flex:none;margin-top:1px}
.rp-sum{font-size:14px;color:var(--ink-2);margin-bottom:12px}
.rp-day{margin-bottom:16px}

.rp-rdv{border-top:1px solid var(--line-2);padding:16px 0 4px}
.rp-rdv:first-of-type{border-top:0}
.rp-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.rp-head .rp-h{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.rp-head .rp-d{font-size:12px;color:var(--muted);background:var(--surface-2);padding:2px 8px;border-radius:999px}
.rp-head .rp-c{font-size:14.5px;font-weight:500}
.rp-head .rp-s{font-size:13px;color:var(--muted)}
.rp-head .rp-open{margin-left:auto;font-size:13px;color:var(--ink-2);text-decoration:underline}

.rp-empty{
  display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);
  background:var(--surface-2);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:12px;
}
.rp-empty svg{width:17px;height:17px;flex:none;color:#B8703A}

.rp-cands{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(238px,100%),1fr));gap:10px;margin-bottom:12px}
.rp-card{
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px;background:var(--surface);
  display:flex;flex-direction:column;gap:9px;transition:border-color .16s var(--ease);
}
.rp-card:hover{border-color:var(--ink)}
.rp-who{display:flex;align-items:center;gap:10px}
.rp-n{min-width:0}
.rp-n b{display:block;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-n span{font-size:12px;color:var(--muted)}

/* Journée du remplaçant : ses rendez-vous en gris, le créneau visé en couleur */
.rp-tl{position:relative;height:12px;border-radius:6px;background:var(--surface-2);overflow:hidden}
.rp-tl i{position:absolute;top:0;bottom:0;background:var(--line);border-radius:3px}
.rp-tl b{position:absolute;top:0;bottom:0;background:var(--ink);border-radius:3px}
.rp-tl-l{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:-4px}

/* L'éditeur de newsletter travaille en pleine largeur */
.content.content-wide{max-width:none;padding-left:clamp(14px,2vw,24px);padding-right:clamp(14px,2vw,24px)}

/* ── Extension Newsletter ─────────────────────────────────── */
.nl-list{display:flex;flex-direction:column;gap:12px}
.nl-item{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:18px 20px}
.nl-main{flex:1;min-width:200px}
.nl-stats{display:flex;gap:22px}
.nl-stats div{text-align:center}
.nl-stats b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.nl-stats small{font-size:11px;color:var(--muted)}
.nl-act{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
@media (max-width:700px){ .nl-act{width:100%} .nl-act .btn{flex:1;justify-content:center} }

.nl-tpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
.nl-tpl-b{
  width:100%;border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface);
  padding:10px;cursor:pointer;text-align:left;transition:border-color .16s var(--ease);
}
.nl-tpl-b:hover{border-color:var(--ink)}
.nl-tpl-b b{display:block;font-size:13px;font-weight:500;margin-top:8px}
.nl-tpl-v{
  display:block;height:62px;border-radius:10px;background:var(--surface-2);
  padding:9px;display:flex;flex-direction:column;gap:5px;justify-content:center;
}
.nl-tpl-v i{display:block;height:6px;border-radius:3px;background:var(--line)}
.nl-tpl-v i:first-child{height:12px;width:70%;background:var(--a,var(--ink))}
.nl-tpl-v i:last-child{width:45%}

.nl-bar{height:8px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin:6px 0 14px}
.nl-bar i{display:block;height:100%;background:var(--ink);border-radius:999px;transition:width .4s var(--ease)}
.nl-nums{display:flex;gap:26px}
.nl-nums b{display:block;font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nl-nums small{font-size:11.5px;color:var(--muted)}

.recap-list div{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line-2)}
.recap-list div:first-child{border-top:0}
.recap-list span{color:var(--muted);font-size:13.5px}
.recap-list b{font-size:14px;font-weight:500;text-align:right}

/* Sélecteur de couleur de la newsletter : une pastille, pas un trait */
.nl-color{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nl-color input[type=color]{
  width:54px;height:54px;padding:0;border:1px solid var(--line);border-radius:16px;
  background:none;cursor:pointer;flex:none;
}
.nl-color input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
.nl-color input[type=color]::-webkit-color-swatch{border:0;border-radius:12px}
.nl-color input[type=color]::-moz-color-swatch{border:0;border-radius:12px}
.nl-color code{
  font-size:13px;background:var(--surface-2);border-radius:999px;padding:6px 13px;letter-spacing:.04em;
}
.nl-color-h{font-size:12.5px;color:var(--muted);flex:1;min-width:150px}

/* ── Newsletter : tuiles de statistiques et lignes de campagne ── */
.nl-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:900px){ .nl-kpi{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .nl-kpi{grid-template-columns:1fr} }
.nl-k{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:20px;position:relative;overflow:hidden;
}
.nl-k::after{
  content:'';position:absolute;inset:auto -30% -70% 40%;height:120%;
  background:radial-gradient(50% 60% at 50% 100%,rgba(227,220,245,.4),transparent 70%);
  pointer-events:none;
}
.nl-k>*{position:relative;z-index:2}
.nl-k-ic{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;margin-bottom:14px;
  background:var(--lilac);
}
.nl-k-ic svg{width:18px;height:18px}
.nl-k-ic.mint{background:var(--mint)} .nl-k-ic.peach{background:var(--peach)} .nl-k-ic.rose{background:var(--rose)}
.nl-k b{
  display:block;font-size:32px;font-weight:600;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.nl-k b i{font-style:normal;font-size:17px;font-weight:500;color:var(--muted);margin-left:2px}
.nl-k small{display:block;font-size:13px;color:var(--ink-2);margin-top:5px}
.nl-k-sub{display:block;font-size:11.5px;color:var(--muted);margin-top:8px}

.nl-gauge{display:block;height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:10px}
.nl-gauge i{display:block;height:100%;background:var(--ink);border-radius:999px}
.nl-gauge.sm{height:4px;margin-top:6px;width:52px}

.nl-row{
  display:flex;align-items:center;gap:20px;padding:16px 0;border-top:1px solid var(--line-2);
  color:inherit;transition:padding .16s var(--ease);
}
.nl-row:hover{padding-left:6px}
.nl-row-n{flex:1;min-width:0}
.nl-row-n strong{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.nl-row-n small{font-size:12.5px;color:var(--muted)}
.nl-row-m{display:flex;gap:26px}
.nl-mini b{display:block;font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.nl-mini b i{font-style:normal;font-size:11.5px;color:var(--muted)}
.nl-mini small{font-size:11px;color:var(--muted)}
.nl-row-go{color:var(--muted);display:flex}
.nl-row-go svg{width:18px;height:18px}
@media (max-width:640px){ .nl-row{flex-wrap:wrap;gap:12px} .nl-row-go{display:none} }

.nl-stats div i{font-style:normal;font-size:12px;color:var(--muted)}
.muted-stats b{color:var(--muted)}

/* Fonctionnalités d'une extension : « et bien plus » quand la liste déborde */
.feat-list li.feat-more{color:var(--muted);font-style:italic}
.feat-list li.feat-more svg{color:var(--muted)}

/* ── Moyens de paiement ─────────────────────────────────────── */
.pay-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:4px}
@media (max-width:840px){ .pay-grid{grid-template-columns:1fr} }
.pay-card{
  position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:var(--r-lg);padding:20px;background:var(--surface);
  transition:border-color .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.pay-card:hover{border-color:var(--line);transform:translateY(-2px)}
.pay-card.on{border-color:var(--ink);box-shadow:0 18px 40px -26px rgba(21,20,27,.5)}
.pay-card input{position:absolute;opacity:0;width:0;height:0}
.pay-logo{display:block;height:38px}
.pay-logo svg{height:100%;width:auto;display:block}
.pay-logo.sm{height:30px}
.pay-card b{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:4px}
.pay-base{font-size:13px;color:var(--muted);line-height:1.5}
.pay-cur{font-size:11.5px;color:var(--muted);background:var(--surface-2);border-radius:999px;padding:4px 10px;align-self:flex-start}
.pay-state{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#B8703A;margin-top:2px}
.pay-state.ok{color:#3E8E52}
.pay-state svg{width:14px;height:14px}
.pay-tick{
  position:absolute;top:16px;right:16px;width:24px;height:24px;border-radius:50%;
  background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);
  transition:.18s var(--ease);
}
.pay-tick svg{width:14px;height:14px}
.pay-card.on .pay-tick{opacity:1;transform:none}
.pay-conf .hint code{
  background:var(--surface-2);border-radius:7px;padding:2px 7px;font-size:12.5px;word-break:break-all;
}
.seg-radio{display:inline-flex;gap:3px;background:var(--surface-2);border-radius:999px;padding:4px}
.seg-radio label{position:relative;cursor:pointer}
.seg-radio input{position:absolute;opacity:0;width:0;height:0}
.seg-radio span{
  display:block;padding:9px 22px;border-radius:999px;font-size:14px;color:var(--muted);
  transition:.18s var(--ease);
}
.seg-radio input:checked + span{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 2px 8px -3px rgba(21,20,27,.3)}

/* Le bouton de notifications se comporte comme une entrée de menu */
.sidebar button.nav-item{width:100%;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.sidebar button.nav-item:disabled{opacity:.5;cursor:default}
.sidebar button.nav-item.active svg{color:#3E8E52}

/* Barre d'actions : le test à gauche, l'enregistrement à droite */
.pay-actions{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.pay-actions .btn:last-child{margin-left:auto}
@media (max-width:560px){ .pay-actions .btn{flex:1;justify-content:center} .pay-actions .btn:last-child{margin-left:0} }

/* Apparence : les trois couleurs alignées, chacune avec son rôle */
.color-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:860px){ .color-row{grid-template-columns:1fr} }
.color-item{
  display:flex;align-items:center;gap:13px;padding:14px;
  border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);
}
.color-item input[type=color]{
  width:46px;height:46px;padding:0;border:1px solid var(--line);border-radius:14px;
  background:none;cursor:pointer;flex:none;
}
.color-item input[type=color]::-webkit-color-swatch-wrapper{padding:4px}
.color-item input[type=color]::-webkit-color-swatch{border:0;border-radius:10px}
.color-item div{flex:1;min-width:0}
.color-item b{display:block;font-size:14px;font-weight:500}
.color-item small{font-size:12px;color:var(--muted);line-height:1.4}
.color-item code{font-size:11.5px;color:var(--muted);letter-spacing:.04em}
.switch .txt small{display:block;font-size:12.5px;color:var(--muted);font-weight:400}
.img-cur{margin-bottom:10px;display:flex;align-items:center;gap:11px}

/* Appareils abonnés aux notifications */
.push-dev{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line-2)}
.push-dev:first-of-type{border-top:0}
.push-ic{width:34px;height:34px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.push-ic svg{width:17px;height:17px;color:var(--muted)}
.push-dev div{flex:1;min-width:0}
.push-dev b{display:block;font-size:14px;font-weight:500}
.push-dev small{font-size:12px;color:var(--muted)}

/* Interrupteurs de paiement : lisibles au premier coup d'œil */
.pay-head{margin-bottom:18px}
.pay-toggle{display:flex;align-items:center;gap:14px;cursor:pointer}
.pay-toggle input{position:absolute;opacity:0;width:0;height:0}
.pay-toggle .track{
  width:56px;height:32px;border-radius:999px;background:var(--line);position:relative;flex:none;
  transition:background .3s var(--ease);
}
.pay-toggle .track::after{
  content:'';position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(21,20,27,.28);transition:transform .3s var(--ease);
}
.pay-toggle input:checked + .track{background:var(--ink)}
.pay-toggle input:checked + .track::after{transform:translateX(24px)}
.pay-toggle b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.pay-toggle small{display:block;font-size:13.5px;color:var(--muted);margin-top:2px}

/* Moyens acceptés au comptoir */
.onsite-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(168px,100%),1fr));gap:10px}
.onsite-opt{
  position:relative;display:flex;align-items:center;gap:11px;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:var(--r-md);padding:13px 14px;background:var(--surface);
  transition:border-color .16s var(--ease),background .16s var(--ease);
}
.onsite-opt:hover{border-color:var(--line)}
.onsite-opt.on{border-color:var(--ink);background:var(--surface-2)}
.onsite-opt input{position:absolute;opacity:0;width:0;height:0}
.onsite-ic{width:34px;height:34px;border-radius:11px;background:var(--surface-2);display:grid;place-items:center;flex:none}
.onsite-opt.on .onsite-ic{background:var(--lilac)}
.onsite-ic svg{width:17px;height:17px}
.onsite-l{flex:1;font-size:14px;font-weight:500}
.onsite-tick{width:19px;height:19px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;transition:.16s var(--ease)}
.onsite-tick svg{width:11px;height:11px}
.onsite-opt.on .onsite-tick{opacity:1}

/* Moyens de paiement annoncés au client, à la dernière étape */
.bk-onsite{background:var(--surface-2);border-radius:var(--r-md);padding:14px 16px;margin-bottom:14px}
.bk-onsite-t{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;margin-bottom:10px}
.bk-onsite-t svg{width:17px;height:17px;color:var(--muted)}
.bk-onsite-l{display:flex;flex-wrap:wrap;gap:7px}
.bk-onsite-l span{
  display:inline-flex;align-items:center;gap:6px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--ink-2);
}
.bk-onsite-l svg{width:14px;height:14px;color:var(--muted)}

/* ── Fiche client : listes courtes et paginées ────────────────
   Les deux blocs partagent la même trame : on lit la fiche d'un
   seul écran, sans défilement interminable. */
.cl-list{display:flex;flex-direction:column}
.cl-row{
  display:flex;align-items:center;gap:14px;padding:12px 0;
  border-top:1px solid var(--line-2);color:inherit;
}
.cl-row:first-child{border-top:0}
a.cl-row{transition:padding-left .16s var(--ease)}
a.cl-row:hover{padding-left:5px}
.cl-date{flex:0 0 92px;min-width:0}
.cl-date b{display:block;font-size:13.5px;font-weight:500;white-space:nowrap}
.cl-date small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.cl-txt{flex:1;min-width:0}
.cl-txt b{display:block;font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-txt small{font-size:12px;color:var(--muted)}
.cl-amt{font-size:14.5px;font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-amt.neg{color:#9A4046}
.cl-pager{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line-2);
}
.cl-pager a,.cl-pager span{
  min-width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  font-size:13px;color:var(--ink-2);
}
.cl-pager a:hover{background:var(--surface-2)}
.cl-pager .off{opacity:.3}
.cl-pager .cur{font-variant-numeric:tabular-nums;color:var(--muted);padding:0 6px}
.cl-pager svg{width:17px;height:17px}
@media (max-width:560px){
  .cl-row{flex-wrap:wrap;gap:8px}
  .cl-date{flex:0 0 auto}
  .cl-amt{margin-left:auto}
}

/* Teintes de menu proposées dans Apparence */
.tint-row{display:flex;flex-wrap:wrap;gap:8px}
.tint{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--line-2);border-radius:999px;padding:7px 14px 7px 8px;
  background:var(--surface);font-size:13px;color:var(--ink-2);font-family:inherit;
  transition:border-color .16s var(--ease);
}
.tint:hover{border-color:var(--line)}
.tint.on{border-color:var(--ink);color:var(--ink);font-weight:500}
.tint span{width:22px;height:22px;border-radius:50%;border:1px solid var(--line);flex:none}

/* ── Constructeur de formulaire ───────────────────────────── */
.fb-lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(146px,100%),1fr));gap:8px}
.fb-chip{
  display:flex;align-items:center;gap:8px;cursor:grab;
  border:1px solid var(--line-2);border-radius:12px;padding:10px 12px;background:var(--surface-2);
  font-size:12.5px;transition:border-color .14s var(--ease),background .14s var(--ease);
}
.fb-chip:hover{border-color:var(--ink);background:#fff}
.fb-chip svg{width:15px;height:15px;color:var(--muted);flex:none}
.fb-canvas{min-height:320px;display:flex;flex-direction:column;gap:10px}
.fb-empty{
  border:1.5px dashed var(--line);border-radius:var(--r-md);padding:44px 16px;text-align:center;color:var(--muted);
}
.fb-empty svg{width:26px;height:26px;margin-bottom:8px}
.fb-item{
  position:relative;border-radius:12px;padding:14px;background:var(--surface-2);
  box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .14s ease;cursor:pointer;
}
.fb-item:hover{box-shadow:inset 0 0 0 2px rgba(21,20,27,.16)}
.fb-item.selected{box-shadow:inset 0 0 0 2px var(--ink);background:var(--surface)}
.fb-item.drag{opacity:.4}
.fb-tools{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:opacity .12s ease}
.fb-item:hover .fb-tools,.fb-item.selected .fb-tools{opacity:1}
.fb-tools button{
  width:26px;height:26px;border:0;border-radius:8px;background:var(--ink);color:#fff;cursor:pointer;
  font-size:13px;line-height:1;display:grid;place-items:center;
}
.fb-tools button.del{background:#B4506B}
.fb-lbl{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.fb-req{font-style:normal;font-size:11px;color:var(--muted);margin-left:5px}
.fb-help{font-size:11.5px;color:var(--muted);margin-bottom:6px}
.fb-in{height:38px;border:1px solid var(--line);border-radius:11px;background:#fff}
.fb-in.tall{height:76px}
.fb-in.sel{display:flex;align-items:center;padding:0 12px;font-size:13px;color:var(--muted)}
.fb-opts{display:flex;flex-wrap:wrap;gap:8px}
.fb-opt{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-2)}
.fb-opt i{width:15px;height:15px;border:1.5px solid var(--line);border-radius:4px;background:#fff}
.fb-opt.round i{border-radius:50%}
.fb-file{
  border:1.5px dashed var(--line);border-radius:11px;padding:14px;text-align:center;
  font-size:12px;color:var(--muted);background:#fff;
}
.fb-h{font-size:16px;font-weight:600;letter-spacing:-.02em}
.fb-info{font-size:13px;color:var(--muted);line-height:1.55}
.fb-props{margin-top:13px;padding-top:13px;border-top:1px solid var(--line)}
.fb-props-t{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:10px 0 7px}
.fb-prop{margin-bottom:9px}
.fb-prop label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.fb-prop input,.fb-optrow input{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 11px;
  font-size:13px;font-family:inherit;background:#fff;
}
.fb-check{display:flex;align-items:center;gap:8px;font-size:12.5px;margin:8px 0}
.fb-optlist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.fb-optrow{display:flex;gap:6px;align-items:center}
.fb-x{width:30px;height:32px;border:0;border-radius:9px;background:var(--surface-2);cursor:pointer;font-size:16px;color:var(--muted)}

/* ── Formulaire public ────────────────────────────────────── */
.dv-wrap{min-height:100dvh;display:grid;place-items:start center;padding:clamp(18px,4vw,44px) 16px;background:var(--canvas)}
.dv-card{width:min(680px,100%);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(24px,4vw,40px)}
.dv-head{margin-bottom:24px}
.dv-head h1{font-size:clamp(23px,3.4vw,30px);font-weight:600;letter-spacing:-.03em;margin:8px 0 10px}
.dv-h{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:26px 0 12px;padding-top:18px;border-top:1px solid var(--line-2)}
.dv-info{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.dv-opts{display:flex;flex-direction:column;gap:8px}
.dv-opt{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:14.5px}
.dv-opt input{position:absolute;opacity:0;width:0;height:0}
.dv-opt i{width:20px;height:20px;border:1.5px solid var(--line);border-radius:6px;background:#fff;flex:none;display:grid;place-items:center;transition:.14s ease}
.dv-opt input[type=radio] + i{border-radius:50%}
.dv-opt input:checked + i{background:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 3px #fff}
.dv-file{
  display:block;border:1.5px dashed var(--line);border-radius:14px;padding:22px 16px;
  text-align:center;cursor:pointer;background:var(--surface-2);transition:.14s ease;
}
.dv-file:hover{border-color:var(--ink);background:#fff}
.dv-file input{position:absolute;opacity:0;width:0;height:0}
.dv-file svg{width:26px;height:26px;color:var(--muted);margin-bottom:7px}
.dv-file b{display:block;font-size:14px;font-weight:500}
.dv-file small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.fld-err{display:block;font-style:normal;font-size:12px;color:#9A4046;margin-top:5px}
.fld-help{display:block;font-style:normal;font-size:12px;color:var(--muted);margin-top:5px}
.dv-ok{text-align:center;padding:22px 0}
.dv-ok-ic{width:60px;height:60px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin:0 auto 18px}
.dv-ok-ic svg{width:28px;height:28px}
.dv-ok h1{font-size:24px;font-weight:600;letter-spacing:-.03em;margin-bottom:10px}
.dv-ok p{color:var(--muted);font-size:15px;line-height:1.6}

/* Réponses reçues */
.fe-data{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:700px){ .fe-data{grid-template-columns:1fr} }
.fe-data div{background:var(--surface-2);border-radius:11px;padding:10px 13px}
.fe-data span{display:block;font-size:11.5px;color:var(--muted)}
.fe-data b{font-size:14px;font-weight:500}
.fe-files{display:flex;flex-wrap:wrap;gap:9px}
.fe-file{display:flex;align-items:center;gap:9px;border:1px solid var(--line-2);border-radius:11px;padding:9px 13px;color:inherit}
.fe-file:hover{border-color:var(--ink)}
.fe-file svg{width:17px;height:17px;color:var(--muted)}
.fe-file b{display:block;font-size:13px;font-weight:500}
.fe-file small{font-size:11.5px;color:var(--muted)}

/* Champ refusé : le message se lit dans la fenêtre, plus derrière elle */
.field input.bad,.field select.bad,.field textarea.bad{border-color:#B4506B;background:#FDF6F7}
.fld-err.hide{display:none}

/* Prestation sur devis : dans le catalogue et dans le tunnel */
.svc-quote{
  display:inline-block;background:var(--lilac);border-radius:999px;padding:5px 13px;
  font-size:12.5px;font-weight:500;white-space:nowrap;
}
.svc-item.is-quote .svc-price{display:none}
.bk-quote-note{
  display:flex;gap:12px;align-items:flex-start;background:var(--peach);
  border-radius:var(--r-md);padding:15px 17px;margin:0 0 18px;
}
.bk-quote-note svg{width:19px;height:19px;flex:none;margin-top:1px}
.bk-quote-note b{display:block;font-size:14.5px;font-weight:600;margin-bottom:3px}
.bk-quote-note span{font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.sum-plus{font-size:11.5px;font-weight:400;color:var(--muted)}

/* ── Constructeur : la palette reste à portée de l'aperçu ──── */
.fb-shell{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:18px;align-items:start}
@media (max-width:1000px){ .fb-shell{grid-template-columns:1fr} }
.fb-side{display:flex;flex-direction:column;gap:16px;position:sticky;top:92px}
@media (max-width:1000px){ .fb-side{position:static} }
.fb-palette .fb-lib{max-height:none}
.fb-note{
  font-size:11.5px;line-height:1.5;color:var(--muted);
  margin-top:16px;padding-top:12px;border-top:1px solid var(--line-2);
}
.fb-preview{min-height:420px}

/* Notification discrète : une ligne, pas un pavé */
.bk-note{
  display:flex;align-items:flex-start;gap:10px;
  background:var(--peach);border-radius:var(--r-sm);padding:11px 14px;margin:0 0 16px;
  font-size:13px;line-height:1.5;color:var(--ink-2);
}
.bk-note svg{width:16px;height:16px;flex:none;margin-top:1px}
.bk-note b{font-weight:600;color:var(--ink)}
.bk-note a{text-decoration:underline;font-weight:500;color:var(--ink)}

/* Champs du socle : présents partout, non modifiables */
.fb-item.fb-base{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);cursor:default}
.fb-item.fb-base:hover{box-shadow:inset 0 0 0 1px var(--line-2)}
.fb-lock{
  position:absolute;top:8px;right:8px;font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border-radius:999px;padding:3px 9px;
}
.dv-consent{align-items:flex-start;gap:11px;font-size:13.5px;line-height:1.5}
.dv-consent i{margin-top:2px}


/* Formulaire intégré dans un site externe : pas de marge inutile */
.dv-embed .dv-wrap{min-height:0;padding:0;background:none}
.dv-embed .dv-card{border:0;border-radius:0;padding:clamp(18px,3vw,28px)}

/* Page de demande : même habillage que la réservation, formulaire centré */
.dv-page .dv-wrap{display:block;padding:0;background:none;min-height:0}
.dv-page .dv-card{margin:0 auto}
@media (min-width:861px){
  .dv-page{max-width:1240px;margin:0 auto;padding:30px 30px 80px;display:block}
  .dv-page .dv-card{
    max-width:760px;border-radius:28px;padding:38px 40px;
    box-shadow:0 24px 60px -46px rgba(21,20,27,.5);
  }
}

/* ── Coordonnées & horaires (pages publiques) ─────────────────
   Ces règles vivaient dans l'ancien bloc « ordinateur » et ont disparu
   lors de sa réécriture : le bloc s'affichait en <details> brut. */
.studio-infos{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:0;overflow:hidden;
}
.studio-infos summary{
  display:flex;align-items:center;gap:13px;padding:16px 18px;cursor:pointer;list-style:none;
}
.studio-infos summary::-webkit-details-marker{display:none}
.studio-infos summary::marker{content:''}
.si-ic{
  width:40px;height:40px;border-radius:13px;background:var(--lilac);
  display:grid;place-items:center;flex:none;
}
.si-ic svg{width:19px;height:19px}
.studio-infos .si-t{flex:1;min-width:0}
.studio-infos .si-t b{display:block;font-size:14.5px;font-weight:600}
.studio-infos .si-t small{font-size:12.5px;color:var(--muted)}
.studio-infos .chev{color:var(--muted);transition:transform .22s var(--ease);flex:none}
.studio-infos .chev svg{width:18px;height:18px;display:block}
.studio-infos[open] .chev{transform:rotate(180deg)}
.si-body{border-top:1px solid var(--line-2)}
.si-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;
  padding:16px 18px 20px;
}
.si-days{display:flex;flex-direction:column}
.si-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);padding:5px 0}
.si-row svg{width:16px;height:16px;color:var(--muted);flex:none}
@media (max-width:640px){ .si-grid{grid-template-columns:1fr} }
.si-grid h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.si-day{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font-size:13.5px}
.si-day span:first-child{color:var(--ink-2)}
.si-day span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.si-day.now span{color:var(--ink);font-weight:500}
.si-line{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--ink-2);padding:5px 0}
.si-line svg{width:16px;height:16px;color:var(--muted);flex:none}

/* ── Marque de l'établissement ────────────────────────────────
   La taille n'était définie que sous .brand : partout ailleurs le
   logo sortait à sa taille réelle et envahissait la page. */
.mark{
  width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none;overflow:hidden;
}
.mark svg{width:16px;height:16px}
.mark.img{background:none}
.mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.avatar.img img,.thumb.img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}

/* ── Bandeau d'installation ───────────────────────────────────
   Il n'avait aucun style : son logo sortait à sa taille réelle et
   couvrait la page, sur ordinateur comme sur mobile. */
/* ── Marque de l'établissement ────────────────────────────────
   La taille n'était définie que sous .brand : ailleurs, un logo
   sortait de son cadre. */
.mark{
  width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;
  display:grid;place-items:center;flex:none;overflow:hidden;
}
.mark svg{width:16px;height:16px}
.mark.img{background:none}
.mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.avatar.img img,.thumb.img img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}


/* ── Espace client proposé pendant la réservation ─────────────
   Règles restaurées après la reconstruction de la feuille. */

/* ── Espace client, à l'étape des coordonnées ─────────────────
   Le compte n'est pas optionnel : il permet au client de retrouver,
   déplacer ou annuler son rendez-vous. Deux voies, jamais d'invité. */
.acc-card{
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--surface-2);
  padding:18px;margin-top:18px;
}
.acc-head{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.acc-ic{
  width:40px;height:40px;border-radius:13px;background:var(--lilac);
  display:grid;place-items:center;flex:none;
}
.acc-ic svg{width:19px;height:19px}
.acc-head b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em}
.acc-head small{display:block;font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:2px}
.acc-seg{display:flex;width:100%;margin-bottom:16px}
.acc-seg label{flex:1}
.acc-seg span{display:block;text-align:center;padding:10px 12px}
.acc-note{font-size:13px;color:var(--muted);line-height:1.55;margin:0 0 14px}
.acc-card .field{margin-bottom:12px}

/* ── En-tête des pages publiques ──────────────────────────────
   La photo occupe le haut, le menu se pose dessus en transparence,
   et les coordonnées du salon se lisent sous son nom. */
.bkx-top{
  position:relative;color:#fff;overflow:hidden;
  background:var(--cover) center/cover no-repeat,var(--ink);
  padding:0 0 26px;margin:0 0 20px;
}
.bkx-top::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,24,.72) 0%,rgba(18,17,24,.45) 45%,rgba(18,17,24,.85) 100%);
}
.bkx-top > *{position:relative;z-index:2}
.bkx-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px 0;
}
.bkx-topbar .brand{padding:0;font-size:16px;color:#fff;display:flex;align-items:center;gap:10px}
.bkx-topbar .brand .mark{background:rgba(255,255,255,.16)}
.btn-ghost-light{
  background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.28);
  backdrop-filter:blur(6px);
}
.btn-ghost-light:hover{background:rgba(255,255,255,.24)}
.btn-ghost-light svg{color:#fff}
.bkx-top-in{padding:26px 18px 0}
.bkx-top h1{font-size:clamp(27px,6vw,34px);font-weight:600;letter-spacing:-.035em;line-height:1.05;color:#fff}
.bkx-top .lead{color:rgba(255,255,255,.82);font-size:15px;margin-top:6px}

/* Coordonnées : trois informations en ligne, sans dépliant */
.bkx-meta{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.bkx-meta span,.bkx-meta a{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.2);
  border-radius:999px;padding:7px 14px;font-size:13px;color:#fff;
  backdrop-filter:blur(6px);
}
.bkx-meta a:hover{background:rgba(255,255,255,.24)}
.bkx-meta svg{width:15px;height:15px;opacity:.85;flex:none}

/* Page de demande : champs sur deux colonnes, envoi dans une barre fixe */
@media (min-width:861px){
  /* La page de demande suit la réservation : hero pleine largeur, contenu
     centré, barre d'envoi collée en bas. */
  .dv-page{max-width:none !important;width:100%;padding:0 0 96px !important;display:block}
  .dv-page .bkx-top{max-width:none;margin:0 0 26px}
  .dv-page .dv-wrap{max-width:1320px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
  .dv-page .dv-card{max-width:none;padding:34px clamp(24px,3vw,40px);box-shadow:none;border:1px solid var(--line-2)}
  .dv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  .dv-cols > .field,.dv-cols > label.field{margin-bottom:16px}
  .dv-cols > .dv-h,.dv-cols > .dv-info,.dv-cols > .dv-send{grid-column:1 / -1}
  .dv-cols > .field textarea{min-height:120px}
  .dv-cols > .field:has(textarea){grid-column:1 / -1}
  .dv-send{
    position:fixed;left:0;right:0;bottom:0;z-index:90;margin:0;
    background:rgba(255,255,255,.94);backdrop-filter:blur(16px);
    border-top:1px solid var(--line-2);padding:13px clamp(20px,4vw,40px);
    display:flex;justify-content:flex-end;
  }
  .dv-send .btn{min-height:48px;border-radius:15px;font-size:15px;padding:0 32px}
  .dv-page{padding-bottom:96px}
}

/* ── Choix de la voie client, dans le tunnel ──────────────────
   Rien ne s'affiche tant que la personne n'a pas dit si elle est
   déjà cliente ou si elle s'inscrit. */
.acc-choice{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:861px){ .acc-choice{grid-template-columns:1fr 1fr;gap:16px} }
.acc-pick{
  text-align:left;border:1.5px solid var(--line-2);border-radius:20px;background:var(--surface);
  padding:22px;cursor:pointer;font-family:inherit;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.acc-pick:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 16px 34px -28px rgba(21,20,27,.5)}
.acc-pick-ic{
  width:46px;height:46px;border-radius:15px;background:var(--lilac);
  display:grid;place-items:center;margin-bottom:14px;
}
.acc-pick-ic.mint{background:var(--mint)}
.acc-pick-ic svg{width:21px;height:21px}
.acc-pick b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.02em}
.acc-pick small{display:block;font-size:13px;color:var(--muted);line-height:1.5;margin-top:5px}
.acc-back{
  border:0;background:none;cursor:pointer;font-family:inherit;color:var(--muted);
  font-size:13px;display:inline-flex;align-items:center;gap:6px;padding:0;margin-bottom:16px;
}
.acc-back:hover{color:var(--ink)}
.acc-back svg{width:15px;height:15px}
.acc-h{font-size:17px;font-weight:600;letter-spacing:-.02em;margin:0 0 14px}
.acc-two{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:861px){ .acc-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px} }

/* Les sections respirent, comme demandé */
@media (min-width:861px){ .bkx section[data-step]{margin-top:18px} }

/* ── Un élément masqué le reste ───────────────────────────────
   L'attribut « hidden » ne pose qu'un display:none de faible poids :
   la moindre règle display:flex ou grid le neutralisait, et des blocs
   censés être cachés restaient visibles. */
[hidden]{display:none !important}

/* ── Hero sur téléphone : collé en haut, pleine largeur ───────
   Il subissait le retrait horizontal de la page. */
@media (max-width:860px){
  .bkx-top{
    margin:-16px -14px 18px;border-radius:0;
  }
  .bkx-topbar{padding:14px 16px 0}
  .bkx-top-in{padding:20px 16px 0}
}

/* Étape de demande dans le tunnel : deux colonnes, comme la page dédiée */
@media (min-width:861px){
  #qForm.dv-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
  #qForm #quoteFields{display:contents}
  #qForm .field{margin-bottom:16px}
  #qForm .field.full,#qForm .dv-h,#qForm .dv-info{grid-column:1 / -1}
}

/* ── Espace client : bannière de l'établissement et plan ──────
   Le client retrouve la marque du salon, ses coordonnées, et de quoi
   appeler ou s'y rendre sans quitter la page. */
.cl-banner{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--r-lg);
  background:var(--cover) center/cover no-repeat,var(--ink);
  padding:0;margin:0 0 16px;
}
.cl-banner::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,24,.6) 0%,rgba(18,17,24,.34) 45%,rgba(18,17,24,.82) 100%);
}
.cl-banner-in{position:relative;z-index:2;padding:24px 22px}
.cl-banner h2{font-size:clamp(22px,4vw,28px);font-weight:600;letter-spacing:-.03em;margin:0;color:#fff}
.cl-banner .lead{color:rgba(255,255,255,.82);font-size:14.5px;margin:6px 0 0}
.cl-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cl-meta span,.cl-meta a{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:7px 14px;font-size:13px;color:#fff;backdrop-filter:blur(6px);
}
.cl-meta a:hover{background:rgba(255,255,255,.26)}
.cl-meta svg{width:15px;height:15px;opacity:.85;flex:none}
.cl-mapbtn{margin-top:14px}

/* Plan : replié au téléphone, ouvert sur ordinateur */
.cl-map{
  position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);
  overflow:hidden;background:var(--surface-2);margin:0 0 16px;
  height:0;opacity:0;transition:height .3s var(--ease),opacity .3s var(--ease);
}
.cl-map.open{height:230px;opacity:1}
.cl-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.72) contrast(.96)}
.cl-map-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:13.5px;color:var(--muted);
}
.cl-map-open{
  position:absolute;right:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:8px 15px;font-size:13px;font-weight:500;color:var(--ink);
  box-shadow:0 8px 22px -14px rgba(21,20,27,.6);
}
.cl-map-open:hover{background:var(--surface-2)}
.cl-map-open svg{width:15px;height:15px}
.cl-map-fallback{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:999px;
  padding:9px 16px;font-size:13.5px;color:var(--ink);
}
.cl-map-fallback svg{width:16px;height:16px;color:var(--muted)}
@media (min-width:861px){
  .cl-map.open{height:300px}
  .cl-mapbtn{display:none}          /* sur ordinateur le plan est déjà ouvert */
}

/* Bloc d'action irréversible : signalé sans être alarmant */
.danger-card{border-color:#EBD3D1}
.danger-card h3{color:#9A4046}

/* Renvoi vers une sous-page de l'espace client */
.cl-link{display:flex;align-items:center;gap:14px;color:inherit}
.cl-link:hover{border-color:var(--line)}
.cl-link-ic{width:42px;height:42px;border-radius:14px;background:var(--lilac);display:grid;place-items:center;flex:none}
.cl-link-ic svg{width:19px;height:19px}
.cl-link b{display:block;font-size:15px;font-weight:600}
.cl-link small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cl-link > svg{width:18px;height:18px;color:var(--muted);flex:none}

/* ── Bouton d'informations et fiche coulissante ──────────────
   Les coordonnées occupaient trois pastilles sous le nom du salon.
   Elles tiennent maintenant dans une fiche qui monte du bas. */
.bkx-info{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;cursor:pointer;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:8px 15px;font-size:13px;color:#fff;
  font-family:inherit;backdrop-filter:blur(6px);
}
.bkx-info:hover{background:rgba(255,255,255,.26)}
.bkx-info svg{width:16px;height:16px;flex:none}

.sheet{position:fixed;inset:0;z-index:3200;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none !important}
.sheet-bg{position:absolute;inset:0;background:rgba(21,20,27,.5);backdrop-filter:blur(2px)}
.sheet-card{
  position:relative;z-index:2;width:min(520px,100%);max-height:86vh;overflow-y:auto;
  background:var(--surface);border-radius:26px 26px 0 0;padding:14px 22px 26px;
  box-shadow:0 -18px 50px -30px rgba(21,20,27,.6);
  animation:sheetUp .28s var(--ease);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.sheet-grip{width:42px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 16px}
.sheet-card h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}
.sh-line{
  display:flex;align-items:flex-start;gap:11px;padding:11px 0;font-size:14.5px;color:var(--ink-2);
  border-top:1px solid var(--line-2);
}
.sh-line:first-of-type{border-top:0}
.sh-line svg{width:17px;height:17px;color:var(--muted);flex:none;margin-top:2px}
a.sh-line:hover{color:var(--ink)}
.sh-t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:18px 0 8px}
.sh-days{display:flex;flex-direction:column}
.sh-day{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14px}
.sh-day span:first-child{color:var(--ink-2)}
.sh-day span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.sh-day.now span{color:var(--ink);font-weight:500}
.sh-map{border-radius:16px;overflow:hidden;height:180px;margin-top:16px;background:var(--surface-2)}
.sh-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.72) contrast(.96)}

@media (min-width:861px){
  .sheet{align-items:center}
  .sheet-card{border-radius:26px;animation:none;max-height:80vh}
}

/* ── Boutons d'information dans le bandeau ───────────────────
   Le numéro appelle, l'adresse ouvre le plan, l'état du jour ouvre les
   horaires complets. Rien ne se replie : tout est visible d'emblée. */
.bkx-acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.bkx-act{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.24);
  border-radius:999px;padding:9px 16px;font-size:13.5px;color:#fff;
  font-family:inherit;backdrop-filter:blur(8px);
  transition:background .16s var(--ease);
}
.bkx-act:hover{background:rgba(255,255,255,.28)}
.bkx-act svg{width:16px;height:16px;flex:none;opacity:.9}
.bkx-act svg:last-child{opacity:.7;width:15px;height:15px}

/* ── Fenêtres : fiche qui monte au téléphone, dialogue centré sinon ── */
.dlg{
  position:fixed;inset:0;z-index:4000;
  display:flex;align-items:flex-end;justify-content:center;
}
.dlg[hidden]{display:none !important}
/* Le défilement de la page derrière laissait apparaître le fond au-dessus
   de la fiche. On fige la page tant qu'elle est ouverte. */
body.dlg-open{overflow:hidden;position:fixed;width:100%;height:100%}
.dlg-bg{
  position:absolute;inset:0;background:rgba(18,17,24,.42);
  backdrop-filter:blur(10px) saturate(.9);-webkit-backdrop-filter:blur(10px) saturate(.9);
  animation:dlgFade .22s var(--ease);
}
@keyframes dlgFade{from{opacity:0}to{opacity:1}}
.dlg-card{
  position:relative;z-index:2;width:min(520px,100%);max-height:88dvh;overflow-y:auto;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--surface);border-radius:26px 26px 0 0;
  padding:12px 22px calc(26px + env(safe-area-inset-bottom));
  box-shadow:0 -20px 60px -30px rgba(21,20,27,.7);
  animation:dlgUp .3s var(--ease);
}
@keyframes dlgUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.dlg-grip{width:42px;height:4px;border-radius:999px;background:var(--line);margin:0 auto 14px}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.dlg-head h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin:0}
.dlg-x{
  width:34px;height:34px;border:0;border-radius:50%;background:var(--surface-2);cursor:pointer;
  display:grid;place-items:center;color:var(--muted);flex:none;
}
.dlg-x:hover{background:var(--line-2);color:var(--ink)}
.dlg-x svg{width:16px;height:16px}
.dlg-line{
  display:flex;align-items:flex-start;gap:11px;padding:12px 0;font-size:14.5px;color:var(--ink-2);
  border-top:1px solid var(--line-2);
}
.dlg-line svg{width:17px;height:17px;color:var(--muted);flex:none;margin-top:2px}
a.dlg-line:hover{color:var(--ink)}
.dlg-days{display:flex;flex-direction:column;margin-bottom:4px}
.dlg-day{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14.5px;border-top:1px solid var(--line-2)}
.dlg-day:first-child{border-top:0}
.dlg-day span:first-child{color:var(--ink-2)}
.dlg-day span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.dlg-day.now{background:var(--mint);border-radius:11px;padding-left:12px;padding-right:12px;border-top-color:transparent}
.dlg-day.now span{color:var(--ink);font-weight:600}
.dlg-map{border-radius:16px;overflow:hidden;height:220px;margin-top:14px;background:var(--surface-2)}
.dlg-map iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.72) contrast(.96)}

@media (min-width:861px){
  .dlg{align-items:center}
  .dlg-card{border-radius:24px;animation:dlgPop .24s var(--ease);max-height:82vh;padding:18px 26px 26px}
  .dlg-grip{display:none}
  @keyframes dlgPop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
}

/* Plan indisponible : message plutôt qu'un cadre vide */
.dlg-map-ph{
  display:flex;align-items:center;justify-content:center;gap:9px;height:100%;
  font-size:13.5px;color:var(--muted);
}
.dlg-map-ph svg{width:16px;height:16px}

/* ── Bandeau : un seul bouton au téléphone, trois sur ordinateur ── */
.bkx-act-mob{display:none}
@media (max-width:860px){
  .bkx-act-desk{display:none !important}
  .bkx-act-mob{display:inline-flex}

  /* Les sous-titres alourdissent l'écran étroit : le titre suffit */
  .sec-sub{display:none !important}

  /* Le formulaire respire en haut de sa carte */
  .bkx section[data-step="4"] .grid-2:first-of-type,
  .dv-page .dv-form{padding-top:6px}
  .bkx .sec-lead{margin-bottom:16px}
}

/* Intitulé des créneaux : détaché du calendrier et des boutons */
.when-day{
  margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:8px;
}
.when-day span{color:var(--ink);font-weight:600;letter-spacing:-.01em;font-size:14px;text-transform:none}
@media (max-width:860px){
  .when-day{margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2);border-bottom:0;padding-bottom:0}
}

/* Titre de section dans la fenêtre « À propos » */
.dlg-t{
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  margin:20px 0 8px;
}

/* Sous-titre d'étape : visible sur ordinateur, masqué au téléphone */
.sec-sub{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.5}
.acc-pick .sec-sub,.acc-head .sec-sub{display:block;font-size:12.5px;margin:5px 0 0}

/* Notification : la croix vit à droite, dans la même ligne.
   Posée en superposition, elle créait une zone de survol distincte du
   reste de la notification — on ne savait plus ce qu'on allait cliquer. */
.notif-row{
  display:flex;align-items:center;gap:2px;border-radius:var(--r-md);
  transition:background .14s var(--ease);
}
.notif-row:hover{background:var(--surface-2)}
.notif-row .notif-item{flex:1;min-width:0;background:none}
.notif-row .notif-item:hover{background:none}
/* Le menu impose « width:100% » à tout bouton qu'il contient : la croix
   prenait donc toute la largeur et écrasait le texte de la notification.
   Ces règles, plus précises, la ramènent à sa taille. */
.dd-menu .notif-x,.notif-x{
  flex:0 0 auto;width:30px;min-width:30px;height:30px;margin-right:8px;padding:0;
  border:0;border-radius:10px;background:none;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;
  transition:background .14s var(--ease),color .14s var(--ease);
}
.dd-menu .notif-x:hover,.notif-x:hover{background:var(--line-2);color:var(--ink)}
.notif-x svg{width:15px;height:15px}
/* Le texte doit pouvoir se réduire sans partir mot à mot */
.notif-row .notif-item{flex:1 1 auto;min-width:0;width:auto}
.notif-item .grow{min-width:0}

/* ── Tablette : entre 861 et 1180 px ──────────────────────────
   La mise en page d'ordinateur s'y appliquait telle quelle, avec une
   colonne latérale trop large et des cartes à l'étroit. */
@media (min-width:861px) and (max-width:1180px){
  /* La largeur passe par une variable : on la réduit, le reste suit */
  body{--sidebar:212px}
  .sidebar{padding:20px 12px 18px}
  .sidebar .nav a{padding:9px 12px;font-size:14px}
  .sidebar .nav a svg{width:18px;height:18px}
  .sidebar .brand{font-size:15px}
  .sidebar .nav-t{font-size:10px}

  .content{padding:18px 20px 40px}
  .page-head h1{font-size:26px}
  .page-head{gap:12px;flex-wrap:wrap}
  .page-head .actions{width:100%;justify-content:flex-start}

  /* Les indicateurs passent à deux par ligne au lieu de quatre serrés */
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dash-grid{columns:1}
  .cols.cols-main,.cols.cols-mail{grid-template-columns:minmax(0,1fr)}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}

  /* Agenda : barre d'outils sur deux rangées, plutôt qu'écrasée */
  .cal-bar{flex-wrap:wrap;row-gap:10px}
  .cal-bar .ct-sep{display:none}
  .cal-bar .ct-staff>summary{max-width:190px}
}

/* Bascule « Tous / Mes clients », côté praticien */
.seg a{
  display:inline-flex;align-items:center;padding:8px 16px;border-radius:999px;
  font-size:13.5px;color:var(--muted);
}
.seg a.on{background:var(--ink);color:#fff;font-weight:500}

/* ── Ma semaine : les jours travaillés d'un coup d'œil ────────
   Vue du praticien, en lecture seule. Vert pour les jours de présence,
   gris pour les repos, cercle sur le jour courant. */
.sem-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@media (max-width:560px){ .sem-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
.sem-day{
  border-radius:16px;padding:14px 8px;text-align:center;
  background:var(--mint);border:1.5px solid transparent;
  display:flex;flex-direction:column;gap:3px;
}
.sem-day.off{background:var(--surface-2);color:var(--muted)}
.sem-day.now{border-color:var(--ink)}
.sem-n{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);font-weight:600;
}
.sem-day.now .sem-n{color:var(--ink)}
.sem-h{font-size:14.5px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.sem-day.off .sem-h{font-size:13px;font-weight:500;color:var(--muted)}
.sem-h2{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sem-card .hint{margin-top:16px}

/* ── Prestations en cartes, comme l'écran d'administration ────
   Photo large, prix en pastille, nom et durée dessous. Les catégories
   passent en filtre plutôt qu'en titres qui coupent la grille. */
/* Barre au-dessus de la grille : onglets à gauche, filtre à droite */
.svc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.svc-bar .tabs-seg{margin:0}

.svc-filter{position:relative;margin-left:auto}
.svc-filter>summary{
  list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;
  padding:9px 16px;font-size:13.5px;color:var(--ink-2);
  transition:border-color .14s var(--ease);
}
.svc-filter>summary::-webkit-details-marker{display:none}
.svc-filter>summary:hover{border-color:var(--line)}
.svc-filter[open]>summary{border-color:var(--ink);color:var(--ink)}
.svc-filter>summary svg{width:16px;height:16px;opacity:.7}
.svc-filter-menu{
  position:absolute;right:0;top:calc(100% + 8px);z-index:40;min-width:220px;
  max-width:min(300px,calc(100vw - 28px));
  background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:7px;
  box-shadow:0 18px 44px -18px rgba(21,20,27,.4);
}
.svc-f{
  display:block;width:100%;text-align:left;border:0;background:none;border-radius:12px;
  padding:10px 13px;font-size:14px;color:var(--ink-2);cursor:pointer;font-family:inherit;
}
.svc-f:hover{background:var(--surface-2);color:var(--ink)}
.svc-f.on{background:var(--surface-2);color:var(--ink);font-weight:500}

.svc-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){ .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }

.svc-card{
  display:flex;flex-direction:column;border:1px solid var(--line-2);border-radius:20px;
  overflow:hidden;background:var(--surface);cursor:pointer;
  transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.svc-card:hover{transform:translateY(-2px);box-shadow:0 18px 36px -28px rgba(21,20,27,.5)}
.svc-card.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.svc-card[hidden]{display:none !important}

.svc-ph{position:relative;display:block;height:168px;background:var(--surface-2);overflow:hidden}
.svc-ph img{width:100%;height:100%;object-fit:cover;display:block}
.svc-ini{
  position:absolute;inset:0;display:grid;place-items:center;font-size:38px;font-weight:600;
  color:var(--ink);background:linear-gradient(135deg,var(--lilac),var(--peach));
}
.svc-tag{
  position:absolute;right:12px;bottom:12px;background:var(--surface);
  border-radius:999px;padding:7px 14px;font-size:14.5px;font-weight:600;
  box-shadow:0 6px 18px -10px rgba(21,20,27,.6);white-space:nowrap;
}
.svc-card.is-quote .svc-tag{background:var(--lilac);font-size:13px}

.svc-body{display:flex;flex-direction:column;gap:4px;padding:15px 17px 18px}
.svc-body strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.015em}
.svc-meta{display:block;font-size:12.5px;color:var(--muted)}
.svc-desc{
  display:block;font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── Devis : édition à gauche, aperçu à droite ────────────────── */
.q-shell{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:1100px){ .q-shell{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.q-preview{position:sticky;top:92px;align-self:start}
@media (max-width:1099px){ .q-preview{position:static} }

.q-lines{display:flex;flex-direction:column;gap:12px}
.q-line{border:1px solid var(--line-2);border-radius:var(--r-md);padding:13px;background:var(--surface-2)}
.q-line-main{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.q-line-main input{
  width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 13px;
  font-size:14px;font-family:inherit;background:var(--surface);
}
.q-line-main input:first-child{font-weight:500}
.q-line-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;align-items:end}
.q-line-num label{display:flex;flex-direction:column;gap:4px;min-width:0}
.q-line-num span{font-size:11px;color:var(--muted)}
.q-line-num input{
  width:100%;border:1px solid var(--line);border-radius:11px;padding:9px 11px;
  font-size:14px;font-family:inherit;background:var(--surface);
}
.q-del{
  width:38px;height:38px;border:0;border-radius:11px;background:var(--surface);
  color:var(--muted);cursor:pointer;display:grid;place-items:center;
}
.q-del:hover{background:#FDF3F2;color:#9A4046}
.q-del svg{width:16px;height:16px}

/* ── La feuille du devis : présentation soignée, prête à imprimer ── */
.q-paper{background:#fff;border-radius:var(--r-md);padding:0;overflow:hidden}
.qsheet{
  background:#fff;color:#15141B;padding:36px 34px 34px;font-size:14px;line-height:1.55;
  border:1px solid var(--line-2);border-radius:var(--r-md);
}
.qs-top{display:flex;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:2px solid var(--qa,#C9BEEC)}
.qs-biz{font-size:20px;font-weight:600;letter-spacing:-.025em}
.qs-sub{font-size:12.5px;color:#6B6878;margin-top:2px}
.qs-num{text-align:right;flex:none}
.qs-num span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6B6878}
.qs-num b{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;margin:2px 0}
.qs-to{margin:22px 0 18px}
.qs-to span{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6B6878}
.qs-to b{display:block;font-size:16px;font-weight:600;margin-top:3px}
.qs-to span + span{font-size:13px;letter-spacing:0;text-transform:none;margin-top:1px}
.qs-intro{color:#3F3D4A;margin:0 0 20px}

.qs-table{width:100%;border-collapse:collapse;margin-bottom:20px}
.qs-table th{
  text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6B6878;
  font-weight:600;padding:0 10px 9px;border-bottom:1px solid #E8E6EF;
}
.qs-table td{padding:13px 10px;border-bottom:1px solid #F1F0F5;vertical-align:top}
.ql-c{text-align:center;white-space:nowrap}
.ql-r{text-align:right;white-space:nowrap}
.ql-l b{display:block;font-size:14.5px;font-weight:600}
.ql-l span{display:block;font-size:12.5px;color:#6B6878;margin-top:2px}
.ql-vide{text-align:center;color:#6B6878;padding:22px 10px}

.qs-sum{display:flex;justify-content:flex-end}
.qs-sum-in{min-width:260px}
.qs-sum-in > div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;font-size:14px}
.qs-sum-in span{color:#6B6878}
.qs-sum-in b{font-variant-numeric:tabular-nums}
.qs-ttc{border-top:1px solid #E8E6EF;margin-top:6px;padding-top:12px !important}
.qs-ttc span{color:#15141B !important;font-weight:600}
.qs-ttc b{font-size:22px;font-weight:600;letter-spacing:-.02em}
.qs-acc{background:var(--qa,#C9BEEC);border-radius:11px;padding:10px 14px !important;margin-top:8px}
.qs-acc span{color:#15141B !important;font-weight:500}
.qs-acc b{font-weight:600}
.qs-notes{margin-top:24px;padding-top:18px;border-top:1px solid #F1F0F5;font-size:13px;color:#3F3D4A}
.qs-notes span{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#6B6878;margin-bottom:6px}
.qs-valid{margin-top:16px;font-size:12.5px;color:#6B6878}

/* ── Devis côté client ────────────────────────────────────────── */
.qc-page{background:var(--canvas)}
.qc-wrap{max-width:800px;margin:0 auto;padding:clamp(18px,4vw,40px) 16px 60px}
.qc-acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.qc-acts .grow{flex:1;min-width:220px}
.qc-acts2{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.qc-foot{text-align:center;font-size:12.5px;color:var(--muted);margin-top:26px}

@media print{
  body{background:#fff}
  .sidebar,.topbar,.tabbar,.actionbar,.page-head,.q-shell > .stack,.qc-acts,.qc-acts2,.qc-foot,.card-head{display:none !important}
  .q-preview,.q-paper,.qsheet{position:static;border:0;box-shadow:none;padding:0}
  .content{padding:0}
}

/* ── Demandes : une liste sobre, une fiche soignée ────────────
   La liste ne montre que l'essentiel ; le détail s'ouvre en pleine page,
   présenté comme une feuille. */
.dm-filters{margin-bottom:16px}

.dq-list{display:flex;flex-direction:column;gap:8px}
.dq-row{
  display:flex;align-items:center;gap:16px;color:inherit;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:15px 18px;transition:border-color .16s var(--ease),transform .16s var(--ease);
}
.dq-row:hover{border-color:var(--ink);transform:translateX(2px)}
.dq-row.neuf{border-left:3px solid var(--ink)}
.dq-date{flex:0 0 96px;min-width:0}
.dq-date b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap}
.dq-date small{display:block;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.dq-main{flex:1;min-width:0}
.dq-main b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq-main small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dq-tags{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.dq-go{flex:0 0 auto;color:var(--muted);display:grid;place-items:center}
.dq-go svg{width:18px;height:18px}
@media (max-width:640px){
  .dq-row{flex-wrap:wrap;gap:10px}
  .dq-date{flex:0 0 auto}
  .dq-main{flex:1 1 100%;order:3}
  .dq-go{display:none}
}

/* La fiche : une feuille, pas un empilement de cartes */
.dq-paper{
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(24px,4vw,40px);max-width:none;   /* pleine largeur */
}
.dq-kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dq-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;border-bottom:1px solid var(--line-2);
}
.dq-top h2{font-size:clamp(22px,3vw,28px);font-weight:600;letter-spacing:-.03em;margin:6px 0 4px}
.dq-sub{font-size:13.5px;color:var(--muted)}
.dq-state{display:flex;align-items:center;gap:10px;flex:none}

.dq-contact{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.dq-contact a,.dq-contact span{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface-2);
  border-radius:999px;padding:8px 15px;font-size:13.5px;color:var(--ink-2);
}
.dq-contact a:hover{background:var(--lilac);color:var(--ink)}
.dq-contact svg{width:15px;height:15px;color:var(--muted);flex:none}

.dq-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 28px}
@media (max-width:700px){ .dq-body{grid-template-columns:1fr} }
.dq-f.wide{grid-column:1 / -1}
.dq-f span{
  display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px;
}
.dq-f p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}

.dq-files{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-2)}
.dq-files .dq-kicker{margin-bottom:10px}
.dq-quote{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin-top:24px;background:var(--surface-2);border-radius:var(--r-md);padding:16px 18px;
}
.dq-quote b{display:block;font-size:16px;font-weight:600;margin-top:3px}

/* Mentions libres de l'établissement */
.lf-list{display:flex;flex-direction:column;gap:8px}
.lf-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:8px;align-items:center}
@media (max-width:560px){ .lf-row{grid-template-columns:1fr;gap:6px} }
.lf-row input{
  width:100%;border:1px solid var(--line);border-radius:11px;padding:10px 13px;
  font-size:14px;font-family:inherit;background:var(--surface);
}
.lf-x{
  width:38px;height:38px;border:0;border-radius:11px;background:var(--surface-2);
  color:var(--muted);cursor:pointer;display:grid;place-items:center;
}
.lf-x:hover{background:#FDF3F2;color:#9A4046}
.lf-x svg{width:16px;height:16px}

/* Identité et mentions sur la feuille du devis */
.qs-ident{display:flex;align-items:flex-start;gap:14px;min-width:0}
.qs-logo{width:56px;height:56px;object-fit:contain;border-radius:12px;flex:none}
.qs-legal{
  margin-top:26px;padding-top:16px;border-top:1px solid #F1F0F5;
  font-size:11.5px;color:#6B6878;line-height:1.6;
}
.qs-legal-l{display:flex;flex-wrap:wrap;gap:4px 18px}
.qs-legal-l span b{font-weight:600;color:#3F3D4A}
.qs-legal-t{margin-top:8px}

.qc-dl{display:flex;justify-content:flex-end;margin-bottom:12px}

/* ── Espace client : accueil épuré ────────────────────────────
   Une photo en tête, la marque, le jour, le prénom. Puis le prochain
   rendez-vous, mis en avant, et l'action principale. */
.cl-hero{
  position:relative;overflow:hidden;color:#fff;border-radius:var(--r-lg);
  background:var(--cover) center/cover no-repeat,var(--ink);
  min-height:200px;display:flex;align-items:flex-end;margin:0 0 14px;
}
@media (max-width:860px){
  /* Pleine largeur réelle, quel que soit le retrait des parents */
  .cl-home .cl-hero{
    width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    margin-top:-14px;margin-bottom:16px;border-radius:0 0 22px 22px;min-height:210px;
  }
  .cl-home .cl-hero-in{padding:18px 20px 20px}

  /* La barre ne se superpose que sur l'accueil : ailleurs, elle chevauchait
     le titre de la page. */
  .cl-home .main > .topbar{
    position:absolute;left:0;right:0;top:0;z-index:6;
    background:none;border:0;backdrop-filter:none;
  }
  .cl-home .main > .topbar .cl-contact{
    background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:#fff;
    backdrop-filter:blur(8px);
  }
  .cl-home .main > .topbar .avatar{border:1.5px solid rgba(255,255,255,.55)}
  .cl-home .content{padding-top:0}
}
.cl-hero::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,17,24,.32) 0%,rgba(18,17,24,.18) 40%,rgba(18,17,24,.82) 100%);
}
.cl-hero-in{position:relative;z-index:2;padding:20px 22px;width:100%}
.cl-hero-brand{display:flex;align-items:center;gap:10px;margin-bottom:auto}
.cl-hero-brand span{font-size:15px;font-weight:600;color:#fff}
.cl-hero-brand .mark{background:rgba(255,255,255,.18)}
.cl-hero-day{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-top:44px;
}
.cl-hero h2{font-size:clamp(24px,5vw,30px);font-weight:600;letter-spacing:-.03em;color:#fff;margin:4px 0 0}

.cl-next{
  display:block;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);padding:16px 18px;margin-bottom:12px;color:inherit;
  transition:border-color .16s var(--ease);
}
.cl-next:hover{border-color:var(--ink)}
.cl-next-t{
  display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:12px;
}
.cl-next-b{display:flex;align-items:center;gap:13px}
.cl-next-av{
  width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;
  background:var(--lilac);font-size:17px;font-weight:600;
}
.cl-next-b b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.cl-next-b small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cl-cta{margin-bottom:16px;min-height:50px;border-radius:16px}

/* Bouton « Contactez-nous » de la barre du haut */
.cl-contact{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;
  padding:8px 14px;font-size:13.5px;color:var(--ink-2);
}
.cl-contact:hover{border-color:var(--ink);color:var(--ink)}
.cl-contact svg{width:16px;height:16px}
.cl-contact span{white-space:nowrap}


/* Retour en tête d'étape */
.step-back{
  display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;
  font-family:inherit;color:var(--muted);font-size:13.5px;padding:0;margin-bottom:14px;
}
.step-back:hover{color:var(--ink)}
.step-back svg{width:16px;height:16px}
@media (max-width:860px){
  .step-back span{display:none}
  .step-back{
    width:38px;height:38px;border-radius:50%;background:var(--surface-2);
    justify-content:center;margin-bottom:12px;
  }
  /* Les deux voies client tiennent sur une rangée */
  .acc-choice{grid-template-columns:1fr 1fr;gap:10px}
  .acc-pick{padding:16px 12px;text-align:center}
  .acc-pick-ic{margin:0 auto 10px;width:40px;height:40px;border-radius:13px}
  .acc-pick b{font-size:14.5px}
}

/* Tout bouton d'un porte-créneaux prend l'apparence d'un créneau, même
   s'il a été produit sans la classe : la sélection reste toujours visible. */
.slots button{
  padding:12px 6px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);
  text-align:center;font-size:14.5px;cursor:pointer;font-family:inherit;color:var(--ink);
  min-height:46px;transition:.15s var(--ease);
}
.slots button:hover{background:#fff;border-color:var(--ink)}
.slots button.on{background:var(--ink);color:#fff;border-color:var(--ink)}

/* Recherche de client : le champ était tronqué sur un écran étroit */
@media (max-width:860px){
  .topbar .search{flex:1 1 auto;min-width:0;max-width:none}
  .topbar .search input{width:100%;min-width:0}
  .topbar{gap:8px}
}

/* Menu jour / semaine : une fiche centrée au téléphone, plutôt qu'un
   menu ancré qui sortait de l'écran. */
@media (max-width:860px){
  .ct-dd[open] > .ct-menu{
    position:fixed;left:50%;right:auto;top:auto;bottom:16px;transform:translateX(-50%);
    width:calc(100vw - 32px);max-width:340px;z-index:3000;
    box-shadow:0 -18px 50px -24px rgba(21,20,27,.6);
  }
}

/* Fiche d'un rendez-vous : informations en lignes lisibles.
   Titres et valeurs s'empilaient sans respiration, le contact se collait
   au praticien. */
.bd-infos{
  display:flex;flex-direction:column;
  background:var(--surface-2);border-radius:var(--r-md);padding:4px 16px;
}
.bd-row{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:13px 0;border-top:1px solid var(--line-2);min-height:52px;
}
.bd-row:first-child{border-top:0}
.bd-row-col{flex-direction:column;align-items:flex-start;gap:6px}
.bd-k{
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  flex:0 0 auto;font-weight:600;
}
.bd-v{font-size:14.5px;color:var(--ink);text-align:right;min-width:0;word-break:break-word}
.bd-row-col .bd-v{text-align:left;margin:0;line-height:1.55}
.bd-link{color:var(--ink)}
.bd-link:hover{text-decoration:underline}
.bd-staff{display:flex;align-items:center;gap:9px}
.bd-staff b{font-weight:600}
.bd-svc-save{display:flex;justify-content:flex-end;margin-top:12px}

/* Agenda sur téléphone : la bande des praticiens suffit.
   Le menu déroulant affichait la même chose juste au-dessus. */
@media (max-width:860px){
  body.has-strip .cal-bar .ct-staff{display:none !important}
  .team-strip{
    display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .team-strip::-webkit-scrollbar{display:none}
  .team-strip .ts-i{flex:0 0 auto}
}

/* ── Espace client sur téléphone : sobre, clair, sans surcharge ──
   Le dégradé violet doublait la photo du bandeau : deux aplats forts
   l'un sur l'autre. Les cartes redeviennent blanches, l'accent se limite
   à un filet et à quelques touches de couleur. */
@media (max-width:860px){
  .cl-home .next-hero{
    background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
    border-radius:var(--r-lg);padding:18px;
  }
  .cl-home .next-hero::after{display:none}
  .cl-home .next-hero .tiny{color:var(--muted)}
  .cl-home .next-hero .h{
    font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--ink);margin:10px 0 2px;
  }
  .cl-home .next-hero .d{font-size:14.5px;color:var(--ink-2)}
  .cl-home .next-hero .s{font-size:13.5px;color:var(--muted);margin-top:8px}
  .cl-home .next-hero .btn-light{
    background:var(--surface-2);color:var(--ink);border-color:var(--line-2);
  }
  .cl-home .next-hero .btn-light:hover{background:var(--line-2)}

  /* Les compteurs : fond clair, chiffre net, pas de pastel plein écran */
  .cl-home .kpi-grid{gap:10px}
  .cl-home .kpi{
    background:var(--surface) !important;border:1px solid var(--line-2);
    border-radius:var(--r-md);padding:15px 16px;
  }
  .cl-home .kpi .tiny{color:var(--muted)}
  .cl-home .kpi .v{font-size:26px;font-weight:600;letter-spacing:-.03em;margin-top:4px}
  .cl-home .kpi .sub{font-size:12px;color:var(--muted)}

  /* Une ligne d'accent sous le titre du bandeau, pour la signature */
  .cl-home .cl-hero h2{font-size:26px}
  .cl-home .cl-hero-day{margin-top:36px;font-size:10.5px}

  /* Les cartes de la page respirent sans se chevaucher */
  .cl-home .stack{gap:12px}
  .cl-home .card{border-radius:var(--r-lg)}
}

/* Statut d'une demande : un seul menu, teinté selon l'état */
.dq-sel{
  border-radius:999px;padding:9px 34px 9px 16px;font-size:13.5px;font-weight:500;
  border:1px solid var(--line-2);background-color:var(--surface);min-height:40px;
}
.dq-sel.mint{background-color:var(--mint);border-color:transparent}
.dq-sel.peach{background-color:var(--peach);border-color:transparent}

/* ── Établissement : deux colonnes, hauteurs alignées ─────────
   La carte s'étirait sur une seule colonne très longue ; les blocs se
   répartissent et se calent sur la même hauteur de rangée. */
@media (min-width:1000px){
  .set-cols{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px 24px;align-items:stretch;
  }
  .set-cols > .form-sec{
    display:flex;flex-direction:column;height:100%;
    background:var(--surface-2);border-radius:var(--r-md);padding:18px;
    margin:0;border:0;
  }
  .set-cols > .form-sec > .hint{margin-top:auto;padding-top:12px}
  .set-cols > .form-sec-t{grid-column:1 / -1}
  /* Les éléments qui n'ont pas de sens sur une demi-largeur */
  .set-cols > .grid-2,
  .set-cols > .hero-card,
  .set-cols > button,
  .set-cols > script,
  .set-cols > .card-head{grid-column:1 / -1}
  .set-cols > label.field{align-self:start}
}

/* ── Filtres des demandes : défilement assumé ─────────────────
   Sur un écran étroit, « Archivées » sortait du cadre sans que rien ne
   l'indique. La barre glisse maintenant d'une seule ligne, avec un voile
   sur le bord droit tant qu'il reste des options à découvrir. */
.dm-filters{position:relative}
.dm-filters::after{
  content:'';position:absolute;right:0;top:0;bottom:0;width:36px;pointer-events:none;
  background:linear-gradient(90deg,rgba(244,244,247,0),var(--canvas) 72%);
  border-radius:0 999px 999px 0;opacity:0;transition:opacity .18s var(--ease);
}
.dm-filters.deborde::after{opacity:1}

@media (max-width:860px){
  .dm-filters{
    display:flex;flex-wrap:nowrap;overflow-x:auto;gap:4px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;
  }
  .dm-filters::-webkit-scrollbar{display:none}
  .dm-filters label{flex:0 0 auto;scroll-snap-align:start}
  .dm-filters span{white-space:nowrap;padding:9px 15px;display:inline-flex;align-items:center;gap:6px}
}

/* Compteur en pastille, plutôt qu'entre parenthèses : il ne pousse plus
   le libellé sur une seconde ligne. */
.dm-filters .cnt{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--ink);color:#fff;
  font-size:11px;font-weight:600;font-style:normal;line-height:1;
}
.dm-filters input:checked + span .cnt{background:var(--surface);color:var(--ink)}

/* Actions conservées au téléphone : une rangée pleine largeur */
@media (max-width:860px){
  .page-actions.keep{
    display:flex !important;width:100%;gap:8px;margin-top:12px;flex-wrap:wrap;
  }
  .page-actions.keep .btn{flex:1 1 auto;justify-content:center;min-height:44px}
}

/* Écran Cache & version : relevé ligne à ligne */
.ch-list{display:flex;flex-direction:column;gap:2px}
.ch-row{
  display:flex;align-items:flex-start;gap:12px;padding:12px 0;
  border-top:1px solid var(--line-2);
}
.ch-row:first-child{border-top:0}
.ch-row .badge{flex:0 0 auto;margin-top:1px}
.ch-row b{display:block;font-size:14.5px;font-weight:600}
.ch-row small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;word-break:break-all}

/* ── Espace client sur ordinateur : accueil harmonisé ─────────
   Le dégradé du bloc principal jurait avec les cartes blanches autour, et
   les deux colonnes se terminaient à des hauteurs différentes. */
@media (min-width:861px){
  .cl-home .next-hero{
    background:var(--surface);color:var(--ink);border:1px solid var(--line-2);
    padding:24px 26px;
  }
  .cl-home .next-hero::after{display:none}
  .cl-home .next-hero .tiny{color:var(--muted)}
  .cl-home .next-hero .h{
    font-size:42px;font-weight:300;letter-spacing:-.04em;color:var(--ink);margin:12px 0 4px;
  }
  .cl-home .next-hero .d{font-size:16px;color:var(--ink-2)}
  .cl-home .next-hero .s{font-size:14px;color:var(--muted);margin-top:10px}
  .cl-home .next-hero .btn-light{
    background:var(--surface-2);color:var(--ink);border-color:var(--line-2);
  }
  .cl-home .next-hero .btn-light:hover{background:var(--line-2)}

  /* Les deux colonnes s'alignent en haut et gardent le même rythme */
  .cl-home .cols-main{align-items:start;gap:18px}
  .cl-home .cols-main > .stack{gap:18px}
  .cl-home .cols-main > .stack > *{margin:0}

  /* Compteurs : même hauteur, même respiration que les cartes */
  .cl-home .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .cl-home .card.kpi{
    padding:22px 24px;background:var(--surface);border:1px solid var(--line-2);
    display:flex;flex-direction:column;justify-content:center;min-height:132px;
  }
  .cl-home .kpi .tiny{color:var(--muted)}
  .cl-home .kpi .v{font-size:34px;font-weight:300;letter-spacing:-.03em;margin-top:6px}

  /* Toutes les cartes de l'accueil partagent le même dessin */
  .cl-home .card{border-radius:var(--r-lg);border:1px solid var(--line-2)}
  .cl-home .card-head h3{font-size:16.5px}
}

/* Onglets d'une fiche client : rendez-vous / paiements */
.cl-tabs{margin-bottom:14px}
.cl-tabs .cnt{
  display:inline-grid;place-items:center;min-width:19px;height:19px;padding:0 5px;margin-left:7px;
  border-radius:999px;background:var(--line-2);color:var(--ink-2);
  font-family:ui-sans-serif,system-ui,sans-serif;font-size:11px;font-weight:700;
  font-style:normal;line-height:1;font-variant-numeric:tabular-nums;
}
.cl-tabs input:checked + span .cnt{background:var(--ink);color:#fff}

/* Catégories d'une prestation : des pastilles à cocher */
.cat-pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cat-chip{cursor:pointer;user-select:none}
.cat-chip input{position:absolute;opacity:0;width:0;height:0}
.cat-chip span{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line-2);background:var(--surface);border-radius:999px;
  padding:9px 16px;font-size:13.5px;color:var(--ink-2);
  transition:border-color .14s var(--ease),background .14s var(--ease);
}
.cat-chip span::before{
  content:'';width:15px;height:15px;border-radius:5px;border:1.5px solid var(--line);
  flex:none;transition:.14s var(--ease);
}
.cat-chip:hover span{border-color:var(--line)}
.cat-chip input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.cat-chip input:checked + span::before{
  background:#fff;border-color:#fff;
  box-shadow:inset 0 0 0 3px var(--ink);
}
.cat-chip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.cat-add{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;
  border:1px dashed var(--line);background:none;border-radius:999px;
  padding:9px 16px;font-size:13.5px;color:var(--muted);
}
.cat-add:hover{border-color:var(--ink);color:var(--ink)}
.cat-add svg{width:15px;height:15px}

/* Relevés de pointage à trancher */
.cc-list{display:flex;flex-direction:column;gap:12px}
.cc-row{border:1px solid var(--line-2);border-radius:var(--r-md);padding:16px 18px;background:var(--surface)}
.cc-row.bad{border-color:#EBD3D1;background:#FDF8F7}
.cc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
.cc-who b{display:block;font-size:15.5px;font-weight:600}
.cc-who small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.cc-etat{display:flex;gap:6px;flex-wrap:wrap}
.cc-lignes{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.cc-lignes > div span{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.cc-lignes > div b{display:block;font-size:15px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}
.cc-lignes > div small{display:block;font-size:12px;color:var(--muted)}
.cc-note{margin:12px 0 0;font-size:13.5px;color:var(--ink-2)}
.cc-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:16px;
  padding-top:14px;border-top:1px solid var(--line-2)}
.cc-prop{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;flex:1;min-width:0}
.cc-prop label{display:flex;flex-direction:column;gap:4px}
.cc-prop span{font-size:11px;color:var(--muted)}
.cc-prop input{border:1px solid var(--line);border-radius:11px;padding:9px 12px;font-size:14px;font-family:inherit}
.cc-prop input[name="review_note"]{flex:1;min-width:150px}

/* Performance détaillée, praticien par praticien */
.perf-list{display:flex;flex-direction:column;gap:14px}
.perf-row{border:1px solid var(--line-2);border-radius:var(--r-md);padding:18px 20px;background:var(--surface)}
.perf-who{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.perf-who b{display:block;font-size:15.5px;font-weight:600}
.perf-who small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.perf-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:14px 18px}
.perf-kpis > div span{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.perf-kpis > div b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-top:3px;
  font-variant-numeric:tabular-nums}
.perf-kpis > div small{display:block;font-size:11.5px;color:var(--muted)}
.perf-bas{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line-2)}
@media (min-width:860px){ .perf-bas{grid-template-columns:1fr 1fr;gap:28px} }
.perf-t{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.perf-line{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:13.5px}
.perf-line span{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.perf-line b{white-space:nowrap;font-variant-numeric:tabular-nums}
.perf-seg{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--surface-2)}
.perf-seg i{display:block;height:100%}
.perf-seg i.m{background:#BFD9BC}.perf-seg i.a{background:#C9BEEC}.perf-seg i.s{background:#EFCBA9}
.perf-leg{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px;font-size:12px;color:var(--muted)}
.perf-leg span{display:inline-flex;align-items:center;gap:6px}
.perf-leg i{width:9px;height:9px;border-radius:3px;display:block}
.perf-leg i.m{background:#BFD9BC}.perf-leg i.a{background:#C9BEEC}.perf-leg i.s{background:#EFCBA9}

/* Déroulé d'un test d'envoi : chaque étape, et l'endroit où ça bloque */
.mail-log{
  margin-top:16px;border-radius:var(--r-md);padding:14px 16px;
  background:var(--surface-2);border:1px solid var(--line-2);
  font-size:13px;line-height:1.55;
}
.mail-log.bad{background:#FDF8F7;border-color:#EBD3D1}
.mail-log.ok{background:#F3F8F3;border-color:#D4E5D3}
.ml-t{
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px;font-weight:600;
}
.ml-l{padding:4px 0 4px 16px;position:relative;color:var(--ink-2)}
.ml-l::before{
  content:'';position:absolute;left:3px;top:11px;width:5px;height:5px;
  border-radius:50%;background:var(--line);
}
.ml-l.last{color:#9A4046;font-weight:500}
.ml-l.last::before{background:#B4453F}

/* Fiche client : les sous-pages occupent toute la largeur */
.cl-solo{display:block}
.cl-solo > .stack{display:flex;flex-direction:column;gap:16px}

/* Onglets posés en tête de page */
.cl-tabs{margin:0 0 18px}

/* Hauteurs harmonisées sur la fiche : les deux colonnes s'alignent et
   les cartes d'une même rangée se terminent ensemble. */
@media (min-width:1100px){
  #clGrid.cols-aside{align-items:start;gap:18px}
  #clGrid .stack{display:flex;flex-direction:column;gap:18px;height:100%}
  #clGrid .stack > .card{margin:0}
}

/* Voie d'acheminement des e-mails */
.mail-route{
  border-radius:var(--r-md);padding:15px 17px;margin:0 0 16px;
  border:1px solid var(--line-2);background:var(--surface-2);
}
.mail-route.ok{background:#F3F8F3;border-color:#D4E5D3}
.mail-route.warn{background:#FDF6EF;border-color:#EEDCC4}
.mr-t{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.mail-route b{display:block;font-size:15.5px;font-weight:600;margin-top:5px}
.mail-route p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--ink-2)}
.mail-route .mr-help{color:var(--muted);font-size:12.5px}

/* Choix multiple : pastilles + menu déroulant */
.ms{margin-top:6px}
.ms-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:9px;min-height:2px}
.ms-chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;
  border:0;border-radius:999px;background:var(--ink);color:#fff;
  padding:7px 12px 7px 15px;font-size:13px;font-weight:500;
}
.ms-chip:hover{background:#33313D}
.ms-vide{font-size:13px;color:var(--muted);font-style:italic}
.ms-dd{position:relative;display:inline-block}
.ms-dd > summary{
  list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px dashed var(--line);background:none;border-radius:999px;
  padding:9px 16px;font-size:13.5px;color:var(--muted);
}
.ms-dd > summary::-webkit-details-marker{display:none}
.ms-dd > summary:hover{border-color:var(--ink);color:var(--ink)}
.ms-dd > summary svg{width:15px;height:15px}
.ms-menu{
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;min-width:250px;
  max-height:290px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:7px;
  box-shadow:0 18px 44px -18px rgba(21,20,27,.4);
}
.ms-actions{display:flex;gap:6px;padding:4px 6px 8px;border-bottom:1px solid var(--line-2);margin-bottom:5px}
.ms-actions button{
  flex:1;border:0;background:var(--surface-2);border-radius:9px;padding:7px;
  font-size:12px;font-family:inherit;color:var(--ink-2);cursor:pointer;
}
.ms-actions button:hover{background:var(--line-2)}
.ms-opt{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;cursor:pointer;font-size:14px}
.ms-opt:hover{background:var(--surface-2)}
.ms-opt input{width:16px;height:16px;accent-color:var(--ink);flex:none}

/* Lignes de rendez-vous d'une fiche client : colonnes alignées.
   Le montant, de largeur variable, décalait le statut d'une ligne à l'autre. */
@media (min-width:640px){
  .cl-row{
    display:grid;
    grid-template-columns:96px minmax(0,1fr) 124px 92px;
    align-items:center;gap:14px;
  }
  .cl-row > .badge{justify-self:start;white-space:nowrap}
  .cl-row > .cl-amt{justify-self:end;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
}

/* Fiche client sur ordinateur : indicateurs en blocs égaux */
@media (min-width:1100px){
  .cl-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
  .cl-kpi{
    background:var(--surface-2);border-radius:var(--r-md);padding:15px 16px;
    display:flex;flex-direction:column;justify-content:center;min-height:92px;
  }
  .cl-kpi span{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .cl-kpi b{
    display:block;font-size:24px;font-weight:600;letter-spacing:-.03em;margin-top:5px;
    font-variant-numeric:tabular-nums;
  }
  .cl-kpi.wide{grid-column:1 / -1;min-height:0;padding:13px 16px}
  .cl-kpi.wide b{font-size:16px;font-weight:600;letter-spacing:-.01em;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-kpi.ca{background:var(--ink);color:#fff}
  .cl-kpi.ca span{color:rgba(255,255,255,.62)}
  .cl-kpi.ca b{font-size:30px;font-weight:300}
}

/* Sous 1100 px, les indicateurs restent en lignes compactes */
@media (max-width:1099px){
  .cl-kpis{display:flex;flex-direction:column}
  .cl-kpi{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0}
  .cl-kpi span{font-size:13px;color:var(--muted)}
  .cl-kpi b{font-size:14.5px;font-weight:600}
  .cl-kpi.ca b{font-size:16px}
}

/* Vérification d'un code promotionnel */
.promo-row{display:flex;gap:8px;align-items:stretch}
.promo-row input{flex:1;min-width:0}
.promo-row .btn{flex:0 0 auto;white-space:nowrap}
.promo-msg{margin-top:8px;font-size:13px;line-height:1.5;padding:9px 13px;border-radius:12px}
.promo-msg.ok{background:#F3F8F3;color:#2F5D3A;border:1px solid #D4E5D3}
.promo-msg.bad{background:#FDF8F7;color:#9A4046;border:1px solid #EBD3D1}

/* Liste des protections du script */
.sec-list{display:flex;flex-direction:column;gap:2px}
.sec-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:13px 0;border-top:1px solid var(--line-2);
}
.sec-item:first-child{border-top:0}
.sec-ic{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;margin-top:1px;
  background:var(--mint);display:grid;place-items:center;
}
.sec-ic svg{width:13px;height:13px;color:#2F5D3A}
.sec-item b{display:block;font-size:14.5px;font-weight:600}
.sec-item p{margin:4px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* ── Lemon Impact — marques de distribution ────────────────────
   Ces sélecteurs sont utilisés par l'application : les retirer casse
   l'affichage, ce qui rend le retrait des marques d'auteur détectable. */
.li-shell{min-width:0}
.li-public{position:relative}
.li-credit{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:11.5px;color:var(--muted);text-align:center;letter-spacing:.01em;
}
.li-credit a{color:inherit;text-decoration:underline}
[data-li="lemon-impact"] .li-credit{display:block}

/* Invitation à recharger après une mise à jour.
   Elle remplace le rechargement automatique, qui pouvait interrompre une
   saisie en cours. */
.maj-invite{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:9000;
  display:flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;border-radius:999px;
  padding:11px 12px 11px 20px;font-size:13.5px;
  box-shadow:0 16px 40px -14px rgba(21,20,27,.5);
  max-width:calc(100vw - 32px);
}
.maj-invite .btn{background:#fff;color:var(--ink);border-color:#fff;padding:7px 15px}
.maj-invite .btn:hover{background:#EFEFEF}
.maj-x{
  background:none;border:0;color:rgba(255,255,255,.6);font-size:20px;line-height:1;
  cursor:pointer;padding:0 6px;font-family:inherit;
}
.maj-x:hover{color:#fff}
@media (max-width:520px){
  .maj-invite{left:16px;right:16px;transform:none;justify-content:space-between}
}

/* Réglages en deux colonnes franches, de hauteur égale par rangée.
   La grille générique s'adapte au contenu et produisait trois colonnes
   étroites sur les grands écrans. */
@media (min-width:1000px){
  .set-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .set-grid > .card{height:100%;margin:0}
}

/* Guide de récupération d'une clé de paiement */
.aide-etapes{display:flex;flex-direction:column;gap:2px;margin:6px 0 18px}
.aide-e{padding:13px 0;border-top:1px solid var(--line-2)}
.aide-e:first-child{border-top:0;padding-top:4px}
.aide-e b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px}
.aide-e p{margin:0;font-size:13.5px;line-height:1.65;color:var(--muted)}
.aide-e code,.aide-note code{
  background:var(--surface-2);border-radius:5px;padding:1px 6px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink-2);
}
.aide-note{
  background:var(--surface-2);border-radius:var(--r-md);padding:14px 16px;margin-top:12px;
  border:1px solid var(--line-2);
}
.aide-note.warn{background:#FDF6EF;border-color:#EEDCC4}
.aide-note b{display:block;font-size:13.5px;margin-bottom:5px}
.aide-note p{margin:0 0 8px;font-size:13px;line-height:1.6;color:var(--muted)}

/* Barre des catégories : filtre et édition, texte toujours lisible */
.cat-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;align-items:center}
.cat-f{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;font-weight:500;
  background:var(--surface);color:var(--ink-2);cursor:pointer;
  font-family:inherit;text-decoration:none;
  transition:border-color .15s,box-shadow .15s;
}
a.cat-f:hover{border-color:var(--ink);color:var(--ink)}
.cat-f.on{box-shadow:0 0 0 2px var(--ink)}
.cat-f a{text-decoration:none}
.cat-edit{
  background:none;border:0;padding:0 2px;cursor:pointer;font-size:12px;
  opacity:.55;font-family:inherit;line-height:1;
}
.cat-edit:hover{opacity:1}
.cat-new{border-style:dashed;color:var(--muted)}
.cat-new:hover{border-color:var(--ink);color:var(--ink)}

/* Fiche client : barre de navigation et grille harmonisées (ordinateur) */
.cl-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.cl-bar .cl-tabs{margin:0}

@media (min-width:1100px){
  .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px}
  .cl-grid > .stack{display:flex;flex-direction:column;gap:18px;height:100%}
  .cl-grid > .stack > .card{margin:0}
  /* Les boutons reprennent leur largeur naturelle, alignés à gauche */
  .cl-grid .card > form > .btn,
  .cl-grid .card > .btn{width:auto}
}

/* Extensions : cartes épurées, de hauteur égale */
.mod-grid{align-items:stretch}
.mod-card{display:flex;flex-direction:column;height:100%}
.mod-top{display:flex;align-items:center;gap:13px;margin-bottom:12px}
.mod-top .ic{margin:0;flex:0 0 auto}
.mod-top b{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.mod-etat{
  display:inline-block;margin-top:3px;font-size:11.5px;font-weight:500;
  color:var(--muted);
}
.mod-etat.on{color:#2F6B45}
.mod-etat.on::before{
  content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:#3E9B63;margin-right:6px;vertical-align:1px;
}
.mod-card p{flex:1;margin:0 0 4px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.mod-card .pro-tag{margin-left:6px}

/* Bulle d'identité du salon, en tête de la page de réservation */
.bkx-bulle{
  display:block;width:86px;height:86px;border-radius:50%;
  margin:0 auto 16px;overflow:hidden;
  background:rgba(255,255,255,.14);
  border:2px solid rgba(255,255,255,.4);
  box-shadow:0 10px 30px -10px rgba(0,0,0,.45);
}
.bkx-bulle img{width:100%;height:100%;object-fit:cover;display:block}
.bkx-bulle i{
  display:grid;place-items:center;width:100%;height:100%;
  font-style:normal;font-size:34px;font-weight:600;color:#fff;letter-spacing:-.02em;
}
@media (max-width:640px){
  .bkx-bulle{width:68px;height:68px;margin-bottom:12px}
  .bkx-bulle i{font-size:27px}
}

/* Agenda : une seule rangée de vignettes sur ordinateur.
   Les colonnes portent déjà la photo du praticien ; la bande du haut
   répétait la même information. Elle reste sur téléphone, où les colonnes
   n'existent pas. */
.corner-salon{display:none}

@media (min-width:900px){
  /* Uniquement en vue jour : là, chaque colonne porte déjà sa photo.
     En vue semaine la bande reste, c'est le seul moyen de filtrer. */
  .team-strip.doublee{display:none}

  .corner-salon{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    width:100%;height:100%;padding:10px 4px;
    background:none;border:0;border-radius:var(--r-md);cursor:pointer;font-family:inherit;
    transition:background .15s;
  }
  .corner-salon:hover{background:var(--surface-2)}
  .corner-salon.on{background:var(--surface-2)}
  .corner-salon .av,.corner-salon .thumb,.corner-salon img{width:38px;height:38px}
  .corner-salon span{
    font-size:11.5px;font-weight:600;color:var(--ink-2);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
  }
  .corner-salon.on span{color:var(--ink)}
}

/* Paiements : volets repliables, un seul ouvert à la fois.
   La version précédente montrait tout en même temps — même information, mais
   impossible à parcourir. */
.pay-wrap{max-width:780px}

.vol{
  background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r-lg);margin-bottom:10px;overflow:hidden;
  transition:border-color .18s var(--ease);
}
.vol.open{border-color:var(--line)}

.vol-tete{
  display:flex;align-items:center;gap:13px;width:100%;
  padding:16px 20px;background:none;border:0;cursor:pointer;
  font-family:inherit;text-align:left;
}
.vol-tete:hover{background:var(--surface-2)}
.vol.open .vol-tete{background:none}

.vol-n{
  flex:none;width:23px;height:23px;border-radius:50%;
  display:grid;place-items:center;font-size:11.5px;font-weight:600;
  background:var(--surface-2);color:var(--muted);border:1px solid var(--line-2);
}
.vol-n.ok{background:var(--mint,#E7F3EA);color:#2F6B45;border-color:#CFE4D8}

.vol-t{font-size:15px;font-weight:600;color:var(--ink);flex:none}
.vol-r{flex:1;font-size:13px;color:var(--muted);text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vol-c{flex:none;color:var(--muted);display:flex;transition:transform .2s var(--ease)}
.vol-c svg{width:16px;height:16px}
.vol.open .vol-c{transform:rotate(180deg)}

.vol-corps{display:none;padding:2px 20px 20px}
.vol.open .vol-corps{display:block}

/* Prestataires : une ligne chacun, pas trois pavés */
.prov-list{display:flex;flex-direction:column;gap:8px}
.prov{
  display:flex;align-items:center;gap:14px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--r-md);padding:12px 15px;
  transition:border-color .15s var(--ease);
}
.prov:hover{border-color:var(--line)}
.prov.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.prov input{position:absolute;opacity:0;pointer-events:none}
.prov-logo{flex:none;width:74px;display:flex;align-items:center}
.prov-logo svg,.prov-logo img{max-width:100%;height:auto;max-height:22px}
.prov-txt{flex:1;min-width:0}
.prov-txt b{display:block;font-size:14.5px;font-weight:600}
.prov-txt small{color:var(--muted);font-size:12.5px}
.prov-etat{flex:none;font-size:12px;color:var(--muted)}
.prov-etat.ok{color:#2F6B45;font-weight:600}

/* Marche à suivre, courte */
.onb{
  background:var(--surface-2);border-radius:var(--r-md);
  padding:15px 17px;margin-bottom:16px;
}
.onb b{display:block;font-size:13.5px;margin-bottom:8px}
.onb ol{margin:0 0 12px;padding-left:19px}
.onb li{font-size:13px;line-height:1.7;color:var(--ink-2)}
.onb code{background:var(--surface);border-radius:5px;padding:1px 6px;
  font-family:ui-monospace,Menlo,monospace;font-size:12px}

/* Déclaration du webhook */
.wh-bloc{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);padding:14px 16px;margin-top:14px;
}
.wh-bloc.ok{background:#F3F8F3;border-color:#D4E5D3}
.wh-bloc b{font-size:14.5px}
.wh-bloc .grow{flex:1;min-width:190px}

/* Bandeau de licence, en tête de l'écran Mise à jour */
.lic-bandeau{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:16px;padding:16px 20px;
}
.lic-bandeau .grow{flex:1;min-width:180px}
.lic-bandeau b{display:block;font-size:16px;font-weight:600;margin-top:2px}
.lic-bandeau.bad{background:#FDF8F7;border-color:#EBD3D1}

/* Mise à jour annoncée, en bas à droite */
.maj-toast{
  position:fixed;right:20px;bottom:20px;z-index:8500;
  display:flex;align-items:center;gap:14px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:13px 14px 13px 18px;
  box-shadow:0 18px 44px -18px rgba(21,20,27,.38);
  max-width:calc(100vw - 32px);
  animation:majIn .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes majIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.maj-toast b{display:block;font-size:14px;font-weight:600}
.maj-toast span{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.maj-toast .maj-x{
  background:none;border:0;color:var(--muted);font-size:19px;line-height:1;
  cursor:pointer;padding:0 4px;font-family:inherit;
}
.maj-toast .maj-x:hover{color:var(--ink)}
@media (max-width:520px){
  .maj-toast{left:16px;right:16px;bottom:78px}
}

/* ── Choix du mode de règlement, dans le tunnel ─────────────── */
.pay-pick{margin:18px 0}
.pay-pick-t{display:block;font-size:13px;color:var(--muted);margin-bottom:10px}
.pay-opts{display:grid;gap:10px}
@media (min-width:620px){ .pay-opts{grid-template-columns:1fr 1fr} }

.pay-opt{
  display:flex;align-items:center;gap:13px;cursor:pointer;position:relative;
  background:var(--surface,#fff);border:1px solid var(--line-2,#EFEDE7);
  border-radius:16px;padding:15px 17px;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.pay-opt:hover{border-color:var(--line,#E4E2DA)}
.pay-opt.on{border-color:var(--ink,#15141B);box-shadow:inset 0 0 0 1px var(--ink,#15141B)}
.pay-opt input{position:absolute;opacity:0;pointer-events:none}

.po-ic{
  flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface-2,#F7F6F2);color:var(--ink-2,#3D423F);
}
.po-ic svg{width:18px;height:18px}
.pay-opt.on .po-ic{background:var(--ink,#15141B);color:#fff}

.po-txt{flex:1;min-width:0}
.po-txt b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.po-txt small{display:block;color:var(--muted,#7C8380);font-size:12.5px;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.po-check{
  flex:none;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line,#E4E2DA);position:relative;
}
.pay-opt.on .po-check{border-color:var(--ink,#15141B);background:var(--ink,#15141B)}
.pay-opt.on .po-check::after{
  content:'';position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg);
}

/* ── Formulaire de paiement, par-dessus le tunnel ───────────── */
.pay-sheet{
  position:fixed;inset:0;z-index:9500;
  background:rgba(18,17,24,.55);
  display:flex;align-items:flex-end;justify-content:center;
  animation:psIn .2s ease;
}
@keyframes psIn{from{opacity:0}to{opacity:1}}
@media (min-width:640px){ .pay-sheet{align-items:center;padding:24px} }

.ps-box{
  width:min(560px,100%);max-height:92vh;display:flex;flex-direction:column;
  background:#fff;border-radius:24px 24px 0 0;overflow:hidden;
  animation:psUp .28s cubic-bezier(.22,.61,.36,1);
}
@keyframes psUp{from{transform:translateY(24px)}to{transform:none}}
@media (min-width:640px){ .ps-box{border-radius:24px} }

.ps-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid #EFEDE7;
}
.ps-head b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.ps-x{
  width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:#F5F4EF;color:#3D423F;font-size:20px;line-height:1;font-family:inherit;
  display:grid;place-items:center;
}
.ps-x:hover{background:#E4E2DA}

.ps-body{flex:1;overflow-y:auto;padding:18px 22px 24px;-webkit-overflow-scrolling:touch}
.ps-load{text-align:center;color:#7C8380;font-size:14px;padding:38px 0}

/* ═══ Paiements — parcours guidé (une décision par écran) ═══ */
.pz{display:grid;grid-template-columns:1fr;gap:18px;align-items:start;max-width:1120px}
@media (min-width:980px){ .pz{grid-template-columns:320px minmax(0,1fr);gap:24px} }
.pz-rail{background:var(--surface);border:1px solid var(--line-2);border-radius:24px;padding:22px}
@media (min-width:980px){ .pz-rail{position:sticky;top:20px} }
.pz-rail-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pz-rail-h b{font-size:17px;font-weight:600;letter-spacing:-.02em}
.pz-pct{font-size:22px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pz-bar{height:6px;border-radius:999px;background:var(--line-2);margin:12px 0 10px;overflow:hidden}
.pz-bar i{display:block;height:100%;border-radius:999px;background:#2E9E63;transition:width .4s var(--ease)}
.pz-steps{list-style:none;margin:0;padding:0}
.pz-steps li+li{border-top:1px solid var(--line-2)}
.pz-step{display:flex;align-items:center;gap:13px;padding:13px 4px;text-decoration:none;color:var(--ink);border-radius:14px}
a.pz-step:hover{background:var(--surface-2)}
.pz-step.cur{background:var(--surface-2);padding-left:10px;padding-right:10px;margin:0 -6px}
.pz-step > svg{width:15px;height:15px;color:var(--muted);flex:none}
.pz-dot{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1.5px dashed #D9A441;color:#fff;font-size:12px;font-weight:700}
.pz-dot svg{width:13px;height:13px}
.pz-step.done .pz-dot,.pz-ck.ok .pz-dot{border:0;background:#2E9E63}
.pz-step.skip{color:var(--muted);opacity:.7}
.pz-step.skip .pz-dot{border-color:var(--line)}
.pz-txt{flex:1;min-width:0}
.pz-txt b{display:block;font-size:14.5px;font-weight:500;letter-spacing:-.01em}
.pz-txt small{display:block;font-size:12.5px;color:var(--muted);margin-top:1px}
.pz-mode{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border-radius:14px;
  background:var(--amber);font-size:13px}
.pz-mode span{width:8px;height:8px;border-radius:50%;background:#C98A1B;flex:none}
.pz-mode.live{background:var(--mint)}
.pz-mode.live span{background:#2E9E63}

.pz-card{background:var(--surface);border:1px solid var(--line-2);border-radius:26px;padding:clamp(22px,3.4vw,40px)}
.pz-eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.pz-card h2{font-size:clamp(22px,2.4vw,27px);font-weight:600;letter-spacing:-.035em;margin:8px 0 6px;line-height:1.2}
.pz-lead{font-size:14.5px;color:var(--muted);line-height:1.6;margin:0 0 26px;max-width:620px}
.pz-hint{font-size:13px;color:var(--muted);line-height:1.55;margin:10px 0 0}

.pz-opts{display:grid;gap:10px}
.pz-opt{display:flex;align-items:center;gap:15px;padding:17px 18px;border:1px solid var(--line-2);border-radius:18px;
  cursor:pointer;position:relative;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.pz-opt:hover{border-color:var(--line)}
.pz-opt.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.pz-opt input{position:absolute;opacity:0;pointer-events:none}
.pz-ic{width:42px;height:42px;border-radius:13px;background:var(--lilac);display:grid;place-items:center;flex:none}
.pz-ic.mint{background:var(--mint)}
.pz-ic svg{width:19px;height:19px}
.pz-o-t{flex:1;min-width:0}
.pz-o-t b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.pz-o-t b em{font-style:normal;font-size:11.5px;font-weight:500;background:var(--mint);border-radius:999px;padding:3px 9px;margin-left:6px;vertical-align:2px}
.pz-o-t small{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.pz-radio{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line);flex:none;position:relative}
.pz-opt.on .pz-radio{border-color:var(--ink);background:var(--ink)}
.pz-opt.on .pz-radio::after{content:'';position:absolute;left:7px;top:3px;width:5px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(43deg)}
.pz-logo{width:74px;flex:none}
.pz-logo svg{width:100%;height:auto;display:block;border-radius:8px}

.pz-sub{margin-top:24px;padding-top:22px;border-top:1px solid var(--line-2)}
.pz-sub[hidden]{display:none}
.pz-sh{display:block;font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.pz-chips{display:flex;flex-wrap:wrap;gap:8px}
.pz-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;border:1px solid var(--line-2);
  cursor:pointer;font-size:14px;position:relative}
.pz-chip input{position:absolute;opacity:0;pointer-events:none}
.pz-chip svg{width:16px;height:16px;color:var(--muted)}
.pz-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.pz-chip.on svg{color:#fff}

.pz-env{display:inline-flex;background:var(--surface-2);border-radius:999px;padding:4px;gap:2px}
.pz-env a{padding:9px 16px;border-radius:999px;font-size:13.5px;color:var(--muted);text-decoration:none}
.pz-env a.on{background:var(--surface);color:var(--ink);font-weight:500;box-shadow:0 2px 8px -4px rgba(21,20,27,.3)}

.pz-guide{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:0}
.pz-guide > li{display:flex;gap:16px;padding:20px 0;border-top:1px solid var(--line-2)}
.pz-guide > li:first-child{border-top:0;padding-top:4px}
.pz-n{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;flex:none;display:grid;place-items:center;
  font-size:13.5px;font-weight:600}
.pz-n.ok{background:#2E9E63}
.pz-n svg{width:14px;height:14px}
.pz-guide > li > div{flex:1;min-width:0}
.pz-guide b{display:block;font-size:15.5px;font-weight:600;letter-spacing:-.015em}
.pz-guide p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:4px 0 12px}
.pz-guide code,.pz-lead code,.pz-hint code{background:var(--surface-2);border-radius:6px;padding:2px 6px;font-size:12.5px;color:var(--ink)}
.pz-field{display:flex;gap:8px;max-width:560px}
.pz-field input{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px}
.pz-paste{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:12px;
  padding:0 14px;font:inherit;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.pz-paste:hover{border-color:var(--line)}
.pz-paste svg{width:15px;height:15px}
.pz-check{display:block;font-style:normal;font-size:12.5px;margin-top:8px}
.pz-check.ok{color:#2E9E63}
.pz-check.bad{color:#C2413B}
.pz-check[hidden]{display:none}

.pz-checks{display:grid;gap:10px}
.pz-ck{display:flex;align-items:center;gap:15px;padding:17px 18px;border:1px solid var(--line-2);border-radius:18px}
.pz-ck.warn .pz-dot{border:0;background:#D9A441}
.pz-ck-t{flex:1;min-width:0}
.pz-ck-t b{display:block;font-size:15px;font-weight:600;letter-spacing:-.015em}
.pz-ck-t small{display:block;font-size:13px;color:var(--muted);margin-top:3px;line-height:1.5}
.pz-ck form{margin:0;flex:none}

.pz-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line-2)}
.pz-foot .btn{min-height:46px;border-radius:14px}
.pz-next svg{width:16px;height:16px}
@media (max-width:620px){
  .pz-foot{flex-direction:column-reverse;align-items:stretch}
  .pz-foot > span:empty{display:none}
  .pz-ck{flex-wrap:wrap}
  .pz-field{flex-direction:column}
  .pz-paste{min-height:42px;justify-content:center}
}
.pz-all{display:none;background:none;border:0;padding:4px 0 0;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:979px){
  .pz-rail{padding:18px 20px}
  .pz-all{display:inline-block}
  .pz-rail .pz-steps,.pz-rail .pz-mode{display:none}
  .pz-rail.open .pz-steps{display:block;margin-top:8px}
  .pz-rail.open .pz-mode{display:flex}
}

/* ═══ Agenda : praticiens en grand en semaine et en mois, date du jour centrée ═══ */
@media (min-width:861px){
  .team-strip.big{gap:10px;padding:4px 2px 18px}
  .team-strip.big .ts-i{width:100px;padding:10px 6px 12px;gap:9px;border-radius:20px}
  .team-strip.big .ts-i .st-av{width:62px;height:62px;font-size:19px;
    box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--c,#E3DCF5) 62%,#fff)}
  .team-strip.big .ts-i .st-av.team{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--line)}
  .team-strip.big .ts-i.on .st-av{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}
  .team-strip.big .ts-i .st-av svg{width:24px;height:24px}
  .team-strip.big .ts-i .nm{font-size:13px}
}
/* Le chiffre du jour, pile au centre de sa pastille noire */
.cal-head.today .dn{
  display:inline-grid;place-items:center;width:auto;min-width:32px;height:30px;
  padding:0 8px;border-radius:11px;line-height:1;margin:-2px auto -1px;
}
/* Mois : les pastilles de couleur ne décalent plus le chiffre */
.mcal button > span:first-child{line-height:1}
.mcal .dots{position:absolute;left:50%;bottom:8px;transform:translateX(-50%)}

/* ═══ Fiche client : blocs harmonisés, deux colonnes, boutons à leur taille ═══ */
.cl-id-top{display:flex;align-items:center;gap:16px}
.cl-id .avatar.xl{width:64px;height:64px;font-size:21px;flex:none;margin:0}
.cl-id-n{flex:1;min-width:0}
.cl-id-n h2{font-size:20px;font-weight:600;letter-spacing:-.03em;margin:0}
.cl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.cl-id-act{display:flex;gap:8px;flex:none}
.cl-info{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px;margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line-2)}
.cl-info dt{font-size:12px;color:var(--muted);margin:0 0 3px}
.cl-info dd{margin:0;font-size:14px;font-weight:500;min-width:0}
.cl-note{background:var(--amber);border-color:transparent}
.cl-arch{display:flex;justify-content:flex-end}
.cl-grid .btn:not(.icon-btn){width:auto;flex:0 0 auto}
.cl-grid .cl-btn{min-height:46px;padding:0 20px}
.cl-grid .card-head{margin-bottom:12px}
.cl-grid .card-head h3{font-size:16px;font-weight:600;letter-spacing:-.02em}
@media (min-width:861px){
  .cl-grid{align-items:start}
}
@media (max-width:620px){
  .cl-info{grid-template-columns:1fr}
  .cl-id-top{flex-wrap:wrap}
  .cl-tabs .cnt{display:inline-grid;margin-left:4px}
  .cl-tabs label span{white-space:nowrap}
  .cl-arch{justify-content:flex-start}
}
.pz-req{font-style:normal;font-size:11px;font-weight:600;background:var(--rose);border-radius:999px;padding:3px 8px;margin-left:6px;vertical-align:2px}

/* ═══ Demandes & formulaires : deux onglets, une seule entrée de menu ═══ */
.rq-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line-2);margin:0 0 20px;overflow-x:auto;scrollbar-width:none}
.rq-tabs::-webkit-scrollbar{display:none}
.rq-tabs a{display:inline-flex;align-items:center;gap:8px;padding:12px 14px 13px;font-size:14.5px;color:var(--muted);
  text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color .15s}
.rq-tabs a:hover{color:var(--ink)}
.rq-tabs a.on{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.rq-tabs a svg{width:17px;height:17px}
.rq-tabs a i{font-style:normal;font-size:11.5px;font-weight:600;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:inline-grid;place-items:center;background:var(--line-2);color:var(--ink-2)}
.rq-tabs a i.new{background:var(--peach);color:var(--ink)}
.rq-filter{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:11px 14px;margin:0 0 14px;font-size:14px}
.rq-filter span{display:inline-flex;align-items:center;gap:8px;color:var(--ink-2)}
.rq-filter svg{width:16px;height:16px}
.rq-filter a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);text-decoration:none}
.rq-filter a:hover{color:var(--ink)}
.dm-filters .cnt{margin-left:7px}

/* ═══ Tunnel, étape « Vos coordonnées » — ordinateur uniquement ═══
   Formulaire à gauche, récapitulatif fixe à droite. Le hero, la barre
   fixe du bas et la version mobile ne sont pas concernés. */
@media (min-width:861px){
  .bkx section[data-step="4"]:not(.hide){
    display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:48px;align-items:start;
  }
  .bkx section[data-step="4"] > *{grid-column:1;min-width:0}
  .bkx section[data-step="4"] > .card.sum4{
    display:block;grid-column:2;grid-row:1 / span 20;position:sticky;top:24px;margin:0 !important;
    background:var(--surface-2);border:0;border-radius:22px;padding:24px;
  }
  .sum4 .row-between:first-child .muted.small{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
  .sum4 #sumBody{gap:0 !important;margin-top:16px !important}
  .sum4 #sumBody > .row-between{padding:10px 0;font-size:14.5px}
  .sum4 #sumBody > .row-between + .row-between{border-top:1px solid var(--line)}
  .sum4 #sumBody > .row-between[style]{flex-direction:column;align-items:flex-start;gap:4px;padding-top:14px !important;margin-top:4px !important}
  .sum4 #sumTotal{font-size:15px;padding:6px 13px}

  /* Titre de l'étape et deux choix calmes, l'un sous l'autre */
  .acc-lead{grid-column:1 / -1;margin-bottom:10px}
  .acc-lead h2{font-size:26px;font-weight:600;letter-spacing:-.035em;margin:0 0 6px}
  .acc-lead p{font-size:14.5px;color:var(--muted);margin:0}
  .bkx section[data-step="4"] .acc-choice{grid-template-columns:1fr;gap:12px;margin:0}
  .bkx section[data-step="4"] .acc-pick{
    display:grid;grid-template-columns:48px minmax(0,1fr) 22px;grid-template-rows:auto auto;column-gap:16px;row-gap:3px;
    align-items:center;text-align:left;padding:18px 20px;border-radius:18px;min-height:0;position:relative;
    border:1px solid var(--line-2);background:var(--surface);transition:border-color .15s,box-shadow .15s;
  }
  .bkx section[data-step="4"] .acc-pick:hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);transform:none}
  .bkx section[data-step="4"] .acc-pick .acc-pick-ic{grid-row:1 / span 2;width:48px;height:48px;border-radius:15px;margin:0}
  .bkx section[data-step="4"] .acc-pick b{grid-column:2;font-size:16px;margin:0;align-self:end}
  .bkx section[data-step="4"] .acc-pick small{grid-column:2;font-size:13.5px;margin:0;align-self:start}
  .bkx section[data-step="4"] .acc-pick::after{
    content:'';grid-column:3;grid-row:1 / span 2;width:9px;height:9px;border-right:1.8px solid var(--muted);
    border-top:1.8px solid var(--muted);transform:rotate(45deg);justify-self:center;
  }

  /* Connexion : un bloc net, sans colonne vide */
  .bkx section[data-step="4"] .acc-back{margin:0 0 18px}
  .bkx section[data-step="4"] #panelHave .acc-two{display:block;max-width:460px}
  .bkx section[data-step="4"] #panelHave .acc-side{display:none}
  .bkx section[data-step="4"] .acc-h{font-size:24px;font-weight:600;letter-spacing:-.03em;margin:0 0 4px}
  .acc-hs{font-size:14px;color:var(--muted);margin:0 0 22px}
  .bkx section[data-step="4"] #panelHave .btn-block{margin-top:6px;min-height:50px;border-radius:14px}

  /* Inscription : sections titrées, plus d'encadré dans l'encadré */
  .acc-sec{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    margin:28px 0 14px;padding-top:24px;border-top:1px solid var(--line-2)}
  #panelFields > .acc-sec:first-of-type{margin-top:0;padding-top:0;border-top:0}
  .bkx section[data-step="4"] #panelFields .grid-2{gap:0 16px}
  .bkx section[data-step="4"] .acc-card{background:none;border:0;border-top:1px solid var(--line-2);border-radius:0;padding:24px 0 0;margin:14px 0 0}
  .bkx section[data-step="4"] .acc-card .acc-ic{display:none}
  .bkx section[data-step="4"] .acc-card .acc-head b{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
  .bkx section[data-step="4"] .acc-card .acc-head small{font-size:13.5px;margin-top:6px}
  .bkx section[data-step="4"] .acc-promo{max-width:480px;margin-top:10px}
  .bkx section[data-step="4"] .pay-pick-t{display:none}
}

/* ═══ Bandeau d'alerte des paiements : lisible, jamais débordant ═══ */
.pz-alert{display:flex;align-items:center;gap:16px;background:#FDF0EF;border:1px solid #F4D4D1;border-radius:18px;
  padding:16px 18px;margin:0 0 20px;max-width:1120px;box-sizing:border-box}
.pz-alert.soft{background:#FFF7E8;border-color:#F3E1B9;margin:18px 0 6px}
.pz-alert-ic{width:40px;height:40px;border-radius:12px;background:#fff;color:#B4362F;display:grid;place-items:center;flex:none}
.pz-alert.soft .pz-alert-ic{color:#9A6A12}
.pz-alert-ic svg{width:19px;height:19px}
.pz-alert-t{flex:1;min-width:0}
.pz-alert-t b{display:block;font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.pz-alert-t p{margin:3px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink-2);overflow-wrap:anywhere}
.pz-alert .btn{flex:none}
@media (max-width:620px){ .pz-alert{flex-wrap:wrap} .pz-alert .btn{width:100%} }
.pz-ck.bad{border-color:#F4D4D1;background:#FFFAFA}
.pz-ck.bad .pz-dot{border:0;background:#C2413B;color:#fff}

/* ═══ Paiements (administration) : un vert plus léger ═══ */
.pz-bar i{background:#8ED3AB}
.pz-step.done .pz-dot,.pz-ck.ok .pz-dot{background:#D7F0E1;color:#2F8A57}
.pz-n.ok{background:#D7F0E1;color:#2F8A57}
.pz-check.ok{color:#3C9A66}
.pz-mode.live{background:#EAF7EF}
.pz-mode.live span{background:#6CC293}

/* Fenêtres par-dessus une page dont le <body> porte la classe « bkx »
   (demande de devis) : la règle de largeur des enfants de .bkx les bornait
   à 1320 px, et le voile ne couvrait plus tout l'écran. */
.bkx > .dlg,.bkx > .pay-sheet{max-width:none !important;margin:0 !important;width:auto}


/* ═══ Panneau glissant depuis la droite (ordinateur) ═══
   Détail et modification d'un rendez-vous, fiche d'une prestation.
   Le fond reste en verre dépoli ; le téléphone garde ses fenêtres. */
@media (min-width:861px){
  .modal.drawer.open{display:flex;align-items:stretch;justify-content:flex-end;padding:0;overflow:hidden}
  .modal.drawer .modal-bg{
    background:rgba(22,21,15,.30);backdrop-filter:blur(7px) saturate(120%);-webkit-backdrop-filter:blur(7px) saturate(120%);
    animation:drFade .28s var(--ease);
  }
  .modal.drawer .modal-box,.modal.drawer .modal-box.wide{
    width:min(520px,100vw);max-width:none;height:100vh;height:100dvh;max-height:none;margin:0;
    border-radius:28px 0 0 28px;padding:0 30px 34px;overflow-y:auto;overscroll-behavior:contain;
    box-shadow:-30px 0 90px -40px rgba(21,20,27,.5);
    animation:drIn .36s cubic-bezier(.22,.9,.28,1);
  }
  .modal.drawer .modal-box.wide{width:min(700px,100vw)}
  .modal.drawer .modal-head{
    position:sticky;top:0;z-index:3;background:var(--surface);
    margin:0 -30px 22px;padding:26px 30px 18px;border-bottom:1px solid var(--line-2);border-radius:0;
  }
  .modal.drawer.instant .modal-box,.modal.drawer.instant .modal-bg{animation:none}
  .modal.drawer.closing .modal-box{animation:drOut .24s cubic-bezier(.4,0,.8,.4) forwards}
  .modal.drawer.closing .modal-bg{animation:drFadeOut .24s forwards}
  /* Boutons d'action du bas : toujours visibles */
  .modal.drawer .modal-foot,.modal.drawer .form-actions{
    position:sticky;bottom:-34px;z-index:2;background:var(--surface);margin:24px -30px -34px;padding:16px 30px 24px;
    border-top:1px solid var(--line-2);
  }
}
@keyframes drIn{from{transform:translateX(104%)}to{transform:none}}
@keyframes drOut{from{transform:none}to{transform:translateX(104%)}}
@keyframes drFade{from{opacity:0}to{opacity:1}}
@keyframes drFadeOut{from{opacity:1}to{opacity:0}}

/* ═══ Sélecteur multiple : étiquettes légères, sans surcharge ═══ */
.ms-tag{background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:500;
  padding:4px 5px 4px 11px;font-size:13px}
.ms-rm{background:var(--surface-2);color:var(--muted);width:18px;height:18px}
.ms-rm:hover{background:var(--line-2);color:var(--ink)}
.ms-rm svg{width:10px;height:10px}
.ms-more{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--line-2);
  color:var(--ink-2);font-size:12.5px;font-weight:600}
.ms-sum{font-size:14.5px;color:var(--ink-2);padding:3px 0}
.ms-sum b{font-weight:600;color:var(--ink)}