/* TOPCHRONO — shell layout: sidebar, header, main, footer, assistant, mobile tab bar. Responsive with media queries. */
.skip{position:fixed;left:var(--space-4);top:-100px;z-index:100;padding:var(--space-3) var(--space-4);background:var(--surface);color:var(--ink);border:2px solid var(--focus);border-radius:var(--radius-md);font-weight:700}
.skip:focus{top:var(--space-3)}

.app{display:flex;align-items:stretch;min-height:calc(var(--vh) * 100)}

/* Sidebar */
.sidebar{position:sticky;top:0;align-self:flex-start;height:calc(var(--vh) * 100);overflow-y:auto;flex:0 0 236px;width:236px;background:var(--surface);border-right:1px solid var(--line);padding:var(--space-8) var(--space-5) var(--space-6);display:flex;flex-direction:column;gap:var(--space-6)}
.sidebar-brand{display:flex;flex-direction:column;gap:var(--space-1);padding-left:var(--space-1)}
.sidebar-brand .logo-sym{display:none}
/* Logo à 234 px pour que son slogan dessiné reste le plus grand possible : le fichier garde une marge
   transparente de 4,9 % à gauche, qui déborde ici sur le rembourrage de la barre. Le dessin est centré
   dans les 236 px de la barre, sans la dépasser. */
.sidebar-brand .logo-full{margin-left:-24px}
.sidebar-brand .logo-full img{max-width:none}
.sidebar nav{display:grid;gap:var(--space-2)}
.sidebar-bottom{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-5)}
.profile{display:flex;gap:var(--space-3);align-items:center;border-top:1px solid var(--line);padding:var(--space-5) var(--space-1) 0;font-size:var(--text-sm)}
.profile>div{flex:1;min-width:0}
.profile small{display:block;font-size:var(--text-xs);overflow-wrap:anywhere}
.profile-link{color:inherit;font-weight:700;text-decoration:none}
.profile-link:hover,.profile-link:focus-visible{text-decoration:underline}
body.is-public .sidebar{display:none}

/* Main column */
.shell{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.topbar{min-height:72px;border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-10);background:var(--surface)}
.topbar-left,.topbar-right{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.topbar-left{font-size:var(--text-sm);gap:var(--space-3)}
.topbar-left .i{color:var(--green-ink)}
.topbar .logo{display:none}
body.is-public .topbar .logo{display:inline-flex}
body.is-public .topbar .location{display:none}
.ai-toggle{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;min-width:44px;padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:700;color:var(--green-ink)}
.ai-toggle[aria-expanded="true"]{background:var(--soft)}
.ai-toggle:hover{background:var(--soft)}
.account-actions{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.account-actions .text-button{font-size:var(--text-sm);padding:0 var(--space-3)}
main{width:100%;max-width:1180px;margin:0 auto;padding:36px var(--space-10) var(--space-10);display:flex;flex-direction:column;gap:var(--space-6);flex:1 0 auto}
main:focus{outline:none}
.page-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--space-4)}
.page-head .sub{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--muted)}
.clock{text-align:right}
.clock-time{display:flex;align-items:center;gap:var(--space-2);justify-content:flex-end;font-size:var(--text-lg);font-weight:700;font-variant-numeric:tabular-nums}
.clock small{font-size:var(--text-xs);letter-spacing:1px}
.site-footer{margin-top:var(--space-4);padding-top:var(--space-5);border-top:1px solid var(--line);font-size:var(--text-xs);color:var(--muted)}
.site-footer b{color:var(--ink)}
.footer-brand{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1)}
.footer-brand .logo{min-height:0}
.site-footer .footer-slogan{display:block;margin-top:var(--space-1);font-size:8.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;white-space:nowrap;color:var(--green-ink)}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.footer-mark{order:3;flex-basis:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:var(--space-1) var(--space-2);margin-top:var(--space-1);font-size:10.5px;text-align:center}
.footer-mark .version{font-size:inherit}
.footer-mark .version::before{content:"·";margin-right:var(--space-2)}
/* The links: two by two on the right, the first row on the line of the name (27 px, the logotype's height at 120 px),
   the second on the slogan's (a mouse needs less than a finger). */
