/*
 * Ateret Paz — structure responsive mobile-first.
 * Ce fichier porte la disposition. prototype.css conserve les composants.
 */

html, body { min-width: 0; }

/* ---------- Accueil : téléphone d'abord ---------- */
.home-view {
  width: 100%;
  min-height: 100dvh;
  padding: 10px 12px max(8px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  overflow: visible;
}

.site-header { min-width: 0; gap: 7px 10px; flex-wrap: wrap; }
.brand { min-width: 0; gap: 9px; }
.brand-mark { width: 52px; flex: 0 0 52px; }
.brand-copy strong { font-size: 20px; }
.brand-copy span { display: none; }
.header-tools { min-width: 0; gap: 5px; }
.tool-button:not(.whatsapp-button) { display: none; }
.tool-button, .languages { height: 38px; }
.languages button { min-width: 32px; }
.supervision-badge { order: 3; width: 100%; min-height: 27px; padding: 3px 10px; }
.supervision-badge span { font-size: 9px; }
.supervision-badge strong { font-size: 14px; }

.home-content {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "primary"
    "nestor"
    "express"
    "manage";
  align-content: center;
  gap: 9px;
}

.booking-primary-card {
  grid-area: primary;
  min-height: 184px;
  padding: 16px 17px;
  gap: 9px;
  border-radius: 21px;
}
.booking-primary-card::after { width: 150px; height: 150px; }
.booking-primary-copy { margin-block: 2px; }
.welcome { display: none; }
h1 { max-width: 94%; font-size: clamp(25px, 7.2vw, 32px); line-height: 1.04; }
.primary-action { min-height: 50px; padding: 9px 16px; font-size: 16px; }

.nestor-home-card {
  grid-area: nestor;
  width: 100%;
  min-height: 64px;
  padding: 9px 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  border: 1px solid rgba(247,220,152,.48);
  border-radius: 17px;
  background: linear-gradient(120deg, rgba(27,56,70,.98), rgba(14,36,47,.98));
  color: var(--cream);
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 var(--orange), 0 10px 24px rgba(0,0,0,.16);
  transition: transform .18s ease, border-color .18s ease;
}
.nestor-home-card:hover,
.nestor-home-card:focus-visible { transform: translateY(-2px); border-color: var(--gold-light); outline: none; }
.nestor-home-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 13px; background: var(--orange); color: var(--ink-deep);
  font-size: 18px; font-weight: 900;
}
.nestor-home-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.nestor-home-copy strong { color: var(--gold-light); font-size: 16px; }
.nestor-home-copy small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.nestor-home-arrow { color: var(--orange); font-weight: 900; }

.express-opportunity {
  grid-area: express;
  padding: 13px 15px;
  border-radius: 19px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
}
.express-opportunity-body { margin: 10px 0; }
.express-service strong { font-size: 17px; }
.express-service span { font-size: 10px; }
.express-time strong { font-size: 30px; }
.express-book-button { min-height: 42px; }

.manage-card {
  grid-area: manage;
  min-height: 68px;
  border-radius: 16px;
}
.manage-entry { min-height: 66px; padding: 8px 11px; gap: 10px; }
.manage-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.manage-copy small { font-size: 8px; }
.manage-copy strong { font-size: 15px; }
.manage-copy > span { margin-top: 2px; font-size: 10px; }

.home-footer {
  min-width: 0;
  padding-top: 2px;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 9px;
  line-height: 1.2;
}

/* Un téléphone doit montrer tout l'accueil, coordonnées comprises, sans
   sacrifier les zones tactiles. Les cartes gardent leur contenu mais cessent
   d'utiliser de la hauteur comme décor. */
@media (max-width: 720px) {
  .home-view {
    min-height: 100svh;
    padding: 6px 10px max(5px, env(safe-area-inset-bottom));
    gap: 5px;
  }

  .site-header { gap: 4px 8px; }
  .brand-mark { width: 46px; flex-basis: 46px; }
  .supervision-badge { min-height: 23px; padding: 2px 8px; }
  .supervision-badge strong { font-size: 12px; }
  .bsd-inline { font-size: 13px; }

  .home-content { gap: 5px; align-content: center; }

  .booking-primary-card {
    min-height: 146px;
    padding: 11px 13px;
    gap: 5px;
    border-radius: 17px;
  }
  .booking-primary-copy { margin: 0; }
  h1 { max-width: 96%; font-size: clamp(21px, 6vw, 27px); line-height: 1.01; }
  .primary-action { min-height: 43px; padding: 7px 13px; font-size: 14px; }

  .nestor-home-card { min-height: 52px; padding: 6px 10px; border-radius: 14px; gap: 9px; }
  .nestor-home-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 16px; }
  .nestor-home-copy strong { font-size: 14px; }
  .nestor-home-copy small { margin-top: 1px; font-size: 9px; }

  .express-opportunity { padding: 8px 11px; border-radius: 15px; }
  .express-opportunity-body { margin: 5px 0; gap: 8px; }
  .express-service strong { font-size: 15px; }
  .express-service span, .express-time > span { font-size: 9px; }
  .express-time strong { font-size: 25px; }
  .express-time small { margin-top: 1px; font-size: 11px; }
  .express-book-button { min-height: 36px; padding-block: 6px; }

  .manage-card { min-height: 56px; border-radius: 14px; }
  .manage-entry { min-height: 54px; padding: 6px 9px; gap: 8px; }
  .manage-icon { width: 35px; height: 35px; border-radius: 10px; font-size: 16px; }
  .manage-copy strong { font-size: 13px; }
  .manage-copy > span { font-size: 8px; }

  .manage-card.is-recognized { min-height: 118px; }
  .home-bookings { padding: 7px 9px; }
  .home-bookings-head { padding-bottom: 5px; }
  .home-bookings-head strong { font-size: 13px; }
  .home-bookings-list { max-height: 68px; }
  .home-booking-row { min-height: 52px; padding: 5px 7px; }

  .home-footer { gap: 4px; font-size: 8px; line-height: 1.05; }
  .footer-tools, .footer-legal { gap: 7px; }
  .footer-tools .tool-button { width: 30px; height: 30px; }
  .footer-tools .languages { height: 30px; }
  .footer-tools .languages button { height: 23px; min-width: 29px; }
}

html[dir="rtl"] .nestor-home-card { text-align: right; box-shadow: inset -3px 0 var(--orange), 0 10px 24px rgba(0,0,0,.16); }
html[dir="rtl"] .nestor-home-arrow { transform: scaleX(-1); }

