/* ==========================================================================
   ========================================================================== */

/* ------------------ Tokens ------------------ */
:root{
  /* Brand (bleu “product”) */
  --brand-50:#eef2ff; --brand-100:#e0e7ff; --brand-200:#c7d2fe;
  --brand-300:#a5b4fc; --brand-400:#818cf8; --brand-500:#6366f1;
  --brand-600:#4f46e5; --brand-700:#4338ca; --brand-800:#3730a3;
--day-dim-opacity: .5;
  --fc-dim-bg: color-mix(in srgb, var(--text) 9%, var(--card));

  /* Etat */
  --good-500:#10b981; --good-600:#059669;
  --warn-500:#f59e0b; --warn-600:#d97706;
  --bad-500:#ef4444;  --bad-600:#dc2626;

  /* Surfaces (clair) */
  --bg:#f6f8fb; --card:#ffffff; --elev:#ffffff;
  --text:#0f172a; --muted:#64748b; --line:#e6e8ef;

  /* Effets */
  --radius:14px;
  --ring:0 0 0 3px rgba(99,102,241,.25);
  --shadow:0 10px 26px rgba(2,6,23,.08);

  /* UI */
  --h-ctl:46px; --pad:16px;
  --modal-max:min(86vh,720px);

    --avail-mix: 32%;
  --avail-height: 3px; /* était 4px */
}



/* ------------------ Base / Reset doux ------------------ */
*{box-sizing:border-box}
html,body{height:100%}
html,body,#booking-app,.wrap{max-width:100%;overflow-x:hidden}
body{
  margin:0;background:var(--bg);color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Inter,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.wrap{max-width:1040px;margin:0 auto;min-height:100dvh;padding:10px 16px 24px;display:flex;flex-direction:column}
main{flex:1}
h1{font-size:clamp(22px,2.2vw + 16px,28px);margin:0 0 6px;font-weight:900}
h2{font-size:clamp(15px,1.2vw + 12px,18px);margin:0;color:var(--muted);font-weight:600}
.hidden{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ------------------ Appbar ------------------ */
.nav.appbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(120%) blur(8px);
}
.nav.appbar .appbar__inner{max-width:1200px;margin:0 auto;padding:10px 12px}
.appbar__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;min-width:0}
.logo-bubble{
  inline-size:40px;block-size:40px;border-radius:12px;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(99,102,241,.28), inset 0 1px 0 rgba(255,255,255,.16);
  overflow:hidden;font-weight:900
}
.logo-bubble img{inline-size:100%;block-size:100%;object-fit:contain;display:block}
.brand .name{font-weight:800;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}

/* --- Lang switch --- */
.lang-switch{position:relative}
.lang-switch .chip{
  height:38px;padding:0 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--text);font-weight:900;display:inline-flex;align-items:center;gap:6px;
}
.lang-switch .menu{
  position:absolute;right:0;top:calc(100% + 8px);display:none;z-index:50;
  min-width:260px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow);padding:8px;max-height:60vh;overflow:auto;
}
.lang-switch[aria-expanded="true"] .menu,
#langBtn[aria-expanded="true"] + .menu{display:block} /* sécurité */
.menu.menu--radio{list-style:none;margin:0;padding:8px}
.menu--radio .menu__item{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;text-decoration:none;color:inherit
}
.menu--radio .menu__item:hover{background:color-mix(in srgb,var(--brand-500) 12%,transparent)}
.menu__check{opacity:.6;width:18px;display:inline-grid;place-items:center}
.menu__code{margin-left:auto;opacity:.6}