.site-footer .footer-links{display:grid;grid-template-columns:auto auto;grid-template-rows:27px 21px;justify-content:end;justify-items:start;gap:0 var(--space-4)}
.site-footer .footer-links .text-button{min-height:0;height:100%}

/* Assistant */
.assistant{flex:0 0 340px;width:340px;position:sticky;top:0;align-self:flex-start;height:calc(var(--vh) * 100);background:var(--surface);border-left:1px solid var(--line);display:flex;flex-direction:column;z-index:40}
.assistant-head{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:1px solid var(--line)}
.assistant-head>div{flex:1;min-width:0}
.assistant-head strong{display:block;font-size:var(--text-sm)}
.assistant-head small{font-size:var(--text-xs)}
.ai-avatar{width:40px;height:40px;border-radius:var(--radius-round);background:var(--green);color:var(--accent);display:grid;place-items:center;flex:0 0 auto}
.assistant .grabber{display:none}
.assistant .badge-row{padding:var(--space-3) var(--space-5) 0}
.ai-log{flex:1 1 auto;min-height:120px;overflow-y:auto;padding:var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-3)}
.bubble{max-width:88%;padding:var(--space-3) 14px;font-size:var(--text-sm);line-height:1.5;overflow-wrap:anywhere}
.bubble.ai{align-self:flex-start;background:var(--soft);color:var(--ink);border-radius:4px 14px 14px 14px}
.bubble.me{align-self:flex-end;background:var(--action);color:var(--on-action);border-radius:14px 4px 14px 14px}
.bubble .tagline-ai{display:block;margin-top:var(--space-1);font-size:var(--text-xs);color:var(--ink);opacity:.8}
.ai-suggest{padding:0 var(--space-5) var(--space-3)}
.ai-suggest .eyebrow{margin-bottom:var(--space-2)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{text-align:left;padding:var(--space-2) var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);font-size:var(--text-xs);min-height:44px;background:var(--surface);color:var(--green-ink);font-weight:700}
.chip:hover{background:var(--soft)}
.ai-notice{margin:0;padding:var(--space-2) var(--space-5);font-size:var(--text-xs);line-height:1.4;color:var(--ink);opacity:.85;border-top:1px solid var(--line)}
.ai-proposal{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3);padding:var(--space-3);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md,10px)}
.ai-proposal ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-1)}
.ai-proposal li{display:flex;gap:var(--space-2);align-items:flex-start}
.ai-proposal .primary{align-self:flex-start;min-height:44px}
.ai-form{display:flex;gap:var(--space-2);padding:var(--space-4) var(--space-5) var(--space-5);border-top:1px solid var(--line)}
.ai-form .input{min-height:44px}
.ai-form .primary{min-width:44px;min-height:44px;padding:0}
/* The microphone of the assistant: beside the field, pressed while it listens. */
.ai-form .ai-mic{flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--radius-md)}
.ai-form .ai-mic.on{background:var(--accent);color:var(--green);border-color:transparent;animation:ai-listen 1.4s ease-in-out infinite}
@keyframes ai-listen{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent)}}
@media (prefers-reduced-motion:reduce){.ai-form .ai-mic.on{animation:none}}
.ai-voice{margin:calc(-1 * var(--space-3)) var(--space-5) var(--space-4);font-size:var(--text-xs);color:var(--muted)}
.backdrop{position:fixed;inset:0;z-index:35;background:var(--backdrop);border:0}

/* Mobile tab bar */
.tabbar{display:none}

/* ----- Responsive ----- */
@media (max-width:1199px){
  .assistant{position:fixed;top:0;right:0;bottom:0;height:auto;width:min(400px,100%);box-shadow:var(--shadow-dialog)}
}
@media (min-width:1200px){ .backdrop{display:none!important} }
/* Large screens: the whole page grows together, like the browser's own zoom, and the content may be wider. A 27-inch
   screen showed small text in a narrow column with empty sides (13 November). Media queries keep reading the real
   screen width; --vh brings viewport heights back to the screen's. */
