/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Palette sombre de l'outil.
     L'administration n'a pas la meme fonction que le site public : on
     l'ouvre tous les jours, longtemps, souvent le soir. Elle garde le
     terracotta et les polices de la marque, sur un fond sombre chaud.

     Les noms ci-dessous designent des ROLES, pas des couleurs. --cream est
     le fond de page, --brown la couleur du texte : sur fond sombre leurs
     valeurs s'inversent, mais leur role ne bouge pas, ce qui laisse valides
     les regles deja ecrites. Les deux endroits qui melangeaient les roles,
     le fond de la barre laterale et le texte pose sur un accent, ont
     desormais leur propre variable. */

  /* Echelle d'elevation : chaque cran est plus clair que le precedent.
     Sur fond clair, --cream-warm etait une surface posee au-dessus d'une
     carte blanche. Le remapper sur la couleur des cartes rendrait invisibles
     l'en-tete collant du calendrier et le survol des lignes de tableau. */
  --nuit:          #12100E;   /* fond de page          */
  --nuit-panneau:  #1B1714;   /* cartes, grille        */
  --nuit-haut:     #241E1A;   /* en-tetes, survol      */
  --nuit-plus:     #2E2620;   /* survol appuye         */

  --cream:         var(--nuit);
  --cream-warm:    var(--nuit-haut);
  --cream-deep:    var(--nuit-plus);

  --brown:         #EFE6DB;
  --brown-mid:     #C9B6A4;
  --brown-soft:    #A2907E;

  --sidebar-fond:  #1B1714;
  --sur-sombre:    #F2EAE0;
  --sur-accent:    #17130F;

  --terracotta:    #C4856A;
  --terra-hover:   #D69A7E;
  --terra-10:      rgba(196,133,106,.14);

  --sage:          #8FAF8A;
  --sage-15:       rgba(143,175,138,.16);
  --danger:        #E07A7A;
  --danger-bg:     rgba(224,122,122,.12);
  --border:        rgba(239,230,219,.10);
  --border-light:  rgba(239,230,219,.055);
  --sidebar-w:     230px;
}


html, body { height: 100%; font-size: 15px; line-height: 1.65; }

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--cream);
  color: var(--brown);
}

h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; color: var(--brown); }

a { color: var(--terracotta); }

/* ── APP SHELL ── */
.app-shell { display: flex; min-height: 100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--sidebar-fond);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 100;
  overflow-y: auto;
}

.sidebar-logo {
  padding: 1.5rem 1.375rem 1.125rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.sidebar-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--sur-sombre);
  text-decoration: none;
  letter-spacing: -.02em;
  display: block;
}
.sidebar-brand .acc { color: var(--terracotta); }
.sidebar-sub {
  font-size: .68rem;
  color: rgba(242,234,224,.62);
  letter-spacing: .06em;
  margin-top: .15rem;
}

.sidebar-nav { padding: .875rem 0; flex: 1; }
.sidebar-pied { padding: .5rem 0 .875rem; border-top: 1px solid var(--border); }

.nav-label {
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(242,234,224,.58);
  padding: .875rem 1.375rem .3rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .575rem 1.375rem;
  color: rgba(242,234,224,.72);
  text-decoration: none;
  font-size: .875rem;
  transition: background .15s, color .15s;
  position: relative;
}
.nav-link:hover { background: rgba(255,255,255,.05); color: var(--sur-sombre); }
.nav-link.active { background: rgba(196,133,106,.15); color: var(--sur-sombre); }
.nav-link.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--terracotta);
}

.nav-icon {
  width: 15px; height: 15px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; opacity: .75;
}
.nav-link.active .nav-icon,
.nav-link:hover .nav-icon { opacity: 1; }

/* ── MAIN ── */
/* min-width: 0 est indispensable : sans lui, cet élément flex refuse de
   descendre sous la largeur de son contenu, et le défilement horizontal
   de la grille de l'agenda déborderait sur toute la page. */
