/* ============================================================
   Groume — Design system
   Charte « Conciergerie à la française » — 17/09/2026.
   Fond crème, noir chaud, or taupe en accent, titrage serif
   à fort contraste. Le luxe, ici, c'est la matière.

   Le white-label par tenant surcharge --accent / --accent-fg /
   --accent-soft et --font-head. Le reste ne bouge pas.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#f2ede3; --surface:#fbf8f2; --surface2:#f6f1e7; --sunken:#ebe4d6;
  /* traits */
  --border:#e2d9c9; --border-strong:#16130f;
  /* texte */
  --text:#16130f; --muted:#6e6558; --faint:#a39a8b;
  /* accent (surchargeable par tenant) */
  --accent:#16130f; --accent-fg:#fbf8f2; --accent-soft:#e8dfcd; --accent-hover:#000;
  /* or — accent secondaire de la charte */
  --gold:#c0a47a; --gold-soft:#e6d8bf; --gold-deep:#a3865a;
  /* sémantique */
  --ok:#3f6b4a; --warn:#8a6100; --crit:#b3261e; --info:#2a5480;
  --ok-bg:#e7efe6; --warn-bg:#f5ecd8; --crit-bg:#f6e6e2; --info-bg:#e7edf4;
  /* forme */
  --r:10px; --r-sm:6px; --r-pill:999px;
  --shadow:0 1px 2px rgba(22,19,15,.04); --shadow-lg:0 24px 60px rgba(22,19,15,.16);
  /* typographie */
  --font:'Inter',system-ui,sans-serif;
  --font-head:'Playfair Display',Georgia,'Times New Roman',serif;
  --tr-head:-.012em; --w-head:700; --caps:.14em;
  /* densité */
  --row:38px; --bw:1px;
}


/* ============================================================
   BASE
   ============================================================ */
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:calc(14px * var(--scale,1));line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.head{font-family:var(--font-head);letter-spacing:var(--tr-head);font-weight:var(--w-head);margin:0}
h1{font-size:1.65em;line-height:1.2}
h2{font-size:1.2em}
h3{font-size:1.02em}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.eyebrow{font-size:.72em;text-transform:uppercase;letter-spacing:var(--caps);font-weight:700;color:var(--muted)}
a{color:var(--accent);text-decoration:none}
hr{border:none;border-top:var(--bw) solid var(--border);margin:0}

/* ---------- surfaces ---------- */
.card{background:var(--surface);border:var(--bw) solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card-pad{padding:18px}
.sunken{background:var(--sunken)}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-family:var(--font);font-size:.93em;font-weight:600;line-height:1;cursor:pointer;
  padding:.62em 1.05em;border-radius:var(--r-sm);border:var(--bw) solid transparent;
  transition:background .13s,color .13s,box-shadow .13s,transform .08s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow)}
.btn-secondary:hover{background:var(--surface2)}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--sunken);color:var(--text)}
.btn-danger{background:var(--crit);color:#fff}
.btn-sm{font-size:.83em;padding:.48em .8em}
.btn-lg{font-size:1.02em;padding:.75em 1.4em}
.btn:disabled,.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--accent-soft),0 0 0 calc(3px + var(--bw)) var(--accent)}

/* ---------- champs ---------- */
.field{display:flex;flex-direction:column;gap:5px}
.label{font-size:.83em;font-weight:600;color:var(--text)}
.hint{font-size:.79em;color:var(--muted)}
.input,.select,.textarea{width:100%;font-family:var(--font);font-size:.93em;color:var(--text);
  background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:var(--r-sm);
  padding:.58em .72em;transition:border-color .13s,box-shadow .13s}
.input::placeholder{color:var(--faint)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.input.err{border-color:var(--crit)}
.textarea{min-height:74px;resize:vertical}
.select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}

/* case à cocher & radio */
.check{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.93em}
.check input{position:absolute;opacity:0;width:0;height:0}
.box{width:1.18em;height:1.18em;flex:none;border:var(--bw) solid var(--border-strong);
  border-radius:var(--r-sm);background:var(--surface);display:grid;place-items:center;transition:.13s}
.radio .box{border-radius:999px}
.check input:checked + .box{background:var(--accent);border-color:var(--accent)}
.check input:checked + .box::after{content:"";width:.34em;height:.62em;border:solid var(--accent-fg);
  border-width:0 2px 2px 0;transform:rotate(42deg) translateY(-1px)}
