/* ============================================================ THÈME — beige & crème, clair ------------------------------------------------------------ Trois palettes commutables via l'attribut data-theme sur : "classique", "terracotta", "olive". Aucune couleur ne doit être écrite en dur ailleurs que dans ce bloc de variables. ============================================================ */ :root, html[data-theme="classique"] { --bg: #faf6ef; --surface: #fffdf9; --surface-2: #f4ede1; --line: #e4dacb; --line-strong: #d3c5ae; --ink: #3e3527; --ink-2: #6b5d4a; --ink-3: #9c8d77; --accent: #8b7355; --accent-hover: #74603f; --on-accent: #faf6ef; --soft: #efe7da; --on-soft: #5c4b36; } html[data-theme="terracotta"] { --bg: #fdf8f1; --surface: #ffffff; --surface-2: #f8efe4; --line: #eadccb; --line-strong: #dcc6ad; --ink: #4a3728; --ink-2: #7a6553; --ink-3: #a89283; --accent: #c4703f; --accent-hover: #a95c30; --on-accent: #fdf8f1; --soft: #f5e6d8; --on-soft: #7a452a; } html[data-theme="olive"] { --bg: #f7f3e9; --surface: #fffef8; --surface-2: #f0ecdd; --line: #e2dcc9; --line-strong: #cec7ac; --ink: #39351f; --ink-2: #6a6448; --ink-3: #98927a; --accent: #6b7150; --accent-hover: #565b3e; --on-accent: #f7f3e9; --soft: #e8e4d2; --on-soft: #4c5137; } /* Couleurs de sens — réchauffées pour rester dans la gamme */ :root { --ok: #5c8a4a; --ok-bg: #eaf1e2; --warn: #b8873a; --warn-bg: #f8eeda; --danger: #b5503f; --danger-bg: #f8e5e1; --radius: 10px; --radius-lg: 14px; --pad: 16px; --nav-h: 64px; --top-h: 58px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } /* ============================================================ BASE ============================================================ */ * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; overscroll-behavior-y: none; } body { padding-bottom: env(safe-area-inset-bottom); } h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; } h1 { font-size: 1.4rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; } p { margin: 0; } button, input, select, textarea { font-family: inherit; font-size: 1rem; color: inherit; } button { cursor: pointer; border: none; background: none; padding: 0; } .hidden { display: none !important; } .muted { color: var(--ink-2); } .dim { color: var(--ink-3); } .small { font-size: .82rem; } .center { text-align: center; } .row { display: flex; align-items: center; gap: 10px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: 10px; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } .icon-sm { width: 17px; height: 17px; } /* ============================================================ ÉCRANS ============================================================ */ .screen { display: none; } .screen.active { display: block; } .screen-full { min-height: 100dvh; padding: 28px 22px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; } /* ============================================================ BOUTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-size: .93rem; font-weight: 500; transition: background .15s, transform .1s; } .btn:active { transform: scale(.98); } .btn:hover { background: var(--surface-2); } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-soft { background: var(--soft); border-color: transparent; color: var(--on-soft); } .btn-soft:hover { background: var(--line); } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn-ghost:hover { background: var(--surface-2); } .btn-danger { background: var(--danger-bg); border-color: transparent; color: var(--danger); } .btn-block { width: 100%; } .btn-sm { padding: 7px 11px; font-size: .84rem; } .btn:disabled { opacity: .45; pointer-events: none; } .btn-icon { width: 38px; height: 38px; padding: 0; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; color: var(--ink-2); } .btn-icon:hover { background: var(--surface-2); } /* ============================================================ CHAMPS ============================================================ */ .field { display: flex; flex-direction: column; gap: 6px; } .field > label { font-size: .82rem; font-weight: 500; color: var(--ink-2); } input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="time"], input[type="password"], select, textarea { width: 100%; padding: 11px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); outline: none; transition: border-color .15s, box-shadow .15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); } input::placeholder, textarea::placeholder { color: var(--ink-3); } textarea { resize: vertical; min-height: 84px; } select { appearance: none; background-image: none; } .checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; } .checkbox input { width: 19px; height: 19px; accent-color: var(--accent); flex: none; } /* ============================================================ CARTES ET LISTES ============================================================ */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--pad); } .card + .card { margin-top: 12px; } .card-tight { padding: 12px 14px; } .tile { background: var(--surface-2); border-radius: var(--radius-lg); padding: 14px; } .tile-label { font-size: .78rem; color: var(--ink-2); } .tile-value { font-size: 1.6rem; font-weight: 600; line-height: 1.2; margin-top: 2px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); } .list-item:last-child { border-bottom: none; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--soft); color: var(--on-soft); display: flex; align-items: center; justify-content: center; font-size: .82rem; font-weight: 600; flex: none; } .avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; } .badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-size: .74rem; font-weight: 500; background: var(--soft); color: var(--on-soft); } .badge-ok { background: var(--ok-bg); color: var(--ok); } .badge-warn { background: var(--warn-bg); color: var(--warn); } .badge-danger { background: var(--danger-bg); color: var(--danger); } .section-title { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 22px 0 10px; } .section-title:first-child { margin-top: 0; } .empty { text-align: center; padding: 34px 20px; color: var(--ink-3); } .empty .icon { width: 34px; height: 34px; margin-bottom: 10px; opacity: .55; } .empty-title { font-weight: 500; color: var(--ink-2); margin-bottom: 4px; } .divider { height: 1px; background: var(--line); margin: 16px 0; } /* ============================================================ CHARPENTE — barre haute, pages, navigation basse ============================================================ */ #topbar { position: sticky; top: 0; z-index: 40; height: calc(var(--top-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 14px 0; display: flex; align-items: center; gap: 12px; background: var(--bg); border-bottom: 1px solid var(--line); } #topbar .logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .84rem; flex: none; object-fit: cover; } #topbar .titles { min-width: 0; } #topbar .t1 { font-size: .95rem; font-weight: 600; } #topbar .t2 { font-size: .74rem; color: var(--ink-3); } #pages { padding: 18px 14px calc(var(--nav-h) + 34px); } .page { display: none; } .page.active { display: block; animation: fade .18s ease; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } } .page-head { margin-bottom: 16px; } .page-head h1 { margin-bottom: 2px; } #bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--surface); border-top: 1px solid var(--line); } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--ink-3); font-size: .66rem; font-weight: 500; transition: color .15s; } .nav-btn.active { color: var(--accent); } .nav-btn .icon { width: 21px; height: 21px; } /* ============================================================ FENÊTRES MODALES ============================================================ */ .modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(62, 53, 39, .38); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease; } .modal { width: 100%; max-width: 520px; max-height: 88dvh; overflow-y: auto; background: var(--bg); border-radius: 20px 20px 0 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); animation: rise .22s cubic-bezier(.2,.8,.3,1); } @keyframes rise { from { transform: translateY(24px); } } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .modal-body { display: flex; flex-direction: column; gap: 14px; } .modal-foot { display: flex; gap: 10px; margin-top: 20px; } .modal-foot .btn { flex: 1; } @media (min-width: 620px) { .modal-back { align-items: center; } .modal { border-radius: var(--radius-lg); max-height: 82dvh; } } /* ============================================================ CONNEXION PAR CODE PIN ============================================================ */ .pin-dots { display: flex; gap: 14px; justify-content: center; margin: 22px 0 26px; } .pin-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-strong); transition: background .15s, border-color .15s, transform .15s; } .pin-dot.filled { background: var(--accent); border-color: var(--accent); } .pin-dot.error { background: var(--danger); border-color: var(--danger); } .shake { animation: shake .4s; } @keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(5px); } } .pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 290px; margin: 0 auto; } .pin-key { height: 62px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); font-size: 1.35rem; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: background .12s, transform .1s; } .pin-key:active { background: var(--soft); transform: scale(.96); } .pin-key.blank { background: transparent; border-color: transparent; pointer-events: none; } .user-pick { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 13px 14px; margin-bottom: 9px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .15s, background .15s; } .user-pick:hover { border-color: var(--accent); background: var(--surface-2); } /* ============================================================ ASSISTANT DE PREMIÈRE CONFIGURATION ============================================================ */ .wiz-progress { display: flex; gap: 6px; margin-bottom: 26px; } .wiz-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background .25s; } .wiz-progress span.done { background: var(--accent); } .wiz-step { display: none; } .wiz-step.active { display: block; animation: fade .2s ease; } .wiz-kicker { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; } .wiz-lede { color: var(--ink-2); margin: 8px 0 22px; } .theme-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-pick { border: 2px solid var(--line); border-radius: var(--radius-lg); padding: 11px 9px; background: var(--surface); text-align: center; transition: border-color .15s; } .theme-pick.sel { border-color: var(--accent); } .theme-pick .swatches { display: flex; gap: 3px; margin-bottom: 8px; } .theme-pick .swatches i { flex: 1; height: 24px; border-radius: 4px; display: block; } .theme-pick .name { font-size: .74rem; font-weight: 500; } .chip-input { display: flex; flex-wrap: wrap; gap: 7px; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: 100px; background: var(--soft); color: var(--on-soft); font-size: .84rem; } .chip button { display: flex; color: inherit; opacity: .6; } .chip button:hover { opacity: 1; } .day-picks { display: flex; gap: 6px; } .day-pick { flex: 1; padding: 10px 0; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); font-size: .8rem; font-weight: 500; color: var(--ink-3); } .day-pick.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* ============================================================ PLANNING HEBDOMADAIRE ============================================================ */ .plan-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: 0 14px; } .plan-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 560px; } .plan-grid th, .plan-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0; } .plan-grid th { background: var(--surface-2); font-size: .74rem; font-weight: 600; color: var(--ink-2); padding: 9px 6px; text-align: center; } .plan-grid th:first-child, .plan-grid td:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg); text-align: left; padding: 9px 10px; min-width: 118px; border-right: 1px solid var(--line-strong); } .plan-cell { width: 100%; height: 46px; font-size: .74rem; font-weight: 500; background: var(--surface); color: var(--ink-3); } .plan-cell.on { background: var(--soft); color: var(--on-soft); } /* ============================================================ PLAN DE SALLE ============================================================ */ .fp-canvas { position: relative; width: 100%; aspect-ratio: 4 / 3; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; touch-action: none; } .fp-table { position: absolute; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; background: var(--surface-2); border: 1.5px solid var(--line-strong); color: var(--ink-2); cursor: grab; user-select: none; } .fp-table.round { border-radius: 50%; } .fp-table.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--soft); } .fp-table[data-status="occupee"] { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); } .fp-table[data-status="reservee"] { background: var(--soft); border-color: var(--accent); color: var(--on-soft); } .fp-table[data-status="addition"] { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); } .fp-zones { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 12px; } .fp-zone { padding: 7px 13px; border-radius: 100px; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); } .fp-zone.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* ============================================================ MESSAGES ============================================================ */ .msg { display: flex; gap: 9px; margin-bottom: 14px; align-items: flex-end; } .msg-bubble { max-width: 76%; padding: 9px 13px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; } .msg-who { font-size: .72rem; font-weight: 600; color: var(--accent); margin-bottom: 2px; } .msg-time { font-size: .66rem; color: var(--ink-3); margin-top: 3px; } .msg.mine { flex-direction: row-reverse; } .msg.mine .msg-bubble { background: var(--accent); border-color: var(--accent); color: var(--on-accent); border-radius: 14px 14px 4px 14px; } .msg.mine .msg-who { display: none; } .msg.mine .msg-time { color: var(--on-accent); opacity: .7; text-align: right; } /* La barre de navigation est fixée au bas de la fenêtre : la zone de saisie doit se caler au-dessus d'elle, pas dessous. */ .composer { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); display: flex; gap: 9px; align-items: flex-end; padding: 11px 0; background: var(--bg); border-top: 1px solid var(--line); } .composer textarea { min-height: 44px; max-height: 130px; } /* ============================================================ NOTIFICATION BRÈVE ============================================================ */ #toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 22px); transform: translateX(-50%) translateY(14px); z-index: 200; opacity: 0; pointer-events: none; padding: 11px 18px; border-radius: 100px; background: var(--ink); color: var(--bg); font-size: .86rem; font-weight: 500; transition: opacity .2s, transform .2s; max-width: 88vw; } #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ BANDEAU MODE LOCAL ============================================================ */ #local-banner { display: flex; align-items: center; gap: 9px; padding: 9px 14px; background: var(--warn-bg); color: var(--warn); font-size: .78rem; } @media print { #topbar, #bottomnav, .btn, #local-banner { display: none !important; } #pages { padding: 0; } body { background: #fff; } }