/* ------------------ Cards / notices ------------------ */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--pad);box-shadow:var(--shadow);margin-top:16px
}
.notice{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,#fbfdff);border-radius:12px;padding:14px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.muted{font-size:.9rem;color:var(--muted)}

/* ------------------ Buttons ------------------ */
.btn{
  appearance:none;border:1px solid transparent;border-radius:12px;
  height:var(--h-ctl);padding:0 14px;cursor:pointer;font-weight:900;
  background:var(--card);color:var(--text);box-shadow:0 1px 0 rgba(0,0,0,.03);
  transition:filter .2s,transform .06s,box-shadow .2s,border-color .2s,background .2s
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.6;cursor:not-allowed}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* variants */
.btn.primary{color:#fff;background:linear-gradient(180deg,var(--brand-500),var(--brand-700))}
.btn.primary:hover{filter:brightness(.98);box-shadow:0 10px 22px rgba(79,70,229,.18)}
.btn.secondary{background:var(--card);border-color:var(--line)}
.btn.secondary:hover{border-color:var(--brand-400)}
.btn.success{color:#fff;background:linear-gradient(180deg,var(--good-500),var(--good-600))}
.btn.danger{ color:#fff;background:linear-gradient(180deg,var(--bad-500),var(--bad-600))}
.btn.warn{  color:#1f2937;background:linear-gradient(180deg,var(--warn-500),var(--warn-600));color:#111827}
.btn.ghost{ background:transparent;border-color:var(--line)}
/* actions spécifiques */
#ag-logout.btn{border-color:var(--line);background:var(--card)}
#ag-logout.btn:hover{border-color:var(--bad-500);color:var(--bad-600)}

/* ------------------ Forms ------------------ */
input[type="text"],input[type="email"],input[type="tel"],select{
  width:100%;height:var(--h-ctl);padding:0 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--text);transition:border-color .2s,box-shadow .2s
}
input::placeholder{color:color-mix(in srgb,var(--muted) 70%,transparent)}
input:focus,select:focus{outline:none;border-color:var(--brand-600);box-shadow:var(--ring)}
input.readonly{opacity:.8;cursor:not-allowed}
.form-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.form-grid{grid-template-columns:1fr 1fr}}
.field label{display:block;font-size:.9rem;color:var(--muted);margin-bottom:.45rem}

/* ------------------ Alerts ------------------ */
.alert{margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--elev)}
.alert.success{background:linear-gradient(180deg,#f0fff4,#e8ffee);color:#0f6b2b;border-color:#bfe7c9}
.alert.warn{   background:linear-gradient(180deg,#fff9ef,#fff3da);color:#7a5a12;border-color:#ffe3b5}
.alert.error{  background:linear-gradient(180deg,#fff6f6,#fff3f3);color:#b91c1c;border-color:#f1d2d2}

/* ------------------ “Service” picker (menu natif) ------------------ */
.service-line{display:block;margin:0 0 10px}
.service-line label[for="service-select"]{display:block;margin:0 0 .4rem;color:var(--muted);font-size:.95rem}
.svc-picker .icon,.svc-picker .caret{display:none!important}
.service-select{
  -webkit-appearance:menulist-button;appearance:auto;font-weight:800;
  background:var(--card);color:var(--text)
}
#service-hint{font-size:.9rem;color:var(--muted);margin:6px 0 8px}

/* ------------------ Login / OTP gate ------------------ */
.card--login .toolbar{display:flex;align-items:center;gap:10px}
.login-badge{margin-left:auto;opacity:.85}
#appt-gate{margin-top:8px}
#appt-gate .row{
  display:grid;grid-template-columns:1fr max-content;gap:10px;align-items:stretch;margin-bottom:10px;
}
#appt-gate input{min-width:0}
#ag-code{text-align:center;letter-spacing:.35em;padding-left:.35em}
.expander{overflow:hidden;max-height:0;opacity:0;transform:translateY(-6px);transition:max-height .35s,opacity .25s,transform .25s}
.expander.open{max-height:220px;opacity:1;transform:translateY(0)}
/* status banner (auto full-bleed dans la card) */
#ag-status{
  margin:12px calc(var(--pad) * -1) 0;
  padding:12px calc(var(--pad) + 12px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
#ag-status:empty{display:none}
#ag-status.ok,#ag-status.success{background:linear-gradient(180deg,#f0fff4,#e8ffee);color:#0f6b2b;border-color:#bfe7c9}
#ag-status.err,#ag-status.error{background:linear-gradient(180deg,#fff6f6,#fff3f3);color:#b91c1c;border-color:#f1d2d2}
#ag-status.warn,#ag-status.warning{background:linear-gradient(180deg,#fff9ef,#fff3da);color:#7a5a12;border-color:#ffe3b5}
@media (max-width:480px){
  #ag-status{margin-left:0;margin-right:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:10px}
}

/* ------------------ Loading ------------------ */
.loading{display:flex;align-items:center;gap:10px;margin:10px 0}
.loading .spinner{
  inline-size:18px;block-size:18px;border:3px solid color-mix(in srgb,var(--brand-400) 40%,transparent);
  border-right-color:transparent;border-radius:50%;animation:s 0.8s linear infinite
}
@keyframes s{to{transform:rotate(360deg)}}

/* ------------------ Calendar (FullCalendar) ------------------ */
.calendar{min-height:520px}
.fc .fc-toolbar.fc-header-toolbar{
  display:flex !important;flex-wrap:wrap;row-gap:8px;column-gap:10px;align-items:center;justify-content:space-between;margin-bottom:10px
}
.fc .fc-toolbar-title{font-weight:900;font-size:clamp(15px,2.2vw,18px)}
.fc .fc-button{border-radius:999px;font-weight:800;border:1px solid var(--line);padding:6px 10px;font-size:.86rem}
.fc .fc-button-primary{background:linear-gradient(180deg,var(--brand-500),var(--brand-700));color:#fff;border-color:transparent}
.fc .fc-button-primary:disabled{opacity:.6}
.fc .fc-daygrid-day-frame{cursor:pointer}
.fc .fc-daygrid-day.fc-day-today{background:color-mix(in srgb,var(--brand-300) 18%,transparent)}
.fc .has-slots{position:relative}
.fc .has-slots::after{content:"";position:absolute;inset:auto 10px 6px 10px;height:4px;border-radius:2px;background:var(--brand-600)}
.fc .no-slots .fc-daygrid-day-frame{filter:grayscale(1);opacity:.45;cursor:not-allowed}
.fc .no-slots .fc-daygrid-day-number{pointer-events:none}
.fc .fc-event.my-appt,.fc .bm-appt{background:var(--brand-600)!important;border-color:var(--brand-600)!important;color:#fff!important}
/* Anti-overflow */
#booking-app .fc,#booking-app .fc .fc-scrollgrid,#booking-app .fc .fc-view-harness{width:100%!important;max-width:100%!important}

/* ------------------ Modals (day / book / cancel) ------------------ */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
.modal.open{display:flex}
.modal .backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(1.5px)}
.modal .dialog{
  position:relative;background:var(--card);color:var(--text);
  border:1px solid var(--line);border-radius:var(--radius);
  width:min(680px,calc(100% - 32px));max-height:var(--modal-max);
  display:grid;grid-template-rows:auto 1fr auto;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.22)
}
.modal .head{padding:16px 18px 8px;border-bottom:1px solid var(--line)}
.modal .m-body{overflow:auto;padding:10px 18px 18px;display:grid;gap:12px}
.modal .actions{
  position:sticky;bottom:0;padding:12px 18px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,color-mix(in srgb,var(--card) 92%,transparent),var(--card));backdrop-filter:blur(2px)
}
.modal h3{margin:0 0 6px;font-size:1.05rem}
.modal p{margin:0}

/* Day modal slots */
.day-body{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow-y:auto;max-height:clamp(220px,52vh,460px)}
.slot-btn{
  border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card);text-align:center;cursor:pointer;
  transition:transform .06s,box-shadow .2s,border-color .2s
}
.slot-btn:hover{transform:translateY(-1px);border-color:var(--brand-400)}
.slot-btn:active{transform:translateY(0) scale(.99)}

/* Book modal form bits */
#book-conflict.hidden{display:none}
#book-form .field select,#book-form .field input{background:var(--elev)}
/* OTP group inside modal */
.otp .row{display:grid;grid-template-columns:1fr max-content;gap:10px;align-items:stretch}
#otp-code{
  width:12rem;height:var(--h-ctl);text-align:center;font:700 1.05rem/1.1 Inter,system-ui,Segoe UI,Roboto,sans-serif;
  letter-spacing:.45em;padding-left:.45em;border:1.5px solid var(--line);border-radius:12px;background:var(--card);color:var(--text)
}

/* ------------------ “Add to calendar” chooser (centrée) ------------------ */
.modal.cal-chooser .calc-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.modal.cal-chooser .calc-dialog{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(460px,92vw);background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.22);outline:none
}
.modal.cal-chooser .calc-head{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px 16px;border-bottom:1px solid var(--line)
}
.modal.cal-chooser #calc-title{margin:0;font-size:1.05rem;font-weight:800}
.modal.cal-chooser .calc-x{border:none;background:transparent;font-size:22px;line-height:1;cursor:pointer;padding:6px 8px;border-radius:8px}
.modal.cal-chooser .calc-x:hover{background:color-mix(in srgb,var(--brand-500) 10%,transparent)}
.modal.cal-chooser .calc-body{padding:12px 16px 16px 16px;display:grid;gap:10px}
.modal.cal-chooser .calc-opt{
  display:block;text-align:center;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:10px 12px;
  font-weight:700;background:var(--card);color:var(--text)
}
.modal.cal-chooser .calc-opt:hover{background:color-mix(in srgb,var(--brand-500) 10%,transparent)}
.modal.cal-chooser .calc-opt.hidden{display:none}

/* ------------------ “Mes RDV” cards ------------------ */
#my-appts .appt{
  background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand-600);
  border-radius:12px;padding:12px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin:.5rem 0
}
#my-appts .appt .top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
#my-appts .appt .svc{font-weight:800;font-size:1rem}
#my-appts .appt .when{color:var(--muted);font-size:.95rem;margin-top:2px}
#my-appts .appt .ops{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#my-appts .appt .ops .btn{min-height:38px}
#my-appts .badge{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .6rem;border-radius:999px;font-weight:800;
  background:color-mix(in srgb,var(--good-500) 14%, var(--card)); color:#065f46; border:1px solid color-mix(in srgb,var(--good-500) 40%, transparent)
}
/* panneau “confirmer présence” */
.appt .confirm-panel{
  border:1px solid color-mix(in srgb,var(--warn-500) 40%, transparent);
  background:color-mix(in srgb,var(--warn-500) 18%, var(--card));
  border-radius:12px;padding:10px
}
.appt .confirm-panel.hidden{display:none}
.appt .confirm-panel .panel-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ------------------ Footer ------------------ */
footer{margin-top:28px;padding:18px;border-top:1px solid var(--line);color:color-mix(in srgb,var(--muted) 90%,transparent)}
.fgrid{display:grid;gap:12px}
@media(min-width:680px){.fgrid{grid-template-columns:1fr 1fr}}
.contact{display:grid;gap:6px;margin-top:6px}
.contact .label{font-weight:700}

/* ------------------ Utilities ------------------ */
.toolbar{display:flex;gap:10px;align-items:center}
.mb-8{margin-bottom:8px}
.mt-12{margin-top:12px}
.btn.full{width:100%}

/* ------------------ Responsive tweaks ------------------ */
@media (max-width:520px){
  .fc .fc-button{padding:5px 8px;font-size:.8rem}
  #my-appts .appt .top{flex-direction:column}
  .lang-switch .menu{min-width:70vw}
}
@media (max-width:360px){
  .fc .fc-button{padding:4px 7px;font-size:.74rem}
}

/* ------------------ Reduced motion ------------------ */
@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}
/* ===== SINGLE SCROLL FIX — colle ceci tout en bas du fichier ===== */

