/* Perceptis staff console: the internal staff maquette's language (prototype/staff.css): paper, ink, orange accents,
   Georgia headings, square cards. Proposal for the Flash lead editor, not client-validated. */
:root{--ink:#16352f;--orange:#d8592e;--paper:#faf8f2;--muted:#617169;--line:#dfe3da;--soft:#f0f3ed;--danger:#a3341b;--focus:#e98b3d}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.55;overflow-wrap:anywhere}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid #c4cec8;background:white;padding:10px 14px;font-size:14px;font-weight:600}
button:hover:not(:disabled){background:#f0f4ed}
button:disabled{cursor:not-allowed;opacity:.55}
button.primary{background:var(--ink);border-color:var(--ink);color:white}
button.primary:hover:not(:disabled){background:#0f2924}
button.link{border:0;background:none;padding:4px 0;font-weight:400;text-decoration:underline;text-underline-offset:4px}
button.danger,.danger{color:var(--danger)}
a{color:inherit;text-underline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
input,select,textarea{width:100%;border:1px solid #c4cec8;background:white;padding:10px 12px;font-size:15px;border-radius:0}
label{display:block;font-size:13px;font-weight:600;margin:14px 0 6px}
.top{max-width:1300px;margin:auto;padding:24px 5%;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.wordmark{font-size:29px;font-weight:700;letter-spacing:-1px}
.wordmark span{display:block;font-size:8px;letter-spacing:1.8px}
.whoami{display:flex;gap:14px;align-items:center;font-size:13px}
.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--orange);margin:0 0 8px}
h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(30px,4vw,48px);line-height:1.1;letter-spacing:-1px;margin:10px 0 18px}
h2{font-family:Georgia,serif;font-weight:400;font-size:22px;margin:26px 0 10px}
.small{font-size:12px;color:var(--muted);font-family:Arial,Helvetica,sans-serif}
.note{color:var(--muted);font-size:13px}
.center{text-align:center}
.success{background:#e8f3ec;border-left:3px solid #2f7d4f;padding:10px 14px;font-size:13px}
.error{background:#fbeae5;border-left:3px solid var(--danger);padding:10px 14px;font-size:13px}
.info{background:var(--soft);border-left:3px solid #8caa97;padding:10px 14px;font-size:13px}
.label-note{font-size:12px;color:var(--muted);border-left:3px solid var(--orange);padding:6px 12px;background:white}
.card{border:1px solid var(--line);background:white;padding:26px 24px;box-shadow:0 15px 45px #16352f06;margin:0 0 22px}
.signin-grid{max-width:1300px;margin:10px auto 40px;display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:20px 5%}
.signin-grid aside>p:not(.eyebrow){max-width:400px;color:var(--muted);font-size:15px}
.signin{max-width:470px;width:100%;justify-self:end}
.signin .card h2{font-size:30px;line-height:1.2;margin:16px 0}
#google-login{margin:20px 0 16px;width:100%;display:flex;gap:14px;align-items:center;justify-content:center;padding:15px 12px}
.local-google{border:1px dashed var(--orange);padding:12px 14px;margin-bottom:16px}
.local-google .tag{font-size:9px;letter-spacing:1px;color:var(--orange);margin:0}
.local-google button{margin-top:10px;width:100%}
#auth-status{background:var(--soft);border-left:3px solid #8caa97;padding:14px 16px;font-size:12px}
#auth-status strong{display:block;font-size:13px}
#auth-status p{margin:5px 0 0;color:var(--muted)}
.account-note{font-size:11px;color:var(--muted);margin-top:18px}
.work{max-width:1100px;margin:0 auto 50px;padding:0 5%}
.row-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:16px 0}
.poll-list{list-style:none;padding:0;margin:16px 0}
.poll-list li{margin:0 0 10px}
.poll-open{width:100%;text-align:left;display:flex;flex-direction:column;gap:4px;padding:16px 18px;font-weight:400}
.poll-open strong{font-size:16px}
.poll-open span{font-size:12px;color:var(--muted)}
.form h2:first-of-type{margin-top:22px}
.questions{padding-left:22px;margin:0 0 12px}
.question{border-left:3px solid var(--line);padding:4px 0 12px 14px;margin:0 0 14px}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:14px;margin:8px 0}
.check input{width:auto;margin-top:4px}
.schedule{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.confirm{border:1px solid var(--orange);background:#fff7f1;padding:14px 16px;margin-top:10px}
.confirm button{margin:6px 10px 0 0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.copy-row{display:flex;gap:8px}
.copy-row input{min-width:0;font-size:13px}
.copy-row button{flex:none;white-space:nowrap}
#qr{display:block;margin:16px 0 4px;width:220px;height:220px;image-rendering:pixelated;border:1px solid var(--line)}
.invite-list,.audit{font-size:12px;color:var(--muted);padding-left:20px}
.monitor-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.monitor-head h2{margin-top:0}
.monitor-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:22px;margin-top:14px}
.mode{border:1px solid var(--line);padding:16px 18px;min-width:0}
.mode h3{font-family:Georgia,serif;font-weight:400;font-size:19px;margin:0 0 8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:14px 0}
.kpis div{background:var(--soft);padding:8px 10px}
.kpis dt{font-size:11px;color:var(--muted)}
.kpis dd{margin:2px 0 0;font-size:18px;font-weight:700}
.cells{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0;table-layout:fixed}
.cells caption{text-align:left;font-weight:700;padding:4px 0}
.cells th,.cells td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:top}
.cells td{width:28%}
.cells thead th{font-size:11px;color:var(--muted);font-weight:600}
.cells tbody th{font-weight:400}
.cells tr[data-suppressed=true] td{color:var(--muted);font-style:italic}
footer{max-width:1300px;margin:auto;padding:20px 5% 35px;color:var(--muted);font-size:10px}
[hidden]{display:none!important}
@media(max-width:760px){
 .signin-grid,.grid-2,.schedule{grid-template-columns:1fr}
 .signin-grid{gap:20px;padding:0 16px}
 .signin{max-width:none}
 .work,.top,footer{padding-left:16px;padding-right:16px}
 .card{padding:20px 16px}
}

/* Visual template picker (M7): one native radio per card, a drawn phone miniature, « Voir en grand » after the label. */
.templates { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.templates legend { font-weight: 600; padding: 0; margin-bottom: .5rem; }
.tpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: .75rem; }
.tpl-card { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.tpl-label { display: flex; align-items: flex-start; gap: .75rem; flex: 1; min-height: 44px; padding: .65rem; border: 2px solid #c9d0d8; border-radius: 10px; background: #fff; cursor: pointer; min-width: 0; }
.tpl-label input { flex: none; width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; }
.tpl-label:has(input:checked) { border-color: #1c2733; border-width: 4px; padding: calc(.65rem - 2px); background: #f3f6f9; }
.tpl-label:has(input:focus-visible) { outline: 3px solid #2b5f8a; outline-offset: 2px; }
.tpl-text { display: flex; flex-direction: column; gap: .25rem; min-width: 0; overflow-wrap: anywhere; }
.tpl-badge { display: inline-block; padding: 0 .45rem; border-radius: 999px; background: #1c2733; color: #fff; font-size: .8rem; }
.tpl-line { font-size: .9rem; font-weight: 400; color: #4a5866; }
.tpl-big { min-height: 44px; min-width: 44px; align-self: flex-start; }
.tpl-big[aria-disabled=true] { opacity: .6; cursor: not-allowed; }
.tpl-mini { flex: none; order: 1; display: flex; flex-direction: column; gap: 5px; width: 54px; height: 96px; padding: 0 0 6px; border: 2px solid; border-radius: 9px; overflow: hidden; }
.tpl-label .tpl-text { order: 2; }
.tpl-mini-card { flex: 1; display: flex; flex-direction: column; gap: 5px; margin: 4px 4px 4px; padding: 0 0 6px; overflow: hidden; border-radius: 3px; }
.tpl-mini-head { display: flex; align-items: center; justify-content: center; height: 24px; flex: none; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.tpl-mini-logo { max-width: 36px; max-height: 16px; width: auto; height: auto; object-fit: contain; }
.tpl-mini-ph { display: block; width: 28px; height: 10px; border-radius: 3px; opacity: .5; }
.tpl-mini-line { display: block; height: 5px; margin: 0 6px; border-radius: 2px; }
.tpl-mini-short { width: 60%; }
.tpl-mini-btn { display: block; height: 12px; margin: auto 6px 0; border-radius: 4px; }
@media (max-width: 760px) { .tpl-cards { grid-template-columns: 1fr; } }
.sms-signin{margin-top:22px;padding-top:18px;border-top:1px solid #c4cec8;display:grid;gap:8px}
/* flash-display: the Direction's display switches on the Flash fiche */
.switches{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 22px;align-items:end}
.switch{display:flex;gap:10px;align-items:center;margin:0;font-size:14px;cursor:pointer;min-height:44px}
.switch input{appearance:none;-webkit-appearance:none;width:44px;height:24px;flex:0 0 44px;padding:0;border:1px solid #c4cec8;border-radius:12px;background:var(--soft);position:relative;cursor:pointer;transition:background .15s}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:white;box-shadow:0 1px 2px #16352f40;transition:transform .15s}
.switch input:checked{background:var(--ink);border-color:var(--ink)}
.switch input:checked::after{transform:translateX(20px)}
.switch input:disabled{opacity:.55;cursor:wait}
.threshold label{margin-top:0}
#google-gsi{display:flex;justify-content:center;margin:20px 0 16px;min-height:44px}
.main-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px;border-bottom:1px solid var(--line);padding-bottom:12px}
.main-nav button[aria-current=page]{background:var(--ink);border-color:var(--ink);color:white}
.inline-form{border:1px solid var(--line);background:white;padding:8px 18px 18px;margin:0 0 16px;max-width:560px}
.inline-form button{margin-top:14px}
.admin-list{list-style:none;padding:0;margin:16px 0}
.admin-list li{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;border:1px solid var(--line);background:white;padding:12px 16px;margin:0 0 8px}
.admin-list .meta{font-size:12px;color:var(--muted);display:block}
.admin-list .actions{display:flex;gap:8px;flex-wrap:wrap}
.admin-list form{display:flex;gap:8px;flex:1;min-width:240px}
.admin-list form input{flex:1}
.admin-table{width:100%;border-collapse:collapse;background:white;font-size:13px}
.admin-table th,.admin-table td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}

.seg{display:inline-flex;margin:8px 0}.seg button{border-radius:0;margin:0}.seg button:first-child{border-radius:8px 0 0 8px}.seg button:last-child{border-radius:0 8px 8px 0;margin-left:-1px}.seg button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}
.update-banner{position:fixed;bottom:0;left:0;right:0;background:var(--ink);color:white;padding:10px 16px;text-align:center;font-size:14px;z-index:50}.update-banner button{margin-left:8px;background:white;color:var(--ink);border:1px solid white;padding:4px 12px;font-weight:600;cursor:pointer}

.tpl-example { width: min(26rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 1rem; border: 2px solid #1c2733; border-radius: 12px; background: #fff; overflow: auto; }
.tpl-example::backdrop { background: rgba(28, 39, 51, .6); }
.tpl-example-note { margin: 0 0 .75rem; padding: .35rem .6rem; border-radius: 6px; background: #fff4d6; color: #5a4300; font-size: .9rem; font-weight: 600; }
.tpl-example-phone { display: flex; flex-direction: column; gap: .75rem; padding: 0 0 1rem; border: 2px solid #c9d0d8; border-radius: 14px; overflow: hidden; min-height: 22rem; }
.tpl-example-head { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .75rem; border-bottom: 1px solid rgba(0, 0, 0, .15); }
.tpl-example-logo { max-height: 2rem; max-width: 8rem; object-fit: contain; }
.tpl-example-card { display: flex; flex-direction: column; gap: .75rem; margin: 0 .75rem; padding: 1rem; border-radius: 8px; }
.tpl-example-card h3 { margin: 0; font-size: 1.1rem; }
.tpl-example-answers { display: flex; flex-direction: column; gap: .5rem; }
.tpl-example-option { display: block; padding: .7rem .9rem; border: 2px solid; border-radius: 8px; }
.tpl-example-btn { display: block; padding: .75rem; border-radius: 8px; text-align: center; font-weight: 600; }
.tpl-example-close { min-height: 44px; min-width: 44px; margin-top: .75rem; }

/* Visible loading feedback (slow networks): spinner, busy buttons, list placeholders. */
.spin{display:inline-block;width:1em;height:1em;margin-right:.5em;vertical-align:-.15em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none;border-right-color:currentColor;border-style:dotted}}
button[aria-busy=true]:disabled{opacity:.85;cursor:progress;font-size:0}
button[aria-busy=true]::before{content:"";display:inline-block;width:.9rem;height:.9rem;margin-right:.5rem;vertical-align:-.15rem;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
button[aria-busy=true]::after{content:attr(data-busy-label);font-size:var(--busy-size)}
@media (prefers-reduced-motion:reduce){.spin,button[aria-busy=true]::before{animation:none;border-right-color:currentColor;border-style:dotted}}
.slow-note{display:block;margin:6px 0 0;font-size:12px;color:var(--muted)}
.slow-note:empty{display:none}
.list-note{margin:12px 0;padding:10px 14px;background:var(--soft);border-left:3px solid #8caa97;font-size:14px}
.list-note[hidden]{display:none}
.list-note button{margin-left:6px}
.fixed-lines{list-style:none;margin:0 0 .5rem;padding:0}
.fixed-lines li{padding:.5rem .75rem;margin:0 0 .35rem;border:1px solid #c9d0d8;border-radius:8px;background:#f6f8fa}
.places{margin:.25rem 0 .75rem}
.places summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
#settings-form{margin:1.25rem 0}
#settings-form h3{font-size:1rem;margin:1rem 0 .25rem}