.radio input:checked + .box::after{content:"";width:.44em;height:.44em;border:none;border-radius:999px;background:var(--accent-fg);transform:none}
.check input:focus-visible + .box{box-shadow:0 0 0 3px var(--accent-soft)}
.check input:indeterminate + .box{background:var(--accent);border-color:var(--accent)}
.check input:indeterminate + .box::after{content:"";width:.6em;height:2px;border:none;background:var(--accent-fg);transform:none}

/* interrupteur */
.switch{position:relative;width:2.5em;height:1.4em;flex:none;background:var(--sunken);
  border:var(--bw) solid var(--border-strong);border-radius:999px;transition:.16s}
.switch::after{content:"";position:absolute;top:50%;left:2px;transform:translateY(-50%);
  width:1em;height:1em;border-radius:999px;background:var(--surface);border:var(--bw) solid var(--border-strong);transition:.16s}
.check input:checked + .switch{background:var(--accent);border-color:var(--accent)}
.check input:checked + .switch::after{left:calc(100% - 1em - 3px);border-color:var(--accent)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:.74em;font-weight:700;
  text-transform:uppercase;letter-spacing:var(--caps);padding:.34em .68em;border-radius:var(--r-pill);
  border:var(--bw) solid transparent;white-space:nowrap;flex:none}
.b-ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn);border-color:var(--warn)}
.b-crit{background:var(--crit-bg);color:var(--crit);border-color:var(--crit)}
.b-info{background:var(--info-bg);color:var(--info);border-color:var(--info)}
.b-neutral{background:var(--sunken);color:var(--muted);border-color:var(--border)}
.dot{width:.5em;height:.5em;border-radius:999px;background:currentColor;flex:none}

/* ---------- tableau ---------- */
.table{width:100%;border-collapse:collapse;font-size:.93em}
.table th{text-align:left;font-size:.76em;font-weight:700;text-transform:uppercase;
  letter-spacing:var(--caps);color:var(--muted);padding:9px 12px;background:var(--surface2);
  border-bottom:var(--bw) solid var(--border-strong);white-space:nowrap}
.table th.sortable{cursor:pointer}
.table th.sortable:hover{color:var(--text)}
.table td{padding:0 12px;height:var(--row);border-bottom:var(--bw) solid var(--border);vertical-align:middle}
.table tbody tr:hover td{background:var(--surface2)}
.table tbody tr.sel td{background:var(--accent-soft)}
.table tr:last-child td{border-bottom:none}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- onglets ---------- */
.tabs{display:flex;gap:2px;border-bottom:var(--bw) solid var(--border)}
.tab{padding:.6em 1em;font-size:.93em;font-weight:600;color:var(--muted);cursor:pointer;
  border-bottom:2px solid transparent;margin-bottom:calc(-1 * var(--bw))}
.tab:hover{color:var(--text)}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
/* segmenté */
.seg{display:inline-flex;background:var(--sunken);border:var(--bw) solid var(--border);
  border-radius:var(--r-sm);padding:2px}
.seg button{font-family:var(--font);font-size:.85em;font-weight:600;color:var(--muted);
  background:transparent;border:none;padding:.42em .85em;border-radius:calc(var(--r-sm) - 1px);cursor:pointer}
.seg button.on{background:var(--surface);color:var(--text);box-shadow:var(--shadow)}

/* ---------- alertes ---------- */
.alert{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r);
  border:var(--bw) solid;border-left-width:3px;font-size:.93em}
.a-info{background:var(--info-bg);border-color:var(--info);color:var(--text)}
.a-warn{background:var(--warn-bg);border-color:var(--warn);color:var(--text)}
.a-crit{background:var(--crit-bg);border-color:var(--crit);color:var(--text)}
.a-ok{background:var(--ok-bg);border-color:var(--ok);color:var(--text)}
.alert strong{font-weight:700}

/* ---------- divers ---------- */
.avatar{width:2em;height:2em;border-radius:var(--r-pill);background:var(--sunken);
  border:var(--bw) solid var(--border);display:grid;place-items:center;font-size:.78em;font-weight:700;flex:none}
.progress{height:6px;background:var(--sunken);border-radius:var(--r-pill);overflow:hidden}
.progress > i{display:block;height:100%;background:var(--accent);border-radius:var(--r-pill)}
.skel{background:linear-gradient(90deg,var(--sunken) 25%,var(--surface2) 50%,var(--sunken) 75%);
  background-size:200% 100%;animation:sh 1.4s infinite;border-radius:var(--r-sm)}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.menu{background:var(--surface);border:var(--bw) solid var(--border-strong);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:4px;min-width:190px}
