/* Application mobile : bandeau du domaine, bande de chiffres sombre, contenu crème, barre d'onglets en bas. */
:root{
  /* Maison Célestine : crème, vert sauge profond, Cormorant espacé */
  --cream:#F9F6F1; --sand:#EFEBE4; --paper:#FFFFFF; --ink:#34504A; --ink-2:#4F5F5A;
  --muted:#7E8884; --line:#E3DED5; --gold:#5E7D74; --gold-2:#E8E1D2; --gold-soft:#E6ECE8;
  --or:#CDB48A;
  --on-ink:#F9F6F1; --on-ink-2:#C8D4CF; --ink-line:#4E6A63;
  --ok:#5C8761; --ok-soft:#E4EDE2; --warn:#B4573E; --warn-soft:#F6E3DB;
  --f-display:"Cormorant Garamond", "Cormorant", Garamond, Georgia, serif;
  --f-body:"Jost", "Futura", "Avenir Next", "Segoe UI", sans-serif;
  --nav-h:68px;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--cream);color:var(--ink-2);font:300 15px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.app{max-width:560px;margin:0 auto;min-height:100vh;background:var(--cream);padding-bottom:calc(var(--nav-h) + 24px + env(safe-area-inset-bottom,0px))}
.app.wide{max-width:820px}

/* bandeau */
.brand{background:var(--cream);border-bottom:1px solid var(--line);text-align:center;padding:calc(22px + env(safe-area-inset-top,0px)) 16px 18px}
.mono{display:inline-block;font:300 58px/1 var(--f-display);color:var(--ink);letter-spacing:-.12em;padding-right:.12em;position:relative}
.mono::after{content:"✦";position:absolute;left:-2px;bottom:-4px;font-size:11px;letter-spacing:0}
.logo{display:block;margin:0 auto;max-height:64px;width:auto;max-width:150px;object-fit:contain}
.mono::before{content:"";position:absolute;left:50%;top:-8px;width:34px;height:20px;border:1px solid currentColor;border-bottom:0;border-radius:20px 20px 0 0;transform:translateX(-50%)}
.brand .rule{display:flex;align-items:center;gap:8px;justify-content:center;margin:10px auto 4px;max-width:230px;color:var(--ink-2)}
.brand .rule::before,.brand .rule::after{content:"";flex:1;border-top:1px solid var(--or)}
.brand small{display:block;font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2)}
.brand h1{font:400 24px/1.2 var(--f-display);letter-spacing:.22em;color:var(--ink);text-transform:uppercase;margin:12px 0 4px}
.brand p{margin:0;color:var(--muted);font-size:13px}

