/* Colonne mobile (max 560px), bandeau façon panneau de métro en haut, barre d'onglets en bas.
   Chaque journée porte la pastille d'une ligne de métro, dans la couleur MTA. */
:root{
  --bg:#ECEEF1; --surface:#FFFFFF; --ink:#111418; --muted:#5D6570; --line:#D6DAE0;
  --taxi:#F5B400; --taxi-ink:#1A1400;
  --sign:#121417; --sign-fg:#FFFFFF;
  --ok:#0F7A3A; --ok-bg:#DDF2E4; --warn:#9A5B00; --warn-bg:#FCEFD2; --todo:#B4231C; --todo-bg:#FBE1DE; --info:#1F4FB0; --info-bg:#E1E9FA;
  --l-nqr:#FCCC0A; --l-456:#00933C; --l-123:#EE352E; --l-ace:#0039A6; --l-l:#7F8285; --l-bdf:#FF6319; --l-7:#B933AD; --l-g:#6CBE45; --l-jz:#996633;
  --f-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0B0C0E; --surface:#17191D; --ink:#F1F2F4; --muted:#9AA2AD; --line:#2A2E35;
  --taxi:#F7C031; --sign:#000000;
  --ok:#5BD68A; --ok-bg:#12301E; --warn:#F2B552; --warn-bg:#33240A; --todo:#FF7D72; --todo-bg:#3A1513; --info:#8FB0FF; --info-bg:#16233F;
  color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
[hidden]{display:none!important}
.app{max-width:560px;margin:0 auto;min-height:100vh;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
:focus-visible{outline:3px solid var(--taxi);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
.min0{min-width:0}

/* Bandeau */
.sign{position:sticky;top:0;z-index:500;background:var(--sign);color:var(--sign-fg);padding:calc(10px + env(safe-area-inset-top,0px)) 16px 12px}
.sign::before{content:"";display:block;height:2px;background:var(--sign-fg);margin-bottom:10px;opacity:.9}
.sign-row{display:flex;align-items:center;gap:12px;justify-content:space-between}
.sign h1{margin:0;font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:22px;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sign .sub{font-size:12px;opacity:.75;letter-spacing:.06em;text-transform:uppercase;margin-top:3px}
.clocks{display:flex;gap:12px;font-family:var(--f-mono);font-size:12px;text-align:right;flex:none}
.clocks b{display:block;font-size:15px}

main{padding:16px;display:grid;gap:16px}
.h2{font-family:var(--f-display);font-stretch:80%;font-weight:800;font-size:24px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em;margin:0;text-wrap:balance}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.card{background:var(--surface);border-radius:var(--r);padding:16px;border:1px solid var(--line);min-width:0}
.stack{display:grid;gap:10px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.petit{font-size:13px}

/* Pastilles de ligne */
.bullet{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:16px;color:#fff;background:var(--l-l)}
.bullet.sm{width:28px;height:28px;font-size:13px}
.bullet[data-l="nqr"]{background:var(--l-nqr);color:#111}
.bullet[data-l="456"]{background:var(--l-456)} .bullet[data-l="123"]{background:var(--l-123)} .bullet[data-l="ace"]{background:var(--l-ace)}
.bullet[data-l="l"]{background:var(--l-l)} .bullet[data-l="bdf"]{background:var(--l-bdf)} .bullet[data-l="7"]{background:var(--l-7)} .bullet[data-l="g"]{background:var(--l-g);color:#111} .bullet[data-l="jz"]{background:var(--l-jz)}

/* Compte à rebours */
.count{background:var(--taxi);color:var(--taxi-ink);border-radius:var(--r);padding:18px 18px 16px;display:grid;gap:4px;position:relative;overflow:hidden}
.count::after{content:"";position:absolute;inset:auto 0 0 0;height:10px;background:repeating-linear-gradient(90deg,#111 0 10px,transparent 10px 20px);opacity:.9}
.count .big{font-family:var(--f-display);font-stretch:62%;font-weight:900;font-size:76px;line-height:.9}
.count .lbl{font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.count .meta{font-size:14px;font-weight:600;padding-bottom:10px}

.seg{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px;gap:2px}
.seg button{flex:1;border:0;background:transparent;border-radius:999px;padding:8px 10px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}

/* Maintenant / Ensuite */
.now{display:grid;gap:12px}
.tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--taxi);color:var(--taxi-ink)}
.now h3{margin:6px 0 2px;font-family:var(--f-display);font-stretch:85%;font-weight:800;font-size:22px;line-height:1.1}
.go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;border-radius:12px;border:0;background:var(--ink);color:var(--bg);font-weight:800;font-size:16px;text-decoration:none;cursor:pointer;padding:0 14px;text-align:center}
.go.alt{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.go.taxi{background:var(--taxi);color:var(--taxi-ink)}
.go.danger{background:var(--todo-bg);color:var(--todo)}
.go.small{min-height:42px;font-size:14px}
.go-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.add{border:1.5px dashed var(--line);background:transparent;border-radius:12px;padding:10px;font-weight:700;color:var(--muted);cursor:pointer;width:100%}

/* Timeline */
.day-head{display:flex;gap:12px;align-items:center}
.day-head .t{min-width:0;flex:1}
.icon-btn{border:1px solid var(--line);background:var(--surface);border-radius:10px;width:38px;height:38px;cursor:pointer;flex:none;display:grid;place-items:center}
.tl{list-style:none;margin:0;padding:0;position:relative}
.tl::before{content:"";position:absolute;left:58px;top:8px;bottom:8px;width:4px;border-radius:2px;background:var(--line)}
.tl[data-l="nqr"]::before{background:var(--l-nqr)} .tl[data-l="456"]::before{background:var(--l-456)} .tl[data-l="123"]::before{background:var(--l-123)} .tl[data-l="ace"]::before{background:var(--l-ace)} .tl[data-l="l"]::before{background:var(--l-l)} .tl[data-l="bdf"]::before{background:var(--l-bdf)} .tl[data-l="7"]::before{background:var(--l-7)} .tl[data-l="g"]::before{background:var(--l-g)} .tl[data-l="jz"]::before{background:var(--l-jz)}
.it{display:grid;grid-template-columns:46px 28px 1fr;gap:0 10px;padding:9px 0;align-items:start}
.it .tm{font-family:var(--f-mono);font-size:13px;font-weight:600;padding-top:3px;text-align:right}
.it .dot{width:28px;height:28px;border-radius:50%;background:var(--surface);border:3px solid var(--ink);display:grid;place-items:center;font-size:14px;position:relative;z-index:1}
.it .body{min-width:0}
.it .ttl{font-weight:700;line-height:1.25;background:none;border:0;padding:0;text-align:left;cursor:pointer;width:100%}
.it .nt{font-size:13px;color:var(--muted);margin-top:2px;white-space:pre-line}
.it.past{opacity:.45}
.it.cur .dot{border-color:var(--taxi);box-shadow:0 0 0 4px color-mix(in srgb,var(--taxi) 35%,transparent)}
.it-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 9px;border-radius:999px;border:1px solid var(--ink);background:var(--surface);text-decoration:none;cursor:pointer;white-space:nowrap}
.st{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:0;cursor:pointer;white-space:nowrap}
.st[data-s="a_reserver"]{background:var(--todo-bg);color:var(--todo)}
.st[data-s="a_confirmer"]{background:var(--warn-bg);color:var(--warn)}
.st[data-s="reserve"]{background:var(--info-bg);color:var(--info)}
.st[data-s="paye"]{background:var(--ok-bg);color:var(--ok)}
.st.fixe{cursor:default}
.flag{font-size:13px;padding:8px 10px;border-radius:8px;background:var(--warn-bg);color:var(--warn);font-weight:600}
.flag.neutre{background:var(--surface);color:var(--muted);border:1px solid var(--line)}

.days{display:flex;gap:8px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.daybtn{flex:none;display:grid;justify-items:center;gap:4px;border:0;background:transparent;cursor:pointer;padding:4px 2px;border-radius:10px}
.daybtn small{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--muted);letter-spacing:.06em}
.daybtn[aria-pressed="true"] .bullet{box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--ink)}
.daybtn[aria-pressed="true"] small{color:var(--ink)}

/* Réservations */
.bk{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.bk:first-child{border-top:0}
.bk .n{font-weight:700;background:none;border:0;padding:0;text-align:left;cursor:pointer}
.bk .d{font-size:13px;color:var(--muted)}
.filters{display:flex;gap:6px;flex-wrap:wrap}
.filters button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 11px;font-size:13px;font-weight:600;cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.progress{height:10px;border-radius:5px;background:var(--line);overflow:hidden;display:flex}
.progress span{display:block;height:100%}

/* Carte */
#carte{height:58vh;min-height:320px;border-radius:var(--r);border:1px solid var(--line);z-index:0}
.leaflet-container{font-family:var(--f-body)}
.pin-h{background:var(--taxi);color:var(--taxi-ink);border:2px solid #111;border-radius:4px;font-weight:900;font-size:12px;display:grid;place-items:center}

/* Listes */
.list{display:grid}
.li{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);min-width:0}
.li:first-child{border-top:0}
.li .grow{flex:1;min-width:0}
.li .n{font-weight:700}
.li .d{font-size:13px;color:var(--muted);white-space:pre-line}
.li button.link{border:0;background:none;padding:0;text-align:left;cursor:pointer;flex:1;min-width:0}
.check{width:24px;height:24px;accent-color:var(--ink);flex:none}

/* Budget */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:var(--bg);border-radius:12px;padding:10px;min-width:0}
.kpi b{display:block;font-family:var(--f-display);font-stretch:75%;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.kpi small{display:block;font-size:12px;color:var(--muted)}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;font-weight:700;padding:6px 0;border-bottom:1px solid var(--line)}
td{padding:9px 0;border-bottom:1px solid var(--line)}
td.num,th.num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums;padding-left:8px}
tr.clic{cursor:pointer}
.tipgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tip{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.tip .p{font-weight:800;font-size:13px}
.tip .v{font-family:var(--f-mono);font-size:18px;font-weight:600}
.tip .t{font-size:12px;color:var(--muted)}

/* Formulaires */
.form{display:grid;gap:12px}
.field{display:grid;gap:4px;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.inp{font-size:16px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%;text-transform:none;letter-spacing:0;font-weight:500}
.inp.big{font-size:22px;font-family:var(--f-mono)}
textarea.inp{min-height:80px;resize:vertical}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.erreur{color:var(--todo);font-weight:600;font-size:14px}
.choix-icones{display:flex;gap:6px;flex-wrap:wrap}
.choix-icones button{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);font-size:18px;cursor:pointer}
.choix-icones button[aria-pressed="true"]{border-color:var(--ink);background:var(--surface)}
.resultats{display:grid;gap:4px}
.resultats button{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 10px;text-align:left;cursor:pointer;font-size:13px}

/* Onglets */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:600;background:var(--surface);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px))}
nav.tabs .in{max-width:560px;margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr)}
nav.tabs button{border:0;background:none;display:grid;justify-items:center;gap:2px;padding:6px 0;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer}
nav.tabs button svg{width:24px;height:24px}
nav.tabs button[aria-current="page"]{color:var(--ink)}
nav.tabs button[aria-current="page"]::after{content:"";width:18px;height:3px;border-radius:2px;background:var(--taxi);margin-top:1px}

/* Feuille « Y aller » et modale : jamais fermées par un clic sur le fond */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:900}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:901;background:var(--surface);border-radius:18px 18px 0 0;padding:14px 16px calc(18px + env(safe-area-inset-bottom,0px));max-width:560px;margin:0 auto;display:grid;gap:12px;max-height:92vh;overflow:auto}
.sheet h3{margin:0;font-family:var(--f-display);font-stretch:85%;font-weight:800;font-size:22px;line-height:1.1;padding-right:44px}
.addr{display:flex;gap:8px;align-items:center;background:var(--bg);border-radius:10px;padding:10px 12px}
.addr span{flex:1;min-width:0;user-select:all;font-size:14px}
.addr button{border:0;background:var(--ink);color:var(--bg);border-radius:8px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}
.x{position:absolute;right:12px;top:12px;border:0;background:var(--bg);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:1000;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:calc(100vw - 32px)}
#toast.on{opacity:1}
.hors-ligne{background:var(--warn-bg);color:var(--warn);font-size:13px;font-weight:700;padding:8px 12px;border-radius:8px}

/* Connexion */
.login{max-width:380px;margin:12vh auto 0;display:grid;gap:14px}

/* Raccourcis de l'onglet Plus */
.raccourcis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.raccourci{display:grid;justify-items:center;gap:4px;padding:12px 6px;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-weight:700;font-size:13px;cursor:pointer}
.raccourci span{font-size:22px;line-height:1}
.retour{justify-self:start;border:0;background:none;font-weight:700;color:var(--muted);padding:0;cursor:pointer;font-size:15px}
.cases{display:grid;gap:8px;margin-top:4px}
.qr{display:grid;place-items:center;background:#fff;border-radius:12px;padding:12px}
.qr img{width:200px;height:200px;image-rendering:pixelated}
.codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border-radius:10px;padding:12px;font-size:16px;text-align:center;user-select:all}
button.link[disabled]{color:inherit}

/* Aperçu des documents, dans l'appli (comme Project-Manager) : fenêtre sur fond assombri,
   plein écran sur téléphone. Les pages PDF sont des canvas sur fond blanc : un QR code s'y scanne. */
/* Grille de taille fixe (l'écran) : sans elle, la fenêtre prenait la hauteur des pages du PDF et sortait de l'écran. */
#visionneuse{position:fixed;inset:0;z-index:950;background:rgba(5,6,8,.72);display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;padding:28px}
#visionneuse[hidden]{display:none}
.apercu-carte{width:min(100%,1180px);height:min(100%,900px);min-height:0;display:flex;flex-direction:column;gap:12px;padding:14px 16px 16px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.apercu-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0}
.apercu-nom{min-width:0;display:grid;gap:2px}
.apercu-nom b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apercu-nom span{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.apercu-actions{display:flex;align-items:center;gap:6px;flex:none}
.apercu-actions .icon-btn{font-size:20px;line-height:1;width:36px;height:36px}
.apercu-pos{font-size:12px;color:var(--muted);white-space:nowrap;padding:0 4px}
.ap-btn{min-height:36px;width:auto;padding:0 12px;font-size:13px}
.apercu-corps{flex:1;min-height:0;border-radius:12px;overflow:auto;background:var(--bg);border:1px solid var(--line);display:grid;place-items:center;-webkit-overflow-scrolling:touch}
.apercu-corps img{max-width:100%;max-height:100%;object-fit:contain;display:block;background:#fff}
.apercu-pages{display:grid;justify-items:center;gap:12px;padding:12px;align-self:start;min-width:min-content}
.apercu-pages canvas{display:block;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.25);border-radius:2px;max-width:none}
.apercu-vide{color:var(--muted);font-size:14px;padding:20px;text-align:center}
@media (max-width:700px){
  #visionneuse{padding:0}
  .apercu-carte{width:100%;height:100%;border-radius:0;border:0;padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(10px + env(safe-area-inset-bottom,0px))}
  .apercu-tete{flex-wrap:wrap}
  .apercu-actions{width:100%;justify-content:flex-end}
  .apercu-corps{border-radius:8px}
  .apercu-pages{padding:8px;gap:8px}
}

/* ---------- Colonnes : empilées sur téléphone, côte à côte sur grand écran ---------- */
.cols, .col, .grille, .blocs, .bloc { display:grid; gap:16px; min-width:0; align-content:start }
.bureau-seul { display:none }
#carte-jour { height:320px; border-radius:10px; z-index:0 }
.pin-num { background:var(--pin, #111); color:var(--pin-encre, #fff); border:2px solid #111; border-radius:50%; font-weight:800; font-size:12px; display:grid; place-items:center }
.go-row.seul { grid-template-columns:1fr }

/* Listes déroulantes : même allure que les champs, partout (Safari les dessinait à sa façon) */
select.inp { -webkit-appearance:none; appearance:none; padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238A919B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; min-height:46px }

@media (hover:hover) {
  .go:hover { filter:brightness(1.08) } .go.alt:hover { background:var(--bg) }
  .chip:hover, .filters button:hover, .raccourci:hover, .icon-btn:hover { border-color:var(--muted) }
  .li button.link:hover .n, .bk button.n:hover, .it .ttl:hover { text-decoration:underline; text-underline-offset:3px }
}

/* ---------- Grand écran (PC, tablette paysage) ---------- */
@media (min-width: 960px) {
  :root { --rail: 232px }
  .app { max-width:none; padding-bottom:0 }
  .sign { padding-left:24px; padding-right:24px }
  .sign::before { max-width:none }
  main { margin-left:var(--rail); max-width:1240px; padding:28px 32px 48px; gap:20px }

  /* Les onglets deviennent un menu latéral */
  nav.tabs { top:var(--haut-bandeau, 76px); bottom:0; right:auto; width:var(--rail); border-top:0; border-right:1px solid var(--line); padding:16px 12px }
  nav.tabs .in { display:flex !important; flex-direction:column; gap:4px; max-width:none }
  nav.tabs button { display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:10px; font-size:15px; justify-content:flex-start; position:relative }
  nav.tabs button svg { width:22px; height:22px; flex:none }
  nav.tabs button:hover { background:var(--bg); color:var(--ink) }
  nav.tabs button[aria-current="page"] { background:var(--bg) }
  nav.tabs button[aria-current="page"]::after { position:absolute; left:0; top:10px; bottom:10px; width:3px; height:auto; margin:0 }

  .cols { grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:24px }
  .bureau-seul { display:grid }
  .cols-carte { grid-template-columns:minmax(0, 1.7fr) minmax(300px, 1fr) }
  .cols-carte #carte { height:calc(100vh - 290px); min-height:460px }
  .liste-lieux { max-height:calc(100vh - 230px); overflow:auto }
  .grille { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px }
  .blocs { display:block; columns:2; column-gap:24px }
  .blocs > .bloc { break-inside:avoid; margin-bottom:24px }
  .raccourcis { display:none }
  .days { flex-wrap:wrap; overflow:visible }
  .h2 { font-size:28px }

  /* Sous-pages (compte, administration) et connexion : largeur de lecture */
  main:has(> .retour) { max-width:760px }
  .login { margin-top:10vh }

  #toast { bottom:28px; left:calc(50% + var(--rail) / 2) }
}
@media (min-width: 1400px) {
  .grille { grid-template-columns:repeat(3, minmax(0, 1fr)) }
}
@media (min-width: 960px) {
  /* Connexion ou aucun voyage : pas de menu latéral, contenu centré */
  body:has(#onglets[hidden]) main { margin-left:auto; margin-right:auto; max-width:560px }
}

/* Dès qu'il y a la place (petite fenêtre de PC, tablette) : fenêtres centrées, plus de tiroir collé en bas */
@media (min-width: 600px) {
  .sheet { top:50%; bottom:auto; left:50%; right:auto; transform:translate(-50%, -50%); width:min(560px, calc(100vw - 48px)); max-height:86vh; border-radius:18px; padding:22px 24px 24px; box-shadow:0 24px 60px rgba(0,0,0,.35) }
}

/* ---------- Utilisateur connecté (même logique que Team-Manager) ---------- */
/* Téléphone : deux boutons ronds dans le bandeau, sans le nom (la place manque). */
.compte-haut { display:flex; gap:6px; flex:none }
.compte-haut[hidden] { display:none }
.btn-rond { width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:var(--sign-fg); display:grid; place-items:center; cursor:pointer; padding:0 }
.btn-rond svg { width:18px; height:18px }
.btn-rond.deco { color:#ff8a95; border-color:rgba(255,90,106,.4) }
@media (hover:hover) { .btn-rond:hover { background:rgba(255,255,255,.14) } .btn-rond.deco:hover { background:rgba(255,90,106,.16) } }
.compte-zone { display:none }
@media (max-width: 380px) { .clocks { gap:8px } .clocks b { font-size:13px } .sign-row { gap:8px } }

@media (min-width: 960px) {
  .compte-haut { display:none !important }
  nav.tabs { display:flex; flex-direction:column }
  /* Bas du menu latéral : « Connecté en tant que », puis Mon compte / Déconnexion */
  .compte-zone { display:grid; gap:10px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line) }
  .compte-zone[hidden] { display:none }
  .compte-qui { display:grid; gap:2px; padding:0 4px; font-size:11px; color:var(--muted); line-height:1.3; min-width:0 }
  .compte-qui span { font-family:var(--f-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em }
  .compte-qui strong { color:var(--ink); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .compte-qui small { font-size:12px }
  .compte-actions { display:grid; gap:6px }
  nav.tabs .in { margin:0; width:100% }
  nav.tabs .compte-actions button { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:9px 14px; border-radius:10px; border:1px solid var(--line); background:transparent; font-size:13px; font-weight:700; color:var(--ink); min-width:0 }
  nav.tabs .compte-actions button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  nav.tabs .compte-actions svg { width:16px; height:16px; flex:none }
  nav.tabs .compte-actions button.deco { color:var(--todo); border-color:color-mix(in srgb, var(--todo) 40%, transparent) }
  nav.tabs .compte-actions button:hover { background:var(--bg) }
  nav.tabs .compte-actions button.deco:hover { background:var(--todo-bg) }
  nav.tabs .compte-actions button::after { display:none }
}

/* Bandeau étroit (téléphone avec les boutons de compte) : le sous-titre tient sur une ligne */
.sign .sub { white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
@media (max-width: 440px) { .sub-voy { display:none } }