/* 0) Hygiène : la page seule scrolle (pas les wrappers) */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: none; /* évite les rebonds/nesting */
}
#booking-app, .wrap, main {
  height: auto !important;
  overflow: visible !important;   /* pas de scroll nested */
}

/* 1) Quand une modale est ouverte, on bloque le scroll du body */
body:has(.modal.open) {
  overflow: hidden !important;
}

/* 2) FullCalendar : on supprime ses scrollers internes */
#calendar .fc,
#calendar .fc .fc-scrollgrid,
#calendar .fc .fc-view-harness,
#calendar .fc .fc-scroller,
#calendar .fc .fc-scroller-harness {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Parfois FC pose une hauteur “liquid” → on la casse */
#calendar .fc .fc-scrollgrid-section-liquid,
#calendar .fc .fc-daygrid-body,
#calendar .fc .fc-daygrid-body-unbalanced {
  height: auto !important;
}

/* 3) Les modales : un seul scroller possible = le corps de modale */
.modal {
  position: fixed; inset: 0; /* “décolle” de la page */
}
.modal .m-body {
  max-height: calc(var(--modal-max, 86vh) - 110px);
  overflow: auto;            /* si contenu long : scroller ici SEULEMENT */
}

/* 4) Sécurité overflow horizontal partout */
html, body, #booking-app, .wrap, main, .card, .calendar, .fc {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 5) Les bannières larges ne doivent pas créer un scroll horizontal */
.card #ag-status,
#msg.alert {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-left-width: 1px; border-right-width: 1px;
  border-radius: 10px;
}

/* 6) iOS “vh” quirks : on évite les sauts avec dvh */
@supports (height: 100dvh) {
  .wrap { min-height: 100dvh; }
}

/* 7) Pour être sûr que la toolbar FC ne force pas un harness à part */
#calendar .fc .fc-view-harness-active {
  height: auto !important;
}
/* --- resserrer l'espace sous la barre de nav --- */
:root{ --appbar-offset: 36px; }          /* ajuste: 48–60px selon ta nav */
.wrap{ padding-top: var(--appbar-offset) !important; }

/* un peu plus serré sur mobile si besoin */
@media (max-width: 480px){
  :root{ --appbar-offset: 32px; }
}
#client-login.card--login { display:none; }
.hidden { display: none !important; }
.alert.success { color:#0a0; }
.alert.warn    { color:#b8860b; }
.alert.error   { color:#b00; }
.hint.err { color:#b00; }
.hint.ok  { color:#0a0; }

/* (optionnel) feedback calendrier */
.fc-daygrid-day.has-slots .fc-daygrid-day-number { font-weight: 600; }
.fc-daygrid-day.no-slots { opacity: .5; }

#modal-book .otp-line{ display:flex; gap:10px; align-items:center; }
#modal-book #otp-code{ width:140px; }

/* Message entre le corps et les boutons (sans trait), un peu d'air + italique */
#modal-book .email-hint {
  margin-left: 10px;   /* espace au-dessus/dessous */
    margin-right: 10px;   /* espace au-dessus/dessous */
margin-top:-5px;
  padding-left: 10px;    /* du “air” autour du texte */
  padding-right: 10px;    /* du “air” autour du texte */

  font-style: italic;    /* italique */
  font-size: .95rem;
  color: var(--bm-muted);
}
#modal-book:has(#book-email-hint) .actions { border-top: none; }

/* ---------- LAYOUT DE BASE ---------- */

/* filets & containers */
.card .actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.card .m-body { margin-bottom: 10px; }

/* Grille champ + bouton (gate, otp, etc.) */
#appt-gate .row,
#book-otp .row {
  display:grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}

/* Empilage 100% sur petits écrans */
@media (max-width: 520px){
  #appt-gate .row,
  #book-otp .row {
    grid-template-columns: 1fr;
  }
  #appt-gate .row .btn,
  #book-otp .row .btn {
    width: 100%;
    justify-self: stretch;
  }
}

/* OTP : champ code sur une ligne autonome */
#book-otp .otp-code {
  margin: 8px 0;
}
#otp-code {
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--bm-border);
  background: inherit;
}

/* ---------- BOUTONS (taille/resp) ---------- */

.btn{
  --h: 40px;         /* était 46px */
  height: var(--h);
  padding: 0 12px;   /* était 16px */
  font-size: 0.95rem;
  border-radius: 10px;
}

.btn.secondary { border-color: var(--bm-border); }
.btn.success, .btn.danger, .btn.primary { border-color: transparent; }

/* Boutons de la modale : prennent la place dispo sans se tasser */
.modal .actions .btn {
  flex: 0 0 auto;
  min-width: 120px;
}
@media (max-width: 520px){
  .modal .actions { justify-content: stretch; }
  .modal .actions .btn { flex: 1 0 100%; min-width: 0; }
}

/* ---------- FORMES & CHAMPS ---------- */

.form-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr; /* mobile: 1 colonne */
}
@media (min-width: 640px){
  .form-grid{ grid-template-columns: 1fr 1fr; }
}

.field label{ display:block; font-size:.9rem; color:var(--bm-muted); margin-bottom:.45rem; }
.field input, .field select{
  width: 100%;
  min-width: 0;        /* évite débordements en grid */
  height: 42px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--bm-border);
  background: inherit;
}