/* ---------- Nestor : un écran du site, avec retour permanent ---------- */
body.nestor-screen-open { overflow: hidden; }
.nestor-screen {
  position: fixed; inset: 0; z-index: 140;
  min-width: 0; min-height: 100dvh;
  display: grid; grid-template-rows: auto minmax(0,1fr);
  background: var(--ink-deep); color: var(--cream);
}
.nestor-screen[hidden] { display: none !important; }
.nestor-screen-header {
  min-height: 68px; padding: max(10px,env(safe-area-inset-top)) 13px 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid rgba(247,220,152,.22);
  background: linear-gradient(120deg,#17303c,#0b1c24);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.nestor-return-home {
  min-height: 44px; padding: 8px 13px; display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid rgba(247,220,152,.5); border-radius: 13px;
  background: var(--gold-light); color: var(--ink-deep); cursor: pointer;
  font-size: 13px; font-weight: 900;
}
.nestor-return-home:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.nestor-screen-title { display: flex; align-items: center; gap: 9px; text-align: right; }
.nestor-screen-title > span:last-child { display: flex; flex-direction: column; line-height: 1.1; }
.nestor-screen-title strong { color: var(--gold-light); font-size: 17px; }
.nestor-screen-title small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.nestor-screen-badge {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px;
  background: var(--orange); color: var(--ink-deep); font-weight: 900;
}
.nestor-screen-frame { width: 100%; height: 100%; min-height: 0; border: 0; background: #fff; }
.nestor-local-preview {
  min-height: 0; display: grid; place-content: center; justify-items: center;
  padding: 28px; text-align: center;
  background: radial-gradient(circle at 50% 42%,rgba(214,174,85,.14),transparent 34%),linear-gradient(145deg,#10242e,#091920);
}
.nestor-local-preview[hidden] { display: none !important; }
.nestor-local-mark {
  width: 74px; height: 74px; display: grid; place-items: center; margin-bottom: 17px;
  border-radius: 22px; background: var(--orange); color: var(--ink-deep);
  font-size: 31px; font-weight: 900; box-shadow: 0 16px 38px rgba(244,120,43,.22);
}
.nestor-local-preview strong { color: var(--gold-light); font-size: clamp(22px,5vw,34px); }
.nestor-local-preview p { max-width: 360px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
html[dir="rtl"] .nestor-return-home > span:first-child { transform: scaleX(-1); }

@media (min-width: 700px) {
  .nestor-screen-header { padding-inline: clamp(20px,4vw,64px); }
  .nestor-return-home { min-height: 48px; padding-inline: 18px; font-size: 14px; }
  .nestor-screen-title strong { font-size: 20px; }
}

/* ---------- Parcours de réservation : téléphone d'abord ---------- */
.booking-view { width: 100%; min-height: 100dvh; display: block; }
.booking-rail {
  min-height: 62px;
  padding: 11px 13px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  overflow: visible;
}
.booking-rail::after, .rail-message, .booking-summary { display: none; }
.back-home { color: var(--gold-light); white-space: nowrap; }
.rail-brand { margin: 0 0 0 auto; gap: 8px; }
.rail-logo { width: 38px; height: 38px; }
.rail-brand strong { font-size: 18px; }
.rail-brand small { display: none; }

.booking-main {
  min-height: calc(100dvh - 62px);
  padding: 14px 12px 24px;
  display: block;
  overflow: visible;
}
.booking-header h2 { font-size: 23px; }
.booking-languages { display: none; }
.booking-progress { margin: 14px 0 18px; }
.progress-item strong { display: none; }
.booking-progress i { margin-inline: 6px; }
.step-heading { margin-bottom: 12px; }
.step-heading p { font-size: 12px; }

.youth-offer { min-height: 60px; margin-bottom: 10px; padding: 8px 11px; }
.offer-seal { width: 40px; height: 40px; flex-basis: 40px; }
.person-field { align-items: flex-start; flex-direction: column; gap: 4px; }
.person-field input { width: 100%; }
.service-grid { grid-template-columns: 1fr; gap: 7px; }
.service-option { min-height: 64px; padding: 9px 11px; }

.barber-picker { padding: 13px 72px 13px 13px; align-items: flex-start; flex-direction: column; gap: 8px; }
.barber-attention { width: 58px; right: 7px; transform: translateY(-50%); }
.calendar-shell { padding: 7px; }
.calendar-head { grid-template-columns: auto 1fr auto; }
.calendar-head > span { display: none; }
.calendar-day { min-height: 37px; }
.time-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.group-choice { grid-template-columns: 1fr 1fr; }
.group-choice > div { grid-column: 1 / -1; }
.waitlist-periods, .waitlist-fields, .form-row { grid-template-columns: 1fr; }
.client-form { gap: 9px; }
.client-form input[type="text"], .client-form input[type="tel"], .client-form input[type="email"] { min-height: 44px; }
.loyalty-reminder { padding: 12px; gap: 11px; }
.loyalty-card-mini { width: 98px; height: 65px; flex-basis: 98px; }

/* Téléphones courts : tout reste visible sans écraser Nestor. */
@media (max-height: 620px) and (max-width: 719px) {
  .home-view { padding-block: 6px; gap: 5px; }
  .brand-mark { width: 40px; flex-basis: 40px; }
  .brand-copy strong { font-size: 18px; }
  .home-content { gap: 5px; }
  .booking-primary-card { min-height: 138px; padding: 10px 13px; gap: 5px; }
  h1 { font-size: clamp(21px, 6.2vw, 26px); }
  .primary-action { min-height: 41px; }
  .nestor-home-card { min-height: 50px; padding-block: 5px; }
  .nestor-home-icon { width: 36px; height: 36px; }
  .express-opportunity { padding: 8px 11px; }
  .express-opportunity-body { margin: 5px 0; }
  .express-time strong { font-size: 25px; }
  .express-book-button { min-height: 34px; }
  .manage-card { min-height: 56px; }
  .home-footer { display: none; }
  .supervision-badge { min-height: 23px; padding-block: 1px; }
}

/* Téléphone en paysage et tablette : la structure s'étend en deux colonnes. */
@media (min-width: 700px) {
  .home-view { padding: 14px 20px 10px; }
  .site-header { flex-wrap: nowrap; }
  .supervision-badge { order: 0; width: auto; min-height: 34px; padding: 5px 13px; }
  .supervision-badge span { font-size: 10px; }
  .supervision-badge strong { font-size: 15px; }
  .brand-mark { width: 58px; flex-basis: 58px; }
  .brand-copy span { display: block; }
  .tool-button:not(.whatsapp-button) { display: grid; }
  .home-content {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    grid-template-areas:
      "primary nestor"
      "primary express"
      "primary manage";
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 12px;
  }
  .booking-primary-card { min-height: 0; padding: clamp(22px,4vw,48px); }
  .welcome { display: block; }
  h1 { max-width: 760px; font-size: clamp(31px,4.4vw,54px); }
  .nestor-home-card { min-height: 72px; }
  .express-opportunity { display: flex; flex-direction: column; justify-content: space-between; }
  .home-footer { font-size: 10px; }

  .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .time-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .waitlist-periods, .waitlist-fields, .form-row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Téléphone réellement tenu en paysage : l'accueil reste sur un écran. */
@media (min-width: 700px) and (max-height: 500px) {
  .home-view { height: 100dvh; min-height: 0; padding: 6px 14px; gap: 5px; overflow: hidden; }
  .brand-mark { width: 40px; flex-basis: 40px; }
  .brand-copy strong { font-size: 17px; }
  .brand-copy span { display: none; }
  .tool-button, .languages { height: 32px; }
  .languages button { height: 26px; }
  .supervision-badge { min-height: 29px; padding-block: 2px; }
  .home-content { gap: 7px; }
  .booking-primary-card { padding: 14px 18px; gap: 7px; }
  .welcome { display: none; }
  h1 { font-size: clamp(25px, 4vw, 34px); }
  .primary-action { min-height: 40px; padding-block: 7px; }
  .nestor-home-card { min-height: 48px; padding-block: 4px; }
  .nestor-home-icon { width: 34px; height: 34px; }
  .express-opportunity { padding: 7px 11px; }
  .express-opportunity-body { margin: 3px 0; }
  .express-time strong { font-size: 24px; }
  .express-book-button { min-height: 32px; }
  .manage-card { min-height: 48px; }
  .manage-entry { min-height: 46px; padding-block: 4px; }
  .manage-card.is-recognized { min-height: 124px; }
  .home-bookings-list { max-height: 82px; }
  .manage-icon { width: 34px; height: 34px; }
  .home-footer { display: none; }
}

/* Grand écran paysage. */
@media (min-width: 960px) {
  .home-view {
    width: min(100%,1440px);
    height: 100dvh;
    min-height: 640px;
    padding: clamp(16px,2vw,28px) clamp(24px,4vw,64px) 12px;
    gap: clamp(12px,2dvh,20px);
    overflow: hidden;
  }
  .home-content { grid-template-columns: minmax(0,1.5fr) minmax(320px,.72fr); gap: clamp(12px,1.6vw,20px); }
  .booking-primary-card { padding: clamp(28px,4vw,54px); }
  .nestor-home-card { min-height: 78px; padding: 11px 15px; }
  .express-opportunity { padding: clamp(18px,2.3vw,28px); }
  .manage-card { min-height: 96px; }
  .manage-entry { min-height: 94px; padding: 13px 16px; }
  .manage-card.is-recognized { min-height: 174px; }

  .booking-view { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.65fr); }
  .booking-rail { min-height: 100dvh; padding: clamp(22px,3vw,46px); flex-direction: column; align-items: stretch; }
  .booking-rail::after { display: block; }
  .back-home { align-self: flex-start; }
  .rail-brand { margin: clamp(30px,7dvh,74px) 0 0; gap: 13px; }
  .rail-logo { width: 64px; height: 64px; }
  .rail-brand strong { font-size: 28px; }
  .rail-brand small { display: block; }
  .rail-message { display: block; }
  .booking-summary { display: block; }
  .booking-main { min-height: 100dvh; padding: clamp(20px,3vw,46px) clamp(20px,5vw,78px); display: grid; overflow: auto; }
  .booking-languages { display: flex; }
  .progress-item strong { display: inline; }
  .time-grid { grid-template-columns: repeat(6,minmax(0,1fr)); }
}

/* En-tête d'identité : surveillance à gauche, logo central, בס״ד à droite. */
.site-header {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas: "supervision brand bsd";
  gap: 4px 9px;
}
.brand { grid-area: brand; justify-self: center; }
.brand-mark { width: 84px; flex-basis: 84px; }
.supervision-badge {
  grid-area: supervision; justify-self: start; order: initial; width: auto;
  min-height: 28px; padding: 4px 8px; border-color: rgba(247,220,152,.25);
  background: rgba(214,174,85,.045); box-shadow: none;
}
.supervision-badge strong { font-size: 11px; opacity: .82; }
.bsd-inline { grid-area: bsd; justify-self: end; font-size: 13px; }
.footer-tools .tool-button { display: grid !important; }

@media (max-width: 380px) {
  .brand-mark { width: 76px; flex-basis: 76px; }
  .supervision-badge { padding-inline: 5px; }
  .supervision-badge strong { font-size: 9px; }
  .bsd-inline { font-size: 12px; }
}

@media (max-width: 720px) and (max-height: 620px) {
  .brand-mark { width: 68px; flex-basis: 68px; }
  .home-footer { display: flex; gap: 3px; }
  .footer-tools .tool-button, .footer-tools .languages { height: 30px; }
  .footer-tools .tool-button { width: 30px; }
  .footer-tools .languages button { height: 22px; }
  .footer-legal { font-size: 8px; }
}

@media (min-width: 700px) {
  .site-header { grid-template-areas: "supervision brand bsd"; gap: 16px; }
  .brand-mark { width: clamp(92px,8vw,116px); flex-basis: auto; }
  .supervision-badge { min-height: 30px; padding: 4px 10px; }
  .supervision-badge strong { font-size: 12px; }
  .bsd-inline { font-size: 14px; }
  .home-footer { flex-direction: row; justify-content: space-between; }
}

@media (min-width: 700px) and (max-height: 500px) {
  .brand-mark { width: 72px; flex-basis: auto; }
  .home-footer { display: flex; min-height: 32px; }
  .footer-tools .tool-button, .footer-tools .languages { height: 30px; }
  .footer-tools .tool-button { width: 30px; }
  .footer-tools .languages button { height: 22px; }
  .footer-legal { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .nestor-home-card { transition: none; }
}

/* ---------- Accueil large : quatre cartes, une grille équilibrée ----------
   Le flux téléphone reste la base (une seule colonne). Dès que la largeur le
   permet, chaque action occupe un quart lisible de l'espace disponible. */
@media (min-width: 600px) {
  .home-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "primary nestor"
      "express manage";
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: clamp(10px, 1.5vw, 18px);
  }

  .booking-primary-card,
  .nestor-home-card,
  .express-opportunity,
  .manage-card {
    width: 100%;
    height: 100%;
    min-height: 0;
  }

  .nestor-home-card {
    align-content: center;
    padding: clamp(18px, 3vw, 38px);
  }

  .nestor-home-icon {
    width: clamp(50px, 5vw, 72px);
    height: clamp(50px, 5vw, 72px);
    border-radius: clamp(14px, 1.5vw, 20px);
    font-size: clamp(20px, 2vw, 28px);
  }

  .nestor-home-copy strong { font-size: clamp(20px, 2.2vw, 30px); }
  .nestor-home-copy small { font-size: clamp(11px, 1.15vw, 15px); }
  .nestor-home-arrow { font-size: clamp(18px, 2vw, 26px); }

  .manage-card.is-recognized { min-height: 0; }
  .manage-entry { height: 100%; }
  .home-bookings { height: 100%; }
  .home-bookings-list { max-height: none; }
}

/* En paysage bas, la grille 2 x 2 reste entière sans rapetisser les cibles. */
@media (min-width: 600px) and (max-height: 500px) {
  .home-view {
    height: 100dvh;
    min-height: 0;
    padding: 4px 8px;
    gap: 4px;
    overflow: hidden;
  }
  .brand-mark { width: 64px; flex-basis: 64px; }
  .supervision-badge { min-height: 26px; padding-block: 2px; }
  .home-footer {
    min-height: 28px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }
  .home-content { gap: 7px; }
  .booking-primary-card { padding: 10px 16px; gap: 5px; }
  .booking-primary-copy { margin: 0; }
  .booking-primary-card h1 {
    max-width: 100%;
    font-size: clamp(18px, 3vw, 27px);
    line-height: 1;
  }
  .primary-action { min-height: 34px; padding-block: 5px; }

  .nestor-home-card { padding: 9px 13px; }
  .nestor-home-icon { width: 42px; height: 42px; border-radius: 12px; font-size: 18px; }
  .nestor-home-copy strong { font-size: 18px; }
  .nestor-home-copy small { font-size: 10px; }
  .nestor-home-arrow { font-size: 17px; }

  .express-opportunity { padding: 5px 9px; }
  .express-opportunity-body { margin: 0; gap: 6px; }
  .express-service strong { font-size: 14px; }
  .express-time strong { font-size: 22px; }
  .express-book-button { min-height: 28px; padding-block: 4px; }
  .manage-entry { height: 100%; }
  .home-bookings { padding-block: 6px; }
  .home-bookings-list { min-height: 0; }
}

@media (min-width: 960px) {
  .home-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(12px, 1.6vw, 20px);
  }
  .booking-primary-card,
  .nestor-home-card,
  .express-opportunity { padding: clamp(22px, 3vw, 42px); }
  .booking-primary-card { padding: clamp(20px, 2.2vw, 32px); }
  .booking-primary-card h1 {
    max-width: 100%;
    font-size: clamp(32px, 3.35vw, 48px);
    line-height: 1;
  }
}

/* ---------- Signature sous le logo ---------- */
.site-header {
  grid-template-areas:
    "supervision brand bsd"
    "tagline tagline tagline";
  row-gap: 2px;
}

.home-tagline {
  grid-area: tagline;
  justify-self: center;
  width: min(100%, 760px);
  margin: -2px 0 0;
  color: var(--cream);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(19px, 5vw, 25px);
  font-style: italic;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(214,174,85,.16);
}

html[dir="rtl"] .home-tagline {
  font-family: "Noto Serif Hebrew", "Frank Ruhl Libre", serif;
  font-style: normal;
  letter-spacing: 0;
}

.booking-primary-copy {
  display: flex;
  align-items: center;
}

.booking-primary-card .welcome {
  display: block;
  font-size: clamp(14px, 2.8vw, 18px);
}

@media (min-width: 600px) {
  .home-tagline {
    width: min(82vw, 860px);
    font-size: clamp(22px, 2.65vw, 34px);
  }
}

@media (min-width: 600px) and (max-height: 500px) {
  .site-header { row-gap: 0; }
  .home-tagline {
    width: min(78vw, 680px);
    margin-top: -4px;
    font-size: clamp(17px, 2.4vw, 21px);
    line-height: 1;
  }
  .booking-primary-card .welcome { font-size: 13px; }
}

/* ========================================================================
   Accueil validé — parcours personnalisé branché sur les données réelles.
   ======================================================================== */
.site-header {
  grid-template-areas:
    "supervision brand bsd"
    "tagline tagline tagline"
    "greeting greeting greeting";
}

.home-greeting {
  grid-area: greeting;
  justify-self: center;
  display: block !important;
  margin: 1px 0 0;
  color: var(--gold-light);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.home-journey {
  grid-template-columns: minmax(0,1fr);
  grid-template-areas:
    "primary"
    "nestor"
    "manage";
  grid-template-rows: auto;
  align-content: center;
  gap: 7px;
}

.home-action {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-radius: 18px;
}

.home-action-booking {
  min-height: 116px;
  padding: 15px 17px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  border-color: rgba(255,255,255,.78);
  background: linear-gradient(145deg,#fff9ea,#efe3cc);
  color: var(--ink-deep);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.home-action-booking::after { display: none; }
.home-action-booking .eyebrow { color: #8a682b; }
.home-action-booking .eyebrow-dot { display: none; }
.home-action-booking .primary-action {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 5px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-deep);
  font-size: clamp(23px,7vw,31px);
  font-weight: 900;
  box-shadow: none;
}
.home-action-booking .primary-action:hover { transform: none; background: transparent; }
.home-action-booking .primary-action:disabled { opacity: .5; cursor: wait; }
.home-action-slot {
  min-height: 124px;
  padding: 13px 15px;
  overflow: hidden;
  border-color: rgba(80,184,120,.58);
  background:
    radial-gradient(circle at 88% 18%,rgba(80,184,120,.16),transparent 34%),
    linear-gradient(135deg,rgba(18,55,65,.98),rgba(9,35,45,.98));
  color: var(--cream);
  box-shadow: inset 3px 0 var(--green),0 16px 36px rgba(0,0,0,.16);
}
.home-action-slot .express-opportunity-head { color: #83d5a2; }
.home-action-slot .opportunity-dot { background: #58cf86; }
.home-action-slot .express-opportunity-body { margin: 8px 0 0; align-items: end; }
.home-action-slot .express-service strong { color: var(--cream); font-size: 20px; }
.home-action-slot .express-service span { display: none; }
.home-action-slot .express-time > span { color: var(--cream); font-size: 13px; font-weight: 800; }
.home-action-slot .express-time strong { color: var(--orange); font-size: 30px; }
.home-action-slot .express-time small { color: var(--gold-light); font-size: 12px; }
.home-action-slot .express-book-button {
  position: absolute;
  inset: 0;
  z-index: 2;
  min-height: 0;
  padding: 0 14px;
  justify-content: flex-end;
  border: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow: none;
}
.home-action-slot .express-book-button:hover { transform: none; background: rgba(255,255,255,.025); }
.express-book-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.home-action-nestor {
  min-height: 102px;
  padding: 11px 13px;
  grid-template-columns: 62px minmax(0,1fr) auto;
  gap: 12px;
  overflow: visible;
  border-color: rgba(255,122,45,.62);
  background:
    radial-gradient(circle at 12% 50%,rgba(255,122,45,.18),transparent 28%),
    linear-gradient(120deg,rgba(17,49,62,.98),rgba(8,30,40,.98));
  box-shadow: 0 18px 40px rgba(0,0,0,.2);
}
.home-action-nestor:hover,
.home-action-nestor:focus-visible { transform: translateY(-2px); border-color: var(--orange); }
.nestor-ai-orb {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,228,181,.72);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%,#ffd092,var(--orange) 46%,#ba441b 100%);
  color: var(--ink-deep);
  font-size: 23px;
  font-weight: 900;
  box-shadow: 0 0 0 7px rgba(255,122,45,.09),0 0 30px rgba(255,122,45,.32);
  animation: home-nestor-float 3.2s ease-in-out infinite;
}
.nestor-ai-orb i {
  position: absolute;
  right: 1px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--ink-deep);
  border-radius: 50%;
  background: #51d889;
}
.home-action-nestor .nestor-home-copy { line-height: 1.08; }
.home-action-nestor .nestor-home-copy small { color: var(--gold-light); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.home-action-nestor .nestor-home-copy strong { margin-top: 4px; color: var(--cream); font-size: 17px; }
.home-action-nestor .nestor-home-copy > span {
  margin-top: 6px;
  padding: 5px 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #d8e0e3;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nestor-ai-grip { color: rgba(255,255,255,.42); font-size: 22px; }
@keyframes home-nestor-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.home-action-manage {
  min-height: 74px;
  border-color: rgba(247,220,152,.38);
  background: rgba(15,43,55,.94);
  box-shadow: none;
}
.home-action-manage .manage-entry { min-height: 72px; }
.home-action-manage.is-recognized { min-height: 216px; }
.home-action-manage .home-bookings { height: 100%; padding: 11px 13px; }
.home-action-manage .home-bookings-head { padding-bottom: 7px; }
.home-action-manage .home-bookings-head strong { font-size: 19px; }
.home-action-manage .home-bookings-list {
  max-height: none;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 5px;
  overflow: visible;
}
.home-action-manage .home-booking-row,
.home-action-manage .home-booking-row + .home-booking-row {
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 6px 8px;
  display: block;
  border-radius: 9px;
}
.home-action-manage .home-booking-info strong { font-size: 12px; }
.home-action-manage .home-booking-info span { font-size: 10px; }
.home-action-manage .home-booking-actions { display: none; }

html[dir="rtl"] .home-action-nestor { text-align: right; }

@media (prefers-reduced-motion: reduce) {
  .nestor-ai-orb { animation: none; }
}

@media (min-width: 600px) {
  .home-journey {
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-template-areas:
      "primary nestor"
      "primary manage";
    grid-template-rows: repeat(2,minmax(0,1fr));
    align-content: stretch;
    gap: 8px;
  }
  .home-action { height: 100%; min-height: 0; }
  .home-action-booking .primary-action { font-size: clamp(27px,3.6vw,38px); }
  .home-action-slot .express-service strong { font-size: clamp(18px,2.5vw,25px); }
  .home-action-nestor .nestor-home-copy strong { font-size: clamp(16px,2vw,21px); }
  .home-action-manage.is-recognized { min-height: 0; }
  .home-action-manage .home-bookings-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 600px) and (max-height: 500px) {
  .home-view { height: 100dvh; min-height: 0; overflow: hidden; }
  .site-header { row-gap: 0; }
  .home-greeting { margin-top: 0; font-size: 11px; }
  .home-action-booking,
  .home-action-slot { padding: 9px 11px; }
  .home-action-slot .express-opportunity-body { margin-top: 4px; }
  .home-action-slot .express-time strong { font-size: 25px; }
  .home-action-nestor { padding: 7px 10px; grid-template-columns: 56px minmax(0,1fr) auto; }
  .nestor-ai-orb { width: 52px; height: 52px; }
  .home-action-nestor .nestor-home-copy > span { margin-top: 4px; padding-block: 3px; }
  .home-action-manage .home-bookings { padding: 5px 8px; }
  .home-action-manage .home-bookings-head { padding-bottom: 4px; }
  .home-action-manage .home-bookings-head strong { font-size: 16px; }
  .home-action-manage .home-booking-row,
  .home-action-manage .home-booking-row + .home-booking-row { min-height: 0; padding: 3px 5px; }
  .home-action-manage .home-booking-info strong { font-size: 9px; }
  .home-action-manage .home-booking-info span { font-size: 7px; }
  .home-action-manage .home-bookings-head a { font-size: 9px; }
}

/* LA CARTE DE RESERVATION EST LE BOUTON - 27/08/2026.
   Avant : une <section> contenant un <button>. Le bouton n occupait qu une
   partie de la carte, et le reste du rectangle creme ne repondait a rien.
   Meme motif que la carte Nestor juste a cote, qui est deja un <button> :
   un seul element cliquable, pas de pastille etiree, pas de z-index. */
button.home-action-booking {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
button.home-action-booking:hover { filter: brightness(1.03); }
button.home-action-booking:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  button.home-action-booking:hover { filter: none; }
}

/* =============================================================================
   L ACCUEIL EST LE SALON — 27/08/2026, maquette validee par David.
   L ecran se lit comme la piece : plafond bleu nuit, mur creme barre d une
   seule ligne orange, sol noir au carrelage geometrique.
   ⛔ L ORANGE EST UN TRAIT, JAMAIS UNE SURFACE. Un aplat orange a ete propose
      et refuse : dans le salon, l orange est une ligne sur un mur creme.
   ⛔ « MES RENDEZ-VOUS » NE DISPARAIT JAMAIS. Le client doit toujours pouvoir
      retrouver sa place.
   Empilement sur TOUS les ecrans, centre sur une colonne : c est la seule mise
   en page qui garde la lecture plafond -> mur -> sol du telephone au bureau.
   ============================================================================= */
.home-view.salon {
  /* ⭐ LA SIGNATURE. David, 27/08 : « la ligne orange, c est pas aussi fin,
     mets-lui 1 cm d epaisseur, c est ma signature, orange Hermes. »
     C est la bande peinte sur le mur du salon. Elle ne s affine pas. */
  --ligne-orange: 1cm;
  display: flex;
  flex-direction: column;
  /* ⛔ `height: auto` + `overflow: visible` sont OBLIGATOIRES et explicites.
     Des regles existantes imposent `height: 100dvh; overflow: hidden` a
     `.home-view` a plusieurs tailles : la page ne pouvait pas defiler, et le
     contenu en trop se faisait ecraser au lieu de sortir de l ecran. */
  height: auto;
  min-height: 100dvh;
  overflow: visible;
  padding: 0;
  gap: 0;
}
.home-view.salon > * { max-width: none; }

/* --- le plafond ---------------------------------------------------------- */
.home-view.salon .salon-plafond {
  /* C est le plafond qui absorbe la hauteur libre, pas le mur : un mur creme
     etire sur 480 px pour un seul bouton se lit comme une page vide. Ici le
     logo respire, et le mur reste une bande dimensionnee par son contenu. */
  /* ⭐ LE LOGO EST ENCADRE. David, 27/08 : « le בס״ד a droite, le badatz a
     gauche, voila un logo bien entoure. » Les deux mentions tiennent les
     bords, le logo se pose au milieu — et il y reste, quelle que soit la
     largeur des deux textes, parce que ce sont eux qui se partagent le reste. */
  flex: none;
  /* Une grille `1fr auto 1fr` : les deux colonnes de bord se partagent
     l espace a egalite, donc la colonne du milieu tombe pile au centre —
     quelle que soit la largeur des deux mentions. En flex, le badge Badatz
     s etirait sur 627 px pour occuper sa part. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 2vw, 18px);
  background: linear-gradient(180deg, #0a1f2a, #0e2833);
  padding: 12px clamp(12px, 3vw, 24px) 14px;
  text-align: center;
}
.home-view.salon .salon-plafond .supervision-badge { order: 1; justify-self: start; margin: 0; }
.home-view.salon .salon-plafond .brand           { order: 2; justify-self: center; margin: 0; }
.home-view.salon .salon-plafond .bsd-inline      { order: 3; justify-self: end;   margin: 0; }

/* --- le mur : creme, une seule ligne orange ------------------------------- */
.home-view.salon .salon-mur {
  /* `1 0 auto` : le mur prend la hauteur libre, mais ne se comprime jamais.
     Avec `1 1 auto`, une fenetre de 674 px l ecrasait a 106 px. */
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  grid-template-columns: none;
  grid-template-rows: none;
  background: linear-gradient(180deg, #fff9ea, #efe3cc);
  border-top: var(--ligne-orange) solid var(--orange, #f37021);
  padding: clamp(30px, 8vw, 52px) clamp(16px, 4vw, 24px);
  gap: 0;
}
.home-view.salon .salon-mur .home-action-booking {
  width: 100%;
  max-width: 560px;
  flex: 0 0 auto;
  /* ⛔ `.home-action { height: 100% }` (l. 839) etirait ce bloc sur tout le
     mur : le libelle restait en haut, la ligne du prochain creneau se
     retrouvait plaquee tout en bas, avec 300 px de creme vide entre les deux. */
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* L ancienne carte portait justify-content:space-between : sur grand ecran
     il ecartait le libelle du bouton de 350 px de creme vide. */
  justify-content: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #152731;
}
.home-view.salon .salon-mur .home-action-booking::after { display: none; }
.home-view.salon .salon-mur .eyebrow { color: #8a682b; }
.home-view.salon .salon-mur .eyebrow-dot { display: none; }

/* le seul objet sombre de la zone claire : impossible a manquer */
.home-view.salon .salon-mur .primary-action {
  width: auto;
  height: auto;
  /* ⛔ JAMAIS `min-height: 0` ICI. C est ce qui a fait disparaitre le bouton
     de reservation du site en production : mur comprime, bouton a zero. */
  min-height: 56px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  border-radius: 13px;
  background: #152731;
  color: #fff9ea;
  font-size: clamp(17px, 4.6vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .22);
  transition: transform .18s ease, box-shadow .18s ease;
}
.home-view.salon .salon-mur .home-action-booking:hover .primary-action {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, .28);
}

/* --- le sol : noir, le carrelage du salon --------------------------------- */
.home-view.salon .salon-sol {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: clamp(13px, 3.5vw, 20px) clamp(14px, 4vw, 24px);
  background-color: #141416;
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%),
    linear-gradient(45deg, rgba(255,255,255,.045) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.045) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}
.home-view.salon .salon-sol > * {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .1);
}

/* --- la devise signe, elle n accueille plus ------------------------------- */
.home-view.salon .salon-signature {
  flex: none;
  margin: 16px auto 0;
  max-width: 34ch;
  padding-inline: 18px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.3;
  text-align: center;
  color: rgba(232, 240, 242, .55);
}
.home-view.salon .home-footer { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .home-view.salon .salon-mur .home-action-booking:hover .primary-action { transform: none; }
}

/* La prochaine place : une ligne sur le mur, pas une carte. Le bloc d origine
   et sa logique avaient ete retires par `8dffbdf` alors que les libelles
   (expressOpportunity, dans les trois langues) et le CSS etaient restes. */
.home-view.salon .salon-mur > * { width: 100%; max-width: 560px; }
.home-view.salon .salon-prochain {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 700;
  color: #3d5560;
}
.home-view.salon .salon-prochain-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #1f7a45; flex: none;
}
.home-view.salon .salon-prochain-k {
  font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #8a682b;
}
.home-view.salon .salon-prochain strong { font-weight: 800; color: #152731; }

/* =============================================================================
   PAYSAGE — on couche la piece.  27/08/2026

   Empiler plafond / mur / sol dans un ecran large et bas donne un resultat
   laid : un plafond immense, un mur qui prend toute la largeur pour un seul
   bouton, et le sol renvoye hors de l ecran.

   Couche, l accueil se lit comme le salon vu de biais : le plafond en bandeau,
   la ligne orange en travers, puis LE MUR A GAUCHE avec l action, et LES
   MEUBLES A DROITE — Nestor et les rendez-vous. Tout tient, rien ne defile.

   ⚠️  Defaut corrige au passage : deux regles existantes imposent
       `height: 100dvh` + `overflow: hidden` en paysage. Empilees avec les
       trois zones, elles ecrasaient le mur et LE BOUTON TOMBAIT A ZERO —
       plus aucun moyen de prendre rendez-vous en paysage.
   ============================================================================= */
/* On couche la piece des que l ecran est LARGE, pas seulement quand il est bas.
   Un ecran de bureau est un ecran couche : empiler y gaspille toute la largeur
   — un mur de 1400 px pour un bouton de 300. */
@media (min-width: 900px), (max-height: 620px) and (min-width: 620px) {
  .home-view.salon {
    /* Jamais `height: 100dvh` + `overflow: hidden` : c est ce qui ecrasait le
       mur et faisait disparaitre le bouton. La page defile si besoin. */
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "plafond plafond"
      "mur     sol"
      "pied    pied";
    padding: 0;
    gap: 0;
  }
  .home-view.salon .salon-plafond {
    grid-area: plafond;
    padding: 7px clamp(14px, 2.5vw, 28px) 9px;
  }

  /* La ligne orange court sur toute la largeur, sous le plafond. */
  .home-view.salon .salon-mur,
  .home-view.salon .salon-sol { border-top: var(--ligne-orange) solid var(--orange, #f37021); }

  .home-view.salon .salon-mur {
    grid-area: mur;
    justify-content: center;
    padding: clamp(14px, 4vh, 26px) clamp(18px, 3vw, 34px);
  }
  .home-view.salon .salon-mur > * { max-width: 420px; }

  .home-view.salon .salon-sol {
    grid-area: sol;
    justify-content: center;
    gap: 7px;
    padding: clamp(10px, 3vh, 16px) clamp(12px, 2vw, 20px);
  }
  .home-view.salon .salon-sol > * { max-width: none; }

  /* La devise cede la place : en paysage, chaque pixel de hauteur compte. */
  .home-view.salon .salon-signature { display: none; }
  .home-view.salon .home-footer { grid-area: pied; display: flex; }
}

/* Petit ecran couche et etroit : pas la place de couper en deux, on defile. */
@media (max-height: 620px) and (max-width: 619px) {
  .home-view.salon { height: auto; min-height: 100dvh; overflow: visible; }
  .home-view.salon .salon-plafond,
  .home-view.salon .salon-mur,
  .home-view.salon .salon-sol { flex: 0 0 auto; }
}

/* =============================================================================
   « BONJOUR DAVID. » — sur le mur, juste au-dessus de RESERVATION.
   David, 27/08 : « le site se souvient du client, il l appelle bonjour client,
   et reservation. C est classe. »
   Il etait perdu dans le plafond, a cote du logo. Descendu ici, il devient la
   premiere chose que le client lit sur le mur creme, avant l action.

   ⛔ IL NE S AFFICHE QUE SI LE CLIENT EST RECONNU. Hors reconnaissance, le
      JavaScript y ecrit « Reservation en ligne » — qui ferait doublon avec le
      libelle RESERVATION juste en dessous. Un visiteur anonyme voit donc le
      mur commencer directement par l action.

   La serif italique est celle de la devise du site : c est la voix du salon
   quand il s adresse a quelqu un, pas quand il annonce une fonction.
   ============================================================================= */
.home-view.salon .salon-mur .welcome { display: none; }
.home-view.salon .salon-mur .welcome.welcome-recognized {
  display: block;
  width: 100%;
  max-width: 560px;
  /* Aligne a gauche comme tout le mur : centre, il chevauchait RESERVATION. */
  margin: 0 0 6px;
  text-align: start;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: clamp(21px, 5.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: #152731;
}

/* =============================================================================
   SITE-5, 02/09/2026 — « LES LETTRES PLUS GROSSES »

   Demande de David : « garder exactement le meme que ce qui existe mais les
   lettres plus grosses ».

   ⛔ CE BLOC NE DEPLACE RIEN. Il ne change ni une couleur, ni une bordure, ni
      une position, ni un espacement de structure. Il ne fait que remonter des
      tailles et des hauteurs de zones tactiles. Il est en FIN du dernier
      feuille de style chargee : il gagne sans qu'on ait a toucher `refonte.css`.

   MESURE QUI L'A DECLENCHE (02/09) : 319 declarations de taille dans le site,
   191 sous 16 px — 60 %. Et AUCUNE taille de reference sur `html` ni `body`.
   ============================================================================= */

/* -- 1. La taille de reference, qui n'existait pas. -------------------------- */
html { font-size: 16px; }
body { font-size: 16px; line-height: 1.5; }

/* -- 2. LE DEFAUT QUI SE VOIT LE PLUS : Safari zoome sur les champs. ---------
   `refonte.css:420` pose l'etiquette a 12 px, et `:422` la fait heriter au
   champ par `font: inherit`. Sur iPhone, tout champ sous 16 px declenche un
   zoom automatique : l'ecran saute des que le client tape son nom.
   17 px met fin au zoom avec une marge. */
.client-form label,
.client-form input[type="text"],
.client-form input[type="tel"],
.client-form input[type="email"],
.waitlist-fields input,
.client-access-card input {
  font-size: 17px;
}
.client-form label > span { font-size: 16px; }
.client-form label small { font-size: 14.5px; }
.notification-choice legend { font-size: 16px; }
.notification-options label { font-size: 16px; }
.consent-line, .remember-line { font-size: 15.5px; }
.client-form input[type="text"],
.client-form input[type="tel"],
.client-form input[type="email"] { min-height: 52px; }
.consent-line input[type="checkbox"],
.remember-line input[type="checkbox"] { width: 24px; height: 24px; }

/* -- 3. Le calendrier : la case, le chiffre, et la date hebraique. -----------
   La date hebraique etait a 8 px et 58 % d'opacite (`refonte.css:348`) : elle
   etait devinee, pas lue. Et la case tombait a 37 px sous 720 px de large,
   sous le minimum tactile de 44 px. */
.calendar-day { min-height: 48px; }
.calendar-day-number { font-size: 17px; }
.calendar-day-hebrew { font-size: 13px; opacity: .95; }
.calendar-day.selected .calendar-day-hebrew { opacity: 1; }
.calendar-week span { font-size: 15px; }
#month-label { font-size: 19px; }
.calendar-head button { min-width: 44px; min-height: 44px; font-size: 19px; }

/* -- 4. Les heures, les etapes, les titres. ---------------------------------- */
.time-grid button { min-height: 48px; font-size: 17px; }
.step-heading p { font-size: 15px; }
.step-heading h3 { font-size: 24px; }
.booking-header h2 { font-size: 25px; }
.availability-status, #availability-status { font-size: 15px; }
.opt, .service-card strong { font-size: 17px; }

/* -- 5. LES LANGUES — et c'est la contrepartie obligatoire de l'hebreu d'abord.
   ⛔ Le parcours de reservation N'AVAIT AUCUN selecteur de langue sous 960 px
      (`.booking-languages { display: none }`, ligne 264 de ce fichier), et
      celui de l'accueil mesurait 29 x 23 px — le seul element du site sous le
      minimum de 24 x 24 px.
      Tant que le site s'ouvrait en francais, cela se voyait peu. Maintenant
      qu'il s'ouvre en HEBREU, un client francophone qui ne trouve pas le
      bouton est un client perdu. Le rendre visible n'est pas un supplement :
      c'est ce qui rend l'hebreu d'abord tenable. */
.booking-languages { display: flex; gap: 6px; }
.languages button,
.booking-languages button,
.footer-tools .languages button {
  min-width: 48px;
  min-height: 44px;
  height: auto;
  font-size: 16px;
  font-weight: 700;
}
.tool-button, .languages, .footer-tools .tool-button, .footer-tools .languages { height: auto; }
.footer-tools .tool-button { min-width: 48px; min-height: 44px; }

/* -- 6. Le module telephone international, remis en service le 02/09. --------
   Le champ reste en LTR meme quand la page est en RTL : un numero se lit de
   gauche a droite dans toutes les langues. */
.iti { width: 100%; direction: ltr; }
.iti__tel-input, .iti input[type="tel"] { width: 100%; font-size: 17px; min-height: 52px; }
.iti__selected-country { min-height: 52px; }
.iti__country-list { font-size: 16px; text-align: left; }
.iti__country { min-height: 44px; display: flex; align-items: center; }

/* =============================================================================
   SITE-6, 02/09/2026 — LE SMS NE PART PAS A L'ETRANGER, ET LA LANGUE S'ANNONCE
   ============================================================================= */

/* -- 1. Le canal grise. Il reste LU, il n'est pas efface : le client doit voir
      que le SMS existe et qu'il ne lui est pas offert, sinon il le cherche. -- */
.notification-options label.canal-indisponible {
  opacity: .42;
  cursor: not-allowed;
  text-decoration: line-through;
}
.notification-options label.canal-indisponible input { cursor: not-allowed; }

/* -- 2. La phrase qui dit pourquoi. Elle n'apparait que dans ce cas-la. ------- */
.sms-israel-only {
  margin: 8px 0 0;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid rgba(244,120,43,.34);
  background: rgba(244,120,43,.09);
  color: #8a4418;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

/* -- 3. La langue s'annonce. Le globe, puis la langue active en plein. --------
   Demande de David : « le choix de langue doit etre plus clairement annonce ».
   Avant : trois codes gris de 29 x 23 px, sans rien pour dire ce qu'ils font. */
.lang-globe {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 44px;
  margin-inline-end: 2px;
  color: currentColor;
  opacity: .85;
  flex: 0 0 auto;
}
.languages, .booking-languages, .footer-tools .languages { align-items: center; }
.languages button.active,
.booking-languages button.active {
  background: var(--gold, #d6ae55);
  border-color: var(--gold, #d6ae55);
  color: #0b1c24;
  font-weight: 800;
}
.languages button:not(.active),
.booking-languages button:not(.active) { opacity: .92; }

/* =============================================================================
   SITE-7, 02/09/2026 — LE CHOIX DE LANGUE SE VOIT SANS DÉROULER

   David : « le choix de la langue, pas clair, tout en bas, faut comprendre que
   c'est en bas, pas forcément naturel ».

   `SITE-6` avait rendu les boutons GRANDS et LISIBLES — 48 x 44 px, un globe
   devant, la langue active en or. Ils étaient justes, et ils étaient au mauvais
   endroit : en pied de page. Agrandir un bouton qu'on ne voit pas ne le fait pas
   voir. Ici on ne change ni leur taille ni leur couleur : **on les remonte.**

   ⚠️  IL RESTE DANS LE FLUX, IL NE FLOTTE PAS. Un sélecteur en position fixe
       recouvrirait le logo animé sur les petits écrans, et il faudrait alors
       lui inventer un dégagement — un correctif qui en appelle un autre.
   ============================================================================= */
/* ⚠️  LE SÉLECTEUR EST LONG, ET IL DOIT L'ÊTRE. `.home-view.salon .salon-mur >
     *` impose `width: 100%` à tout enfant du mur — trois classes, il gagne sur
     deux. Écrit court, la pastille s'étirait sur 418 px au lieu de 175 et le
     cadre arrondi devenait une barre. **Vu sur la capture, pas dans le code.** */
.home-view.salon .salon-mur > .booking-languages.langues-en-tete {
  width: fit-content;
  justify-content: center;
  align-self: center;
  /* Il se pose sur le mur crème, sous le bandeau sombre du logo. Le fond clair
     et le trait fin le détachent du mur sans en faire une barre de plus. */
  margin: 0 auto 14px;
  padding: 3px 6px;
  border: 1px solid rgba(20,38,48,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
}
/* ⚠️  LE GLOBE PORTE SA COULEUR, IL N'HÉRITE PLUS. En pied de page il se
     dessine en `currentColor` sur fond sombre, et il se voit. Sur le mur crème,
     `currentColor` vaut l'or du texte d'accueil : le globe devenait invisible,
     et la pastille s'ouvrait sur un vide de 30 px. */
.booking-languages.langues-en-tete .lang-globe { color: #2a4552; opacity: 1; }
.booking-languages.langues-en-tete button:not(.active) { color: #46606c; }

/* =============================================================================
   SITE-9, 02/09/2026 — APPELER, ÉCRIRE, VENIR : TROIS BOUTONS SANS DÉROULER

   David : « le symbole téléphone, WhatsApp, ça serait bien qu'il soit visible
   aussi. Trouve-lui une place et y a plus besoin de scroll. On garde une mise en
   page claire, propre et efficace. » Puis, pour la place : « le badatz et le
   בס״ד, en haut, ils peuvent être plus haut, et juste en dessous d'eux, tu mets
   le tel, le WhatsApp et l'accès à map ».

   ⚠️  LE CADRE DU LOGO N'EST PAS TOUCHÉ — décision du 27/08. Le badatz reste à
       gauche, le בס״ד à droite, le logo au milieu. Ils remontent seulement en
       HAUT de leur ligne, et la barre prend une DEUXIÈME ligne sous eux.
   ============================================================================= */
.home-view.salon .salon-plafond {
  /* ⛔ SITE-9d — David : « fais attention que les boutons et le logo ne se
       chevauchent pas, il doit s'écarter un peu le logo pour les boutons ».

       En `SITE-9c` la barre occupait la ligne 2 SUR LES TROIS COLONNES, et le
       logo traversait les deux lignes au centre : les deux se disputaient la
       même case. Sur un écran étroit, la barre passait sous le logo.

     ⟶ LA BARRE A SA PROPRE COLONNE, ET C'EST ELLE QUI GAGNE. `min-content` sur
       la première colonne veut dire : elle ne descend JAMAIS sous la largeur de
       ses trois boutons. Le centre, lui, est en `minmax(0, auto)` — il accepte
       de rétrécir. C'est donc le logo qui s'écarte, exactement comme David le
       demande, et il le fait tout seul à chaque largeur d'écran. */
  grid-template-columns: minmax(min-content, 1fr) minmax(0, auto) minmax(0, 1fr);
  grid-template-areas: "supervision brand bsd" "outils brand .";
  row-gap: 6px;
  /* ⛔ SITE-9c — David : « trop gros le bandeau du haut ». La deuxième ligne
       avait ajouté sa hauteur à celle du logo. Le rembourrage se resserre, et
       surtout le logo cesse d'être empilé AVEC les boutons (voir plus bas). */
  padding: 8px clamp(12px, 3vw, 24px) 10px;
}
/* Les deux mentions montent : elles ne se centrent plus sur la hauteur du logo,
   elles se posent en haut du bandeau. C'est la place que David leur donne. */
.home-view.salon .salon-plafond .supervision-badge,
.home-view.salon .salon-plafond .bsd-inline { align-self: start; }

/* ⭐ SITE-9c, 02/09 — LE LOGO TRAVERSE LES DEUX LIGNES, ET C'EST CE QUI REND LE
     BANDEAU PLUS COURT. David : « trop gros le bandeau du haut, le logo trop
     petit ». Les deux se règlent d'un seul geste, et ce n'est pas un hasard :
     empilé SOUS le logo, la barre de boutons ajoutait 48 px à la hauteur totale.
     À cheval sur les deux lignes, le logo occupe la place que le badatz et les
     boutons laissent libre au centre — le bandeau ne fait plus que la hauteur
     du logo, et le logo peut donc grandir sans rien coûter. */
.home-view.salon .salon-plafond .brand {
  grid-row: 1 / span 2;
  align-self: center;
  /* ⚠️  SANS CES DEUX LIGNES, LA COLONNE A BEAU RÉTRÉCIR, LE LOGO NE SUIT PAS.
       Un enfant de grille refuse par défaut de passer sous sa largeur de
       contenu (`min-width: auto`) : la colonne se serrait et le logo débordait
       quand même. `min-width: 0` l'autorise à céder, `max-width: 100%` le lui
       impose. */
  min-width: 0;
  max-width: 100%;
}
/* ⚠️  UNE SEULE RÈGLE POUR TOUTES LES TAILLES D'ÉCRAN, ET ELLE EST LONGUE EXPRÈS.
     `.brand-mark` est réglé à QUINZE endroits dans les deux feuilles, par
     paliers. Trois classes suffisent à passer devant tous — les corriger un par
     un aurait laissé un palier oublié quelque part, et personne ne l'aurait vu
     avant de tomber sur cette largeur-là. */
.home-view.salon .salon-plafond .brand-mark {
  width: clamp(104px, 26vw, 152px);
  /* `max-width: 100%` est ce qui fait « s'écarter le logo pour les boutons » :
     il garde sa taille tant qu'il y a la place, et il cède dès qu'il n'y en a
     plus. `aspect-ratio: 1` (feuille de base) garde le cercle rond en cédant. */
  max-width: 100%;
  flex-basis: auto;
}

/* ⛔ ILS NE SE CENTRENT PAS. David, en voyant la première version en ligne :
     « nan tu mets pas ça en dessous de mon logo, t'es fou ».
     Centrée, la barre tombait sous le LOGO — le cadre du 27/08 qu'on ne touche
     pas. « Juste en dessous d'eux » désigne le badatz et le בס״ד, pas le logo.
   ⟶ `flex-start` les range sous le badatz, du même côté que lui dans les deux
     sens de lecture : le badatz est en `justify-self: start`, ils le suivent.
     À droite en hébreu, à gauche en français, et JAMAIS au milieu.
   ⚠️  Une colonne latérale fait ~130 px sur un téléphone de 360 px : trois
       cibles de 48 px n'y tiennent pas. La barre occupe donc toute la largeur
       et c'est son CONTENU qui se range d'un côté. */
.home-view.salon .salon-plafond .barre-outils {
  grid-area: outils;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 10px;
  margin: 0;
}
/* ⚠️  LE REPÈRE DE CARTE SEUL, PAS L'ADRESSE. `refonte.js` écrit l'adresse
     complète dans `#contact-map-label` à chaque changement de langue, et on la
     garde pour les lecteurs d'écran ; l'afficher ici étirerait le bouton sur
     toute la largeur et casserait la ligne des trois. */
.home-view.salon .salon-plafond .barre-outils #contact-map-label {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.home-view.salon .salon-plafond .barre-outils .map-button { color: var(--cream, #f6ecd8); }

/* =============================================================================
   SITE-10, 03/09/2026 — LE CALENDRIER EST UN RUBAN, LES HEURES AUSSI

   David : « peut-être les jours du calendrier à glisser droite gauche ? […]
   pareil la liste des créneaux libres, glisser droite gauche. On arrive à une
   prise de rdv lisible et dans un seul écran. »

   ⛔ `!important` SUR `display` ET `grid-template-columns` — ET C'EST MESURÉ.
      `refonte.css` pose `.calendar-days { display: grid; grid-template-columns:
      repeat(7, …) }` en ligne 342, et `.time-grid { repeat(6, 1fr) }` en 367.
      Cette feuille-ci est chargée APRÈS, mais les deux sélecteurs ont la même
      spécificité (une classe) — le dernier gagne, donc celui-ci… sauf dans les
      media queries de `refonte.css` qui les reposent plus bas. On force, une
      fois, plutôt que de courir après chaque palier.
   ============================================================================= */
/* ⛔ SANS CES TROIS LIGNES, LE RUBAN NE DÉFILE PAS : IL POUSSE LA PAGE.
     Mesuré à l'écran : `.calendar-days` faisait **4 023 px de large** dans une
     fenêtre de 1 536, et une barre horizontale apparaissait au bas de la PAGE.
     `.booking-stage` est un enfant de grille en `min-width: auto` — il refuse
     de passer sous sa largeur de contenu, donc il grandit, donc le ruban n'a
     aucune borne et son `overflow-x` ne sert à rien.
   ⟶ Même piège que `1fr` qui refuse de rétrécir. `min-width: 0` autorise la
     colonne à céder, et c'est le ruban qui défile au lieu de la page. */
.booking-stage, .booking-step, .calendar-shell { min-width: 0; }

.calendar-days.ruban-jours {
  max-width: 100%;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 7px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  /* Le doigt pousse, la barre reste visible : sans elle, rien ne dit qu'il y a
     une suite. Fine, discrète, mais présente. */
  scrollbar-width: thin;
}
.calendar-days.ruban-jours::-webkit-scrollbar { height: 5px; }
.calendar-days.ruban-jours::-webkit-scrollbar-thumb {
  background: rgba(20,38,48,.22); border-radius: 9px;
}
.calendar-days.ruban-jours .calendar-day {
  flex: 0 0 auto;
  width: 58px;
  min-height: 74px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-color: rgba(20,38,48,.14);
  background: rgba(255,255,255,.56);
}
.calendar-day-week {
  font-size: 11px; font-weight: 700; color: #8a969b; line-height: 1;
}
/* ⛔ LE JOUR CHOISI DOIT REDEVENIR SOMBRE, ET C'EST UNE CORRECTION MESURÉE.
     `refonte.css` peint `.calendar-day.selected` en CRÈME, parce que dans la
     grille le fond choisi était foncé. Ma règle de ruban a remis un fond blanc
     avec une spécificité plus forte : le chiffre du jour choisi s'est retrouvé
     crème sur blanc — **invisible**, et seul le nom du jour restait lisible.
     Relevé dans la page : fond `rgba(255,255,255,.56)`, texte `rgb(255,249,238)`.
     Vu sur la capture, pas dans le code. */
.calendar-days.ruban-jours .calendar-day.selected {
  background: var(--ink, #142630);
  border-color: var(--ink, #142630);
}
.calendar-days.ruban-jours .calendar-day.selected .calendar-day-week { color: rgba(255,249,238,.72); }
.calendar-days.ruban-jours .calendar-day-number { font-size: 20px; line-height: 1; }
.calendar-days.ruban-jours .calendar-day-hebrew { font-size: 12px; font-weight: 600; }

/* ⭐ LA PASTILLE DE RÉDUCTION — elle porte le NOM de la règle, jamais un
   montant : une remise peut être un pourcentage ou un prix imposé
   (`EM-OPTIONS-01`, `OPT-RED-14`). Elle déborde de la case, exprès : posée
   dedans, elle vole la place du quantième. */
.calendar-day-promo {
  position: absolute;
  top: -8px;
  inset-inline-start: -2px;
  max-width: 66px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--gold, #d6ae55);
  color: #3a2c07;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  pointer-events: none;
}
/* ⛔ LA PASTILLE NE PEUT PAS DÉBORDER DU RUBAN, ET AUCUN `overflow-y: visible`
     N'Y CHANGERA RIEN : la spécification CSS impose que si un axe vaut `auto`,
     l'autre ne peut PAS rester `visible` — il devient `auto` lui aussi. Vu à
     l'écran : le haut de la pastille « Mardi » était coupé.
   ⟶ On ne se bat pas contre la règle, on fait de la place : le ruban porte un
     rembourrage en haut, et la pastille vit DEDANS. */
.calendar-days.ruban-jours { padding-top: 9px; }
.calendar-days.ruban-jours .calendar-day { overflow: visible; }

/* =============================================================================
   SITE-13, 03/09/2026 — LE RUBAN PORTE LES MARQUES DE LA MAQUETTE

   David, en revoyant la maquette du 02/09 : *« y a de bonnes idées ! »*, et
   avant cela : *« je vois plein de bazar, les pastilles vertes qu'on veut plus
   par exemple »*, *« les jours où je travaille pas ne sont pas indiqués »*.

   ⛔ LES POINTS DE COULEUR SONT RETIRÉS. `refonte.css` posait un point de 4 px
      sous chaque jour — vert s'il restait de la place, rouge s'il était plein.
      Quatre pixels pour dire la chose la plus importante de l'écran. La
      maquette ne les a jamais eus : elle colore LA CASE.
   ============================================================================= */
.calendar-days.ruban-jours .calendar-day.has-slots::after,
.calendar-days.ruban-jours .calendar-day.is-full::after { content: none; }

/* COMPLET — la case entière en rouge pâle, le chiffre foncé. On voit le mur
   avant de cliquer dessus, pas après. */
.calendar-days.ruban-jours .calendar-day.is-full{
  background: #fbe3de; border-color: #e8b7ac;
}
.calendar-days.ruban-jours .calendar-day.is-full .calendar-day-number{ color: #a5382a; }

/* FERMÉ — grisé, chiffre barré. Un jour de repos ne se clique pas, et il faut
   qu'on le voie sans essayer. */
.calendar-days.ruban-jours .calendar-day:disabled{
  background: #efeae0; border-color: #e0d8c8; opacity: .62; cursor: default;
}
.calendar-days.ruban-jours .calendar-day:disabled .calendar-day-number{
  text-decoration: line-through; color: #8a969b;
}

/* La légende, sous le ruban. Quatre états, quatre pastilles — c'est elle qui
   rend les couleurs lisibles sans qu'on ait à deviner. */
.calendar-legende{
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin: 2px 0 8px; font-size: 12px; color: #7d8b91;
}
.calendar-legende span{ display: inline-flex; align-items: center; gap: 5px; }
.calendar-legende i{
  width: 12px; height: 12px; border-radius: 4px; display: inline-block;
  border: 1.5px solid rgba(20,38,48,.16); background: rgba(255,255,255,.7);
}
.calendar-legende .l-plein i{ background: #fbe3de; border-color: #e8b7ac; }
.calendar-legende .l-ferme i{ background: #efeae0; border-color: #e0d8c8; }
.calendar-legende .l-fete i{ background: transparent; border-color: var(--gold, #d6ae55); }
/* La réduction se reconnaît à sa pastille dorée, pas à une couleur de case :
   la légende montre donc la pastille, en réduction. */
.calendar-legende .l-promo i{
  background: var(--gold, #d6ae55); border-color: var(--gold, #d6ae55);
  border-radius: 999px; width: 18px;
}

/* ⭐ LES HEURES PRISES RESTENT VISIBLES, GRISÉES ET BARRÉES — maquette du 02/09.
   Une heure qui disparaît laisse croire que le salon ferme à 11 h ; une heure
   barrée dit « c'est pris », et c'est une information que le client comprend.
   ⚠️  ELLE NE DIT PAS QUI. Le site ne connaît pas les rendez-vous des autres :
       il déduit les heures prises de l'écart entre les horaires d'ouverture et
       les créneaux libres. Aucun nom, aucune donnée d'autrui n'entre ici. */
.time-grid button.prise{
  background: transparent; border-style: dashed; color: #a2adb2;
  cursor: default; pointer-events: none;
}
.time-grid button.prise strong{ text-decoration: line-through; }

/* ⭐ SITE-12 — LA FÊTE SE VOIT, ET ELLE NE FERME RIEN.
   Un filet doré autour de la case, et le nom sous le quantième. Aucune règle
   ici ne désactive quoi que ce soit : la case reste exactement aussi cliquable
   qu'avant. Seul `ap_day_schedule` ferme un jour — David, 24/08. */
.calendar-days.ruban-jours .calendar-day.jour-fete{
  box-shadow: inset 0 0 0 1.5px var(--gold, #d6ae55);
  border-color: var(--gold, #d6ae55);
}
.calendar-day-fete{
  font-size: 9.5px; font-weight: 800; line-height: 1.1;
  color: #8a682b; max-width: 54px; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Le repère « ça glisse » — deux flèches inertes, sous le ruban. Elles ne se
   cliquent pas : ce ne sont pas des boutons, c'est un mode d'emploi. */
.ruban-glisse {
  margin: 0 0 6px;
  text-align: center;
  font-size: 13px;
  letter-spacing: .5em;
  color: rgba(20,38,48,.32);
  user-select: none;
}

/* --- LES HEURES : UN SEUL RUBAN, DANS L'ORDRE DE LA JOURNÉE -----------------
   David : « pour les heures libres, pas besoin de faire matin et après-midi ».
   Une ligne unique qui glisse. Le trou entre midi et l'après-midi se voit en
   poussant, et c'est plus honnête qu'un titre annonçant deux moments dont l'un
   peut être vide. */
.time-grid {
  max-width: 100%;
  display: flex !important;
  grid-template-columns: none !important;
  gap: 7px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.time-grid::-webkit-scrollbar { height: 5px; }
.time-grid::-webkit-scrollbar-thumb { background: rgba(20,38,48,.22); border-radius: 9px; }
.time-grid button { flex: 0 0 auto; min-width: 86px; scroll-snap-align: start; }
.time-grid button strong { font-size: 14px; }
.time-grid .time-empty { flex: 1 1 auto; }

/* =============================================================================
   SITE-11, 03/09/2026 — LES PRESTATIONS SONT DES CARTES

   David : « l'écran des services, pourquoi menu déroulant ? C'était bien la
   maquette. » Un menu cache son contenu jusqu'au clic : on ne compare pas, et
   on ne peut rien accrocher sous une option — ni la durée, ni le prochain
   créneau, ni le nombre en attente.

   ⚠️  TROIS NIVEAUX DE POIDS, ET C'EST CE QUI EMPÊCHE LA CARTE DE DEVENIR UN
       TABLEAU DE BORD : le nom en gras noir, qu'on lit ; la durée en gris
       clair à côté, qui répond sans être cherchée ; la disponibilité en
       pastille colorée, où la couleur informe avant que le texte soit lu.
   ============================================================================= */
/* ⛔ LA LIGNE D'UNE PERSONNE CHANGE DE FORME, ET IL FAUT LA REPRENDRE ENTIÈRE.
     `refonte.css` la pose en grille de trois colonnes — nom | menu | croix — avec
     `align-items: end`, parce qu'un menu déroulant fait une seule ligne. Des
     cartes empilées font dix fois cette hauteur : la croix se serait retrouvée
     en bas d'une colonne vide, et le nom collé au plafond.
   ⟶ On empile : le nom et la croix sur une ligne, les cartes dessous. */
.family-person{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 44px;
  grid-template-areas: "nom croix" "cartes cartes";
  align-items: center;
  gap: 10px 8px;
}
.family-person .person-name{ grid-area: nom; }
.family-person .oter-personne{ grid-area: croix; margin: 0; }
.cartes-services{
  grid-area: cartes;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.carte-service{
  display: flex; align-items: center; gap: 10px;
  min-height: 60px;                      /* la cible, pas une décoration */
  padding: 10px 13px;
  border: 1.5px solid rgba(20,38,48,.14);
  border-radius: 13px;
  background: rgba(255,255,255,.62);
  color: var(--ink, #142630);
  font: inherit; text-align: start; cursor: pointer;
  width: 100%;
}
.carte-service:hover{ border-color: var(--orange, #f4782b); }
.carte-service.choisie{
  border-color: var(--orange, #f4782b);
  background: #fff4ea;
  box-shadow: 0 0 0 2px rgba(244,120,43,.16);
}
.carte-corps{ flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.carte-nom{ font-size: 17px; font-weight: 800; line-height: 1.2; }
.carte-duree{ font-size: 12.5px; font-weight: 700; color: #8a969b; white-space: nowrap; }

/* La ligne de disponibilité. Vide tant que le cœur n'a pas répondu — et elle le
   reste s'il ne répond pas : aucun chiffre n'est inventé ici. */
.carte-dispo{ display: flex; flex-wrap: wrap; gap: 5px; }
.carte-dispo:empty{ display: none; }
.pastille-dispo{
  font-size: 12px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: rgba(20,38,48,.07); color: #5d6f77; white-space: nowrap;
}
.pastille-dispo.tot{ background: rgba(47,158,107,.15); color: #1d6d49; }
.pastille-dispo.attente{ background: rgba(244,120,43,.15); color: #a24a13; }

.oter-personne{
  min-width: 44px; min-height: 44px; border-radius: 999px;
  border: 1px solid rgba(20,38,48,.14); background: transparent;
  color: #8a969b; font: 800 18px/1 inherit; cursor: pointer; flex: 0 0 auto;
}
.oter-personne:disabled{ opacity: .3; cursor: default; }

/* --- Ce qu'on dit à une famille qui ne trouve rien -------------------------- */
.waitlist-famille{
  margin-top: 12px; padding: 14px 16px;
  border: 1.5px solid rgba(214,174,85,.42);
  border-radius: 13px;
  background: rgba(214,174,85,.09);
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.waitlist-famille strong{ font-size: 16px; color: var(--ink, #142630); }
.waitlist-famille p{ margin: 0; font-size: 14.5px; line-height: 1.45; color: #4a5c64; }
.waitlist-famille-appel{
  min-height: 46px; display: inline-flex; align-items: center;
  padding: 0 18px; border-radius: 999px;
  background: var(--ink, #142630); color: var(--gold-light, #f7dc98);
  font-size: 15px; font-weight: 800; text-decoration: none;
}