/* Thème « Apple » : fond gris très clair, tuiles blanches, grands titres, bouton bleu en pastille, barre de navigation en haut.
   Chargé après styles.css : il remplace les couleurs et la mise en page de la navigation. */
:root { --ink: #1D1D1F; --ink-2: #E8E8ED; --paper: #F5F5F7; --surface: #FFFFFF; --line: #D2D2D7; --text: #1D1D1F; --muted: #6E6E73; --spot: #0071E3; --spot-soft: #E5F0FF; --amber: #A35A00; --amber-soft: #FFF3DC; --ok: #1D7A3A; --ok-soft: #E3F6E8; --bad: #C9231A;
  --serif: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif; }
body { background: var(--paper); font-size: 15px; line-height: 1.47; letter-spacing: -.01em; -webkit-font-smoothing: antialiased; }
h1 { font-size: 40px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; } h2 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; } h3 { font-size: 17px; font-weight: 600; }
:focus-visible { outline: 3px solid rgba(0,113,227,.4); outline-offset: 1px; }

/* ── Mise en page : barre en haut, contenu dessous ── */
.shell { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.topbar { display: flex; align-items: center; gap: 6px; height: 52px; padding: 0 28px; flex: none; background: rgba(255,255,255,.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.08); position: relative; z-index: 30; }
.topbar .brand { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.02em; text-decoration: none; padding: 0 18px 0 0; white-space: nowrap; }
.topbar .sp { flex: 1; }
.topnav { display: flex; align-items: center; gap: 2px; }
.dd { position: relative; }
.ddbtn { display: inline-block; border: 0; background: none; cursor: pointer; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: 14px; color: #424245; text-decoration: none; }
.dd:hover > .ddbtn, .dd.open > .ddbtn { color: #000; background: rgba(0,0,0,.05); } .dd.on > .ddbtn, a.ddbtn.on { color: #000; font-weight: 600; }
.ddmenu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; padding: 8px; margin-top: 2px; background: rgba(255,255,255,.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); }
.dd:hover > .ddmenu, .dd.open > .ddmenu { display: block; } .dd.direct > .ddmenu { display: none !important; }
.ddmenu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }   /* pas de trou entre le mot et la liste : la liste ne se referme pas en y allant */
.ddmenu a, .ddmenu .item { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 14px; color: #1D1D1F; text-decoration: none; padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.ddmenu a:hover, .ddmenu .item:hover { background: #F0F0F3; } .ddmenu a.on { background: #E8F1FD; color: #0066CC; font-weight: 600; }
.acct > .ddmenu { left: auto; right: 0; } .acct .who { padding: 8px 12px 10px; display: flex; flex-direction: column; border-bottom: 1px solid #E5E5EA; margin-bottom: 6px; } .acct .who b { font-weight: 600; } .acct .who small { color: #86868B; }
.acct > .ddbtn { color: #424245; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search { flex: none; width: 240px; max-width: none; position: relative; } .search input { width: 100%; background: #EDEDF0; border: 0; border-radius: 10px; padding: 8px 14px; font-size: 14px; } .search input:focus { background: #E4E4E9; }
.results { top: 42px; left: auto; right: 0; width: 360px; border-radius: 14px; border: 0; box-shadow: 0 12px 40px rgba(0,0,0,.18); }
.btn.small#top-alerts, #top-alerts { margin: 0 4px; }
.main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mobile-only, .burger, .scrim { display: none; }

/* ── Contenu ── */
.page { padding: 40px 48px 72px; } .head { margin-bottom: 28px; } .head .sub { font-size: 17px; color: var(--muted); margin-top: 6px; }
.panel { background: #fff; border: 0; border-radius: 18px; padding: 26px 28px; margin-bottom: 20px; box-shadow: none; } .panel > header { margin-bottom: 14px; }
.btn { background: #E8E8ED; border: 0; border-radius: 980px; padding: 8px 18px; color: #1D1D1F; font-size: 14px; } .btn:hover { background: #DCDCE1; border: 0; }
.btn.primary { background: #0071E3; color: #fff; } .btn.primary:hover { background: #0077ED; } .btn.danger { color: #C9231A; background: #FBE9E8; } .btn.small { padding: 4px 12px; font-size: 13px; }
a.btn { color: #1D1D1F; } a.btn.primary { color: #fff; } a.btn.danger { color: #C9231A; }
th { font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid #E5E5EA; padding: 8px 12px; } td { padding: 13px 12px; border-bottom: 1px solid #F0F0F3; vertical-align: middle; } tr:last-child td { border-bottom: 0; } tr.trow:hover td { background: #FAFAFC; }
.tag { border-radius: 980px; padding: 2px 10px; font-size: 12px; font-weight: 500; background: #F0F0F3; color: #515154; }
.tag.confirme, .tag.signe, .tag.fait, .tag.termine, .tag.ok, .tag.disponible, .tag.paid, .tag.accepted, .tag.encaisse, .tag.paye, .tag.approved, .tag.realisee, .tag.retourne, .tag.rembourse, .tag.signed, .tag.terminee { background: #E3F6E8; color: #1D7A3A; }
.tag.option, .tag.envoye, .tag.en_cours, .tag.warn, .tag.sorti, .tag.partial, .tag.accepte, .tag.en_attente, .tag.submitted, .tag.to_correct, .tag.a_rembourser, .tag.partiel, .tag.reserve, .tag.issued, .tag.to_check { background: #FFF3DC; color: #A35A00; }
.tag.annule, .tag.bad, .tag.error, .tag.blocker, .tag.hors_service, .tag.maintenance, .tag.indisponible, .tag.rejected, .tag.cancelled, .tag.annulee, .tag.overdue { background: #FFE5E3; color: #C9231A; }
.tag.a_faire, .tag.info, .tag.demande, .tag.devis_envoye, .tag.prevu, .tag.planifiee, .tag.draft, .tag.prevue { background: #E5F0FF; color: #0066CC; } .tag.cloture, .tag.realise { background: #1D1D1F; color: #fff; }
.tag.annule, .tag.annulee { text-decoration: none; }
.figures { gap: 28px; } .fig { border-left: 0; padding: 0; } .fig b { font-size: 34px; font-weight: 600; letter-spacing: -.03em; } .fig > span { font-size: 13px; color: var(--muted); } .fig.margin b { color: #0071E3; }
.kpi { border: 0; border-radius: 18px; border-top: 0; padding: 20px 22px; } .kpi b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; }
.alert { border-radius: 14px; padding: 14px 18px; background: #FFF7E6; color: #6B4200; } .alert.info { background: #EEF4FF; color: #1D3C78; } .alert.bad { background: #FFE5E3; color: #7A1712; } a { color: #0066CC; } .alert a { color: #0066CC; }
.ticket { border: 0; border-radius: 14px; box-shadow: 0 0 0 1px #E5E5EA inset; } .stub { background: #1D1D1F; border-radius: 13px 0 0 13px; border-right-color: #fff; } .stub b { font-family: var(--serif); } .stub::before, .stub::after { background: #fff; border-color: #E5E5EA; }
.stepper .st { background: #EDEDF0; border-right-color: #fff; } .stepper .st.cur { background: #1D1D1F; }
.tabs { gap: 6px; border-bottom: 0; } .tabs .tab, .tabs button { border-radius: 980px; padding: 7px 16px; color: #1D1D1F; } .tabs .tab.on, .tabs button.on { background: #1D1D1F; color: #fff; } .tabs .tab:hover:not(.on) { background: #E8E8ED; color: #1D1D1F; }
input, select, textarea { border-radius: 12px; } label.f input, label.f select, label.f textarea, .toolbar input, .toolbar select { border-radius: 12px; border-color: #D2D2D7; padding: 9px 14px; } .toolbar input, .toolbar select { background: #fff; }
dialog { border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,.25); } dialog::backdrop { background: rgba(0,0,0,.3); backdrop-filter: blur(6px); }
.toast { background: #1D1D1F; border-radius: 14px; } .lock { background: var(--paper); } .lock form { border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.12); }
.cal { border-radius: 14px; } .cal .day.today { box-shadow: inset 0 0 0 2px #0071E3; } .mcard { border-radius: 16px; border-color: #E5E5EA; }
.step { border-top-color: #E5E5EA; } .chk { border-bottom-color: #F0F0F3; }
td a, td .link { font-weight: 500; text-decoration: none; } td a:hover { text-decoration: underline; }
details.lot summary { font-size: 17px; padding: 4px 0; } details.lot summary b { font-weight: 600; }
.live-badge { background: rgba(29,29,31,.85) !important; }

/* ── Téléphone : la barre devient un tiroir avec toutes les rubriques dépliées ── */
@media (max-width: 1000px) { .search { width: 170px; } .topbar { padding: 0 16px; } }
@media (max-width: 800px) {
  .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: #fff; height: auto; min-height: 52px; padding: 6px 12px; padding-top: max(6px, env(safe-area-inset-top)); flex-wrap: nowrap; gap: 8px; }
  .topbar .brand { padding: 0; font-size: 16px; } .topbar .sp { display: none; } .topbar .brand { flex: 1; }
  .burger { display: inline-flex; align-items: center; justify-content: center; order: 3; width: 40px; height: 40px; border: 0; border-radius: 12px; background: #EDEDF0; font-size: 20px; cursor: pointer; }
  .burger { position: relative; z-index: 50; } body.nav-open .burger { font-size: 0; } body.nav-open .burger::after { content: "✕"; font-size: 18px; }
  .search, .acct, #top-alerts { display: none; }
  .topnav { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 40; background: #fff; flex-direction: column; align-items: stretch; gap: 0; padding: max(64px, calc(env(safe-area-inset-top) + 56px)) 20px 32px; overflow-y: auto; transform: translateY(-102%); transition: transform .2s ease-out; }
  body.nav-open .topnav { transform: none; } body.nav-open .scrim { display: none; }
  .topnav::before { content: "Menu"; position: absolute; top: max(16px, env(safe-area-inset-top)); left: 20px; font-size: 20px; font-weight: 600; }
  .dd { display: block; margin: 0; } .dd > .ddbtn { display: block; width: 100%; text-align: left; padding: 18px 0 6px; font-size: 12px; font-weight: 600; color: #86868B; background: none !important; pointer-events: none; }
  .dd.direct > .ddbtn { pointer-events: auto; font-size: 22px; font-weight: 600; color: #1D1D1F; padding: 10px 0; text-align: left; }
  .dd .ddmenu, .dd:hover > .ddmenu { display: block; position: static; box-shadow: none; background: none; padding: 0; margin: 0; min-width: 0; } .ddmenu::before { display: none; }
  .ddmenu a, .ddmenu .item, .mobile-only a, .mobile-only .item { font-size: 22px; font-weight: 600; padding: 10px 0; border-radius: 0; letter-spacing: -.02em; } .ddmenu a.on { background: none; color: #0071E3; }
  .mobile-only { display: block; } .mobile-only a, .mobile-only .item { display: block; width: 100%; text-align: left; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 500; color: #1D1D1F; text-decoration: none; padding: 10px 0; }
  .mgrp { font-size: 12px; font-weight: 600; color: #86868B; padding: 22px 0 4px; }
  .dd.acct { display: none; }
  .live-badge { font-size: 0 !important; padding: 5px 6px !important; opacity: .6 !important; pointer-events: none; } .live-badge i { margin: 0 !important; }
  .page { padding: 20px 16px 56px; } h1 { font-size: 30px; } .panel { padding: 18px 16px; border-radius: 16px; } .results { position: fixed; left: 12px; right: 12px; width: auto; }
}

/* ── Verre dépoli (« liquid glass ») : fond doux coloré, tuiles et menus translucides, reflet fin sur les bords ── */
:root { --glass: rgba(255,255,255,.58); --glass-strong: rgba(255,255,255,.9); --glass-edge: rgba(255,255,255,.75); --glass-shadow: 0 8px 32px rgba(31,45,90,.10), inset 0 1px 0 rgba(255,255,255,.9); }
body { background: radial-gradient(900px 600px at 8% -5%, rgba(120,170,255,.38), transparent 60%), radial-gradient(800px 600px at 95% 10%, rgba(200,150,255,.30), transparent 60%), radial-gradient(900px 700px at 60% 105%, rgba(110,220,220,.28), transparent 60%), #F2F4F9; background-attachment: fixed; }
.topbar { background: rgba(255,255,255,.55); backdrop-filter: saturate(200%) blur(28px); -webkit-backdrop-filter: saturate(200%) blur(28px); border-bottom: 1px solid var(--glass-edge); box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.ddmenu { background: var(--glass-strong); backdrop-filter: saturate(200%) blur(30px); -webkit-backdrop-filter: saturate(200%) blur(30px); box-shadow: 0 16px 48px rgba(31,45,90,.20), inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px rgba(255,255,255,.6); }
.ddmenu a:hover, .ddmenu .item:hover { background: rgba(0,113,227,.09); }
.panel, .kpi, .mcard { background: var(--glass); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); box-shadow: var(--glass-shadow); border: 1px solid var(--glass-edge); }
.btn { background: rgba(255,255,255,.65); box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 3px rgba(31,45,90,.10); border: 1px solid rgba(255,255,255,.7); } .btn:hover { background: rgba(255,255,255,.9); border: 1px solid rgba(255,255,255,.9); }
.btn.primary { background: linear-gradient(180deg, #2A8BFF, #0071E3); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,113,227,.35); } .btn.primary:hover { background: linear-gradient(180deg, #3A94FF, #0A7AEE); }
.search input, .toolbar input, .toolbar select, label.f input, label.f select, label.f textarea { background: rgba(255,255,255,.7); }
.tabs .tab.on, .tabs button.on { background: rgba(29,29,31,.88); }
dialog { background: rgba(255,255,255,.96); border: 1px solid var(--glass-edge); }
.lock { background: transparent; }
/* Téléphone : barre pleine, SANS verre. Un « backdrop-filter » sur la barre fait du tiroir de menu (position: fixed) un élément relatif à la barre et le coupe à 52 px de haut. Cette règle doit rester APRÈS le bloc verre ci-dessus. */
@media (max-width: 800px) { .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-transparency: reduce) { .panel, .kpi, .mcard, .ddmenu, dialog, .topbar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; } }
.ddmenu { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }   /* une liste dans une barre déjà en verre : on la garde nette pour la lisibilité */