/* Email en lecture seule : pas de contraste trop fort */
input.readonly{ opacity:.9; }

/* ---------- SELECTEUR SERVICE ---------- */

.svc-picker{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--bm-border);
  border-radius: 12px;
  background: linear-gradient(180deg,var(--bm-card),var(--bm-elev));
}
.svc-picker .icon{ flex: 0 0 auto; }
.svc-picker .service-select{
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0 36px 0 12px; /* réserve pour caret */
  border-radius: 10px;
  border: 1px solid var(--bm-border);
  background: inherit;
}
.svc-picker .caret{
  position: absolute;
  right: 16px;
  pointer-events: none; /* pas de blocage du select */
}

/* ---------- MODALES ---------- */

.modal .dialog{
  width: min(100vw - 32px, 640px);
  max-width: 100%;
  border-radius: 14px;
}
.modal .head .muted { margin-top: 6px; }
.modal .m-body{ max-height: 65vh; overflow: auto; }

/* Liste des créneaux du jour */
.day-body .slot-btn{
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  padding: 10px 12px;
  border: 1px solid var(--bm-border);
  border-radius: 10px;
  background: inherit;
}

/* ---------- LOGIN GATE ---------- */

#appt-gate input[type="email"],
#ag-code {
  height: 42px;
  padding: 0 12px;
}
#appt-gate .row .btn{
  height: 40px;
  padding: 0 12px;
}

/* évite le chevauchement de la badge/lang sur petites largeurs */
.appbar__actions{ min-width: 0; }
.lang-switch { position: relative; z-index: 5; }

/* ---------- MENUS ---------- */

.menu{ z-index: 50; } /* au-dessus des cartes/modales */

/* ===== LIGNES INLINE ROBUSTES (input + bouton) ===== */
.fieldline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content; /* champ prend tout l'espace, bouton garde sa taille */
  gap: 10px;
  align-items: center;
}
.fieldline input {
  min-width: 0;                 /* évite les débordements dans la grid */
  height: 38px;                 /* plus compact */
  padding: 0 12px;
  border-radius: 10px;
}
.fieldline .btn {
  height: 38px;                 /* plus compact */
  padding: 0 12px;
  border-radius: 10px;
  white-space: nowrap;          /* ne se casse pas */
}

/* OTP : input code lisible et centré */
#otp-code {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.15em;
}

/* ===== GATE (login) : email + envoyer sur une ligne stable ===== */
#appt-gate .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 10px;
  align-items: center;
}
#appt-gate input[type="email"] {
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
}
#appt-gate .row .btn {
  height: 38px;
  padding: 0 12px;
  border-radius: 10px;
  white-space: nowrap;
}

/* ===== RESPONSIVE : en mobile, le bouton passe dessous en full-width ===== */
@media (max-width: 640px){
  .fieldline,
  #appt-gate .row {
    grid-template-columns: 1fr;
  }
  .fieldline .btn,
  #appt-gate .row .btn {
    width: 100%;
  }
}

/* ===== TABLETTE/DESKTOP : colonnes stables (anti-chevauchement) ===== */
@media (min-width: 641px){
  /* impose une largeur mini au bouton pour éviter les variations */
  .fieldline .btn,
  #appt-gate .row .btn {
    min-width: 140px;           /* ajuste 120–160px selon ton libellé le plus long */
  }
}

/* ===== Ajustements généraux ===== */
#book-otp .hint,
#otp-status { margin-top: 6px; }

/* Contraint la largeur de la modale pour éviter l'étirement excessif */
#modal-book .dialog { max-width: 640px; }

/* Les gros boutons globaux restent grands, mais ceux du gate/otp sont compacts (voir ci-dessus) */

/* ===== Champ + bouton à droite (PC/tablette), pile nickel ===== */
:root { --h-inline: 40px; } /* hauteur uniforme des contrôles inline (champ + bouton) */

/* 1) Grilles input+button : champ prend l’espace, bouton compact collé à droite */
.fieldline,
#appt-gate .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto; /* 1) input s'étire  2) bouton garde sa largeur */
  gap: 10px;
  align-items: stretch; /* bouton = même hauteur que le champ */
}

/* 2) Le champ occupe tout, pas d’overflow */
.fieldline input,
#appt-gate .row input {
  min-width: 0;
  height: var(--h-inline);
  padding: 0 12px;
  border-radius: 10px;
}

/* 3) Le bouton est petit, même hauteur, totalement à droite */
.fieldline .btn,
#appt-gate .row .btn {
  height: var(--h-inline);
  align-self: stretch;   /* même hauteur */
  justify-self: end;     /* collé à droite de la grille */
  width: auto;
  min-width: 120px;      /* “petite largeur” mais lisible */
  padding: 0 12px;
  border-radius: 10px;
  white-space: nowrap;   /* libellé sur une ligne, pas de casse */
}

/* 4) Mobile : bouton passe dessous en full width (ergonomie) */
@media (max-width: 640px){
  .fieldline,
  #appt-gate .row { grid-template-columns: 1fr; }
  .fieldline .btn,
  #appt-gate .row .btn {
    width: 100%;
    justify-self: stretch;
  }
}

/* 5) Tablette/Desktop : largeur mini stable pour éviter les sauts */
@media (min-width: 641px){
  .fieldline .btn,
  #appt-gate .row .btn {
    min-width: 120px; /* ajuste 110–140px si tes libellés varient */
  }
}
/* ===== PC/TABLETTE : champ large + bouton compact aligné à droite ===== */
:root{
  --inline-h: 44px;          /* même hauteur champ/bouton */
  --inline-gap: 10px;
  --inline-btn-col: 150px;   /* largeur fixe de la colonne bouton (ajuste 130–170px) */
}

/* même gabarit pour toutes les lignes inline : login, OTP, fieldline générique */
@media (min-width: 641px){
  #appt-gate .row,
  #book-otp .fieldline,
  .fieldline{
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--inline-btn-col); /* champ s'étire, bouton fixe */
    gap: var(--inline-gap);
    align-items: stretch; /* mêmes hauteurs */
  }

  /* champ = max espace, pas d’overflow */
  #appt-gate .row input,
  #book-otp .fieldline input,
  .fieldline input{
    min-width: 0;
    height: var(--inline-h);
    padding: 0 12px;
    border-radius: 10px;
  }

  /* bouton = colonne fixe, collé à droite, texte protégé */
  #appt-gate .row .btn,
  #book-otp .fieldline .btn,
  .fieldline .btn{
    height: var(--inline-h) !important;     /* écrase les vieux styles 46px */
    width: var(--inline-btn-col);
    justify-self: end;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 12px;
    border-radius: 10px;
  }
}

/* MOBILE : empilement propre, bouton en full-width */
@media (max-width: 640px){
  #appt-gate .row,
  #book-otp .fieldline,
  .fieldline{
    grid-template-columns: 1fr;
  }
  #appt-gate .row .btn,
  #book-otp .fieldline .btn,
  .fieldline .btn{
    width: 100%;
    justify-self: stretch;
  }
}

