/* ── Police Space Grotesk, hébergée chez nous ─────────────
   Auparavant chargée depuis fonts.googleapis.com : une feuille de style tierce
   bloquante, deux connexions supplémentaires, et un appel de plus vers Google
   sur chaque page. Fichier variable unique (500 à 700), licence SIL OFL.
   font-display: swap — le texte s'affiche tout de suite avec la police système. */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('/fonts/space-grotesk.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* justdot.fr — site public + espace client (mobile-first, sans build).
   Palette : fond #f5f6f7, texte #16181a, accent #00acd4, bandeau sombre #0b0e10. */

:root {
  --bg: #f5f6f7; --card: #fff; --text: #16181a; --muted: #5f6b76; --soft: #3c4650;
  --line: #e3e6e8; --accent: #00acd4; --accent-dark: #0090b3; --dark: #0b0e10; --dark-text: #e8ecee;
  --ok: #16a34a; --warn: #d97706; --danger: #dc2626;
  --radius: 1rem; --font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent-dark); }
h1, h2, h3, .brand { font-family: var(--font-head); letter-spacing: -0.02em; line-height: 1.2; }
h1 { font-size: clamp(1.7rem, 5.5vw, 2.6rem); font-weight: 700; }
h2 { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 600; }
h3 { font-size: 1.05rem; font-weight: 600; }
p + p { margin-top: .6rem; }
/* Conteneur : la marge horizontale ne doit JAMAIS être écrasée par une règle
   posée sur le même élément (piège : `padding: Xrem 0` sur .espace collait le
   texte aux bords sur mobile). Les blocs qui ajoutent du rythme vertical
   utilisent padding-top/padding-bottom, pas le raccourci `padding`.
   env(safe-area-inset-*) : bords arrondis / encoches en mode application. */
.wrap {
  max-width: 64rem;
  margin: 0 auto;
  padding-left: max(1.1rem, env(safe-area-inset-left));
  padding-right: max(1.1rem, env(safe-area-inset-right));
}
.wrap--narrow { max-width: 44rem; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: .4rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: .5rem; top: .5rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }

/* ── Nav ─────────────────────────────────────────────── */
.nav { background: rgba(245,246,247,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 50; }
/* padding-top/bottom (jamais le raccourci : .wrap pose les marges latérales) — menu ouvert sur mobile, la ligne logo + burger garde son air. */
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.75rem; padding-top: .55rem; padding-bottom: .55rem; flex-wrap: wrap; }
.brand { font-weight: 600; font-size: 1.35rem; color: var(--text); text-decoration: none; }
.brand--sm { font-size: 1rem; }
.brand .dot { color: var(--accent); }
.nav__burger { display: inline-flex; flex-direction: column; gap: 5px; background: none; border: none; padding: .5rem; cursor: pointer; }
.nav__burger span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; }
.nav__menu { display: none; flex-direction: column; gap: .35rem; width: 100%; padding: .5rem 0 1rem; }
.nav__menu.is-open { display: flex; }
/* Les liens du menu — jamais le bouton « Espace client » (.btn), qui garde ses propres couleurs et son padding. */
.nav__menu a:not(.btn) { text-decoration: none; color: var(--soft); font-weight: 500; padding: .45rem .25rem; border-radius: .5rem; }
.nav__menu a:not(.btn):hover { color: var(--text); }
.nav__menu a.is-active:not(.btn) { color: var(--accent-dark); }
.nav__menu .btn { align-self: flex-start; margin-top: .35rem; }
@media (min-width: 768px) {
  .nav__burger { display: none; }
  .nav__menu { display: flex; flex-direction: row; align-items: center; gap: 1.4rem; width: auto; padding: 0; }
  .nav__menu .btn { align-self: auto; margin-top: 0; }
}

