/* ================================================================
   Haras de Lauron — page publique /reserver
   Charte Provence : bone / cyprès / sable doré / encre.
   Motion sobre (Emil Kowalski) : ease-out, transform/opacity only.
   ================================================================ */
:root{
  --bone:#F7F3EA; --bone-2:#FBF8F1; --sand:#EDE4D3;
  --ink:#26241E; --ink-soft:#4A473E; --soft:#6b675c;
  --cypress:#586A4C; --cypress-deep:#3C4A33; --gold:#A8875A; --gold-soft:#c2a578;
  --danger:#b5493a;
  --line:rgba(38,36,30,.14); --shadow:0 24px 60px -28px rgba(38,36,30,.45);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --maxw:1120px; --ease:cubic-bezier(.16,.62,.23,.98);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bone);line-height:1.6;font-weight:300;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
.wrap{width:min(var(--maxw),92vw);margin-inline:auto}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:.005em}
.eyebrow{font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;font-weight:400;color:var(--gold);display:inline-flex;align-items:center;gap:.9em}
.eyebrow.center::before,.eyebrow.center::after{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}

/* ---- nav ---- */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(18px,5vw,48px);background:rgba(247,243,234,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.nav__brand{display:flex;align-items:center;gap:12px}
.nav__brand img{width:38px}
.wm{font-family:var(--serif);font-size:1.35rem;line-height:1;display:flex;flex-direction:column}
.wm small{font-family:var(--sans);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-top:3px}
.nav__back{font-size:.82rem;color:var(--ink-soft);padding:8px 4px;position:relative}
.nav__back::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
@media(hover:hover){.nav__back:hover::after{transform:scaleX(1);transform-origin:left}}

/* ---- en-tête ---- */
.head{padding:clamp(46px,7vw,86px) 0 8px;text-align:center}
.head__in{max-width:680px;margin-inline:auto}
.head h1{font-size:clamp(2.2rem,5vw,3.4rem);margin:18px 0 0}
.head .sub{color:var(--ink-soft);font-size:1.06rem;margin-top:18px;font-family:var(--serif);font-style:italic}

/* ---- layout réservation ---- */
.book{padding:clamp(30px,5vw,60px) 0 90px}
.book__grid{display:grid;grid-template-columns:1fr 380px;gap:clamp(24px,4vw,52px);align-items:start}
.book__cal{min-width:0}
.calhead h2{font-size:1.7rem;margin-bottom:2px}
.calhead .hint{font-size:.9rem;color:var(--soft)}
.calbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:14px auto 12px;max-width:460px}
.calbar__m{font-family:var(--serif);font-size:1.4rem;text-transform:capitalize}
.calnav{width:40px;height:40px;border:1px solid var(--line);background:var(--bone-2);border-radius:9px;
  font-size:1.2rem;color:var(--ink);cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
@media(hover:hover){.calnav:hover{border-color:var(--gold);background:#fff}}
.calnav:disabled{opacity:.35;cursor:not-allowed}

.months{max-width:460px;margin-inline:auto}
.loading{text-align:center;color:var(--soft);padding:50px 0}
.month__t{display:none}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:6px}
.dow span{text-align:center;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.day{aspect-ratio:1;border:1px solid transparent;border-radius:9px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:var(--bone-2);cursor:pointer;position:relative;
  transition:transform .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease)}
.day.out{background:transparent;cursor:default}
.day .dnum{font-size:.92rem;color:var(--ink)}
.day .dprice{font-size:.58rem;color:var(--soft);margin-top:1px}
.day.busy{background:transparent;color:var(--soft);cursor:not-allowed}
.day.busy .dnum{color:#bdb6a6;text-decoration:line-through}
.day.busy .dprice{display:none}
.day.past{opacity:.4;cursor:not-allowed}
.day.past .dprice{display:none}
@media(hover:hover){.day:not(.busy):not(.past):not(.out):hover{border-color:var(--gold);transform:translateY(-1px)}}
.day.sel{background:#eef1e9;border-color:var(--cypress)}
.day.edge{background:var(--cypress);border-color:var(--cypress)}
.day.edge .dnum{color:#fff}.day.edge .dprice{color:#e8ead9}
.day.sel .dprice{color:var(--cypress-deep)}

.legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:20px;font-size:.78rem;color:var(--soft)}
.legend i{display:inline-block;width:13px;height:13px;border-radius:4px;margin-right:6px;vertical-align:-2px;border:1px solid var(--line)}
.legend .lg-free{background:var(--bone-2)}
.legend .lg-sel{background:var(--cypress);border-color:var(--cypress)}
.legend .lg-busy{background:transparent;position:relative}
.legend .lg-busy::after{content:"";position:absolute;left:2px;right:2px;top:50%;height:1px;background:#bdb6a6}

/* ---- panneau récap + form ---- */
.book__side{position:sticky;top:88px}
.panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 24px;box-shadow:var(--shadow)}
.panel__empty p{color:var(--soft);font-size:.95rem;text-align:center;padding:16px 4px}

.q-dates{display:flex;align-items:center;gap:14px;justify-content:space-between}
.q-dates>div{flex:1}
.q-dates small{display:block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin-bottom:3px}
.q-dates b{font-family:var(--serif);font-size:1.2rem;font-weight:500}
.q-arrow{color:var(--gold);font-size:1.1rem}
.q-nights{margin:6px 0 16px;font-size:.9rem;color:var(--cypress-deep)}
.q-lines{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:8px;font-size:.9rem;color:var(--ink-soft)}
.q-lines .ln{display:flex;justify-content:space-between}
.q-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.q-total span{font-size:.9rem;color:var(--soft)}
.q-total b{font-family:var(--serif);font-size:1.7rem;font-weight:600;color:var(--ink)}
.q-note{font-size:.78rem;color:var(--soft);margin-top:8px}
.q-warn{margin-top:14px;background:#f9ede9;border:1px solid #e6c6bd;color:var(--danger);
  border-radius:9px;padding:11px 13px;font-size:.85rem}

/* ---- formulaire ---- */
.rform{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}
.rform__t{font-size:1.2rem;margin-bottom:14px}
.f{margin-bottom:13px}
.f label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:6px}
input,select,textarea{width:100%;background:var(--bone-2);border:1px solid var(--line);border-radius:9px;
  padding:11px 13px;font-family:var(--sans);font-size:.95rem;font-weight:300;color:var(--ink);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(168,135,90,.16);background:#fff}
textarea{min-height:82px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rform__note{font-size:.76rem;color:var(--soft);margin-top:12px;line-height:1.5}
.err{color:var(--danger);font-size:.85rem;margin-top:10px;min-height:1em}

/* ---- boutons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:9px;
  padding:13px 20px;font-size:.86rem;letter-spacing:.02em;font-weight:400;cursor:pointer;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .12s var(--ease)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn--gold{background:var(--gold);color:#fff}
@media(hover:hover){.btn--gold:hover{background:#8f7047}}
.btn--ghost{background:transparent;border-color:var(--line);color:var(--ink)}
@media(hover:hover){.btn--ghost:hover{border-color:var(--gold);color:var(--cypress-deep)}}
.btn--block{width:100%;margin-top:6px}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ---- confirmation ---- */
.done{text-align:center;padding:14px 4px}
.done__mark{width:56px;height:56px;border-radius:50%;background:#eef1e9;color:var(--cypress);
  display:grid;place-items:center;font-size:1.6rem;margin:0 auto 14px;
  animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.done h3{font-size:1.5rem;margin-bottom:8px}
.done p{color:var(--ink-soft);font-size:.95rem;margin-bottom:18px}

.side__contact{text-align:center;font-size:.88rem;color:var(--soft);margin-top:16px}
.side__contact a{color:var(--cypress-deep);border-bottom:1px solid var(--gold-soft)}

/* ---- footer ---- */
.foot{text-align:center;padding:34px 20px;border-top:1px solid var(--line);background:var(--bone-2)}
.foot .cr{font-size:.8rem;color:var(--soft)}

/* ---- toast ---- */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(16px);background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:9px;font-size:.88rem;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:60}
.toast.show{opacity:1;transform:translateX(-50%)}
.toast.err{background:var(--danger)}

/* ---- entrées (motion sobre) ---- */
[data-rise]{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-rise].in{opacity:1;transform:none}
[data-rise][data-d="1"]{transition-delay:.08s}

/* ---- responsive ---- */
@media(max-width:900px){
  .book__grid{grid-template-columns:1fr}
  .book__side{position:static}
}
@media(max-width:560px){
  .wm small{display:none}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-rise]{transition:opacity .3s var(--ease)}
  [data-rise]{transform:none}
  .done__mark{animation:none}
  .day,.btn,.calnav{transition:background .16s var(--ease),border-color .16s var(--ease)}
}