/* héros (accueil des mariés) */
.hero{position:relative;color:var(--on-ink);text-align:center;padding:calc(30px + env(safe-area-inset-top,0px)) 16px 22px;background:#2E423D;background-size:cover;background-position:center;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,44,40,.45) 0%,rgba(30,44,40,.15) 40%,rgba(36,52,48,.88) 100%)}
.hero>*{position:relative;z-index:1}
.hero .mono{color:var(--on-ink)}
.hero .mono::after{content:"✦";position:absolute;left:-2px;bottom:-4px;font-size:11px;letter-spacing:0}
.logo{display:block;margin:0 auto;max-height:64px;width:auto;max-width:150px;object-fit:contain}
.mono::before{border-color:var(--gold-2)}
.hero h2{font:400 30px/1.1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;margin:120px 0 4px}
.hero .cd{font:300 66px/1 var(--f-display);color:var(--or);letter-spacing:.04em}
.hero .when{font-size:14px;margin-top:8px}
.hero .days{margin-top:26px}

/* bande de chiffres */
.band{background:var(--ink);color:var(--on-ink);display:grid;grid-template-columns:repeat(3,1fr);text-align:center;padding:14px 8px}
.band b{display:block;font:500 26px/1.1 var(--f-display);font-variant-numeric:oldstyle-nums}
.band span{font-size:12.5px;color:var(--on-ink-2)}

/* jours */
.days{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px}
.day{border:1px solid var(--line);background:var(--paper);border-radius:4px;padding:8px 6px;text-align:center;cursor:pointer;line-height:1.15}
.day small{display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.day b{display:block;font:500 22px var(--f-display)}
.day span{font-size:12.5px}
.day[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.day[aria-pressed="true"] small{color:var(--on-ink-2)}
.hero .day{background:rgba(249,246,241,.14);border-color:transparent;color:var(--on-ink)}
.hero .day small{color:var(--on-ink-2)}
.hero .day[aria-pressed="true"]{background:var(--on-ink);color:var(--ink)}
.hero .day[aria-pressed="true"] small{color:var(--ink-2)}

/* contenu */
.content{padding:20px 16px 0}
h2.sec{font:400 28px/1.15 var(--f-display);letter-spacing:.06em;color:var(--ink);margin:26px 0 12px}
h2.sec:first-child{margin-top:4px}
.sub{color:var(--muted);font-size:13.5px;margin:-6px 0 14px}
.back{display:inline-flex;align-items:center;gap:6px;border:0;background:none;color:var(--muted);padding:0;margin-bottom:6px;cursor:pointer;font-size:14px}

.card{display:block;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin-bottom:12px;position:relative}
button.card,a.card{cursor:pointer}
button.card::after,a.card::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--ink-2)}
.card.dark h3{color:var(--on-ink)}
.card.dark{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.card.dark::after{color:var(--on-ink)}
.card.dashed{border-style:dashed;background:transparent}
.card h3{font:500 21px/1.2 var(--f-display);letter-spacing:.03em;color:var(--ink);margin:0 0 2px;padding-right:22px}
.card p{margin:0;color:var(--muted);font-size:13.5px;padding-right:22px}
.card.dark p{color:var(--on-ink-2)}
.card .aside{position:absolute;right:42px;top:50%;transform:translateY(-50%);text-align:center;color:var(--gold);font:500 22px/1 var(--f-display)}
.card .aside small{display:block;font:500 10px var(--f-body);letter-spacing:.1em;color:var(--ink-2)}
.card.has-aside h3,.card.has-aside p{padding-right:110px}

.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.tile{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:12px 14px}
.tile span{font-size:13px;color:var(--ink-2)}
.tile b{display:block;font:500 25px/1.25 var(--f-display)}
.tile small{color:var(--muted);font-size:12.5px}
.big{background:var(--ink);color:var(--on-ink);border-radius:4px;padding:16px 18px;margin-bottom:12px}
.big span{font-size:13.5px;color:var(--on-ink-2)}
.big b{display:block;font:400 42px/1.2 var(--f-display);color:var(--on-ink);letter-spacing:.03em}
.big .split{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--ink-line);margin-top:8px;padding-top:8px;font-size:13px;color:var(--on-ink-2)}

.search{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:2px;padding:10px 16px;margin-bottom:16px}
.search input{border:0;background:none;padding:0;flex:1;min-width:0;font-size:15px}
.search input:focus-visible{outline:none}
.search:focus-within{outline:2px solid var(--gold)}

.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line h4{margin:0;font-size:15px;font-weight:500}
.line p{margin:0;color:var(--muted);font-size:13px}
.line .r{text-align:right;font-size:14px}
.list{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:2px 14px;margin-bottom:12px}
.empty{color:var(--muted);text-align:center;padding:20px 10px;font-size:14px}

.pill{display:inline-block;font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:999px;white-space:nowrap;vertical-align:middle}
.p-gold{background:var(--gold-soft);color:var(--ink)}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-warn{background:var(--warn-soft);color:var(--warn)}
.p-ink{background:var(--sand);color:var(--ink-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ink);background:var(--ink);color:var(--on-ink);padding:11px 20px;border-radius:0;cursor:pointer;font-size:14.5px;letter-spacing:.03em}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--on-ink)}
.btn.sm{padding:6px 12px;font-size:13px;border-radius:0}
.btn.danger{background:transparent;border-color:var(--warn);color:var(--warn)}
.btn.danger.armed{background:var(--warn);color:#fff}
.btn:disabled{opacity:.5;cursor:default}
.btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:12px 0}
.btns.left{justify-content:flex-start}