/* ====== FIX PC/TABLETTE : champ large + bouton compact à droite ====== */
:root{ --btn-w:160px; --ctl-h:44px; }

/* Email sur 2 colonnes du form (PC/tablette) */
#book-form .field--wide{ grid-column:1 / -1; }

/* Grilles inline universelles (login, email, OTP) */
#appt-gate .row,
.fieldline,
#book-otp .fieldline{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) var(--btn-w) !important;
  gap:10px !important;
  align-items:stretch !important;
}

/* Inputs = pleine largeur, même hauteur partout */
#appt-gate .row input,
.fieldline input,
#book-otp .fieldline input{
  min-width:0 !important;
  height:var(--ctl-h) !important;
  padding:0 12px !important;
  border-radius:10px !important;
}

/* Boutons compacts, même hauteur, collés à droite */
#appt-gate .row .btn,
.fieldline .btn,
#book-otp .fieldline .btn{
  height:var(--ctl-h) !important;
  width:var(--btn-w) !important;
  justify-self:end !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  padding:0 12px !important;
  border-radius:10px !important;
}

/* OTP : fini le petit champ centré */
#otp-code{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  text-align:left !important;
  letter-spacing:0 !important;
}

/* Mobile : empilement full-width propre */
@media (max-width:640px){
  #appt-gate .row,
  .fieldline,
  #book-otp .fieldline{ grid-template-columns:1fr !important; }
  #appt-gate .row .btn,
  .fieldline .btn,
  #book-otp .fieldline .btn{ width:100% !important; justify-self:stretch !important; }
}

#my-appts-card .toolbar{ flex-wrap: wrap; }
#my-appts-card #hello-inline{ flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ag-logout{ flex: 0 0 auto; max-width: 100%; }


.fc .has-slots::after{
  height: var(--avail-height);
  /* on éclaircit la couleur de dispo en la mixant avec du transparent */
  background: color-mix(in srgb, var(--brand-600) var(--avail-mix), transparent);
  /* ou, en complément, tu peux aussi jouer un peu sur l’opacité : */
  opacity: .7; /* ajuste entre .4 et .85 selon ton goût */
}



/* Jours passés (référence) */
.fc .fc-day-past,
.fc .fc-day-past .fc-daygrid-day-frame{
  filter: grayscale(1) !important;
  opacity: var(--day-dim) !important;
}

/* Couvrir tous les cas possibles pour no-slots */
.fc .fc-daygrid-day.no-slots,
.fc .fc-daygrid-day.no-slots .fc-daygrid-day-frame,
.fc .no-slots .fc-daygrid-day-frame,
.fc .fc-daygrid-day-frame.no-slots{
  filter: grayscale(1) !important;
  opacity: var(--day-dim) !important;
  cursor: not-allowed !important;
}


/* Jours passés + jours sans dispo = même fond gris */
.fc .fc-day-past .fc-daygrid-day-frame,
.fc .fc-day-other .fc-daygrid-day-frame, /* jours d’un autre mois (optionnel) */
.fc .fc-daygrid-day.no-slots .fc-daygrid-day-frame,
.fc .no-slots .fc-daygrid-day-frame,
.fc .fc-daygrid-day-frame.no-slots{
  background: var(--fc-dim-bg) !important;
  border-color: color-mix(in srgb, var(--text) 8%, var(--line)) !important;
}

/* Empêche le cumul d’assombrissements précédents (si tu avais mis opacity/grayscale) */
.fc .fc-day-past,
.fc .fc-day-past .fc-daygrid-day-frame,
.fc .fc-daygrid-day.no-slots,
.fc .fc-daygrid-day.no-slots .fc-daygrid-day-frame,
.fc .no-slots .fc-daygrid-day-frame,
.fc .fc-daygrid-day-frame.no-slots{
  filter: none !important;
  opacity: 1 !important;
}

/* "Aujourd'hui" garde son surlignage */
.fc .fc-day-today .fc-daygrid-day-frame{
  background: color-mix(in srgb, var(--brand-300) 18%, transparent) !important;
}


:root{
  --fc-dim-bg: color-mix(in srgb, var(--text) 9%, var(--card));
}


/* 1) Gris pour passés + no-slots (quel que soit le mois) */
.fc .fc-day-past .fc-daygrid-day-frame,
.fc .fc-daygrid-day.no-slots .fc-daygrid-day-frame,
.fc .no-slots .fc-daygrid-day-frame,
.fc .fc-daygrid-day-frame.no-slots{
  background: var(--fc-dim-bg) !important;
  border-color: color-mix(in srgb, var(--text) 8%, var(--line)) !important;
}

/* 2) Jours d’un autre mois : NE PAS griser s’ils ont des slots */
.fc .fc-day-other .fc-daygrid-day-frame{
  background: inherit !important;            /* reset total */
}

/* Sécurité : aucun fade/opacity par défaut hors no-slots */
.fc .fc-day-other:not(.no-slots),
.fc .fc-day-other:not(.no-slots) .fc-daygrid-day-frame{
  filter: none !important;
  opacity: 1 !important;
}

/* 3) “Aujourd’hui” garde son surlignage */
.fc .fc-day-today .fc-daygrid-day-frame{
  background: color-mix(in srgb, var(--brand-300) 18%, transparent) !important;
}



/* ===== FORCE LIGHT PARTOUT (y compris FullCalendar) ===== */

/* Toujours en clair, même si un attribut "dark" fuit quelque part */
:root, html, body, .fc, .fc-theme-standard{
  color-scheme: light !important;
  --bg:#f6f8fb !important;
  --card:#ffffff !important;
  --elev:#ffffff !important;
  --text:#0f172a !important;
  --muted:#64748b !important;
  --line:#e6e8ef !important;
}

