/* Composants Office construits sur les variables du template commun. */
:root { --color-bg:#f5f7f8; --color-text:#162c35; --color-primary:#075e65; }
.site-header { width:min(100% - 3rem,74rem); display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:88px; }
.brand { display:inline-flex; align-items:center; gap:.65rem; letter-spacing:.02em; color:var(--color-text); }
.brand-symbol { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:var(--color-primary); color:white; font-size:1.2rem; }
.brand-product { color:#47616d; font-weight:500; padding-left:.7rem; border-left:1px solid #b8c9ce; }
nav { display:flex; align-items:center; flex-wrap:wrap; gap:1.25rem; }
nav a { font-size:.95rem; font-weight:500; }
.container { width:min(100% - 3rem,74rem); }
h1 { font-size:clamp(2rem,4vw,3rem); line-height:1.15; letter-spacing:-.035em; margin:.5rem 0 1rem; }
h2 { font-size:1.4rem; line-height:1.3; }
.muted,.panel p { color:#48616c; }
.eyebrow { text-transform:uppercase; letter-spacing:.12em; color:var(--color-primary); font-size:.78rem; font-weight:700; }
.page-heading { padding:1.5rem 0; }
.auth-panel { margin:3rem auto; padding:2.5rem; max-width:470px; background:white; border:1px solid #d5e0e4; border-radius:1.3rem; box-shadow:0 16px 60px #18303a0a; }
.auth-panel h1 { font-size:2.15rem; }
.auth-panel form { margin-top:2rem; }
input { font:inherit; width:100%; border:1px solid #7a909a; border-radius:.6rem; padding:.8rem; color:var(--color-text); background:white; }
label { font-weight:600; }
form { gap:.65rem; }
form button { margin-top:.8rem; }
button { padding:.8rem 1.2rem; font-weight:600; }
.inline-form { display:block; }
.inline-form button { margin:0; font-size:.9rem; }
.button-secondary { background:white; color:var(--color-primary); border:1px solid #b7cbd0; }
.panel { padding:1.8rem; border:1px solid #d5e0e4; border-radius:1rem; background:white; }
.narrow { max-width:38rem; }
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.2rem; margin:1.5rem 0 2rem; }
.welcome-panel { background:#e4f0ef; border:1px solid #c0d8d6; border-radius:1.1rem; padding:2rem; }
.welcome-panel h2 { font-size:clamp(1.6rem,3vw,2.1rem); letter-spacing:-.02em; }
.status-dot { display:inline-block; background:#075e65; width:.5rem; height:.5rem; margin-right:.4rem; border-radius:50%; }
.tag { display:inline-block; border-radius:2rem; padding:.2rem .65rem; color:#445c67; background:#edf2f4; font-size:.75rem; }
.notice { padding:.9rem 1rem; background:#e6f2ef; border:1px solid #9bbdb1; border-radius:.6rem; }
.notice-error { background:#fff0ee; color:#872e24; border-color:#cf948c; }
.contact-intro { max-width:48rem; padding:4rem 0; }
.contact-intro h1 { font-size:clamp(2.7rem,6vw,4.8rem); }
.contact-intro>p:not(.eyebrow) { font-size:1.15rem; }
.footer { display:flex; justify-content:space-between; gap:1rem; color:#4a636f; border-top:1px solid #d4dfe3; font-size:.85rem; }
.content-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:1.5rem; align-items:start; }
.content-grid>*, .panel, .thread-entry { min-width:0; overflow-wrap:anywhere; }
.content-grid>div>.panel { margin-bottom:1.5rem; }
select { font:inherit; color:var(--color-text); background:white; border:1px solid #7a909a; border-radius:.6rem; padding:.8rem; width:100%; }
fieldset { border:0; padding:0; min-width:0; }
details>summary { cursor:pointer; font-weight:600; padding:.6rem 0; }
.form-details { border-block:1px solid #d5e0e4; padding-block:.6rem; margin-block:.5rem; }
.details-fields { display:grid; gap:.65rem; padding-block:1rem; }
.field-help { font-size:.9rem; color:#48616c; margin:.1rem 0 .6rem; }
.field-error { color:#872e24; font-weight:600; margin:.1rem 0 .6rem; }
[aria-invalid="true"] { border:2px solid #872e24; }
.preserve-lines { white-space:pre-wrap; overflow-wrap:anywhere; }
.token-code { overflow-wrap:anywhere; font-family:monospace; }
.button-link { display:inline-block; padding:.7rem 1.1rem; color:white; background:var(--color-primary); border-radius:.6rem; text-decoration:none; font-weight:600; }
.request-list { display:grid; gap:1rem; margin-block:1.5rem; }
.request-row { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.request-row h2 { margin-block:.3rem; }
.request-row p { margin-block:.4rem; }
.tag { flex-shrink:0; }
.filter-form { display:flex; align-items:center; flex-wrap:wrap; max-width:none; gap:.8rem; margin-bottom:1.5rem; }
.filter-form select { width:auto; max-width:100%; }
.filter-form button { margin:0; }
.record-facts div { border-top:1px solid #d5e0e4; padding-block:.6rem; }
.record-facts dt { font-weight:600; }.record-facts dd { margin:0; }
.thread-entry { padding-block:1rem; border-top:1px solid #d5e0e4; }
.check-label { display:flex; align-items:flex-start; gap:.6rem; }.check-label input { width:auto; flex-shrink:0; margin-top:.4rem; }
.narrow+details { margin-top:1rem; }
.heading-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.heading-actions>div { min-width:0; }
.work-form-panel { max-width:56rem; }.work-form { max-width:44rem; }
.filter-form input[type=date] { width:auto; max-width:100%; }
.filter-form select { max-width:min(100%,25rem); }
.agenda-navigation { display:flex; justify-content:space-between; flex-wrap:wrap; margin-block:1.5rem; }
.agenda-days { display:grid; gap:1rem; }.agenda-day h2 { margin-top:0; }
.agenda-day.is-today { border:2px solid var(--color-primary); }
.agenda-item { padding:.8rem 0; border-top:1px solid #d5e0e4; }.agenda-item h3 { margin:.4rem 0; }.agenda-item p { margin:.3rem 0; }
.item-links li { margin-bottom:.6rem; }
@media(max-width:900px) { .content-grid { grid-template-columns:1fr; } }
@media(max-width:480px) { .container,.site-header { width:calc(100% - 2rem); }.panel { padding:1.2rem; }.request-row { flex-direction:column; }.brand-product { padding-left:.4rem; }.brand { gap:.4rem; } }
@media(max-width:720px) { .site-header { align-items:flex-start; flex-direction:column; padding-block:1rem; } .card-grid { grid-template-columns:1fr; } .auth-panel { padding:1.5rem; margin:1.5rem auto; } .footer { flex-direction:column; } nav { gap:.9rem; } }