input,select,textarea{font:15px var(--f-body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px 12px;width:100%}
textarea{min-height:96px;resize:vertical}
label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--ink-2);min-width:0}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .full{grid-column:1/-1}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:#fff;font-size:14px;color:var(--ink)}
.checks input{width:auto;margin:0}

/* étapes */
.steps{list-style:none;margin:0 0 12px;padding:0;background:var(--paper);border:1px solid var(--line);border-radius:4px}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.steps .dot{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font-size:13px;color:var(--gold)}
.steps .done .dot{background:var(--gold);color:#fff}
.steps .later{opacity:.55}
.steps h4{margin:0;font-weight:500;font-size:15px}
.steps p{margin:0;font-size:12.5px;color:var(--muted)}

/* planning */
.tl{position:relative;margin:14px 0 12px 18px;padding-left:22px;border-left:1px solid var(--gold)}
.tl .m{position:relative;border:1px dashed #C9D2CE;border-radius:4px;padding:10px 32px 10px 14px;margin-bottom:10px;background:var(--paper);cursor:pointer;width:100%;text-align:left;display:block}
.tl .m::before{content:"";position:absolute;left:-30px;top:16px;width:12px;height:12px;border-radius:50%;background:var(--gold)}
.tl .m::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:20px;color:var(--ink-2)}
.tl .m h4{margin:0;font:500 20px/1.2 var(--f-display)}
.tl .m p{margin:0;font-size:13px;color:var(--muted)}
.tl .m .h{font-size:12.5px;color:var(--gold);font-weight:500;letter-spacing:.04em}

/* plan du domaine */
.map{position:relative;border-radius:4px;overflow:hidden;background:#C9C3A8;max-width:100%;margin-bottom:10px}
.map.noimg{aspect-ratio:4/3}
.map img{display:block;width:100%;height:auto}
.plan{margin:0 0 14px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:8px}
.plan img{display:block;width:100%;height:auto}
.plan figcaption{font-size:12.5px;color:var(--muted);margin-top:6px;text-align:center}
.map .mk{position:absolute;transform:translate(-50%,-50%);width:23px;height:23px;font-size:11.5px;border-radius:50%;background:#F9F6F1;border:2px solid var(--gold);color:var(--ink);font:600 13px var(--f-body);display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.35);padding:0}
.map .mk.on{background:var(--gold);color:#fff}
.map .mk.dim{opacity:.35}
.map .seg{position:absolute;left:8px;bottom:8px;z-index:2}
.map.placing{cursor:crosshair}
.seg{display:inline-flex;background:var(--paper);border-radius:4px;padding:3px;gap:2px}
.seg button{border:0;background:none;border-radius:8px;padding:5px 12px;font-size:13.5px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}

/* tables */
.tbl-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:14px;margin-bottom:10px}
.tbl-card .t{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.ring{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font:500 18px var(--f-display);color:var(--gold)}
.ring.rect{border-radius:6px}
.tbl-card h4{margin:0;font:500 19px var(--f-display)}
.tbl-card ul{list-style:none;margin:0;padding:0;font-size:14px;columns:2;column-gap:14px}
.tbl-card li{padding:2px 0;break-inside:avoid;display:flex;justify-content:space-between;gap:4px}
.tbl-card li button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0 2px}
.tbl-card.hit{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}
mark{background:var(--gold-soft);color:inherit;border-radius:3px;padding:0 2px}

/* chambres */
.room{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:14px;margin-bottom:10px}
.room h4{margin:0;font:500 20px var(--f-display)}
.room .bed{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start;padding:10px 0 2px;border-top:1px solid var(--line);margin-top:10px}
.room .bed svg{color:var(--gold)}
.room .bed small{display:block;color:var(--muted);font-size:12.5px;margin-bottom:4px}
.room .slots{display:grid;gap:6px}
.room .slots select{padding:7px 10px;font-size:14px}
.room.hit{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold-soft)}

/* console du domaine */
.years{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:16px 0}
.year{border:1px solid var(--line);background:var(--paper);border-radius:4px;padding:12px;text-align:center;cursor:pointer}
.year b{display:block;font:600 30px/1 var(--f-display)}
.year span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.year[aria-pressed="true"]{background:var(--gold-soft);border-color:var(--gold)}
.legend{font-size:13px;color:var(--muted);text-align:center;display:grid;gap:4px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.yhead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);margin:26px 0 10px;padding-bottom:6px}
.yhead h3{margin:0;font:500 26px var(--f-display)}
.yhead span{font-size:13px;color:var(--muted)}
.dossier{display:grid;grid-template-columns:62px minmax(0,1fr);gap:12px;align-items:center;width:100%;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:12px 30px 12px 10px;margin-bottom:8px;cursor:pointer;position:relative}
.dossier::after{content:"›";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--muted)}
.dossier .d{text-align:center;line-height:1.1}
.dossier .d b{display:block;font:500 22px var(--f-display)}
.dossier .d small{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.dossier h4{margin:0;font-weight:500;font-size:15.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.dossier p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.dossier .chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}

.topbar{position:sticky;top:0;z-index:6;background:var(--ink);color:var(--on-ink);display:flex;justify-content:space-between;align-items:center;gap:8px;padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px;font-size:13.5px}
.topbar button{border:0;background:none;color:var(--on-ink);cursor:pointer;padding:4px 6px;font-size:13.5px}
.topbar button.on{color:var(--gold-2);text-decoration:underline}

/* barre d'onglets */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:8;background:var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
.nav .in{max-width:560px;margin:0 auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;height:var(--nav-h)}
.nav button{border:0;background:none;color:#9FB3AC;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;cursor:pointer}
.nav button svg{width:22px;height:22px}
.nav button[aria-current="page"]{color:#fff}
.nav button.star svg{width:30px;height:30px;color:var(--or)}

/* tâches */
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task.done h4{text-decoration:line-through;color:var(--muted)}
.task h4{margin:0;font-weight:500;font-size:15px}
.task p{margin:0;color:var(--muted);font-size:13px}
.check{width:28px;height:28px;border-radius:8px;border:2px solid var(--gold);background:none;cursor:pointer;display:grid;place-items:center;color:#fff;padding:0}
.check[aria-checked="true"]{background:var(--gold)}

/* fenêtres */
.overlay{position:fixed;inset:0;background:rgba(36,52,48,.55);display:flex;align-items:flex-end;justify-content:center;z-index:30}
.dlg{background:var(--cream);border-radius:8px 8px 0 0;width:min(560px,100%);max-height:92vh;overflow:auto;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))}
@media (min-width:640px){.overlay{align-items:center;padding:16px}.dlg{border-radius:6px}}
.dlg h2{font:500 26px var(--f-display);margin:0 0 4px}
.dlg .lead{color:var(--muted);font-size:13.5px;margin:0 0 14px}
.dlg .foot{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.stepper{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.sub-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) auto;gap:6px;align-items:center;margin-bottom:6px}
.sub-row input,.sub-row select{padding:7px 8px;font-size:13.5px}
.code{font:500 22px/1 var(--f-body);letter-spacing:.14em;background:var(--paper);border:1px dashed var(--gold);border-radius:4px;padding:12px;text-align:center;margin:6px 0}

.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--on-ink);padding:10px 16px;border-radius:4px;font-size:14px;z-index:40;max-width:calc(100% - 32px)}
.demo{background:var(--gold-soft);border-bottom:1px solid var(--gold);padding:calc(6px + env(safe-area-inset-top,0px)) 10px 6px;display:flex;flex-wrap:wrap;gap:4px;justify-content:center;align-items:center;font-size:12px}
.demo b{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-align:center}
.demo button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 8px;cursor:pointer}
.demo button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.demo .x{border:0;background:none;color:var(--muted);padding:0}