/* Palette explicite FullCalendar en clair */
.fc, .fc-theme-standard{
  --fc-page-bg-color:#ffffff !important;
  --fc-neutral-bg-color:#ffffff !important;
  --fc-neutral-text-color:#334155 !important;  /* texte gris foncé, pas blanc */
  --fc-border-color:#e6e8ef !important;

  --fc-button-text-color:#ffffff !important;
  --fc-button-bg-color: var(--brand-600) !important;
  --fc-button-border-color: transparent !important;
  --fc-button-hover-bg-color: var(--brand-700) !important;
  --fc-button-hover-border-color: transparent !important;
  --fc-button-active-bg-color: var(--brand-700) !important;
  --fc-button-active-border-color: transparent !important;

  --fc-today-bg-color: color-mix(in srgb, var(--brand-300) 18%, #fff) !important;
  --fc-now-indicator-color: var(--bad-600) !important;
}

/* Si un sélecteur "dark" traîne, on le neutralise */
:root.dark, html.dark, body.dark,
:root[data-theme="dark"], html[data-theme="dark"], body[data-theme="dark"],
:root[data-bs-theme="dark"], html[data-bs-theme="dark"], body[data-bs-theme="dark"]{
  color-scheme: light !important;
}

/* Petits correctifs de variables (cohérence) */
:root{
  --day-dim: .5;                  /* tu utilisais var(--day-dim) plus bas */
  --fc-dim-bg: color-mix(in srgb, var(--text) 9%, var(--card));
}


/* —— KILL DARK : remap des variables bm->light —— */
:root{
  color-scheme: light !important;

  /* map bm sur tes tokens clairs déjà définis en haut */
  --bm-bg:     var(--bg)    !important;
  --bm-card:   var(--card)  !important;
  --bm-elev:   var(--elev)  !important;
  --bm-border: var(--line)  !important;
  --bm-txt:    var(--text)  !important;
  --bm-muted:  var(--muted) !important;

  /* (optionnel) boutons/anneau si tu utilises ces vars */
  --bm-primary:      var(--brand-500) !important;
  --bm-primary-600:  var(--brand-600) !important;
  --bm-ring:         0 0 0 3px rgba(99,102,241,.25) !important;
}

/* FullCalendar en clair au cas où */
.fc, .fc-theme-standard{
  --fc-page-bg-color:#ffffff !important;
  --fc-neutral-bg-color:#ffffff !important;
  --fc-neutral-text-color:#0f172a !important;
  --fc-border-color:#e6e8ef !important;
  --fc-button-text-color:#ffffff !important;
  --fc-button-bg-color: var(--brand-600) !important;
  --fc-button-hover-bg-color: var(--brand-700) !important;
  --fc-button-active-bg-color: var(--brand-700) !important;
  --fc-button-border-color: transparent !important;
  --fc-today-bg-color: color-mix(in srgb, var(--brand-300) 18%, #fff) !important;
  --fc-now-indicator-color: var(--bad-600) !important;
}


/* Reset des espaces par défaut */
html, body { margin: 0; }              /* évite le blanc de 8px du body */

.page-header{
  margin: 0;                           /* pas de marge extérieure */
  padding: 0;                          /* pas de padding haut parasite */
}

.page-header h1{
  margin: 0 0 12px;                    /* supprime le gros margin-top; garde 12px en bas */
  line-height: 1.25;
  /* optionnel :
  font-size: 1.5rem;                   // fixe la taille pour que 1em ne gonfle pas les marges UA
  */
}
/* ====== Grille & numéros TOUJOURS visibles ====== */

/* 1) Traits de grille partout (y compris cellules "fermées" ou passées) */
.fc-theme-standard td,
.fc-theme-standard th,
.fc .fc-scrollgrid,
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th{
  border-color: var(--line) !important;
}

/* 2) On "grise" seulement le corps de la cellule, pas la barre du numéro */
.fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-frame,
.fc .fc-daygrid-day.no-slots     .fc-daygrid-day-frame{
  background: var(--fc-dim-bg) !important;
  /* on laisse les bordures bien visibles */
  border-color: color-mix(in srgb, var(--text) 10%, var(--line)) !important;
}

/* 3) La zone du numéro reste claire, lisible, sans filtre */
.fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-top,
.fc .fc-daygrid-day.no-slots     .fc-daygrid-day-top{
  background: transparent !important;
  filter: none !important;
}

/* 4) Numéro du jour = 100% visible (même si "no-slots" ou passé) */
.fc .fc-daygrid-day .fc-daygrid-day-number{
  opacity: 1 !important;
  color: var(--text) !important;
  filter: none !important;
  pointer-events: none; /* le numéro ne capte pas de clics */
}

/* 5) On bloque le clic sur la cellule fermée/past, mais on garde l’aspect */
.fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-frame,
.fc .fc-daygrid-day.no-slots     .fc-daygrid-day-frame{
  pointer-events: none !important;
  cursor: not-allowed !important;
}

/* 6) Jours d’un autre mois : numéro lisible (pas "fantôme") */
.fc .fc-day-other .fc-daygrid-day-number{
  opacity: 1 !important;
  color: color-mix(in srgb, var(--text) 70%, #fff) !important;
}

/* 7) "Aujourd’hui" garde son surlignage, malgré les overrides */
.fc .fc-day-today .fc-daygrid-day-frame{
  background: color-mix(in srgb, var(--brand-300) 18%, transparent) !important;
}

/* 8) Indicateur de disponibilité (barre bas) reste visible si présent */
.fc .has-slots::after{
  height: var(--avail-height);
  background: color-mix(in srgb, var(--brand-600) var(--avail-mix), transparent);
  opacity: .8;
}


/* === GRISER SANS CASSER LA GRILLE & LE NUMÉRO === */

/* 0) Plus d'opacité/filtre (sinon ça grise aussi les bordures) */
#calendar .fc .fc-daygrid-day,
#calendar .fc .fc-daygrid-day-frame,
#calendar .fc .fc-daygrid-day-top,
#calendar .fc .fc-daygrid-day-number{
  opacity: 1 !important;
  filter: none !important;
}

/* 1) Couleur de grille bien contrastée */
:root{
  /* renforce un peu la grille vs fond grisé */
  --line: #d7dbe6;                 /* filet de cellule */
  --fc-dim-bg: #eef1f6;            /* fond “gris” interne */
}

/* 2) La cellule a un contexte de position pour le calque */
#calendar .fc .fc-daygrid-day .fc-daygrid-day-frame{ position: relative; }

/* 3) Calque gris INTERNE avec marge 1px pour laisser voir la grille */
#calendar .fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-frame::before,
#calendar .fc .fc-daygrid-day.no-slots     .fc-daygrid-day-frame::before{
  content: "";
  position: absolute;
  /* marge interne = on NE couvre PAS la bordure ⇒ la grille reste visible */
  inset: 1px;
  background: var(--fc-dim-bg);
  pointer-events: none;
  border-radius: 2px;
  z-index: 0;
}

/* 4) Numéro et événements passent devant le calque */
#calendar .fc .fc-daygrid-day .fc-daygrid-day-top,
#calendar .fc .fc-daygrid-day .fc-daygrid-day-events{
  position: relative; z-index: 1;
}
#calendar .fc .fc-daygrid-day .fc-daygrid-day-number{
  position: relative; z-index: 2;
  color: var(--text, #0f172a) !important; /* lisible même en zone grise */
}

/* 5) Sécurise la grille FC (si un thème a affaibli les bordures) */
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th,
#calendar .fc .fc-scrollgrid td,
#calendar .fc .fc-scrollgrid th{
  border-color: var(--line) !important;
}

/* 6) Option “ceinture & bretelles” : filet interne 1px (anti-thèmes agressifs)
   → dessine seulement TOP/LEFT pour éviter les doubles épaisseurs */
