/* Bloomora Studio — réservation en ligne
   Palette « pause beauté » : crème + or, alignée sur bloomorastudio.fr */

:root{
  --cream:#F7F1E5;
  --cream-deep:#EEE1C9;
  --surface:#FFFFFF;
  --surface-2:#FBF6EB;
  --ink:#2B2419;
  --ink-soft:#6E6452;
  --rose:#DAB978;        /* or clair */
  --rose-deep:#B48A3F;   /* or */
  --teal:#8C9B7C;        /* sauge (accent discret) */
  --gold:#B48A3F;
  --border:rgba(43,36,25,0.14);
  --ok-bg:#E9F0E4; --ok-ink:#4B6B3A;
  --warn-bg:#F7EBD6; --warn-ink:#8C6224;
  --err-bg:#F4E2DC; --err-ink:#9A4230;
  --info-bg:#F1EAD9; --info-ink:#6B5A34;
  --shadow:0 30px 60px -30px rgba(43,36,25,0.35);
  --radius:18px;
  --on-accent:#2B2110;
  --font-display:'Playfair Display', Georgia, serif;
  --font-body:'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1E1B15; --cream-deep:#2A2418; --surface:#26221A; --surface-2:#2E2820;
    --ink:#F3EBDA; --ink-soft:#CDBE9E;
    --rose:#E7CD97; --rose-deep:#E0C079; --teal:#A9BE95; --gold:#E0C079;
    --border:rgba(243,235,218,0.16);
    --ok-bg:#25331D; --ok-ink:#AFCF9A;
    --warn-bg:#3A2E1B; --warn-ink:#E7C68C;
    --err-bg:#3A241D; --err-ink:#EFB09B;
    --info-bg:#302A1B; --info-ink:#D8C89C;
    --shadow:0 30px 60px -30px rgba(0,0,0,0.6);
    --on-accent:#241D0E;
  }
}
:root[data-theme="dark"]{
  --cream:#1E1B15; --cream-deep:#2A2418; --surface:#26221A; --surface-2:#2E2820;
  --ink:#F3EBDA; --ink-soft:#CDBE9E;
  --rose:#E7CD97; --rose-deep:#E0C079; --teal:#A9BE95; --gold:#E0C079;
  --border:rgba(243,235,218,0.16);
  --ok-bg:#25331D; --ok-ink:#AFCF9A;
  --warn-bg:#3A2E1B; --warn-ink:#E7C68C;
  --err-bg:#3A241D; --err-ink:#EFB09B;
  --info-bg:#302A1B; --info-ink:#D8C89C;
  --shadow:0 30px 60px -30px rgba(0,0,0,0.6);
  --on-accent:#241D0E;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
main{flex:1;}
img{max-width:100%; display:block;}
a{color:var(--rose-deep); text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); margin:0 0 .4em; text-wrap:balance; font-weight:520;}
h1{font-size:clamp(2rem,3.5vw + 1rem,3rem); line-height:1.1;}
h2{font-size:clamp(1.5rem,2vw + .8rem,2.1rem);}
h3{font-size:1.2rem;}
p{margin:0 0 1rem;}
.wrap{max-width:1080px; margin:0 auto; padding:0 clamp(1.1rem,4vw,2.5rem);}
.muted{color:var(--ink-soft); font-size:.92rem;}
.muted a{color:var(--ink-soft); text-decoration:underline;}
.eyebrow{
  font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--rose-deep); display:block; margin-bottom:.6rem;
}
.script{font-family:var(--font-display); font-style:italic; color:var(--gold);}
.skip{position:absolute; left:-999px;}
.skip:focus{left:1rem; top:1rem; background:var(--surface); padding:.6rem 1rem; border-radius:8px; z-index:99;}

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.9rem; border-radius:999px;
  background:linear-gradient(180deg,var(--rose) 0%,var(--rose-deep) 100%); color:var(--on-accent);
  font-family:var(--font-body); font-weight:600; font-size:.95rem; letter-spacing:.01em; cursor:pointer;
  border:1px solid transparent; text-decoration:none; transition:transform .2s,filter .2s,box-shadow .2s;
  box-shadow:0 14px 30px -14px rgba(180,138,63,.6);
}
.btn:hover{transform:translateY(-2px); filter:brightness(1.05); text-decoration:none;}
.btn:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}
.btn[disabled]{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; filter:none;}
.btn-sm{padding:.55rem 1.2rem; font-size:.85rem; box-shadow:none;}
.btn-ghost{background:none; color:var(--rose-deep); border-color:var(--rose-deep); box-shadow:none;}
.btn-ghost:hover{background:color-mix(in srgb,var(--rose) 14%,transparent); border-color:var(--rose-deep); color:var(--rose-deep); filter:none;}
.btn-danger{background:transparent; color:var(--err-ink); border-color:color-mix(in srgb,var(--err-ink) 40%,transparent); box-shadow:none;}
.btn-danger:hover{background:var(--err-bg); color:var(--err-ink);}
.linklike{background:none; border:0; color:var(--ink-soft); font:inherit; cursor:pointer; padding:0;}
.linklike:hover{color:var(--rose-deep); text-decoration:underline;}
form.inline{display:inline; margin:0;}