/* ── Boutons, formulaires, alertes ───────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border-radius: 999px; padding: .7rem 1.3rem; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; line-height: 1.2; transition: background .15s, color .15s, border-color .15s; font-family: inherit; }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--soft); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn--dark { background: var(--text); color: #fff; }
.btn--danger { background: transparent; color: var(--danger); border-color: rgba(220,38,38,.35); }
.btn--danger:hover { background: rgba(220,38,38,.06); }
.btn--sm { padding: .45rem .9rem; font-size: .85rem; }
.btn--lg { padding: .9rem 1.7rem; font-size: 1.05rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }
.form { display: grid; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.field input, .field textarea, .field select { width: 100%; font: inherit; color: inherit; background: #fff; border: 1px solid #cfd5da; border-radius: .6rem; padding: .7rem .85rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.field .hint { font-size: .8rem; color: var(--muted); margin-top: .3rem; }
.field .error { font-size: .82rem; color: var(--danger); margin-top: .3rem; }
.field input[type="color"] { width: 3.5rem; height: 2.6rem; padding: .2rem; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.alert { border-radius: .85rem; padding: .9rem 1.1rem; font-size: .9rem; line-height: 1.55; margin: 1rem 0; border: 1px solid var(--line); background: #fff; }
.alert--ok { border-color: rgba(22,163,74,.35); background: rgba(22,163,74,.07); }
.alert--warn { border-color: rgba(217,119,6,.45); background: rgba(217,119,6,.08); }
.alert--error { border-color: rgba(220,38,38,.35); background: rgba(220,38,38,.06); }
.alert ul { padding-left: 1.1rem; }
.alert__title { font-weight: 700; margin-bottom: .3rem; }
.alert__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.badge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .2rem .6rem; vertical-align: middle; }
.badge--live { background: rgba(22,163,74,.14); color: var(--ok); }
.badge--soon { background: #eef1f3; color: var(--muted); }
.badge--trial { background: rgba(217,119,6,.14); color: var(--warn); }
.badge--plan { background: rgba(0,172,212,.14); color: var(--accent-dark); }
.badge--own { background: rgba(124,58,237,.12); color: #6d28d9; }
.badge--vary { background: rgba(0,172,212,.12); color: var(--accent-dark); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* Lot 6 : tableau des prestations d'un prestataire (proposée · prix · durée propres) */
.svc { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; border: 1px solid var(--line); border-radius: .8rem; overflow: hidden; margin-top: .6rem; }
.svc th, .svc td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.svc th { background: #f9fafb; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.svc tr:last-child td { border-bottom: none; }
.svc td.num, .svc th.num { text-align: right; white-space: nowrap; }
.svc input.n { width: 3.9rem; font: inherit; font-size: .85rem; border: 1px solid #cfd5da; border-radius: .45rem; padding: .3rem .35rem; text-align: right; background: #fff; }
.svc input.n::placeholder { color: #9aa3ab; }
.svc input.n:disabled { background: #f3f5f7; color: #9aa3ab; }
.svc tr.is-off td.name, .svc tr.is-off td.num { opacity: .5; }
.svc .toggle { width: 2rem; height: 1.2rem; }
.svc .toggle::after { width: .9rem; height: .9rem; }
.svc .toggle:checked::after { left: .95rem; }
.svc td.name { font-weight: 600; }
.svc td.name small { display: block; font-weight: 400; color: var(--muted); font-size: .74rem; }
.svc td.name .badge { font-size: .6rem; padding: .1rem .45rem; }
.field select.is-salon { color: var(--muted); }

/* ── Site public ─────────────────────────────────────── */
.hero { background: var(--dark); color: var(--dark-text); padding: 3.5rem 0 3rem; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(36rem 26rem at 70% 40%, rgba(0,172,212,.18), transparent 65%); pointer-events: none; }
.hero .wrap { position: relative; }
.hero h1 { color: #fff; max-width: 34rem; }
.hero h1 .dot { color: var(--accent); }
.hero p { margin-top: 1rem; color: #b6c0c8; max-width: 34rem; font-size: 1.05rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.6rem; }
.hero__note { margin-top: 1rem; font-size: .85rem; color: #8b98a3; }
.hero code { display: inline-block; margin-top: 1.4rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #d7e0e6; border-radius: .6rem; padding: .7rem .9rem; font-size: .78rem; overflow-wrap: anywhere; max-width: 100%; }
.hero code .k { color: var(--accent); }
.section { padding: 2.6rem 0; }
.section--alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section h2 { margin-bottom: .4rem; }
.section .lead { color: var(--soft); max-width: 40rem; }
.grid { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.3rem; }
.card h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.card p { margin-top: .5rem; color: var(--soft); font-size: .95rem; }
.card--step { position: relative; padding-top: 1.6rem; }
.card--step .num { position: absolute; top: -.8rem; left: 1.2rem; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; font-family: var(--font-head); }
.card--dashed { border-style: dashed; background: transparent; }
.check { list-style: none; margin-top: .8rem; display: grid; gap: .35rem; font-size: .92rem; color: var(--soft); }
.check li::before { content: "✓ "; color: var(--ok); font-weight: 700; }
.cta { background: var(--dark); color: var(--dark-text); border-radius: var(--radius); padding: 2rem 1.4rem; text-align: center; margin-top: 1rem; }
.cta h2 { color: #fff; }
.cta p { color: #b6c0c8; margin-top: .5rem; }
.cta .btn { margin-top: 1.2rem; }

/* Formules */
.plans { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 640px) { .plans { grid-template-columns: 1fr 1fr; } }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.3rem; display: flex; flex-direction: column; gap: .7rem; }
.plan--pro { border-color: rgba(0,172,212,.6); box-shadow: 0 8px 30px rgba(0,172,212,.08); }
.plan__name { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; }
.plan__price { color: var(--accent-dark); font-size: 1.5rem; white-space: nowrap; }
.plan__price small { font-size: .75rem; color: var(--muted); font-weight: 500; }
.plan ul { flex: 1; }
.plan .btn { margin-top: .4rem; }
.plan__foot { font-size: .8rem; color: var(--muted); }
.pricing-note { margin-top: 1rem; font-size: .85rem; color: var(--muted); }

/* ── Espace client ───────────────────────────────────── */
.espace { padding-top: 1.8rem; padding-bottom: 3rem; }
.espace__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.espace__domain { color: var(--muted); font-size: .85rem; margin-top: .2rem; }
.espace__tools { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* Onglets sur UNE ligne (demande Florian 12/09) : défilement horizontal au doigt (mobile) ou en
   glissant à la souris (js/site.js), fondu à droite tant qu'il reste des onglets cachés, onglet
   actif ramené dans l'écran au chargement — rien ne passe à la ligne. */
.tabs { display: flex; flex-wrap: nowrap; gap: 0 .3rem; margin: 1.2rem 0 .4rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; white-space: nowrap; text-decoration: none; color: var(--soft); font-weight: 600; font-size: .9rem; padding: .55rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.scroll-x.is-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent); }
.scroll-x.is-before { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.75rem); mask-image: linear-gradient(to right, transparent, #000 2.75rem); }
.scroll-x.is-before.is-more { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent); mask-image: linear-gradient(to right, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent); }
.scroll-x.is-drag { cursor: grabbing; user-select: none; }
.scroll-x.is-drag a { pointer-events: none; }
.tabs a.is-active { color: var(--accent-dark); border-bottom-color: var(--accent); }
.tabs__badge { display: inline-block; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; border-radius: 999px; padding: .05rem .4rem; margin-left: .2rem; vertical-align: text-top; }
/* Sous-onglets du module ouvert : pastilles sous la ligne principale. */
.subtabs { display: flex; flex-wrap: nowrap; gap: .35rem; margin: .6rem 0 .2rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; padding: .15rem 0; }
.subtabs::-webkit-scrollbar { display: none; }
.subtabs a { flex: none; white-space: nowrap; text-decoration: none; color: var(--soft); font-weight: 600; font-size: .85rem; padding: .35rem .8rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; }
.subtabs a.is-active { color: #fff; background: var(--text); border-color: var(--text); }
.subtabs a.is-active .tabs__badge { background: var(--accent); }
.auth { max-width: 26rem; margin: 3rem auto; }
.auth .card { padding: 1.8rem 1.5rem; }
.auth h1 { font-size: 1.6rem; margin-bottom: .3rem; }
.auth .intro { color: var(--soft); font-size: .95rem; margin-bottom: 1.2rem; }
.auth .switch { text-align: center; margin-top: 1.2rem; font-size: .9rem; color: var(--muted); }
.mods { display: grid; gap: 1rem; margin-top: 1rem; }
@media (min-width: 768px) { .mods { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); } .mod--wide { grid-column: 1 / -1; } }
.mod { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.mod--off { opacity: .6; }
.mod__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mod__head strong { font-size: 1.05rem; font-family: var(--font-head); }
.mod__desc { color: var(--soft); font-size: .92rem; }
.mod__price { font-size: .85rem; color: var(--muted); }
.mod__price strong { color: var(--accent-dark); }
.mod__foot { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: auto; }
.mod .plans { margin-top: .4rem; }
.mod .plan { padding: 1rem 1rem; }
.usage { font-size: .85rem; color: var(--soft); }
.usage__bar { height: .4rem; border-radius: 999px; background: #e9edf0; overflow: hidden; margin-top: .35rem; max-width: 18rem; }
.usage__fill { height: 100%; background: var(--accent); }
.usage__fill--warn { background: var(--warn); }
.snippet { display: block; background: #101417; color: #d7e0e6; border-radius: .6rem; padding: .8rem 1rem; font-size: .8rem; overflow-wrap: anywhere; user-select: all; margin: .6rem 0; }
.steps { padding-left: 1.2rem; display: grid; gap: .5rem; font-size: .95rem; }
.kv { display: grid; gap: .3rem; font-size: .9rem; }
.site-list { display: grid; gap: .8rem; margin-top: 1rem; }
.site-list a { text-decoration: none; color: inherit; }

/* Dialogs (modales natives) */
/* `margin: auto` centre la modale dans l'écran : le navigateur le pose lui-même,
   mais le reset `* { margin: 0 }` plus haut l'écrase et la collait en haut à gauche. */
dialog.modal { border: none; border-radius: var(--radius); padding: 0; margin: auto; max-width: min(34rem, calc(100vw - 2rem)); width: 100%; max-height: calc(100dvh - 2rem); overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); color: var(--text); }
dialog.modal::backdrop { background: rgba(11,14,16,.55); }
.modal__body { padding: 1.5rem 1.4rem; }
.modal__body h2 { font-size: 1.25rem; margin-bottom: .4rem; }
.modal__body p { font-size: .95rem; color: var(--soft); }
.modal__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
dialog.modal--wide { max-width: min(48rem, calc(100vw - 2rem)); }

/* Chat (espace) */
.chat-top { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-top: 1rem; }
.presence { display: inline-flex; align-items: center; gap: .5rem; font-size: .9rem; }
.presence__dot { width: .65rem; height: .65rem; border-radius: 999px; background: #9aa3ab; }
.presence__dot--on { background: var(--ok); }
.chat-tabs { display: inline-flex; gap: .4rem; flex-wrap: wrap; margin-top: .8rem; }
.chat-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; margin-top: 1rem; }
@media (min-width: 768px) { .chat-grid { grid-template-columns: 18rem minmax(0, 1fr); } }
.chat-panel { background: var(--card); border: 1px solid var(--line); border-radius: .85rem; overflow: hidden; }
.conv { display: flex; gap: .6rem; align-items: baseline; justify-content: space-between; width: 100%; text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.conv:hover { background: #f7f9fa; }
.conv--active { background: rgba(0,172,212,.1); }
.conv__name { font-weight: 600; font-size: .88rem; display: block; }
.conv__id { font-family: ui-monospace, monospace; font-weight: 400; font-size: .68rem; color: var(--muted); }
.conv__last { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 11rem; display: block; }
.conv__meta { flex: none; display: inline-flex; align-items: center; gap: .4rem; font-size: .7rem; color: var(--muted); }
.conv__badge { background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: .05rem .45rem; }
.chip { font-size: .64rem; font-weight: 500; color: var(--muted); background: #eef1f3; border-radius: 999px; padding: .1rem .45rem; margin-left: .3rem; }
.thread { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; max-height: 55vh; overflow-y: auto; }
.msg { max-width: 78%; padding: .55rem .8rem; border-radius: .8rem; font-size: .9rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg--visitor { align-self: flex-start; background: #eef1f3; border-bottom-left-radius: .2rem; }
.msg--admin { align-self: flex-end; background: rgba(0,172,212,.16); border-bottom-right-radius: .2rem; }
.msg time { display: block; margin-top: .2rem; font-size: .66rem; color: var(--muted); }
.replybox { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid var(--line); }
.replybox textarea { flex: 1; min-height: 2.7rem; max-height: 8rem; resize: vertical; border-radius: .6rem; border: 1px solid #cfd5da; padding: .55rem .75rem; font: inherit; color: inherit; }
.replybox textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.meta { padding: .65rem .85rem; border-bottom: 1px solid var(--line); font-size: .8rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; color: var(--soft); }
.meta__actions { margin-left: auto; display: inline-flex; gap: .4rem; flex-wrap: wrap; }
.meta__actions form { display: inline; }
.empty { padding: 2.5rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; }
.back { display: none; }
@media (max-width: 767px) {
  .chat-grid--thread .chat-list { display: none; }
  .chat-grid:not(.chat-grid--thread) .chat-threadpanel { display: none; }
  .back { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-dark); font-weight: 600; text-decoration: none; }
  .thread { max-height: calc(100dvh - 24rem); }
  .conv__last { max-width: 55vw; }
}

/* Footer */
.footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; font-size: .85rem; color: var(--muted); }
.footer__inner { display: grid; gap: .5rem; }
.footer a { color: var(--soft); text-decoration: none; }
.footer a:hover { color: var(--accent-dark); }
.page-espace .footer { padding-bottom: max(5rem, calc(3rem + env(safe-area-inset-bottom))); }

/* ── Module Réservation (espace) — maquettes validées le 2026-09-09 ── */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-top: 1rem; }
.bar h2 { font-size: 1.15rem; }
.datenav { display: flex; align-items: center; gap: .4rem; margin-top: .9rem; }
.datenav__btn { width: 2.3rem; height: 2.3rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 1.1rem; display: grid; place-items: center; color: var(--soft); text-decoration: none; }
.datenav__label { flex: 1; text-align: center; font-family: var(--font-head); font-weight: 600; font-size: 1rem; text-decoration: none; color: inherit; }
.datenav__label small { display: block; font-family: system-ui, sans-serif; font-weight: 500; font-size: .75rem; color: var(--muted); }
/* Saut direct à une date. Sur un écran étroit la ligne passe à la suivante plutôt que
   de rétrécir le champ : le rendu d'un champ date natif varie trop d'un téléphone à l'autre. */
.datenav { flex-wrap: wrap; }
.datenav__jump { display: flex; }
.datenav__jump input { font: inherit; font-size: .8rem; color: var(--soft); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .6rem; }
@media (max-width: 420px) { .datenav__jump { flex: 1 0 100%; } .datenav__jump input { width: 100%; text-align: center; } }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: .15rem; font-size: .8rem; }
.seg a { padding: .3rem .7rem; border-radius: 999px; text-decoration: none; color: var(--soft); font-weight: 600; }
.seg a.is-active { background: var(--text); color: #fff; }
.req { background: #fff; border: 1px solid rgba(217,119,6,.45); border-left: 4px solid var(--warn); border-radius: .85rem; padding: .8rem .9rem; display: grid; gap: .35rem; margin-top: .6rem; }
.req__who { font-weight: 700; }
.req__what { font-size: .9rem; color: var(--soft); }
.req__actions { display: flex; gap: .5rem; margin-top: .3rem; }
.req__actions form { flex: 1; display: flex; }
.req__actions .btn { flex: 1; }
.agenda { position: relative; margin-top: .9rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.agenda__cols { display: grid; grid-template-columns: 3rem repeat(var(--cols, 1), minmax(9rem, 1fr)); min-width: 100%; }
.agenda__head { display: contents; }
.agenda__head > div { padding: .5rem .3rem; font-size: .78rem; font-weight: 700; text-align: center; border-bottom: 1px solid var(--line); color: var(--soft); background: #f9fafb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agenda__head > div.is-today { color: var(--accent-dark); }
.agenda__head > div small { display: block; font-weight: 500; color: var(--muted); }
.agenda__hours { border-right: 1px solid var(--line); }
.agenda__hours div { height: 3rem; font-size: .68rem; color: var(--muted); text-align: right; padding-right: .3rem; transform: translateY(-.5rem); }
.agenda__col { position: relative; border-right: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(3rem - 1px), var(--line) calc(3rem - 1px), var(--line) 3rem); }
.agenda__col:last-child { border-right: none; }
.agenda__col--closed { background: repeating-linear-gradient(135deg, #f3f5f7 0 6px, #eceff2 6px 12px); }
.ev { position: absolute; left: 3px; right: 3px; border-radius: .45rem; padding: .25rem .4rem; font-size: .72rem; line-height: 1.25; overflow: hidden; border: none; border-left: 3px solid var(--accent); background: rgba(0,172,212,.12); box-shadow: 0 1px 2px rgba(0,0,0,.06); text-align: left; color: inherit; cursor: pointer; font-family: inherit; }
.ev strong { display: block; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev--pending { border-style: dashed; border-color: var(--warn) !important; background: rgba(217,119,6,.08) !important; }
.ev--block { border-color: #9aa3ab !important; background: repeating-linear-gradient(135deg, #f1f3f5 0 5px, #e6e9ec 5px 10px) !important; color: var(--muted); cursor: default; }
.now { position: absolute; left: 0; right: 0; height: 2px; background: #e5484d; pointer-events: none; }
.now::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 999px; background: #e5484d; }
.sticky-actions { position: sticky; bottom: 0; display: flex; gap: .5rem; padding: .7rem 0 .9rem; background: linear-gradient(to top, var(--bg) 70%, transparent); margin-top: .5rem; z-index: 2; }
.sticky-actions .btn { flex: 1; }
.sticky-actions form { flex: 1; display: flex; }
.sheet__when { font-family: var(--font-head); font-weight: 600; color: var(--accent-dark); margin-top: .2rem; }
.kv div { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.kv div span:first-child { color: var(--muted); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.actions form { display: flex; }
.actions .btn { flex: 1; }
.list { display: grid; gap: .6rem; margin-top: .9rem; }
.row { background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .75rem .9rem; display: flex; align-items: center; gap: .7rem; text-decoration: none; color: inherit; }
.row__dot { width: .8rem; height: .8rem; border-radius: 999px; flex: none; }
.row__main { flex: 1; min-width: 0; }
.row__title { font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.row__sub { font-size: .8rem; color: var(--muted); }
.row__side { text-align: right; font-size: .85rem; color: var(--soft); white-space: nowrap; }
.row__side strong { display: block; color: var(--text); }
.row__side form { display: inline; }
.row__side button { background: none; border: none; color: var(--accent-dark); cursor: pointer; font: inherit; padding: 0 .2rem; }
.avatar { width: 2.3rem; height: 2.3rem; border-radius: 999px; background: rgba(0,172,212,.14); color: var(--accent-dark); display: grid; place-items: center; font-weight: 700; font-size: .85rem; flex: none; }
.avatar--warn { background: rgba(217,119,6,.14); color: var(--warn); }
.avatar--off { background: #eef1f3; color: var(--muted); }
.search { display: flex; gap: .5rem; margin-top: .9rem; }
.search input { flex: 1; font: inherit; border: 1px solid #cfd5da; border-radius: 999px; padding: .6rem 1rem; }
.hours { display: grid; gap: .45rem; margin-top: .5rem; }
.hours__day { display: grid; grid-template-columns: 2.4rem 1fr auto auto; align-items: center; gap: .5rem; background: #fff; border: 1px solid var(--line); border-radius: .7rem; padding: .45rem .6rem; }
.hours__copy { background: none; border: 0; padding: .1rem .2rem; font: inherit; font-size: .75rem; color: var(--accent-dark); cursor: pointer; text-decoration: underline; }
/* Une journée fermée n'a rien à recopier. */
.hours__day:has(input[type="checkbox"]:not(:checked)) .hours__copy { visibility: hidden; }
.hours__day:has(input[type="checkbox"]:not(:checked)) .hours__ranges { opacity: .45; }
.hours__name { font-weight: 700; font-size: .85rem; }
.hours__ranges { display: flex; flex-wrap: wrap; gap: .3rem; }
.range { display: inline-flex; align-items: center; gap: .2rem; font-size: .8rem; background: #f3f5f7; border-radius: .5rem; padding: .2rem .45rem; }
.range input { width: 5.4rem; border: none; background: transparent; font: inherit; font-size: .8rem; text-align: center; }
.toggle { appearance: none; width: 2.4rem; height: 1.4rem; border-radius: 999px; background: #cfd5da; position: relative; flex: none; cursor: pointer; margin: 0; }
.toggle::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.toggle:checked { background: var(--accent); }
.toggle:checked::after { left: 1.15rem; }
.opt { display: flex; align-items: flex-start; gap: .7rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.opt:last-child { border-bottom: none; }
.opt__main { flex: 1; }
.opt__title { font-weight: 600; font-size: .93rem; }
.opt__desc { font-size: .8rem; color: var(--muted); }
.radio { display: grid; gap: .4rem; margin-top: .4rem; }
.radio label { display: flex; gap: .5rem; align-items: flex-start; font-size: .9rem; background: #fff; border: 1px solid var(--line); border-radius: .7rem; padding: .55rem .7rem; cursor: pointer; }
.radio label:has(input:checked) { border-color: var(--accent); background: rgba(0,172,212,.06); }
.radio input { margin-top: .25rem; }
.slots { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.slot { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: .35rem .7rem; font-size: .85rem; font-weight: 600; color: var(--soft); cursor: pointer; }
.slot input { position: absolute; opacity: 0; width: 0; height: 0; }
.slot:has(input:checked), .slot.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.slot--color { width: 2rem; height: 2rem; padding: 0; border-color: transparent; }
.slot--color:has(input:checked) { outline: 3px solid var(--text); outline-offset: 2px; }
.table { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; border: 1px solid var(--line); border-radius: .7rem; overflow: hidden; }
.table th, .table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.table th { background: #f9fafb; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.table input { width: 4.5rem; font: inherit; font-size: .85rem; border: 1px solid #cfd5da; border-radius: .4rem; padding: .25rem .4rem; text-align: center; }
.drop { border: 2px dashed #cfd5da; border-radius: var(--radius); padding: 1.4rem 1rem; text-align: center; color: var(--muted); font-size: .9rem; background: #fff; margin-top: .9rem; }
.drop strong { display: block; color: var(--text); margin-bottom: .2rem; }
.hist { display: grid; gap: .4rem; margin-top: .5rem; font-size: .85rem; }
.hist div { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); }
.st { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.st--ok { color: var(--ok); } .st--no { color: var(--danger); } .st--x { color: var(--muted); } .st--warn { color: var(--warn); }
/* Fiche RDV : modale classique sur ordinateur, feuille depuis le bas sur téléphone. */
dialog.modal--sheet .modal__body h2 { margin-bottom: 0; }
@media (max-width: 767px) {
  dialog.modal--sheet { margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 1.2rem 1.2rem 0 0; max-height: 92dvh; overflow-y: auto; }
  dialog.modal--sheet .modal__body::before { content: ""; display: block; width: 2.4rem; height: .3rem; border-radius: 999px; background: #d5dade; margin: -.4rem auto .8rem; }
}
.head-row { display: flex; gap: .8rem; align-items: center; margin-top: .4rem; }
.head-row h2 { margin: 0; }
.back-link { display: inline-block; margin-top: .9rem; font-size: .9rem; }

/* ── Accès prestataire (lot 2b) : état par prestataire sur la page Équipe ── */
.access { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .15rem .55rem; vertical-align: middle; }
.access--owner { background: rgba(0, 172, 212, .14); color: var(--accent-dark); }
.access--staff { background: rgba(22, 163, 74, .14); color: var(--ok); }
.access--invited { background: rgba(217, 119, 6, .14); color: var(--warn); }
.access--none { background: #eef1f3; color: var(--muted); }
.access i { width: .5rem; height: .5rem; border-radius: 999px; background: currentColor; font-style: normal; }
.readonly { background: #f9fafb; border: 1px dashed #cfd5da; border-radius: .7rem; padding: .6rem .8rem; font-size: .85rem; color: var(--soft); }

/* Ancres (#chat, #reservation) : la section arrive sous la barre de navigation collante, pas dessous. */
.section[id] { scroll-margin-top: 4.5rem; }

/* ── Bouton « Installer l'app » : icône seule, jamais dans l'app déjà installée ── */
.btn--icon { padding: .45rem .6rem; }
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  #jd-install { display: none !important; }
}

/* ── Cloche des notifications push : état lisible d'un coup d'œil (data-state posé par jd-pwa.js) ── */
.push-toggle { gap: .4rem; }
.push-toggle__dot { width: .55rem; height: .55rem; border-radius: 999px; background: #9aa4ad; flex: none; }
.push-toggle[data-state="on"] { border-color: rgba(22, 163, 74, .45); color: var(--ok); background: rgba(22, 163, 74, .08); }
.push-toggle[data-state="on"] .push-toggle__dot { background: var(--ok); box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.push-toggle[data-state="off"] { border-color: rgba(217, 119, 6, .45); color: var(--warn); background: rgba(217, 119, 6, .08); }
.push-toggle[data-state="off"] .push-toggle__dot { background: var(--warn); }
.push-toggle[data-state="blocked"] { border-color: rgba(220, 38, 38, .4); color: var(--danger); background: rgba(220, 38, 38, .06); }
.push-toggle[data-state="blocked"] .push-toggle__dot { background: var(--danger); }

/* ── Page /r/{token} : gestion d'un rendez-vous par le client (lot 4) ── */
.rdv__sum { display: grid; gap: .25rem; font-size: .95rem; }
.rdv__sum div { display: flex; justify-content: space-between; gap: .8rem; }
.rdv__sum div span:first-child { color: #5f6b76; }
.rdv__actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.rdv__status--ok { color: #16a34a; }
.rdv__status--wait { color: #d97706; }
.rdv__status--off { color: #5f6b76; }

/* ── Module QR codes ─────────────────────────────────────
   Repris tel quel des maquettes validées le 18/09. */
.qrhead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 .8rem; }
.qrrow { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: .9rem; align-items: center; margin-bottom: .7rem; }
.qrrow__thumb { width: 4.5rem; height: 4.5rem; border: 1px solid var(--line); border-radius: .55rem; padding: .3rem; background: #fff; display: grid; place-items: center; }
.qrrow__thumb img { width: 100%; height: auto; }
.qrrow__main { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.qrrow__main h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.qrrow__main h3 a { color: inherit; text-decoration: none; }
.qrrow__url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; color: var(--accent-dark); overflow-wrap: anywhere; }
.qrrow__target { overflow-wrap: anywhere; }
.qrrow__target .warn { color: var(--warn); font-weight: 600; }
.qrrow__side { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; text-align: right; }
.qrrow__scans { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.qrrow__scans span { display: block; font-family: inherit; font-size: .75rem; font-weight: 400; color: var(--muted); }
.qrrow__acts { display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end; }
.pill { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .1rem .55rem; }
.pill--on { background: #e7f6ee; color: #12693c; }
.pill--off { background: #f1f2f3; color: var(--muted); }

.qrform { display: grid; grid-template-columns: 1.3fr 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }
.qrside { display: flex; flex-direction: column; gap: .8rem; }
.qrpreview { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.qrpreview img { width: 220px; max-width: 100%; height: auto; }
.qrdl { display: flex; flex-direction: column; gap: .35rem; width: 100%; }
.qrdl .btn { justify-content: center; }
.qrstats__nums { display: flex; gap: 1.2rem; margin: .4rem 0 .6rem; }
.qrstats__nums span { display: flex; flex-direction: column; font-size: .78rem; color: var(--muted); }
.qrstats__nums b { font-family: var(--font-head); font-size: 1.3rem; color: var(--text); font-variant-numeric: tabular-nums; }
.qrstats__bars { display: flex; align-items: flex-end; gap: 2px; height: 70px; }
.qrstats__bars span { flex: 1; background: var(--accent); border-radius: 2px 2px 0 0; min-height: 2px; }

/* Choix entre deux options dans un formulaire. NE PAS appeler ça `.seg` : c'est le nom
   de la navigation en pilule (Jour / Semaine), dont la bordure et le fond venaient
   s'ajouter autour du groupe — une bordure de trop, vue par Florian le 19/09. */
.segfield { display: flex; gap: .4rem; flex-wrap: wrap; }
.segfield__opt { flex: 1 1 10rem; display: flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: .55rem; padding: .5rem .65rem; background: #fff; cursor: pointer; font-size: .9rem; }
.segfield__opt:has(input:checked) { border-color: var(--accent); background: #f0fbfe; font-weight: 600; }
/* .field input { width: 100% } s'applique aussi aux cases et aux radios :
   sans ceci, la case occupe toute la largeur et paraît centrée. */
.segfield__opt input, .checkfield input[type="checkbox"] { width: auto; flex: 0 0 auto; accent-color: var(--accent); }
.prefixed { display: flex; border: 1px solid var(--line); border-radius: .55rem; overflow: hidden; background: #fff; }
.prefixed .px { background: #f1f3f4; color: var(--muted); font-family: ui-monospace, monospace; font-size: .85rem; padding: .55rem .55rem; border-right: 1px solid var(--line); white-space: nowrap; }
.prefixed input { border: 0; flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: .85rem; padding: .55rem; }
.filepill { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .65rem; margin-bottom: .4rem; }
.fixed code { background: var(--bg); border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .65rem; display: inline-block; }
.checkfield { display: flex; align-items: center; justify-content: flex-start; gap: .5rem; font-weight: 500; }
.form__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.btn.danger { color: var(--danger); border-color: #f3d2d2; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }

@media (max-width: 760px) {
  .qrform { grid-template-columns: 1fr; }
  .qrrow { grid-template-columns: 3.4rem 1fr; }
  .qrrow__thumb { width: 3.4rem; height: 3.4rem; }
  .qrrow__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; }
  .qrrow__scans span { display: inline; margin-left: .3rem; }
}

/* ── Bandeau de consentement ─────────────────────────────
   Glisse depuis le bas, ne masque jamais le contenu (on peut l'ignorer),
   et laisse la place au bouton d'installation de l'app sur mobile. */
.cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--card);
          border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(11,14,16,.08);
          transform: translateY(100%); transition: transform .28s ease; }
.cookie.is-visible { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .cookie { transition: none; } }
.cookie__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
                 flex-wrap: wrap; padding-top: .9rem; padding-bottom: max(.9rem, env(safe-area-inset-bottom)); }
.cookie__text { flex: 1 1 22rem; min-width: 0; font-size: .88rem; color: var(--soft); }
.cookie__actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 560px) { .cookie__actions { width: 100%; } .cookie__actions .btn { flex: 1; justify-content: center; } }

/* ── Foire aux questions ─────────────────────────────────
   <details> natif : pliable sans une ligne de JavaScript, lisible même sans CSS,
   et le contenu est dans le HTML donc indexable. */
.faq { display: grid; gap: .6rem; margin-top: 1.2rem; }
.faq__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .95rem 1.1rem; }
.faq__item summary { font-family: var(--font-head); font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; line-height: 1; flex: none; }
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: .3rem; }
.faq__item p { margin-top: .7rem; font-size: .93rem; color: var(--soft); }

/* ── Deux modules côte à côte sur l'accueil ───────────────── */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: .8rem; margin-top: 1.2rem; }
.duo__item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.duo__item h3 { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.duo__item p { font-size: .95rem; color: var(--soft); }
.duo__prix { font-weight: 600; color: var(--text) !important; font-size: .9rem !important; }
.duo__item p:last-child { margin-top: auto; }

/* Aperçu du bouton de réservation dans les Réglages RDV : une page de site miniature,
   pour juger du libellé et du côté sans enregistrer ni aller voir son propre site. */
.wpreview { margin-top: .9rem; }
.wpreview__title { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }
.wpreview__screen { position: relative; height: 11rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; padding: .9rem; overflow: hidden; display: flex; flex-direction: column; gap: .45rem; }
.wpreview__line { display: block; height: .5rem; border-radius: 999px; background: #eef1f3; }
.wpreview__intro { font-size: .8rem; color: var(--muted); margin-top: .2rem; }
.wpreview__btn { position: absolute; bottom: .8rem; left: .8rem; background: var(--accent); color: #fff; font-size: .8rem; font-weight: 600; border-radius: 999px; padding: .45rem .9rem; box-shadow: 0 6px 18px rgba(0,0,0,.18); max-width: calc(100% - 1.6rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wpreview__screen.is-right .wpreview__btn { left: auto; right: .8rem; }

/* ── Espace v2 : navigation et pages du lot A (maquettes validées le 2026-09-22) ──
   Barre du bas sur téléphone, menu latéral sur ordinateur ; le layout public
   (en-tête, pied) n'est plus rendu dans l'app. */
.page-espace { background: var(--bg); }
.shell { display: grid; grid-template-columns: 1fr; min-height: 100dvh; }
.main { min-width: 0; width: 100%; max-width: 64rem; margin: 0 auto; padding-top: .8rem; padding-bottom: 3rem; padding-left: max(1.1rem, env(safe-area-inset-left)); padding-right: max(1.1rem, env(safe-area-inset-right)); }
.top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .4rem 0 .2rem; }
.top__name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.02em; }
.top__sub { font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.top__tools { display: flex; gap: .4rem; align-items: center; flex: none; }
.avatar--me { background: var(--text); color: #fff; }

/* Menu latéral : ordinateur seulement. */
.side { display: none; }
@media (min-width: 900px) {
  .shell { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .side { display: flex; flex-direction: column; gap: .15rem; background: #fff; border-right: 1px solid var(--line); padding: 1rem .8rem; position: sticky; top: 0; height: 100dvh; overflow-y: auto; }
  .main { margin: 0; max-width: 72rem; padding-left: 1.6rem; padding-right: 1.6rem; padding-top: 1.2rem; }
  .tabbar { display: none; }
}
.side__brand { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; padding: .2rem .6rem .8rem; color: var(--text); text-decoration: none; }
.side__brand .dot { color: var(--accent); }
.side__site { margin: 0 .3rem .8rem; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: .7rem; font-size: .85rem; display: flex; justify-content: space-between; align-items: center; gap: .5rem; text-decoration: none; color: inherit; min-width: 0; }
.side__site strong { display: block; font-size: .9rem; }
.side__site small { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.side__site svg { width: 1rem; height: 1rem; color: var(--muted); flex: none; }
.side > a:not(.side__brand):not(.side__site):not(.side__group) { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: .6rem; text-decoration: none; color: var(--soft); font-weight: 600; font-size: .9rem; }
.side > a svg { width: 1.15rem; height: 1.15rem; flex: none; }
.side > a.is-active { background: rgba(0,172,212,.12); color: var(--accent-dark); }
.side > a .tabs__badge { margin-left: auto; }
.side__add { border: 1px dashed #cfd5da; color: var(--accent-dark) !important; margin-top: .3rem; }
.side__group { margin-top: .9rem; padding: .4rem .7rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; text-decoration: none; }
.side__group--link:hover, .side__group.is-active { color: var(--accent-dark); }
.side__foot { margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--muted); display: grid; gap: .3rem; }
.side__logout { background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--accent-dark); cursor: pointer; text-align: left; }

/* Barre du bas : téléphone. */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-top: 1px solid var(--line); padding: .35rem .3rem calc(.55rem + env(safe-area-inset-bottom, 0px)); }
.tabbar a, .tabbar__more { flex: 1; display: grid; justify-items: center; gap: .15rem; text-decoration: none; color: var(--muted); font-size: .64rem; font-weight: 600; position: relative; padding: .2rem 0; background: none; border: 0; font-family: inherit; cursor: pointer; min-width: 0; }
.tabbar svg { width: 1.35rem; height: 1.35rem; }
.tabbar .is-active { color: var(--accent-dark); }
.tabbar__badge { position: absolute; top: -.1rem; left: calc(50% + .3rem); background: var(--accent); color: #fff; font-size: .6rem; font-weight: 700; border-radius: 999px; padding: .02rem .35rem; }
.tabbar__badge--warn { background: var(--warn); }
@media (max-width: 899.98px) {
  .page-espace .main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }
  /* Les boutons collants (Enregistrer) restent au-dessus de la barre. */
  .page-espace .sticky-actions { bottom: calc(4.3rem + env(safe-area-inset-bottom, 0px)); }
}

/* Aujourd'hui : tuiles, suite de la journée, actions rapides. */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; margin-top: .8rem; }
.tiles:empty { display: none; }
.tile { background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .7rem .8rem; text-decoration: none; color: inherit; display: grid; gap: .1rem; }
.tile strong { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { font-size: .78rem; color: var(--muted); }
.tile--warn { border-color: rgba(217,119,6,.5); background: rgba(217,119,6,.06); }
.tile--warn strong { color: var(--warn); }
.tile--accent strong { color: var(--accent-dark); }
.h3row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 1.2rem; gap: 1rem; }
.h3row h3 { font-size: 1rem; }
.h3row a { font-size: .82rem; white-space: nowrap; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .9rem; max-width: 26rem; }
.quick .btn { justify-content: center; }
.req__actions form { flex: 1; display: flex; }
.req__actions form .btn { flex: 1; }

/* Paramètres : liste de sections, chacune avec son état. */
.settings { display: grid; gap: .5rem; margin-top: .9rem; }
.set { display: flex; align-items: center; gap: .8rem; background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .75rem .9rem; text-decoration: none; color: inherit; }
.set--dashed { border-style: dashed; }
.set--soon { opacity: .6; }
.set__ico { width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: rgba(0,172,212,.12); color: var(--accent-dark); display: grid; place-items: center; flex: none; }
.set__ico svg { width: 1.2rem; height: 1.2rem; }
.set__main { flex: 1; min-width: 0; }
.set__title { font-weight: 700; font-size: .93rem; }
.set__desc { font-size: .78rem; color: var(--muted); }
.set__chev { color: #b4bcc3; font-size: 1.1rem; }
.set__state { font-size: .72rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.set__state.is-on { color: var(--ok); }
.head-row .back-link { margin-top: 0; white-space: nowrap; }
@media (max-width: 480px) { .set__state { display: none; } }
/* La barre du bas ne concerne que le téléphone : posé en dernier pour l'emporter sur sa règle de base. */
@media (min-width: 900px) { .tabbar { display: none; } }

/* Notifications (lot A, A2) : grille événement × canal, un groupe par module. */
.ngrid { background: #fff; border: 1px solid var(--line); border-radius: .85rem; overflow: hidden; margin-top: .8rem; }
.nrow { display: grid; grid-template-columns: 1fr 3.2rem 3.2rem; align-items: center; gap: .4rem; padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
.nrow:last-child { border-bottom: 0; }
.nrow--head { background: #f9fafb; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: .45rem .8rem; }
.nrow--head span { text-align: center; }
.nrow__t { font-weight: 600; font-size: .88rem; }
.nrow__d { font-size: .74rem; color: var(--muted); }
.nrow .toggle { justify-self: center; }
.nrow .lock { justify-self: center; font-size: .7rem; color: var(--muted); }
.ngroup { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); padding: .55rem .8rem .15rem; border-bottom: 1px solid var(--line); }

/* Équipe et accès (lot A, A3) : une ligne par personne avec son prix, le total, l'invitation en trois choix. */
.person { display: flex; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .7rem .8rem; text-decoration: none; color: inherit; }
.person__main { flex: 1; min-width: 0; }
.person__name { font-weight: 700; font-size: .93rem; display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.person__sub { font-size: .76rem; color: var(--muted); display: block; }
.person__price { text-align: right; font-size: .78rem; color: var(--soft); white-space: nowrap; flex: none; }
.person__price strong { display: block; color: var(--text); font-variant-numeric: tabular-nums; }
.avatar--ext { background: rgba(124,58,237,.12); color: #6d28d9; }
.total { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; margin-top: .8rem; padding: .7rem .9rem; background: #fff; border: 1px dashed #cfd5da; border-radius: .85rem; font-size: .85rem; }
.total strong { font-family: var(--font-head); font-size: 1.15rem; color: var(--accent-dark); white-space: nowrap; }
.choose { display: grid; gap: .55rem; margin-top: .8rem; }
.choice { display: flex; gap: .75rem; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .75rem .85rem; text-decoration: none; color: inherit; }
a.choice:hover { border-color: var(--accent); }
.choice__t { font-weight: 700; font-size: .93rem; }
.choice__d { font-size: .8rem; color: var(--muted); }
.choice__ex { font-size: .74rem; color: var(--accent-dark); margin-top: .15rem; }
.choice--details { display: block; }
.choice--details summary { cursor: pointer; list-style: none; }
.choice--details summary::-webkit-details-marker { display: none; }
.choice--details[open] { border-color: var(--accent); }

/* Activités (lot A, A4) : une carte par activité, le type en pastille ; le choix des cinq types. */
.act { background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .8rem .9rem; display: grid; gap: .3rem; }
.act__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.act__head strong { font-size: .98rem; }
.act__sub { font-size: .8rem; color: var(--muted); }
.act__foot { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .3rem; }
.act__rename summary { cursor: pointer; font-size: .78rem; color: var(--accent-dark); margin-top: .2rem; }
.act__rename-form { display: flex; gap: .4rem; margin-top: .4rem; flex-wrap: wrap; }
.act__rename-form input { flex: 1; min-width: 10rem; font: inherit; font-size: .9rem; border: 1px solid #cfd5da; border-radius: .5rem; padding: .4rem .6rem; }
.type { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 999px; padding: .18rem .55rem; }
.type--rdv { background: rgba(0,172,212,.14); color: var(--accent-dark); }
.type--tables { background: rgba(217,119,6,.14); color: var(--warn); }
.type--events { background: rgba(124,58,237,.12); color: #6d28d9; }
.type--orders { background: rgba(22,163,74,.14); color: var(--ok); }
.type--lodging { background: rgba(37,99,235,.12); color: #1d4ed8; }
label.choice { cursor: pointer; }
.choice input[type="radio"] { margin-top: .3rem; flex: none; }
.choice:has(input:checked) { border-color: var(--accent); background: rgba(0,172,212,.06); }
.choice--off { cursor: default; opacity: .62; }
.choice--off .badge { margin-left: .3rem; }

/* Import de clients (lot A, A5) : étapes, correspondance des colonnes. */
.crumbs { display: flex; flex-wrap: wrap; gap: .3rem .9rem; list-style: none; padding: 0; margin: .7rem 0 0; font-size: .8rem; color: var(--muted); }
.crumbs li.is-current { color: var(--text); font-weight: 700; }
.crumbs li.is-done { color: var(--ok); }
.crumbs li + li::before { content: "›"; margin-right: .9rem; color: #b4bcc3; }
.colmap { display: grid; gap: .5rem; margin-top: .6rem; }
.colmap__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 11rem); gap: .6rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: .85rem; padding: .6rem .75rem; }
.colmap__src { min-width: 0; }
.colmap__src strong { display: block; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colmap__sample { display: block; font-size: .76rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colmap__arrow { color: #b4bcc3; }
.colmap__row select { width: 100%; font: inherit; font-size: .85rem; border: 1px solid #cfd5da; border-radius: .5rem; padding: .35rem .5rem; background: #fff; }
.table-wrap { overflow-x: auto; }
@media (max-width: 480px) {
    .colmap__row { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
    .colmap__arrow { display: none; }
}

/* ── Lot A7 : reporter un rendez-vous, base clients privée (maquette validée le 24/09) ── */
.days { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .2rem; margin-top: .5rem; scrollbar-width: thin; }
.day-chip { flex: none; border: 1px solid var(--line); background: #fff; border-radius: .8rem; padding: .35rem .6rem; text-align: center; font-size: .72rem; color: var(--soft); line-height: 1.25; cursor: pointer; text-decoration: none; font: inherit; font-size: .72rem; }
.day-chip b { display: block; font-size: .95rem; color: var(--text); }
.day-chip.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.day-chip.is-on b { color: #fff; }
.day-chip.is-off, .day-chip:disabled { opacity: .45; cursor: default; }
.checkline { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; margin-top: .8rem; }
.checkline input { margin-top: .15rem; }
.locked { font-size: .8rem; color: var(--muted); background: #f3f5f6; border-radius: .6rem; padding: .5rem .7rem; margin-top: .6rem; }
.req--move { border-color: rgba(0,172,212,.45); border-left-color: var(--accent); }

/* ── Pages métier de la Réservation (maquette 9 du lot A) ───────── */
.metier-split { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 900px) { .metier-split { grid-template-columns: 1.2fr 1fr; } }
.metier-mini { width: 100%; max-width: 22rem; justify-self: center; background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem; display: grid; gap: .6rem; color: var(--text); box-shadow: 0 18px 50px rgba(0,0,0,.25); }
.metier-mini .slots { margin-top: .2rem; }
.metier-mini .field label { font-size: .8rem; }
.metier-mini__t { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.metier-chat { display: grid; gap: .45rem; }
.metier-chat__msg { margin: 0; justify-self: start; max-width: 85%; background: #eef1f3; border-radius: .9rem .9rem .9rem .25rem; padding: .5rem .75rem; font-size: .88rem; color: var(--text); }
.metier-chat__msg--me { justify-self: end; background: var(--accent); color: #fff; border-radius: .9rem .9rem .25rem .9rem; }
.metier-qr { display: grid; place-items: center; }
.metier-qr svg { width: 11rem; height: auto; max-width: 100%; }
.metier-dest { display: flex; justify-content: space-between; gap: .6rem; border: 1px solid var(--line); border-radius: .6rem; padding: .45rem .6rem; font-size: .85rem; }
.metier-dest span { color: var(--accent-dark); font-weight: 600; }