#calendar .fc .fc-daygrid-day .fc-daygrid-day-frame{
  box-shadow:
    inset 1px 0 0 var(--line),  /* gauche */
    inset 0 1px 0 var(--line);  /* haut   */
}
#calendar .fc .fc-daygrid-day:last-child .fc-daygrid-day-frame{
  box-shadow:
    inset 1px 0 0 var(--line),
    inset 0 1px 0 var(--line),
    inset -1px 0 0 var(--line); /* droite en dernière colonne */
}
#calendar .fc .fc-daygrid-row:last-child .fc-daygrid-day .fc-daygrid-day-frame{
  box-shadow:
    inset 1px 0 0 var(--line),
    inset 0 1px 0 var(--line),
    inset 0 -1px 0 var(--line); /* bas en dernière ligne */
}

/* 7) Aujourd’hui conserve son surlignage */
#calendar .fc .fc-day-today .fc-daygrid-day-frame{
  background: color-mix(in srgb, var(--brand-300, #a5b4fc) 18%, #fff) !important;
}

/* (facultatif) si tu veux bloquer clic sur passé/fermés mais garder visuel */
#calendar .fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-frame,
#calendar .fc .fc-daygrid-day.no-slots     .fc-daygrid-day-frame{
  cursor: not-allowed !important;
  pointer-events: none !important;
}


/* === FIX FINAL : jours passés/no-slots gris sans masquer chiffre & grille === */

/* Hauteur réelle de la barre du numéro (augmente si besoin : 28–34px) */
:root{ --fc-day-top-h: 30px; }

/* 0) Neutraliser tous les pseudo-calques posés ailleurs */
#calendar .fc .fc-daygrid-day-frame::before,
#calendar .fc .fc-daygrid-day-frame::after{
  content: none !important;
}

/* 1) AUCUN filtre/opacity sur les cellules ni leurs entêtes/chiffres */
#calendar .fc .fc-daygrid-day,
#calendar .fc .fc-daygrid-day-frame,
#calendar .fc .fc-daygrid-day-top,
#calendar .fc .fc-daygrid-day-number{
  opacity: 1 !important;
  filter: none !important;
}

/* 2) Griser le corps de cellule uniquement (fond en dégradé) */
#calendar .fc .fc-day-past .fc-daygrid-day-frame,
#calendar .fc .fc-daygrid-day.no-slots .fc-daygrid-day-frame{
  /* transparent jusqu’à la barre du numéro, gris en dessous */
  background:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--fc-day-top-h),
      var(--fc-dim-bg, #eef1f6) var(--fc-day-top-h),
      var(--fc-dim-bg, #eef1f6) 100%
    ) !important;
  position: relative !important;
  isolation: isolate !important; /* contexte z-index propre */
}

/* 3) Numéro et header toujours au-dessus et lisibles */
#calendar .fc .fc-daygrid-day .fc-daygrid-day-top,
#calendar .fc .fc-daygrid-day .fc-daygrid-day-number{
  position: relative !important;
  z-index: 3 !important;
  background: transparent !important;
  color: var(--text, #0f172a) !important;
  mix-blend-mode: normal !important;
}

/* 4) Grille toujours visible */
#calendar .fc-theme-standard td,
#calendar .fc-theme-standard th,
#calendar .fc .fc-scrollgrid td,
#calendar .fc .fc-scrollgrid th{
  border-color: var(--line, #d7dbe6) !important;
}

/* 5) Aujourd’hui garde son surlignage */
#calendar .fc .fc-day-today .fc-daygrid-day-frame{
  background: color-mix(in srgb, var(--brand-300, #a5b4fc) 18%, transparent) !important;
}

/* 6) (optionnel) rendre passé/no-slots non cliquables sans affecter l’affichage */
#calendar .fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-frame,
#calendar .fc .fc-daygrid-day.no-slots     .fc-daygrid-day-frame{
  pointer-events: none !important;
  cursor: not-allowed !important;
}

  :root{ --fc-day-top-h: 32px; }


/* Kill top gap under sticky nav (override the 88px) */
.appbar + .wrap { padding: 10px 16px 24px !important; } /* ajuste 0–16px */
.page-header{ margin-top:0 !important; padding-top:0 !important; }
.page-header h1{ margin-top:0 !important; }


/* 1) HERO : grille mobile-first, ne s’écrase plus */
.hero{ padding: clamp(2rem, 6vw, 5rem) 0; }
.hero__grid{ display:grid; grid-template-columns:1fr; gap:clamp(1rem, 2vw, 2rem); align-items:center; }
@media (min-width:980px){ .hero__grid{ grid-template-columns:1.1fr .9fr; } }
/* Ordre lisible sur mobile */
.hero__copy{ order:1; }
.hero__visual{ order:2; }
@media (min-width:980px){ .hero__copy,.hero__visual{ order:initial; } }
/* CTA plein largeur sur mobile */
@media (max-width:640px){ .hero__ctas{ flex-direction:column; } .hero .btn{ width:100%; } }

/* 2) SNIPPET : code scrollable, pas de débordement */
.hero__snippet{ margin-top:1rem; }
.snippet__code{ display:block; padding: .9rem 1.1rem; overflow:auto; white-space:pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size:.925rem; line-height:1.45; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:12px; }

/* 3) TUILES : grille solide, pas d’écrasement */
.hero__tiles{ display:grid; grid-template-columns:1fr; gap:.8rem; margin-top:clamp(.8rem,1.6vw,1.2rem); }
@media (min-width:640px){ .hero__tiles{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width:1100px){ .hero__tiles{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
.tile{ min-height: auto; }

/* 4) STEPS : 1 colonne sur mobile */
.steps{ display:grid; grid-template-columns:1fr; gap:clamp(.8rem,1.6vw,1rem); }
@media (min-width:980px){ .steps{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* 5) AOS : neutralisé sous 480px pour éviter les chevauchements lents */
@media (max-width:480px){ [data-aos]{ opacity:1!important; transform:none!important; } }

/* 6) DÉDOUBLONNAGE : garder UNE seule version de ces règles */
/* Supprimez les doublons de :root, .hero__title, .tabs__btn.is-active déjà présents plus haut. */

/* 7) ACCESSIBILITÉ : focus propre */
:where(a,button,.btn,.tabs__btn,.dock):focus-visible{ outline:none; box-shadow:0 0 0 4px rgba(91,124,250,.25); border-radius:12px; }

/* ==== NUMÉRO DE JOUR : dim si fermé/past/férié, foncé si réservable ==== */
:root{ --daynum-dim: var(--day-dim-opacity, .22); } /* quasi transparent */

/* 0) Base (au cas où) */
#calendar .fc .fc-daygrid-day .fc-daygrid-day-top :is(a.fc-daygrid-day-number,.fc-daygrid-day-number){
  color: var(--text) !important;
  opacity: .9 !important;
}

/* 1) FERMÉ / NON RÉSERVABLE (SANS changer le bg) */
#calendar .fc .fc-daygrid-day:is(
  .fc-day-past,                    /* jours passés */
  .no-slots,                       /* classe maison "pas de créneaux" */
  .fc-day-disabled,                /* hors validRange */
  .fc-day-other:not(.has-slots),   /* autre mois sans slots */
  :has(.fc-non-business),          /* jours non ouvrés / fériés */
  :has(.fc-bg-event),              /* fériés via background events */
  :has(.fc-daygrid-day-frame.no-slots) /* si no-slots posé sur frame */
) .fc-daygrid-day-top :is(a.fc-daygrid-day-number,.fc-daygrid-day-number){
  color: var(--muted) !important;
  opacity: var(--daynum-dim) !important; /* <<< dim réel du numéro */
}

/* 2) OUVERT (RÉSERVABLE) — numéro bien lisible */
#calendar .fc .fc-daygrid-day.has-slots .fc-daygrid-day-top :is(a.fc-daygrid-day-number,.fc-daygrid-day-number){
  color: var(--text) !important;
  opacity: 1 !important;
  font-weight: 800;
}

/* 3) Aujourd’hui reste lisible (si ouvert) */
#calendar .fc .fc-daygrid-day.fc-day-today.has-slots .fc-daygrid-day-top :is(a.fc-daygrid-day-number,.fc-daygrid-day-number){
  opacity: 1 !important;
}