/* ---------- Header / footer ---------- */
.site-header{
  position:sticky; top:0; z-index:40; border-bottom:1px solid var(--border);
  background:color-mix(in srgb,var(--cream) 82%,transparent);
  backdrop-filter:saturate(160%) blur(12px);
}
.header-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem 0;}
.brand{display:flex; flex-direction:column; line-height:1.05;}
.brand:hover{text-decoration:none;}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.3rem; color:var(--ink); letter-spacing:.01em;}
.brand-tag{font-family:var(--font-body); text-transform:uppercase; letter-spacing:.24em; color:var(--gold); font-size:.58rem; font-weight:600; margin-top:4px;}
.nav{display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap; justify-content:flex-end;}
.nav a,.nav .linklike{color:var(--ink-soft); font-weight:600; font-size:.9rem;}
.nav a:hover{color:var(--rose-deep); text-decoration:none;}
@media (max-width:720px){
  .header-row{flex-direction:column; align-items:stretch; gap:.5rem;}
  .nav{gap:.9rem 1rem; justify-content:flex-start; overflow-x:auto; padding-bottom:.15rem; -webkit-overflow-scrolling:touch;}
  .nav a,.nav .linklike{white-space:nowrap; font-size:.85rem;}
  .nav .btn{margin-left:auto;}
}
.site-footer{border-top:1px solid var(--border); background:var(--surface-2); margin-top:3rem;}
.footer-row{display:flex; justify-content:space-between; gap:1rem; padding:1.6rem 0; flex-wrap:wrap;}
.footer-links{display:flex; gap:1rem; flex-wrap:wrap; align-items:center;}
.footer-links a{color:var(--ink-soft); text-decoration:underline;}

/* ---------- Pages légales ---------- */
.prose{max-width:70ch;}
.prose h2{margin-top:2rem; font-size:1.3rem;}
.prose dl{display:grid; grid-template-columns:max-content 1fr; gap:.4rem 1.2rem; margin:1rem 0;}
.prose dt{color:var(--ink-soft); font-size:.9rem;}
.prose dd{margin:0;}
@media (max-width:560px){ .prose dl{grid-template-columns:1fr; gap:.1rem 0;} .prose dd{margin-bottom:.6rem;} }
.todo{background:var(--err-bg); color:var(--err-ink); padding:.05rem .4rem; border-radius:5px; font-size:.85rem; font-weight:600;}

/* ---------- Flash ---------- */
.flash-zone{margin-top:1rem; display:flex; flex-direction:column; gap:.6rem;}
.flash{padding:.85rem 1.1rem; border-radius:12px; font-size:.92rem; font-weight:500;}
.flash-success{background:var(--ok-bg); color:var(--ok-ink);}
.flash-error{background:var(--err-bg); color:var(--err-ink);}
.flash-info{background:var(--info-bg); color:var(--info-ink);}
.flash-warn{background:var(--warn-bg); color:var(--warn-ink);}

/* ---------- Sections ---------- */
.section{padding:clamp(2.2rem,5vw,3.6rem) 0;}
.hero{
  position:relative; padding:clamp(3rem,8vw,5.5rem) 0 clamp(2.5rem,6vw,4rem);
  background:
    radial-gradient(120% 90% at 88% -10%, color-mix(in srgb,var(--rose) 34%,transparent), transparent 55%),
    radial-gradient(90% 70% at 0% 110%, color-mix(in srgb,var(--cream-deep) 70%,transparent), transparent 60%);
}
.hero h1 em, h1 em, h2 em{font-style:italic; color:var(--rose-deep);}
.hero h1{max-width:18ch;}
.hero .lede{max-width:52ch; font-size:1.08rem; color:var(--ink-soft);}
.hero-cta{display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.4rem;}