.menu-item{padding:.5em .7em;border-radius:var(--r-sm);font-size:.9em;cursor:pointer;display:flex;justify-content:space-between;gap:14px}
.menu-item:hover{background:var(--sunken)}
.menu-item.danger{color:var(--crit)}
.tooltip{background:var(--text);color:var(--bg);font-size:.8em;font-weight:500;
  padding:.4em .65em;border-radius:var(--r-sm);box-shadow:var(--shadow-lg)}
.kbd{font-family:ui-monospace,monospace;font-size:.78em;border:var(--bw) solid var(--border-strong);
  border-radius:var(--r-sm);padding:.12em .4em;color:var(--muted);background:var(--surface2)}

/* ---------- planning ---------- */
.plan-head,.plan-row{display:grid;grid-template-columns:186px 1fr}
.plan-days{display:grid;grid-template-columns:repeat(14,1fr)}
.plan-day{text-align:center;padding:7px 0;font-size:.74em;font-weight:600;color:var(--muted);border-right:var(--bw) solid var(--border)}
.plan-day.we{background:var(--sunken);color:var(--text)}
.plan-name{padding:0 12px;display:flex;align-items:center;height:var(--row);font-size:.9em;
  font-weight:500;border-right:var(--bw) solid var(--border);border-bottom:var(--bw) solid var(--border);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-track{position:relative;height:var(--row);border-bottom:var(--bw) solid var(--border)}
.plan-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(14,1fr)}
.plan-grid > i{border-right:var(--bw) solid var(--border)}
.plan-grid > i.we{background:var(--sunken)}
.bar{position:absolute;top:4px;bottom:4px;border-radius:var(--r-sm);display:flex;align-items:center;
  padding:0 9px;overflow:hidden;color:#fff;font-size:.76em;font-weight:600;cursor:pointer;box-shadow:var(--shadow)}
.bar:hover{filter:brightness(1.08)}
.bar-airbnb{background:var(--gold);color:var(--text)} .bar-booking{background:var(--accent);color:var(--accent-fg)} .bar-direct{background:var(--gold-deep);color:var(--accent-fg)}
.bar-conflit{background:var(--crit)}
.bar-block{background:repeating-linear-gradient(45deg,var(--faint),var(--faint) 5px,transparent 5px,transparent 10px);
  border:var(--bw) solid var(--border-strong);color:var(--text)}

/* ---------- mise en page démo ---------- */
.appbar{background:var(--surface);border-bottom:var(--bw) solid var(--border-strong);
  padding:11px 20px;display:flex;align-items:center;gap:22px}
.side{background:var(--surface2);border-right:var(--bw) solid var(--border);padding:14px 10px;width:196px;flex:none}
.nav-item{display:flex;align-items:center;gap:9px;padding:.5em .7em;border-radius:var(--r-sm);
  font-size:.9em;font-weight:500;color:var(--muted);cursor:pointer;margin-bottom:1px}
.nav-item:hover{background:var(--sunken);color:var(--text)}
.nav-item.on{background:var(--accent-soft);color:var(--accent);font-weight:650}
.modal-mask{position:absolute;inset:0;background:rgba(0,0,0,.34);display:grid;place-items:center;border-radius:var(--r)}
.toast{background:var(--surface);border:var(--bw) solid var(--border-strong);border-left:3px solid var(--ok);
  border-radius:var(--r);box-shadow:var(--shadow-lg);padding:11px 14px;font-size:.9em;max-width:330px}


/* ============================================================
   MARQUE — Groume
   Picto groom + wordmark serif + baseline. Header, footer, auth.
   ============================================================ */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.brand-mark{height:46px;width:auto;flex:0 0 auto;object-fit:contain;display:block}
.brand-txt{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand-name{font-family:var(--font-head);font-weight:700;letter-spacing:-.012em;font-size:21px;color:var(--text)}
.brand-base{font-size:9.5px;text-transform:uppercase;letter-spacing:.13em;font-weight:600;color:var(--muted);white-space:nowrap}
.brand-lg .brand-mark{height:64px;width:auto}
.brand-lg .brand-name{font-size:28px}
.brand-sm .brand-mark{height:34px;width:auto}
.brand-sm .brand-name{font-size:17px}
.brand-sm .brand-base{font-size:8.5px}
.brand-inv .brand-name{color:var(--accent-fg)}
.brand-inv .brand-base{color:rgba(251,248,242,.62)}
@media(max-width:560px){.brand-base{display:none}}

/* accent or — filets, puces, surlignes de la charte */
.rule-gold{border:none;border-top:2px solid var(--gold);width:44px;margin:0}
.dot-gold{color:var(--gold)}


/* ============================================================
   BANDEAU QUESTIONNAIRE — offre de recueil de besoins
   Échelle calée sur la maquette : une ligne par énoncé.
   ============================================================ */
.quiz-band{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--surface2);border:var(--bw) solid var(--border);border-radius:var(--r);
  padding:12px 18px}
.quiz-ico{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;color:var(--text)}
.quiz-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.quiz-txt{flex:1 1 300px;min-width:0}
.quiz-txt b{display:block;font-size:12.5px;font-weight:600;letter-spacing:-.003em;line-height:1.35}
.quiz-txt span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.quiz-sep{width:1px;align-self:stretch;min-height:34px;background:var(--border);flex:0 0 auto}
.quiz-offer{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.quiz-rays{width:15px;height:23px;flex:0 0 auto;color:var(--gold);
  stroke:currentColor;stroke-width:1.8;stroke-linecap:round;fill:none}
.quiz-pct{background:var(--gold);color:var(--surface);border-radius:var(--r-pill);
  font-family:var(--font);font-size:15px;font-weight:700;letter-spacing:-.02em;
  padding:4px 11px;line-height:1.2;white-space:nowrap}
.quiz-offer p{margin:0;font-size:12px;font-weight:600;line-height:1.35}
.quiz-offer p small{display:block;font-size:11.5px;font-weight:400;color:var(--muted);margin-top:1px}
.quiz-band .btn{margin-left:auto;flex:0 0 auto;font-size:12.5px;padding:.6em 1em}
@media(max-width:980px){
  .quiz-sep{display:none}
  .quiz-txt{flex:1 1 100%}
  .quiz-band .btn{margin-left:0}
}
@media(max-width:560px){.quiz-band .btn{width:100%}}


/* ============================================================
   MODALE VIDÉO — démonstration du produit
   Tient dans la fenêtre quelle que soit sa hauteur.
   ============================================================ */
.vmodal{position:fixed;inset:0;z-index:9999;display:none;
  align-items:center;justify-content:center;padding:26px}
.vmodal.on{display:flex}
.vmodal-veil{position:absolute;inset:0;background:rgba(22,19,15,.84);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .28s ease}
.vmodal.on .vmodal-veil{opacity:1}
.vmodal-box{position:relative;width:min(1180px,100%);max-height:100%;
  display:flex;flex-direction:column;min-height:0;
  opacity:0;transform:translateY(12px) scale(.985);
  transition:opacity .3s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.vmodal.on .vmodal-box{opacity:1;transform:none}
.vmodal-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  margin:0 46px 10px 0;color:var(--accent-fg);flex:0 0 auto}
.vmodal-head b{font-family:var(--font-head);font-weight:700;font-size:20px;letter-spacing:-.01em}
.vmodal-head span{font-size:13px;color:rgba(251,248,242,.62)}
.vmodal video{display:block;width:100%;min-height:0;flex:1 1 auto;
  max-height:calc(100vh - 190px);object-fit:contain;
  border-radius:var(--r);background:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.5)}
/* la croix reste dans la fenêtre même si la boîte touche le haut */
.vmodal-x{position:fixed;top:20px;right:22px;width:38px;height:38px;
  display:grid;place-items:center;border:none;border-radius:50%;cursor:pointer;
  background:rgba(251,248,242,.16);color:var(--accent-fg);font-size:19px;line-height:1;
  transition:background .15s}
.vmodal-x:hover{background:rgba(251,248,242,.3)}
.vmodal-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.vmodal-foot{margin-top:12px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;flex:0 0 auto}
.vmodal-foot .hint{color:rgba(251,248,242,.55)}
body.vmodal-open{overflow:hidden}
@media(max-width:700px){
  .vmodal{padding:16px}
  .vmodal video{max-height:calc(100vh - 210px)}
  .vmodal-head b{font-size:17px}
  .vmodal-head span{font-size:12px}
  .vmodal-x{top:12px;right:12px}
}
@media(max-height:560px){
  .vmodal-head span,.vmodal-foot .hint{display:none}
  .vmodal video{max-height:calc(100vh - 140px)}
}
@media(prefers-reduced-motion:reduce){.vmodal-veil,.vmodal-box{transition:none}}