.login{padding:28px 16px}
.login .card{padding:18px}
.login form{display:grid;gap:10px;margin-top:10px}
.muted{color:var(--muted)}
.small{font-size:13px}
.num{font-variant-numeric:tabular-nums}

@media (max-width:420px){
  .form{grid-template-columns:1fr}
  .sub-row{grid-template-columns:1fr 1fr}
  .sub-row .lib{grid-column:1/-1}
  .tbl-card ul{columns:1}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* questions pratiques */
.faq{background:var(--paper);border:1px solid var(--line);border-radius:4px;margin-bottom:12px}
.faq details{border-bottom:1px solid var(--line);padding:0 14px}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;list-style:none;padding:13px 24px 13px 0;position:relative;font-weight:400;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:10px;font-size:20px;color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq .rep{padding:0 0 12px;font-size:14.5px}
.faq .rep a{color:var(--ink)}
.faq details .btn{margin:0 0 12px}

/* page d'entrée : photo de la brochure, logo doré, mot-symbole */
.entry{position:relative;color:var(--on-ink);background:#1F2E2B 62% center/cover;min-height:max(64vh,440px);display:flex;align-items:flex-start;justify-content:center;text-align:center;padding:calc(36px + env(safe-area-inset-top,0px)) 16px 28px}
.entry::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,38,35,.55) 0%,rgba(24,38,35,.12) 42%,rgba(24,38,35,.78) 100%)}
.entry-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:20px}
.entry .logo{max-height:92px;max-width:130px}
.entry .wordmark{display:block;width:min(300px,78%);height:auto}
.entry p{margin:0;font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--or)}