/* ---------- Cartes / grilles ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.4rem 1.5rem;
}
.grid{display:grid; gap:1.1rem;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
@media (max-width:860px){ .grid.cols-3{grid-template-columns:1fr 1fr;} }
@media (max-width:640px){ .grid.cols-3,.grid.cols-2{grid-template-columns:1fr;} }

.svc{display:flex; flex-direction:column; gap:.5rem;}
.svc h3{margin:0;}
.svc .svc-meta{display:flex; align-items:baseline; gap:.6rem; margin-top:.2rem; font-size:.9rem; color:var(--ink-soft);}
.svc .price{font-weight:700; color:var(--ink);}
.svc-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column;}
.svc-list li{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--border);
}
.svc-list li:last-child{border-bottom:0;}
.svc-list .info h3{margin:0 0 .15rem; font-size:1.05rem;}
.svc-list .info p{margin:0; font-size:.9rem; color:var(--ink-soft);}
.svc-list .meta{text-align:right; white-space:nowrap;}
.svc-list .meta .price{display:block; font-weight:700; font-family:var(--font-display);}
.svc-list .meta .dur{font-size:.82rem; color:var(--ink-soft);}

/* ---------- Étapes numérotées ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; margin-top:1.6rem;}
@media (max-width:720px){ .steps{grid-template-columns:1fr;} }
.step .num{font-family:var(--font-display); font-size:1.6rem; color:var(--gold);}
.step h3{margin:.3rem 0 .3rem;}
.step p{font-size:.92rem; color:var(--ink-soft); margin:0;}

/* ---------- Réservation : jours + créneaux ---------- */
.booking-head{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:baseline; margin-bottom:1.4rem;}
.booking-head .price-pill{
  background:var(--cream-deep); color:var(--ink); border-radius:999px;
  padding:.25rem .8rem; font-size:.85rem; font-weight:600;
}
.day-scroller{display:flex; gap:.55rem; overflow-x:auto; padding-bottom:.6rem; margin-bottom:1.4rem;}
.day-chip{
  flex:0 0 auto; min-width:72px; text-align:center; padding:.6rem .5rem;
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
  color:var(--ink); font-size:.8rem; cursor:pointer; text-decoration:none;
}
.day-chip:hover{border-color:var(--rose-deep); text-decoration:none;}
.day-chip .dow{display:block; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft); font-size:.68rem;}
.day-chip .dnum{display:block; font-family:var(--font-display); font-size:1.3rem; line-height:1.2;}
.day-chip.is-active{background:var(--rose-deep); border-color:var(--rose-deep); color:var(--on-accent);}
.day-chip.is-active .dow{color:color-mix(in srgb,var(--on-accent) 75%,transparent);}

.slot-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:.6rem;}
.slot{
  padding:.7rem .4rem; border:1px solid var(--border); border-radius:12px;
  background:var(--surface); color:var(--ink); font-weight:600; font-size:.95rem;
  cursor:pointer; font-family:var(--font-body);
  font-variant-numeric:tabular-nums;
}
.slot:hover{border-color:var(--rose-deep); color:var(--rose-deep);}
.slot.is-selected{background:var(--rose-deep); border-color:var(--rose-deep); color:var(--on-accent);}
.empty-note{color:var(--ink-soft); padding:1.4rem 0;}

/* ---------- Formulaires ---------- */
.form-narrow{max-width:440px;}
.field{display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem;}
.field label{font-weight:600; font-size:.88rem;}
.field input,.field select,.field textarea{
  font:inherit; padding:.7rem .8rem; border:1px solid var(--border); border-radius:10px;
  background:var(--surface); color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--rose); outline-offset:1px;}
.field .hint{font-size:.8rem; color:var(--ink-soft);}
.row-2{display:grid; grid-template-columns:1fr 1fr; gap:.9rem;}
@media (max-width:560px){ .row-2{grid-template-columns:1fr;} }
.form-actions{display:flex; gap:.8rem; align-items:center; flex-wrap:wrap; margin-top:.4rem;}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;}
table.data{width:100%; border-collapse:collapse; font-size:.92rem;}
table.data th,table.data td{text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--border); vertical-align:top;}
table.data th{font-family:var(--font-body); font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}
table.data tr:hover td{background:var(--surface-2);}
.tag{display:inline-block; padding:.15rem .55rem; border-radius:999px; font-size:.75rem; font-weight:600;}
.tag-ok{background:var(--ok-bg); color:var(--ok-ink);}
.tag-off{background:var(--err-bg); color:var(--err-ink);}
.tag-past{background:var(--cream-deep); color:var(--ink-soft);}

/* ---------- Espace client / RDV ---------- */
.appt{display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap;}
.appt .when{font-family:var(--font-display); font-size:1.1rem;}
.appt .svc-name{color:var(--ink-soft); font-size:.92rem;}
.stack{display:flex; flex-direction:column; gap:1rem;}
.split{display:grid; grid-template-columns:1.4fr 1fr; gap:1.6rem; align-items:start;}
@media (max-width:820px){ .split{grid-template-columns:1fr;} }