@media (min-width:2000px){:root{--vh:calc(1vh / 1.15)} html{zoom:1.15} main{max-width:1320px}}
@media (min-width:2400px){:root{--vh:calc(1vh / 1.25)} html{zoom:1.25}}
@media (min-width:3200px){:root{--vh:calc(1vh / 1.5)} html{zoom:1.5}}
@media (max-width:1100px){
  .sidebar{flex-basis:84px;width:84px;padding:var(--space-6) var(--space-2)}
  .sidebar-brand{align-items:center;padding:0}
  .sidebar-brand .logo-full{display:none}
  .sidebar-brand .logo-sym{display:inline-flex}
  .sidebar .nav{justify-content:center;padding:var(--space-3)}
  .sidebar .nav .label,.sidebar .nav .badge{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .sidebar .nav .i{width:22px;height:22px}
  .quiet-card,.profile>div{display:none}
  .profile{justify-content:center;flex-direction:column;padding-inline:0}
  .topbar{padding-inline:var(--space-6)}
  main{padding:var(--space-6)}
}
@media (max-width:760px){
  .sidebar{display:none}
  .topbar{min-height:56px;padding:6px var(--space-3)}
  .topbar .logo{display:inline-flex}
  .topbar .location,.topbar .demo,.topbar .account-actions{display:none}
  .topbar .logo img{width:124px}
  .ai-toggle{padding:0}
  .ai-toggle .label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  main{padding:var(--space-5) var(--space-4) calc(var(--space-6) + 76px)}
  body.is-public main{padding-bottom:var(--space-6)}
  .clock{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;border-top:1px solid var(--line);background:var(--surface);padding:var(--space-1) var(--space-1) max(var(--space-3),env(safe-area-inset-bottom))}
  body.is-public .tabbar{display:none}
  .tab{flex:1 1 0;min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;line-height:1.2;color:var(--muted);text-decoration:none;font-weight:500;text-align:center}
  .tab::before{content:"";width:28px;height:3px;border-radius:2px;background:transparent;margin-bottom:3px}
  .tab[aria-current="page"]{color:var(--green-ink);font-weight:700}
  .tab[aria-current="page"]::before{background:var(--green-ink)}
  .tab .i{width:21px;height:21px}
  .assistant{top:12%;left:0;right:0;width:100%;border-left:0;border-radius:18px 18px 0 0}
  .assistant .grabber{display:block;align-self:center;width:40px;height:4px;border-radius:2px;background:var(--line);margin-top:var(--space-2)}
  .footer-inner{flex-direction:column;align-items:flex-start}
  /* One line on a phone too: the text shrinks with the screen (about 31 px of width per pixel of type), 9.5 px at the least. */
  .footer-mark{flex-basis:auto;align-self:stretch;font-size:clamp(9.5px,calc((100vw - 32px) / 32),10.5px)}
  .site-footer .footer-links{justify-content:start;grid-template-rows:none}
  .site-footer .footer-links .text-button{min-height:44px}
  .footer-mark>*{white-space:nowrap}
}
body:not(.is-public) .account-actions{display:none}
.topbar .demo{white-space:nowrap}
.banner{margin:var(--space-3) var(--space-10) 0;padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--alert-bg);color:var(--alert-ink);font-size:var(--text-sm)}
.banner.leave{background:var(--soft);color:var(--ink);border:1px solid var(--recommended-line)}
/* Announcements of the back-office; an incident or a maintenance in the critical colours. */
.banner.news{display:grid;gap:var(--space-1)}
.banner.news[hidden]{display:none}
.banner.news.critical{background:var(--critical-bg);color:var(--critical-ink)}
@media (max-width:760px){.banner{margin:var(--space-3) var(--space-4) 0}}