/* Bouton "Confirmer ma présence" — texte blanc */
#my-appts .btn.success,
#my-appts .btn.success:hover,
#my-appts .btn.success:focus-visible {
  color: #fff !important;
}

/* État disabled un peu atténué */
#my-appts .btn.success[disabled] {
  color: rgba(255,255,255,0.75) !important;
}

/* Conteneur du composant */
.svc-select{ position:relative; max-width:100%; }

/* Bouton d’ouverture (mêmes tokens que .btn) */
.svc-trigger{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; height:46px; padding:0 14px; border-radius:12px;
  border:1px solid var(--bm-border); background:var(--bm-card);
  box-shadow:var(--bm-shadow-soft); font-weight:600; cursor:pointer;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Menu exactement à la largeur du bouton */
.svc-menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:50;
  width:100%;                                   /* <= clé : colle au bouton */
  max-height:280px; overflow:auto;
  background:var(--bm-card); border:1px solid var(--bm-border);
  border-radius:12px; box-shadow:var(--bm-shadow); display:none;
}
.svc-select[aria-expanded="true"] .svc-menu{ display:block; }

/* Items */
.svc-option{
  padding:10px 12px; line-height:1.25;
  white-space:normal; word-break:break-word; hyphens:auto; /* long labels wrap */
}
.svc-option[aria-selected="true"]{
  background: color-mix(in srgb, var(--bm-primary) 12%, transparent);
}
.svc-option:hover{
  background: color-mix(in srgb, var(--bm-primary) 16%, transparent);
}

 /* Hauteur de la barre du numéro en haut de case (ajuste 28–34px) */
  :root{ --fc-day-top-h: 34px; }

  /* 0) On neutralise tout voile posé ailleurs */
  #calendar .fc .fc-daygrid-day-frame::before,
  #calendar .fc .fc-daygrid-day-frame::after{
    content: none !important;
  }

  /* 1) JAMAIS d’opacité/filtre sur header/numéro (même en passé/no-slots) */
  #calendar .fc .fc-daygrid-day-top,
  #calendar .fc .fc-daygrid-day-number{
    opacity: 1 !important;
    filter: none !important;
    position: relative !important;
    z-index: 3 !important;
    color: var(--bm-txt, #0f172a) !important; /* lisible en thème clair */
    background: transparent !important;
    mix-blend-mode: normal !important;
    pointer-events: none; /* le chiffre ne capte pas les clics */
  }

  /* 2) Griser UNIQUEMENT le corps de cellule (pas la barre de numéro) */
  #calendar .fc .fc-daygrid-day.fc-day-past .fc-daygrid-day-frame,
  #calendar .fc .fc-daygrid-day.no-slots     .fc-daygrid-day-frame{
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent var(--fc-day-top-h),
        var(--fc-dim-bg, #eef1f6) var(--fc-day-top-h),
        var(--fc-dim-bg, #eef1f6) 100%
      ) !important;
    position: relative !important;
    isolation: isolate !important;
    cursor: not-allowed !important;
    pointer-events: none !important; /* visuel ok, pas cliquable */
  }

  /* 3) Grille/traits toujours visibles */
  #calendar .fc-theme-standard td,
  #calendar .fc-theme-standard th,
  #calendar .fc .fc-scrollgrid td,
  #calendar .fc .fc-scrollgrid th{
    border-color: var(--bm-border, #e6e8ef) !important;
  }

  /* 4) Aujourd’hui garde son surlignage */
  #calendar .fc .fc-day-today .fc-daygrid-day-frame{
    background: color-mix(in srgb, var(--brand-300, #a5b4fc) 18%, transparent) !important;
  }

  /* ── Coller le H1 juste sous la nav ───────────────────────── */

/* Empêche le collapse et supprime les marges hautes */
.page-header{
  display: flow-root;       /* casse le margin-collapsing proprement */
  margin-top: 0;
  padding-top: 0;
}
.page-header h1{
  margin-top: 0;            /* tue le margin haut par défaut du H1 */
}

/* Ceinture et bretelles : si d’autres blocs sont avant le header */
main > *:first-child{ margin-top: 0; }

/* Si la nav a un margin-bottom défini dans base.css, on le neutralise ici pour la page booking */
.appbar{ margin-bottom: 0; }

/* Si un padding-top a été posé sur le conteneur global */
.appbar + .wrap{ padding-top: 0; }



/* === ACCENTS PARTAGÉS (à coller une seule fois) === */
:root{
  --brand-50:#f3f5ff; --brand-100:#e8ecff; --brand-200:#d2d9ff;
  --brand-300:#b0befe; --brand-400:#8b9df8; --brand-500:#6379f2;
  --brand-600:#5263de; --brand-700:#4554c3; --brand-800:#3846a3;
}

.btn.primary{
  background: linear-gradient(180deg, var(--brand-500), var(--brand-700)) !important;
  border-color: transparent !important; color:#fff !important;
}
.btn.primary:hover{
  box-shadow: 0 10px 22px color-mix(in srgb, var(--brand-600) 22%, transparent) !important;
  filter: brightness(.99);
}
:where(a,button,.btn,.tabs__btn,.dock):focus-visible{
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 30%, transparent) !important;
}
.logo-bubble{
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--brand-600) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.menu--radio .menu__item:hover,
.modal.cal-chooser .calc-x:hover,
.modal.cal-chooser .calc-opt:hover{
  background: color-mix(in srgb, var(--brand-500) 16%, transparent) !important;
}
.fc, .fc-theme-standard{
  --fc-button-bg-color:        var(--brand-600) !important;
  --fc-button-hover-bg-color:  var(--brand-700) !important;
  --fc-button-active-bg-color: var(--brand-700) !important;
  --fc-button-text-color:      #fff !important;
  --fc-today-bg-color: color-mix(in srgb, var(--brand-300) 18%, #fff) !important;
}
.fc .has-slots::after{
  background: color-mix(in srgb, var(--brand-600) var(--avail-mix,32%), transparent) !important;
}