/* ---------- Planning admin ---------- */
.week-nav{display:flex; gap:.4rem; flex-wrap:wrap; margin:1rem 0 1.4rem;}
.week-nav a{
  padding:.45rem .7rem; border:1px solid var(--border); border-radius:10px;
  font-size:.82rem; color:var(--ink); background:var(--surface);
}
.week-nav a.is-today{border-color:var(--rose-deep); color:var(--rose-deep); font-weight:700;}
.week-nav a:hover{text-decoration:none; border-color:var(--rose-deep);}
.timeline{display:flex; flex-direction:column; gap:.5rem;}
.timeline .slot-row{display:flex; gap:1rem; padding:.9rem 1rem; border:1px solid var(--border); border-radius:12px; background:var(--surface);}
.timeline .slot-row.cancelled{opacity:.55;}
.timeline .t{font-family:var(--font-display); font-variant-numeric:tabular-nums; min-width:96px;}

/* Grille horaire du planning (visuel complet + création forcée) */
.pl-grid{display:flex; flex-direction:column; gap:2px; margin-top:.6rem; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.pl-row{display:flex; gap:.6rem; background:var(--surface); padding:.5rem .7rem; min-height:52px;}
.pl-row.is-closed{background:var(--cream-deep);}
.pl-row .h{font-family:var(--font-display); font-variant-numeric:tabular-nums; min-width:52px; color:var(--ink-soft); padding-top:.15rem;}
.pl-row .body{flex:1; display:flex; flex-direction:column; gap:.35rem;}
.pl-appt{border:1px solid var(--border); border-left:3px solid var(--gold); border-radius:8px; padding:.35rem .6rem; background:var(--cream);}
.pl-appt.cancelled{opacity:.5; border-left-color:var(--ink-soft); text-decoration:line-through;}
.pl-appt .meta{font-size:.82rem; color:var(--ink-soft);}
.pl-add{align-self:flex-start; font-size:.8rem; color:var(--ink-soft); text-decoration:none; border:1px dashed var(--border); border-radius:8px; padding:.2rem .55rem;}
.pl-add:hover{border-color:var(--gold); color:var(--gold); text-decoration:none;}
.kpi{display:flex; gap:1rem; flex-wrap:wrap; margin:.4rem 0 1.4rem;}
.kpi div{
  display:flex; flex-direction:column; gap:.15rem; min-width:130px;
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:.8rem 1.1rem;
}
.kpi .n{display:block; font-family:var(--font-display); font-size:1.4rem; line-height:1.15;}
.kpi .l{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);}

/* ---------- Menu admin (texte) ---------- */
.admin-dash{border-bottom:1px solid var(--border); background:var(--surface-2);}
.admin-dash-row{display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .1rem; padding:.7rem 0;}
.dash-link{
  padding:.3rem .55rem; border-radius:8px; text-decoration:none;
  color:var(--ink-soft); font-size:.86rem; font-weight:600; white-space:nowrap;
}
.dash-link:hover{color:var(--rose-deep); text-decoration:none; background:var(--surface);}
.dash-link.is-active{color:var(--rose-deep);}
.admin-dash-row .sep{color:var(--border); font-size:.8rem; margin:0 .1rem;}

/* ---------- Chiffre d'affaires ---------- */
.ca-modes{display:inline-flex; border:1px solid var(--border); border-radius:999px; overflow:hidden; margin:.6rem 0 1rem;}
.ca-modes a{padding:.5rem 1.1rem; font-size:.85rem; font-weight:600; color:var(--ink-soft); text-decoration:none;}
.ca-modes a:hover{background:var(--surface-2); text-decoration:none;}
.ca-modes a.is-on{background:var(--rose-deep); color:var(--on-accent);}
.ca-period{display:flex; align-items:center; gap:.9rem; margin-bottom:1.2rem; font-family:var(--font-display); font-size:1.15rem;}
.ca-period .ca-nav{
  display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem;
  border:1px solid var(--border); border-radius:50%; color:var(--ink); text-decoration:none; font-size:1rem;
}
.ca-period .ca-nav:hover{border-color:var(--rose-deep); color:var(--rose-deep); text-decoration:none;}
.ca-period .ca-today{font-family:var(--font-body); font-size:.8rem; text-decoration:underline; color:var(--ink-soft);}
.ca-bars{display:flex; flex-direction:column; gap:.5rem;}
.ca-bar{display:grid; grid-template-columns:3.2rem 1fr auto; align-items:center; gap:.7rem; font-size:.85rem;}
.ca-bar-lbl{color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.ca-bar-track{height:.55rem; background:var(--cream-deep); border-radius:999px; overflow:hidden;}
.ca-bar-fill{display:block; height:100%; background:linear-gradient(90deg,var(--rose),var(--rose-deep)); border-radius:999px;}
.ca-bar-val{font-variant-numeric:tabular-nums; font-weight:600;}
table.data tfoot th{border-top:2px solid var(--rose-deep); font-family:var(--font-display); font-size:1rem; color:var(--ink); text-transform:none; letter-spacing:0;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
  html{scroll-behavior:auto;}
}