.main {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.flashes { padding: .875rem 2rem 0; }
.flash {
  padding: .7rem 1rem;
  border-radius: 3px;
  font-size: .85rem;
  margin-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.flash-success { background: var(--sage-15); color: #A9D0A3; border-left: 3px solid var(--sage); }
.flash-info    { background: rgba(120,150,220,.14); color: #A3B7EC; border-left: 3px solid #7E9BDC; }
.flash-error   { background: var(--danger-bg); color: var(--danger); border-left: 3px solid var(--danger); }

/* Sans largeur maximale, la zone de travail s'etirait jusqu'a 2330 px sur
   un ecran 27 pouces, et les colonnes de tableau se partageaient l'espace
   au lieu d'etre dimensionnees par leur contenu. */
.content { padding: 2rem; flex: 1; max-width: 1400px; width: 100%; }

/* ── PAGE HEADER ── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-title { font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.page-sub   { font-size: .83rem; color: var(--brown-soft); margin-top: .2rem; }
.page-actions { display: flex; gap: .625rem; flex-wrap: wrap; align-items: center; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .575rem 1.125rem;
  font-family: inherit; font-size: .82rem; font-weight: 500;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: 3px; cursor: pointer;
  transition: background .16s, border-color .16s, transform .14s;
  white-space: nowrap; line-height: 1.4;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary { background: var(--terracotta); color: var(--sur-accent); border-color: var(--terracotta); }
.btn-primary:hover { background: var(--terra-hover); border-color: var(--terra-hover); color: var(--sur-accent); }

.btn-outline { background: transparent; color: var(--terracotta); border-color: var(--terracotta); }
.btn-outline:hover { background: var(--terracotta); color: var(--sur-accent); }

.btn-ghost { background: transparent; color: var(--brown-soft); border-color: var(--border); }
.btn-ghost:hover { background: var(--cream-warm); color: var(--brown); }

.btn-danger { background: transparent; color: var(--danger); border-color: rgba(224,122,122,.35); }
.btn-danger:hover { background: var(--danger-bg); }

/* Champ ou l'on ecrit un mot a la main pour debloquer une action sans
   retour. La classe etait posee dans les gabarits sans jamais avoir ete
   definie : le champ ressemblait a n'importe quel autre, alors que ce
   qu'il declenche ne ressemble a rien d'autre. */
.input-confirmation {
  border-color: rgba(224,122,122,.45);
  background: var(--danger-bg);
  font-size: .85rem;
}
.input-confirmation:focus { border-color: var(--danger); }
.input-confirmation::placeholder { color: var(--danger); opacity: .55; }

.btn-sm { padding: .38rem .8rem; font-size: .77rem; }
.btn-xs { padding: .25rem .6rem; font-size: .72rem; }

/* ── STATS ── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--nuit-panneau); border: 1px solid var(--border); border-radius: 4px; padding: 1.25rem 1.5rem; }
.stat-num  { font-family: 'Playfair Display', Georgia, serif; font-size: 2.25rem; font-weight: 400; color: var(--terracotta); line-height: 1; margin-bottom: .25rem; }
.stat-lbl  { font-size: .73rem; color: var(--brown-soft); }

/* ── CARDS ── */
.card { background: var(--nuit-panneau); border: 1px solid var(--border); border-radius: 4px; padding: 1.5rem; }
.card + .card { margin-top: 1rem; }

/* ── SEARCH ── */
.search-bar { display: flex; gap: .75rem; margin-bottom: 1.5rem; }
.search-input {
  flex: 1; padding: .575rem .9rem;
  background: var(--nuit-panneau); border: 1px solid var(--border);
  border-radius: 3px; font-family: inherit; font-size: .9rem;
  color: var(--brown); outline: none; transition: border-color .16s;
}
.search-input:focus { border-color: var(--terracotta); }

/* ── TABLE ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead th {
  text-align: left; padding: .6rem 1rem;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brown-soft); border-bottom: 1px solid var(--border); font-weight: 500;
}
tbody tr { border-bottom: 1px solid var(--border-light); transition: background .12s; }
tbody tr:hover { background: var(--cream-warm); }
tbody tr:last-child { border-bottom: none; }
td { padding: .825rem 1rem; vertical-align: middle; color: var(--brown); }
td a { color: var(--terracotta); text-decoration: none; font-weight: 500; }
td a:hover { text-decoration: underline; }
.td-actions { display: flex; gap: .4rem; align-items: center; }

/* ── BADGE ── */
.badge { display: inline-block; padding: .18rem .55rem; border-radius: 100px; font-size: .68rem; font-weight: 500; letter-spacing: .03em; }
.badge-confirm { background: var(--sage-15); color: #A9D0A3; }
.badge-complet { background: rgba(120,150,220,.16); color: #A3B7EC; }
.badge-annule  { background: rgba(239,230,219,.07); color: var(--brown-soft); }
/* Presence confirmee par la cliente : distincte du statut du rendez-vous,
   qui reste « confirme ». Une seance peut etre confirmee sans que la
   cliente ait repondu au rappel. */
.badge-presence { background: var(--sage-15); color: #A9D0A3; margin-left: .3rem; }
.cal-rdv-ok { color: #7FB86F; font-weight: 700; }
/* Etat qui demande une action, pas seulement une information : une copie
   de securite illisible, un envoi abandonne. Doit se voir de loin. */
.badge-alerte  { background: var(--danger-bg); color: var(--danger); }

/* ── FORMS ── */
.form-section { margin-bottom: 2.25rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--border-light); }
.form-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.form-section-title {
  font-size: .95rem; font-weight: 600; color: var(--brown);
  margin-bottom: 1.125rem;
  display: flex; align-items: center; gap: .625rem;
}
.form-section-title::after { content: ''; flex: 1; height: 1px; background: var(--terracotta); opacity: .35; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: .875rem 1.125rem; }
.form-group { display: flex; flex-direction: column; gap: .3rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group.half { grid-column: span 2; }

label { font-size: .77rem; font-weight: 500; color: var(--brown-soft); letter-spacing: .02em; }

input[type=text], input[type=email], input[type=tel], input[type=date],
select, textarea {
  width: 100%; padding: .55rem .85rem;
  background: var(--nuit-panneau); border: 1px solid var(--border);
  border-radius: 3px; font-family: inherit; font-size: .9rem;
  color: var(--brown); outline: none; transition: border-color .16s;
}
input:focus, select:focus, textarea:focus { border-color: var(--terracotta); }
textarea { resize: vertical; min-height: 72px; }

.radio-group, .check-group { display: flex; gap: 1.125rem; flex-wrap: wrap; padding-top: .2rem; }
.radio-opt, .check-opt {
  display: flex; align-items: center; gap: .35rem;
  font-size: .88rem; cursor: pointer; color: var(--brown);
}
input[type=radio], input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--terracotta); cursor: pointer; }

.oui-non-detail {
  margin-top: .625rem; padding: .75rem 1rem;
  background: var(--cream-warm); border-radius: 3px;
  border-left: 2px solid var(--terracotta);
  display: none;
}
.oui-non-detail.visible { display: block; }

.form-hint { font-size: .75rem; color: var(--brown-soft); margin-top: .2rem; }

/* ── FICHE CLIENT ── */
.client-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.client-avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--terracotta); color: var(--sur-accent);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 2rem; }
.tab {
  padding: .575rem 1.25rem; font-size: .85rem; font-weight: 500;
  color: var(--brown-soft); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; user-select: none;
}
.tab.active { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 0 1.5rem; }
.info-pair { padding: .5rem 0; border-bottom: 1px solid var(--border-light); }
.info-pair:last-child { border-bottom: none; }
.info-lbl  { font-size: .7rem; color: var(--brown-soft); letter-spacing: .05em; text-transform: uppercase; }
.info-val  { font-size: .9rem; color: var(--brown); margin-top: .1rem; }

.problem-tag { display: inline-block; padding: .2rem .6rem; background: var(--terra-10); color: var(--terracotta); border-radius: 100px; font-size: .72rem; margin: .15rem .15rem 0 0; }
.zone-tag    { display: inline-block; padding: .2rem .6rem; background: var(--sage-15); color: #A9D0A3; border-radius: 100px; font-size: .72rem; margin: .15rem .15rem 0 0; }
.alert-tag   { display: inline-block; padding: .2rem .6rem; background: var(--danger-bg); color: var(--danger); border-radius: 100px; font-size: .72rem; margin: .15rem .15rem 0 0; }

.sante-section { margin-bottom: 1.5rem; }
.sante-section h4 { font-size: .85rem; font-weight: 600; color: var(--brown); margin-bottom: .5rem; padding-bottom: .35rem; border-bottom: 1px solid var(--border-light); }

/* ── PAGE DE CONNEXION ── */
.page-connexion { background: var(--nuit); }
.connexion {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; gap: .25rem;
}
.connexion-marque {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.9rem; font-weight: 600; letter-spacing: -.02em;
  color: var(--sur-sombre);
}
.connexion-marque .acc { color: var(--terracotta); }
.connexion-sous {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brown-soft); margin-bottom: 1.75rem;
}
.connexion-flashes { width: 100%; max-width: 26rem; margin-bottom: .875rem; }

.connexion-carte {
  width: 100%; max-width: 26rem;
  background: var(--nuit-panneau);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.connexion-carte h1 { font-size: 1.35rem; }
.connexion-texte { font-size: .9rem; color: var(--brown-soft); line-height: 1.6; }
.connexion-btn { width: 100%; margin-top: .25rem; }
.connexion-note {
  font-size: .8rem; color: var(--brown-soft); line-height: 1.55;
  padding-top: .875rem; border-top: 1px solid var(--border);
}
.connexion-pied { margin-top: 1.25rem; font-size: .84rem; }
.connexion-pied a { color: var(--brown-soft); }
.connexion-pied a:hover { color: var(--terracotta); }

/* ── MOUVEMENT ── */
/* Deplacement seul, jamais d'opacite : si l'horloge d'animation cale, pour
   une raison quelconque, un element parti d'une opacite nulle reste
   invisible. Un element simplement decale reste lisible. Le mouvement suffit
   a attirer l'oeil. */
@keyframes adm-revele {
  from { transform: translateY(-6px); }
  to   { transform: none; }
}
.flash { animation: adm-revele .3s cubic-bezier(.4,0,.2,1); }
.detail.visible { animation: adm-revele .26s cubic-bezier(.4,0,.2,1); }

/* Cette feuille n'avait aucune prise en charge du mouvement reduit alors
   qu'elle est pleine de transitions. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── BARRE D'ENREGISTREMENT ── */
/* L'ecran de reglages fait quatre ecrans de haut sur telephone, et le bouton
   restait tout en bas : changer une case en haut obligeait a parcourir toute
   la page pour sauvegarder. */
.barre-enregistrer {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: flex-end; gap: 1rem;
  margin: 1.5rem -2rem -2rem;
  padding: .875rem 2rem;
  background: rgba(18,16,14,.93);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}
.barre-enregistrer-note {
  font-size: .82rem; color: var(--brown-soft); margin-right: auto;
}
.barre-enregistrer-note.en-attente { color: var(--terracotta); font-weight: 500; }

/* ── AGENDA ── */
.cal-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.cal-title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.1rem; font-weight: 600; }

/* Grille horaire hebdomadaire : gouttière des heures + 7 colonnes de jours.
   La largeur des colonnes est définie une seule fois, sur .cal, et héritée
   par l'en-tête et le corps pour qu'ils restent alignés. */
.cal-wrap {
  overflow-x: auto;
  background: var(--nuit-panneau);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.cal {
  --gutter: 58px;
  --cols: var(--gutter) repeat(7, minmax(96px, 1fr));
  min-width: 760px;
}

/* En-tête collant : les jours restent visibles au défilement */
.cal-head {
  display: grid;
  grid-template-columns: var(--cols);
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--cream-warm);
  border-bottom: 1px solid var(--border);
}

.cal-head-corner { border-right: 1px solid var(--border-light); }

.cal-head-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem .25rem .45rem;
  border-right: 1px solid var(--border-light);
}
.cal-head-day:last-child { border-right: none; }

.cal-head-name {
  font-size: .61rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brown-soft); font-weight: 500;
}
.cal-head-num {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem; color: var(--brown); line-height: 1.15;
}

.cal-head-day.is-today {
  background: var(--terracotta);
}
.cal-head-day.is-today .cal-head-name,
.cal-head-day.is-today .cal-head-num { color: var(--sur-accent); }

/* Corps de la grille */
.cal-body {
  display: grid;
  grid-template-columns: var(--cols);
  position: relative;
}

/* Gouttière : les libellés d'heures, alignés sur les lignes */
.cal-gutter { border-right: 1px solid var(--border-light); background: var(--cream); }

.cal-gutter-hour {
  position: relative;
  border-bottom: 1px solid var(--border-light);
}
.cal-gutter-hour span {
  position: absolute;
  top: -.55em; right: .5rem;
  font-family: 'Courier New', monospace;
  font-size: .68rem;
  color: var(--brown-soft);
  background: var(--cream);
  padding: 0 .15rem;
}
/* Pas d'étiquette flottante au-dessus de la première ligne */
.cal-gutter-hour:first-child span { top: .15rem; }

/* Colonne d'un jour */
.cal-col { position: relative; border-right: 1px solid var(--border-light); }
.cal-col:last-child { border-right: none; }
.cal-col.is-today { background: rgba(196,133,106,.07); }

/* Case horaire vide, cliquable */
.cal-slot {
  display: block;
  border-bottom: 1px solid var(--border-light);
  text-decoration: none;
  position: relative;
  transition: background .13s;
}
.cal-slot:hover { background: var(--terra-10); }

.cal-slot-plus {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--terracotta);
  font-size: 1rem;
  opacity: 0;
  transition: opacity .13s;
}
.cal-slot:hover .cal-slot-plus { opacity: .75; }
.cal-slot:focus-visible { outline: 2px solid var(--terracotta); outline-offset: -2px; }

/* Trait de l'heure actuelle */
.cal-now {
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: var(--terracotta);
  z-index: 3;
  pointer-events: none;
}
.cal-now::before {
  content: '';
  position: absolute;
  left: -3px; top: -3px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--terracotta);
}