.sub-row .ref{grid-column:1/-1;font-size:12.5px}

/* chambres repérées sur les plans */
.planbox{position:relative;line-height:0}
.planbox img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.planbox.placing{cursor:crosshair;outline:2px dashed var(--or);outline-offset:2px}
/* Repère de chambre : un point sur le lit, l'étiquette à côté. */
.rm{position:absolute;transform:translate(0,-50%);display:flex;align-items:center;gap:4px;border:0;background:none;padding:0;cursor:pointer;z-index:1}
.rm.gauche{transform:translate(-100%,-50%);flex-direction:row-reverse}
.rm.bas{flex-direction:column;align-items:flex-start;gap:2px;transform:translate(-5px,2px)}
.rm.haut{flex-direction:column-reverse;align-items:flex-start;gap:2px;transform:translate(-5px,calc(-100% - 2px))}
.rm .pt{flex:none;width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.45)}
.rm .et{border:1px solid var(--ink);background:rgba(255,255,255,.94);color:var(--ink);border-radius:6px;padding:2px 6px;font:500 11px/1.25 var(--f-body);text-align:left;box-shadow:0 1px 4px rgba(0,0,0,.25);white-space:nowrap}
.rm .et b{font:600 10px/1 var(--f-data);color:var(--muted);margin-left:2px}
.rm.gauche .et{text-align:right}
.rm.partiel .pt{background:var(--or);border-color:var(--or)}
.rm.partiel .et{background:var(--gold-soft);border-color:var(--or)}
.rm.plein .pt{background:var(--ok);border-color:var(--ok)}
.rm.plein .et{background:var(--ok-soft);border-color:var(--ok)}
.rm.on{z-index:3}
.rm.on .pt{box-shadow:0 0 0 4px rgba(205,180,138,.6)}
.rm.on .et{background:var(--or);border-color:var(--ink)}
.rm.on .et b{color:var(--ink)}
.rm.sel{z-index:3}
.rm.sel .et{background:var(--ink);color:var(--on-ink);border-color:var(--or)}
.rm.sel .et b{color:var(--on-ink-2)}
.pv{overflow:auto;max-height:56vh;border:1px solid var(--line);border-radius:4px;background:#fff;margin-bottom:10px;-webkit-overflow-scrolling:touch}
.pvin{min-width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
.chip.done{border-color:var(--ok);color:var(--ok)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

.chip.autre{opacity:.5}

/* Sélecteurs de bâtiment et d'étage, toujours visibles en haut */
.sticky-sel{position:sticky;top:0;z-index:4;background:var(--cream);padding:10px 0 8px;margin:10px 0 4px;border-bottom:1px solid var(--line)}
.sticky-sel .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.sticky-sel .chips::-webkit-scrollbar{display:none}
.sticky-sel .chips .chip{flex:none}
.sticky-sel .chips.etages{margin-top:7px}
.sticky-sel .chips.etages .chip{font-size:12.5px;padding:5px 11px;border-style:dashed}
.sticky-sel .chips.etages .chip[aria-pressed="true"]{border-style:solid}
.chip .num{color:var(--muted);font-size:12px;margin-left:2px}
.chip[aria-pressed="true"] .num{color:var(--on-ink-2)}

/* ---------- Implantation des tables à l'échelle ---------- */
.sa-over { padding: 0; align-items: stretch; }
.sa { background: #16201e; color: #eef3f1; width: 100%; max-width: none; height: 100dvh;
  display: flex; flex-direction: column; border-radius: 0; padding: 0; overflow: hidden; }
.sa-head { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px 10px; border-bottom: 1px solid #2b3a36; }
.sa-head h2 { margin: 2px 0 0; font-size: 24px; color: #fff; }
.sa-kick { margin: 0; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #8aa49c; }
.sa-dim { text-align: right; font-size: 14px; color: #cfdcd7; font-variant-numeric: tabular-nums; }
.sa-dim span { font-size: 11px; color: #8aa49c; }
.sa-bar { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-bottom: 1px solid #2b3a36; }
.sa-bar .btn { background: #1f2d2a; border-color: #35463f; color: #eef3f1; }
.sa-bar .btn.on { background: var(--gold, #c9a227); border-color: var(--gold, #c9a227); color: #16201e; }
.sa-bar .btn[disabled] { opacity: .4; }
.sa-chk, .sa-sel { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #cfdcd7;
  background: #1f2d2a; border: 1px solid #35463f; border-radius: 10px; padding: 6px 11px; }
.sa-sel select { background: transparent; border: 0; color: #fff; font: inherit; font-weight: 500; }
.sa-sel select option { color: #16201e; }
.sa-corps { position: relative; flex: 1; min-height: 0; padding: 10px; }
.sa-plan { width: 100%; height: 100%; touch-action: none; }
.sa-compte { margin-left: auto; background: #1f2d2a; border: 1px solid #35463f;
  border-radius: 12px; padding: 6px 14px; text-align: center; line-height: 1.15; }
.sa-compte b { display: block; font-size: 24px; color: var(--gold, #c9a227); }
.sa-compte span { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: #8aa49c; }
.sa-dim { margin-left: 14px; }
.sa-grille line { stroke: #27352f; stroke-width: 2; }
.sa-mur { fill: none; stroke: #e8eeeb; stroke-width: 9; }
.sa-libre { fill: none; stroke: #35463f; stroke-width: 2; stroke-dasharray: 18 14; }
.sa-zone { fill: rgba(201,162,39,.07); stroke: rgba(201,162,39,.45); stroke-width: 3; stroke-dasharray: 16 12; }
.sa-tbl { fill: #c9a227; stroke: #8d7018; stroke-width: 3; }
.sa-tbl.piste { fill: #3c5b52; stroke: #6f958a; }
.sa-ch { fill: #64807a; }
.sa-nom { fill: #16201e; font-size: 46px; font-weight: 600; pointer-events: none; }
.sa-g { cursor: grab; }
.sa-g.sel .sa-tbl { stroke: #fff; stroke-width: 7; }
.sa-g.ko .sa-tbl { fill: #b4452f; stroke: #ff8e74; }
.sa-g.ko .sa-zone { fill: rgba(180,69,47,.18); stroke: #ff8e74; }
.sa-regle { stroke: #fff; stroke-width: 4; stroke-dasharray: 14 10; }
.sa-cote { fill: #8aa49c; font-size: 40px; }
.sa-pied { padding: 10px 16px 16px; border-top: 1px solid #2b3a36; }
.sa-aposer { margin: 0 0 10px; font-size: 12px; color: #8aa49c; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sa-chip { background: #1f2d2a; border: 1px solid #35463f; color: #eef3f1; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.sa-chip:hover { border-color: var(--gold, #c9a227); }
.sa-msg { margin: 10px 0 0; font-size: 13px; color: #ffb9a3; }
@media (max-width: 640px) { .sa-head h2 { font-size: 19px; } .sa-dim { font-size: 12px; } .sa-bar { gap: 6px; padding: 8px 12px; } }
.pcttot{margin:8px 0 0;font-size:12.5px;color:var(--muted,#6b7a74)}
.pcttot.ko{color:#b4452f}
.sub-row{grid-template-columns:minmax(0,1.4fr) minmax(0,.5fr) minmax(0,.9fr) minmax(0,1fr) minmax(0,1fr) auto}
@media (max-width:640px){.sub-row{grid-template-columns:1fr 1fr}}
.sub-row .lib{grid-column:1/-1}
.sub-row .ref{grid-column:1/-1;font-size:12.5px}
.f-note{margin:0;font-size:12.5px;color:var(--ink-2,#6b7a74);background:var(--paper,#f7f5f1);border-radius:6px;padding:9px 11px}
.f-note.ko{color:#b4452f;background:#fbeeea}
/* Sur un petit écran, les étiquettes des chambres se resserrent pour tenir sur le plan. */
@media (max-width:430px){.rm .et{font-size:10px;padding:1px 4px;border-radius:5px}.rm .et b{font-size:9px}.rm .pt{width:8px;height:8px}}
/* Quand le plan réel sert de fond, la grille s'efface pour ne pas le brouiller. */
.sa-grille.clair line{stroke:rgba(22,32,30,.09)}
.retour{padding:10px 16px 0}
.retour button{background:none;border:0;color:var(--ink-2,#6b7a74);font:inherit;font-size:14px;cursor:pointer;padding:6px 10px 6px 0}
.retour button:hover{color:var(--ink,#16201e)}
.sa-add{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 8px;font-size:12px;color:#8aa49c}
.sa-add span{margin-right:2px}
.sa-chip b{color:var(--gold,#c9a227);font-weight:600;margin-left:4px}
.sa-chip.ko{opacity:.4;cursor:not-allowed}
.sa-aide{margin:0 0 10px;font-size:12px;color:#8aa49c}
.sa-sel-barre{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#1f2d2a;border:1px solid #35463f;border-radius:12px;padding:8px 12px;margin:0 0 10px}
.sa-sel-barre b{color:#fff}
.sa-sel-barre span{font-size:12px;color:#8aa49c;margin-right:auto}
.sa-sel-barre .btn{background:#16201e;border-color:#35463f;color:#eef3f1}
.sa-paroi{fill:#1d2b27}
.sa-porte{stroke:#2f8f6b;stroke-width:14;stroke-linecap:butt}
.sa-baie{stroke:#7fb0d8;stroke-width:10;stroke-linecap:butt}
.sa-cloison{stroke:#b9c6c1;stroke-width:8;stroke-dasharray:30 20}
.sa-obstacle{fill:#dfe6e3;stroke:#9aaaa4;stroke-width:3}
.sa-etiq{fill:#6a7b75;font-size:34px;letter-spacing:2px}
/* L'outil de dressage, posé dans la page plutôt que dans une fenêtre. */
.sa.sa-in{height:auto;border-radius:16px;margin:0 0 18px;border:1px solid #2b3a36}
.sa.sa-in .sa-corps{min-height:62vh;padding:8px}
.sa.sa-in .sa-plan{max-height:70vh}