/* Une séance, positionnée à son heure réelle */
.cal-rdv {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: .05rem;
  padding: .3rem .45rem;
  border-radius: 3px;
  border-left: 3px solid var(--terra-hover);
  background: var(--terracotta);
  text-decoration: none;
  line-height: 1.25;
  transition: box-shadow .15s, transform .15s;
}
.cal-rdv:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  transform: translateY(-1px);
  z-index: 5;
}

.cal-rdv.complet { border-left-color: #B7D3B2; background: var(--sage); }
/* Une seance annulee n'a pas d'aplat terracotta : le raccourci background
   avec un seul degrade remet la couleur de fond a transparent. Sans la
   redonner, l'encre foncee des autres blocs se retrouve sur le panneau
   sombre, a 1.04:1, donc invisible. */
.cal-rdv.annule   {
  border-left-color: #7C7168;
  background-color: var(--nuit-haut);
  background-image: repeating-linear-gradient(135deg,
    rgba(239,230,219,.07) 0 5px, transparent 5px 10px);
  opacity: .75;
}
.cal-rdv.annule .cal-rdv-client { text-decoration: line-through; }
.cal-rdv.annule .cal-rdv-client,
.cal-rdv.annule .cal-rdv-time,
.cal-rdv.annule .cal-rdv-svc { color: var(--brown-soft); }

.cal-rdv-time   { font-family: 'Courier New', monospace; font-size: .64rem; color: rgba(23,19,15,.88); }
.cal-rdv-client { font-size: .78rem; font-weight: 600; color: var(--sur-accent); }
.cal-rdv-svc    { font-size: .68rem; color: rgba(23,19,15,.85); }

/* Légende */
.cal-legende {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
  margin-top: .875rem;
  font-size: .76rem;
  color: var(--brown-soft);
}
.cal-puce {
  width: 9px; height: 9px; border-radius: 2px;
  display: inline-block; flex-shrink: 0;
  margin-left: .625rem;
}
.cal-puce:first-child { margin-left: 0; }
.cal-puce.confirme { background: var(--terracotta); }
.cal-puce.complete { background: var(--sage); }
.cal-puce.annule   { background: #7C7168; }
.cal-legende-note { margin-left: auto; font-style: italic; opacity: .8; }

/* ── CRENEAUX DEJA RESERVES (formulaire de RDV) ── */
.occupes {
  margin-top: .875rem;
  padding: .75rem 1rem;
  background: var(--cream-warm);
  border-left: 2px solid var(--terracotta);
  border-radius: 3px;
}
.occupes[hidden], .occupes-vide[hidden] { display: none; }

.occupes-titre {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brown-soft);
  margin-bottom: .5rem;
}

.occupes-liste { list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.occupes-liste li { font-size: .85rem; color: var(--brown); display: flex; gap: .625rem; align-items: baseline; }

.occupes-heure {
  font-family: 'Courier New', monospace;
  font-size: .78rem;
  color: var(--terracotta);
  flex-shrink: 0;
}

.occupes-vide {
  margin-top: .875rem;
  padding: .625rem 1rem;
  font-size: .82rem;
  color: var(--brown-soft);
  background: var(--sage-15);
  border-left: 2px solid var(--sage);
  border-radius: 3px;
}

/* ── ÉCRAN DE RÉGLAGES : horaire par jour ── */
.reg-jours { display: flex; flex-direction: column; gap: .5rem; }

.reg-jour {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: .65rem .875rem;
  background: var(--cream-warm);
  border-radius: 3px;
  border-left: 3px solid var(--sage);
  transition: opacity .16s, border-color .16s;
}
.reg-jour.ferme {
  opacity: .5;
  border-left-color: rgba(239,230,219,.16);
}

.reg-jour-nom {
  display: flex; align-items: center; gap: .55rem;
  font-size: .9rem; font-weight: 500; color: var(--brown);
  cursor: pointer; min-width: 8rem;
  text-transform: capitalize;
}

.reg-jour-heures { display: flex; align-items: center; gap: .5rem; }
.reg-jour-heures input[type=time] { width: auto; padding: .35rem .5rem; font-size: .85rem; }
.reg-jour.ferme .reg-jour-heures { pointer-events: none; }
.reg-a { font-size: .8rem; color: var(--brown-soft); }

input[type=number] {
  width: 100%; padding: .55rem .85rem;
  background: var(--nuit-panneau); border: 1px solid var(--border);
  border-radius: 3px; font-family: inherit; font-size: .9rem;
  color: var(--brown); outline: none; transition: border-color .16s;
}
input[type=number]:focus { border-color: var(--terracotta); }

/* ── RÉGLAGES : bascules des messages automatiques ── */
.reg-bascules { display: flex; flex-direction: column; gap: .625rem; }

.reg-bascule {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .875rem 1rem;
  background: var(--cream-warm);
  border-radius: 3px;
  cursor: pointer;
  transition: background .16s;
}
.reg-bascule:hover { background: var(--cream-deep); }
.reg-bascule input { margin-top: .25rem; flex-shrink: 0; }
.reg-bascule span { font-size: .82rem; color: var(--brown-soft); line-height: 1.55; }
.reg-bascule strong {
  display: block; font-size: .88rem; color: var(--brown); font-weight: 500;
  margin-bottom: .1rem;
}

input[type=password] {
  width: 100%; padding: .55rem .85rem;
  background: var(--nuit-panneau); border: 1px solid var(--border);
  border-radius: 3px; font-family: inherit; font-size: .9rem;
  color: var(--brown); outline: none; transition: border-color .16s;
}
input[type=password]:focus { border-color: var(--terracotta); }

/* ── FILE D'ENVOI ── */
.canaux { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.canal {
  display: flex; align-items: center; gap: .75rem;
  padding: .75rem 1.125rem;
  background: var(--nuit-panneau);
  border: 1px solid var(--border);
  border-radius: 4px;
  flex: 1; min-width: 15rem;
}
.canal-puce {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(239,230,219,.18); flex-shrink: 0;
}
.canal.pret .canal-puce { background: var(--sage); }
.canal strong { display: block; font-size: .88rem; font-weight: 500; }
.canal span:not(.canal-puce) { font-size: .76rem; color: var(--brown-soft); }

.apercu { position: relative; }
.apercu summary { list-style: none; display: inline-flex; }
.apercu summary::-webkit-details-marker { display: none; }

.apercu-corps {
  position: absolute; z-index: 20; right: 0; top: 100%;
  margin-top: .35rem;
  width: min(30rem, 70vw);
  padding: 1rem 1.125rem;
  background: var(--nuit-panneau);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 8px 28px rgba(0,0,0,.45);
  text-align: left;
}
.apercu-sujet {
  font-weight: 500; font-size: .85rem;
  padding-bottom: .5rem; margin-bottom: .5rem;
  border-bottom: 1px solid var(--border-light);
}
.apercu-corps pre {
  font-family: inherit; font-size: .8rem; line-height: 1.6;
  color: var(--brown-soft);
  white-space: pre-wrap; word-break: break-word;
  max-height: 22rem; overflow-y: auto;
}

/* ── SOAP ── */
.soap-block { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; }
.soap-letter {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--terracotta); color: var(--sur-accent);
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.soap-body { flex: 1; }
.soap-body > label { display: block; font-weight: 600; color: var(--brown); font-size: .88rem; margin-bottom: .3rem; }
.soap-body > small { font-size: .75rem; color: var(--brown-soft); display: block; margin-top: .25rem; }

/* ── HISTORIQUE (timeline) ── */
.rdv-history { display: flex; flex-direction: column; gap: 0; }
.rdv-hist-item {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 0 1.25rem; position: relative;
}
.rdv-hist-date {
  font-family: 'Courier New', monospace; font-size: .75rem;
  color: var(--brown-soft); text-align: right; padding: .875rem 0;
  line-height: 1.3;
}
.rdv-hist-body {
  border-left: 1px solid var(--border); padding: .875rem 0 .875rem 1.25rem; position: relative;
}
.rdv-hist-body::before {
  content: ''; position: absolute; left: -4px; top: 1.15rem;
  width: 7px; height: 7px; border-radius: 50%; background: var(--terracotta);
}
.rdv-hist-body.complet::before { background: var(--sage); }
.rdv-hist-body.annule::before  { background: #5C534B; }

/* ── EMPTY STATE ── */
.empty { text-align: center; padding: 3rem 1rem; color: var(--brown-soft); }
.empty-icon { font-size: 2.25rem; opacity: .25; margin-bottom: .75rem; }
.empty-lbl  { font-size: .9rem; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  :root { --sidebar-w: 0px; }
  .sidebar { display: none; }
  .content { padding: 1rem; }
  /* La grille garde sa largeur minimale et défile horizontalement
     plutôt que de s'écraser au point d'être illisible. */
  .cal { --gutter: 46px; }
  .cal-legende-note { margin-left: 0; width: 100%; }
}