:root{

  --fond:#F5F7F8;
  --fond-2:#FFFFFF;
  --fond-3:#FFFFFF;
  --surface:#FFFFFF;
  --surface-haute:#FFFFFF;
  --voile-fond:rgba(15,23,42,.32);
  --verre:rgba(15,23,42,.028);
  --verre-fort:rgba(15,23,42,.055);

  --filet:rgba(16,24,40,.10);
  --filet-fort:rgba(16,24,40,.16);
  --trait:var(--filet);
  --trait-neutre:var(--filet);
  --trait-fort:rgba(31,111,139,.45);
  --trait-or:rgba(31,111,139,.28);
  --anneau:0 0 0 1px var(--filet);
  --anneau-fort:0 0 0 1px var(--filet-fort);

  --texte:#0F172A;
  --texte-2:#51607A;
  --texte-3:#8A97AD;

  --marine:#15202B;
  --marine-2:#1E2C38;
  --or:#1F6F8B;
  --champagne:#1F6F8B;
  --or-pale:#134B5E;
  --or-vif:#5CC6DE;
  --or-lueur:rgba(92,198,222,.22);

  --ok:#047857;   --ok-fond:#ECFDF5;   --ok-filet:rgba(4,120,87,.22);
  --attente:#B45309; --attente-fond:#FFFBEB; --attente-filet:rgba(180,83,9,.22);
  --alerte:#B91C1C; --alerte-fond:#FEF2F2; --alerte-filet:rgba(185,28,28,.2);
  --info:#1D4ED8;  --info-fond:#EFF6FF;  --info-filet:rgba(29,78,216,.2);

  --ombre:none;
  --ombre-haute:0 12px 32px -8px rgba(15,23,42,.16), 0 4px 10px -4px rgba(15,23,42,.1);
  --lueur:0 0 0 1px var(--trait-fort);
  --relief:none;

  --titre:"Manrope","Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --texte-police:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Consolas,monospace;

  --r-s:6px; --r-m:8px; --r-l:12px; --r-xl:16px;

  --rail:72px;
  --barre:52px;
  --onglets:58px;
  --pas:clamp(12px, 1.6vw, 20px);

  --t-rapide:.12s; --t-moyen:.2s; --t-lent:.32s;
  --courbe:cubic-bezier(.2,.7,.3,1);
  --ressort:cubic-bezier(.34,1.3,.5,1);
  color-scheme:light;
}

[data-ambiance="sombre"]{
  --fond:#0C0D10;
  --fond-2:#141619;
  --fond-3:#191C21;
  --surface:#141619;
  --surface-haute:#191C21;
  --voile-fond:rgba(0,0,0,.62);
  --verre:rgba(255,255,255,.03);
  --verre-fort:rgba(255,255,255,.07);
  --filet:rgba(255,255,255,.09);
  --filet-fort:rgba(255,255,255,.16);
  --trait-fort:rgba(224,169,76,.4);
  --trait-or:rgba(92,198,222,.26);
  --texte:#EAECEF;
  --texte-2:#9BA3AF;
  --texte-3:#6B7280;
  --marine:#090C16;
  --marine-2:#141B30;
  --or:#5CC6DE; --champagne:#5CC6DE; --or-pale:#BDEBF5; --or-vif:#5CC6DE;
  --or-lueur:rgba(92,198,222,.14);
  --ok:#34D399;   --ok-fond:rgba(52,211,153,.1);   --ok-filet:rgba(52,211,153,.24);
  --attente:#FBBF24; --attente-fond:rgba(251,191,36,.1); --attente-filet:rgba(251,191,36,.24);
  --alerte:#F87171; --alerte-fond:rgba(248,113,113,.1); --alerte-filet:rgba(248,113,113,.24);
  --info:#60A5FA;  --info-fond:rgba(96,165,250,.1);  --info-filet:rgba(96,165,250,.24);
  --ombre-haute:0 16px 40px -10px rgba(0,0,0,.7), 0 4px 12px -4px rgba(0,0,0,.5);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font:14px/1.5 var(--texte-police);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"cv05","ss03","tnum" 0;
  min-height:100dvh; overflow-x:hidden;
}
[hidden]{display:none !important}
h1,h2,h3,h4{font-family:var(--titre); margin:0; text-wrap:balance; color:var(--texte)}
h1{font:800 clamp(1.35rem,2.4vw,1.85rem)/1.14 var(--titre); letter-spacing:-.032em}
h2{font:750 clamp(1.05rem,1.6vw,1.3rem)/1.2 var(--titre); letter-spacing:-.024em}
h3{font:700 .95rem/1.3 var(--titre); letter-spacing:-.014em}
h4{font:700 .82rem/1.3 var(--titre); letter-spacing:-.01em}
p{margin:0}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer; border:none; background:none; padding:0}
img,svg{display:block; max-width:100%}
ul,ol{margin:0; padding:0; list-style:none}
:focus-visible{outline:2px solid var(--or); outline-offset:2px; border-radius:4px}
::selection{background:rgba(183,121,31,.2)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--filet-fort); border-radius:99px; border:3px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:var(--texte-3); background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:.92em; letter-spacing:-.01em}
.muet{color:var(--texte-2)} .muet-2{color:var(--texte-3)}
.or{color:var(--or)}
.petit{font-size:12.5px} .tres-petit{font-size:11.5px; line-height:1.45}
.gras{font-weight:600}

.etiquette{font:600 10.5px/1.3 var(--texte-police); letter-spacing:.08em; text-transform:uppercase; color:var(--texte-3)}
.etiquette.or{color:var(--or)}

.ciel{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:var(--fond);
  background-image:
    linear-gradient(var(--filet) 1px, transparent 1px),
    linear-gradient(90deg, var(--filet) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.5;
}
[data-ambiance="sombre"] .ciel{opacity:.65}

.appli{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); min-height:100dvh}
.appli.sans-rail{grid-template-columns:minmax(0,1fr)}
.appli > .colonne{min-width:0; display:flex; flex-direction:column}
@media (max-width:860px){ .appli{grid-template-columns:minmax(0,1fr)} }

.rail{
  position:sticky; top:0; height:100dvh; padding:12px 8px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--marine); color:#E7ECF3;
}
@media (max-width:860px){ .rail{display:none} }
.rail .logo{margin:6px 0 16px; opacity:.95}
.rail .logo svg{width:38px; height:24px}
.rail nav{display:flex; flex-direction:column; gap:2px; width:100%}
.rail .lien{
  width:100%; padding:9px 4px 7px; border-radius:var(--r-m); text-decoration:none;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  color:rgba(231,236,243,.62); font:600 10px/1.2 var(--texte-police); letter-spacing:.005em;
  position:relative; transition:background var(--t-rapide), color var(--t-rapide);
}
.rail .lien svg{width:19px; height:19px}
.rail .lien:hover{background:rgba(255,255,255,.07); color:#fff}
.rail .lien[aria-current="page"]{background:rgba(92,198,222,.12); color:var(--or-vif)}
.rail .lien[aria-current="page"]::before{
  content:""; position:absolute; left:-8px; top:26%; height:48%; width:2px; border-radius:2px; background:var(--or-vif);
}
.rail .lien .compteur{
  position:absolute; top:3px; right:9px; min-width:16px; height:16px; padding:0 4px; border-radius:99px;
  background:var(--alerte); color:#fff; font:700 10px/1 var(--texte-police); display:grid; place-items:center;
  box-shadow:0 0 0 2px var(--marine);
}
[data-ambiance="sombre"] .rail{background:#08090B; box-shadow:1px 0 0 var(--filet)}
.rail .bas{margin-top:auto; width:100%; display:flex; flex-direction:column; gap:2px}

.barre{
  position:sticky; top:0; z-index:40; height:var(--barre); min-width:0; flex:none;
  display:flex; align-items:center; gap:10px; padding:0 var(--pas);
  background:var(--fond-2); box-shadow:0 1px 0 var(--filet);
}
.barre .titre{display:flex; flex-direction:column; gap:0; min-width:0; flex:1 1 auto}
.barre .titre h1{font:700 15px/1.25 var(--titre); letter-spacing:-.016em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barre .titre .sous{font-size:11.5px; color:var(--texte-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.barre .droite{margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 1 auto; min-width:0}
.barre .recherche{
  display:flex; align-items:center; gap:7px; height:32px; padding:0 10px; width:220px; min-width:0;
  border-radius:var(--r-m); background:var(--verre); box-shadow:var(--anneau); color:var(--texte-3);
  transition:box-shadow var(--t-rapide);
}
.barre .recherche:focus-within{box-shadow:0 0 0 1px var(--or), 0 0 0 3px var(--or-lueur)}
.barre .recherche svg{width:15px;height:15px;flex:none}
.barre .recherche input{background:none; border:none; outline:none; width:100%; min-width:0; color:var(--texte); font-size:13px}
.barre .recherche input::placeholder{color:var(--texte-3)}
@media (max-width:1100px){ .barre .recherche{width:150px} }
@media (max-width:860px){ .barre .recherche, .barre .langues{display:none} }
#recherche-mobile{display:none}

@media (max-width:860px){ .barre .droite{flex-wrap:nowrap} #outils-barre{display:none} .barre .titre h1{font-size:14px} }
@media (max-width:860px){ #recherche-mobile{display:inline-flex} }
.onglets .lien.plus{color:var(--texte-3)}

.contenu{padding:var(--pas); padding-bottom:calc(var(--pas) + 20px); min-width:0; overflow-x:clip; flex:1}
@media (max-width:860px){ .contenu{padding-bottom:calc(var(--onglets) + 24px)} }
.contenu > * + *{margin-top:var(--pas)}
.contenu > *{animation:apparait var(--t-lent) var(--courbe) both}
.contenu > *:nth-child(2){animation-delay:40ms} .contenu > *:nth-child(3){animation-delay:80ms} .contenu > *:nth-child(4){animation-delay:120ms}

.onglets{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:40;
  height:calc(var(--onglets) + env(safe-area-inset-bottom));
  padding:4px 4px calc(4px + env(safe-area-inset-bottom));
  background:var(--fond-2); box-shadow:0 -1px 0 var(--filet);
  grid-auto-flow:column; grid-auto-columns:1fr; gap:2px;
}
@media (max-width:860px){ .onglets{display:grid} }
.onglets .lien{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none;
  border-radius:var(--r-m); color:var(--texte-3); font:600 10px/1.2 var(--texte-police); position:relative; min-width:0; padding:4px 2px;
}
.onglets .lien span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.onglets .lien svg{width:20px;height:20px}
.onglets .lien[aria-current="page"]{color:var(--or); background:var(--verre)}
.onglets .lien .compteur{position:absolute; top:1px; left:calc(50% + 5px); min-width:15px; height:15px; border-radius:99px;
  background:var(--alerte); color:#fff; font:700 9.5px/1 var(--texte-police); display:grid; place-items:center; padding:0 4px}

.avatar{
  width:30px; height:30px; border-radius:99px; display:grid; place-items:center; flex:none; position:relative;
  font:700 11px/1 var(--texte-police); letter-spacing:.01em;
  background:var(--marine); color:#fff;
}
[data-ambiance="sombre"] .avatar{background:#2A2E35; color:#E7ECF3}
.avatar.grand{width:42px;height:42px;font-size:14px}
.avatar.neutre{background:var(--verre-fort); color:var(--texte-2); box-shadow:var(--anneau)}
.avatar.en-ligne::after{content:""; position:absolute; width:8px; height:8px; border-radius:99px; background:var(--ok); right:-1px; bottom:-1px; box-shadow:0 0 0 2px var(--fond-2)}

.grille{display:grid; gap:var(--pas); min-width:0}
.grille > *{min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-2-1{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.g-1-2{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.g-3-2{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
@media (max-width:1180px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:960px){ .g3,.g-2-1,.g-1-2,.g-3-2{grid-template-columns:minmax(0,1fr)} }
@media (max-width:640px){
  .g2{grid-template-columns:minmax(0,1fr)}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
  .g3:has(> .indicateur){grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}
}
.pile{display:flex; flex-direction:column; gap:10px; min-width:0}
.rangee{display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0}
.rangee.entre{justify-content:space-between}
.pousse{margin-left:auto}

.panneau{
  background:var(--surface); border-radius:var(--r-l); box-shadow:var(--anneau);
  padding:18px 20px; position:relative; min-width:0;
}
@media (max-width:640px){ .panneau{padding:14px} }
.panneau.serre{padding:12px 14px}
.panneau.plein{padding:0; overflow:hidden}
.panneau.or{box-shadow:0 0 0 1px var(--trait-fort)}
.panneau > .entete{display:flex; align-items:flex-start; gap:10px; margin-bottom:14px; min-width:0}
.panneau > .entete h2,.panneau > .entete h3{flex:1; min-width:0}
.panneau > .entete .actions{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap; justify-content:flex-end}

.indicateur{
  padding:14px 16px; border-radius:var(--r-l); min-width:0;
  background:var(--surface); box-shadow:var(--anneau);
  display:flex; flex-direction:column; gap:4px; position:relative; overflow:hidden;
}
.indicateur > .etiquette{order:-1}
.indicateur .valeur{
  font:800 clamp(1.5rem,2.2vw,1.95rem)/1.05 var(--titre); letter-spacing:-.04em;
  font-variant-numeric:tabular-nums; color:var(--texte);
}
.indicateur .valeur small{font:500 .5em/1 var(--texte-police); color:var(--texte-3); margin-left:3px; letter-spacing:0}
.indicateur .tendance{display:inline-flex; align-items:center; gap:3px; font:600 12px/1.3 var(--texte-police)}
.indicateur .tendance.haut{color:var(--ok)} .indicateur .tendance.bas{color:var(--alerte)}
.indicateur .tendance svg{width:13px;height:13px}
.indicateur .etincelle{position:absolute; right:12px; top:12px; width:80px; height:26px; opacity:.85}
@media (max-width:640px){
  .indicateur{padding:11px 12px}
  .indicateur .valeur{font-size:1.32rem}
  .indicateur .etincelle{width:54px; height:20px; right:8px; top:8px}
  .indicateur .etiquette{font-size:9.5px; letter-spacing:.06em}
}

.bouton{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex-direction:row;
  height:34px; padding:0 13px; border-radius:var(--r-m);
  font:600 13px/1 var(--texte-police); letter-spacing:-.005em; text-decoration:none;
  white-space:nowrap; user-select:none; border:none;
  transition:background var(--t-rapide), box-shadow var(--t-rapide), color var(--t-rapide), transform var(--t-rapide);
}
.bouton svg{width:15px;height:15px;flex:none}
.bouton:active{transform:translateY(.5px)}

.bouton.or{background:var(--marine); color:#fff}
.bouton.or:hover{background:var(--marine-2)}
[data-ambiance="sombre"] .bouton.or{background:var(--or); color:#1A1206}
[data-ambiance="sombre"] .bouton.or:hover{filter:brightness(1.08)}
.bouton.fil{background:transparent; box-shadow:var(--anneau-fort); color:var(--texte)}
.bouton.fil:hover{background:var(--verre)}
.bouton.doux{background:var(--verre-fort); color:var(--texte)}
.bouton.doux:hover{background:var(--filet)}
.bouton.ok{background:var(--ok); color:#fff}
.bouton.alerte{background:transparent; color:var(--alerte); box-shadow:0 0 0 1px var(--alerte-filet)}
.bouton.alerte:hover{background:var(--alerte-fond)}
.bouton.petit{height:28px; padding:0 10px; font-size:12.5px; border-radius:var(--r-s)}
.bouton.grand{height:42px; padding:0 20px; font-size:14px; border-radius:var(--r-l)}
.bouton.large{width:100%}
.bouton.icone{width:34px; padding:0}
.bouton.icone.petit{width:28px}
.bouton[disabled]{opacity:.4; pointer-events:none}

.badge{
  display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px; border-radius:var(--r-s);
  font:600 11px/1 var(--texte-police); letter-spacing:.01em; white-space:nowrap; text-transform:none;
  background:var(--verre-fort); color:var(--texte-2);
}
.badge::before{content:""; width:5px; height:5px; border-radius:99px; background:currentColor; flex:none}
.badge.ok{background:var(--ok-fond); color:var(--ok)}
.badge.attente{background:var(--attente-fond); color:var(--attente)}
.badge.alerte{background:var(--alerte-fond); color:var(--alerte)}
.badge.info{background:var(--info-fond); color:var(--info)}
.badge.or{background:var(--or-lueur); color:var(--or)}
.badge.vif::before{animation:pouls 1.8s ease-in-out infinite}
.badge.sans-point::before{display:none}
@keyframes pouls{50%{opacity:.3}}

.puce{
  display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:99px; max-width:100%;
  font:500 12px/1 var(--texte-police); background:var(--verre-fort); color:var(--texte-2);
}
.puce > span, .puce > b{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.puce.or{color:var(--or); background:var(--or-lueur)}
.puce svg{width:13px;height:13px;flex:none}

.plaque{
  display:inline-flex; align-items:center; height:24px; padding:0 8px 0 0; border-radius:4px; overflow:hidden; flex:none;
  font:700 12px/1 var(--mono); letter-spacing:.06em; color:#0F172A; background:#F2F0E9;
  box-shadow:inset 0 0 0 1px rgba(16,24,40,.35);
}
.plaque::before{content:"F"; display:grid; place-items:center; width:15px; height:100%; margin-right:7px;
  background:#1B48A8; color:#fff; font:700 8px/1 var(--texte-police); letter-spacing:0}

.jauge{height:5px; border-radius:99px; background:var(--verre-fort); overflow:hidden}
.jauge > i{display:block; height:100%; border-radius:99px; background:var(--or); transition:width var(--t-lent) var(--courbe)}
.jauge.fine{height:3px}
.jauge > i.ok{background:var(--ok)} .jauge > i.alerte{background:var(--alerte)} .jauge > i.attente{background:var(--attente)}

.anneau{position:relative; width:96px; height:96px; display:grid; place-items:center; flex:none}
.anneau svg{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg)}
.anneau circle{fill:none; stroke-width:7; stroke-linecap:round}
.anneau .fond{stroke:var(--verre-fort)}
.anneau .part{stroke:var(--or); transition:stroke-dashoffset var(--t-lent) var(--courbe)}
.anneau .centre{text-align:center; z-index:1}
.anneau .centre b{display:block; font:800 1.28rem/1 var(--titre); letter-spacing:-.035em; font-variant-numeric:tabular-nums}
.anneau .centre small{font:600 9.5px/1.3 var(--texte-police); color:var(--texte-3); letter-spacing:.07em; text-transform:uppercase}

.chrono{display:flex; flex-direction:column; min-width:0}
.chrono .etape{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto; gap:0 10px; align-items:start; position:relative;
  padding:8px 8px 8px 2px; border-radius:var(--r-m); min-width:0; background:transparent;
  transition:background var(--t-rapide);
}
.chrono .etape:not(:last-child)::before{content:""; position:absolute; left:12px; top:30px; bottom:-8px; width:1.5px; background:var(--filet)}
.chrono .etape.fait:not(:last-child)::before{background:var(--or); opacity:.45}
.chrono .rond{width:24px; height:24px; border-radius:99px; display:grid; place-items:center; background:var(--fond-2); box-shadow:inset 0 0 0 1.5px var(--filet-fort); color:var(--texte-3); z-index:1}
.chrono .rond svg{width:12px;height:12px}
.chrono .fait .rond{background:var(--or); box-shadow:none; color:#fff}
.chrono .encours .rond{background:var(--fond-2); box-shadow:inset 0 0 0 2px var(--or), 0 0 0 3px var(--or-lueur); color:var(--or)}
.chrono .encours{background:var(--verre)}
.chrono .nom{font:600 13.5px/1.35 var(--texte-police); color:var(--texte)}
.chrono .fait .nom{color:var(--texte-2); font-weight:500}
.chrono .detail{font-size:12px; color:var(--texte-3); margin-top:1px}
.chrono .quand{font:500 11.5px/1.4 var(--mono); color:var(--texte-3); text-align:right; padding-top:3px; white-space:nowrap}
.chrono .encours .quand{color:var(--or)}
.chrono button.etape{text-align:left; width:100%; cursor:pointer}
.chrono button.etape:hover{background:var(--verre-fort)}
@media (max-width:420px){ .chrono .quand{font-size:10.5px} }

.lignes{display:flex; flex-direction:column; min-width:0}
.ligne{display:flex; align-items:center; gap:10px; padding:9px 2px; min-width:0; flex-wrap:wrap; box-shadow:0 1px 0 var(--filet)}
.ligne:last-child{box-shadow:none}
.ligne .corps{flex:1 1 150px; min-width:0}
.ligne .corps b{display:block; font:600 13.5px/1.4 var(--texte-police); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ligne .corps small{display:block; color:var(--texte-3); font-size:12px; overflow:hidden; text-overflow:ellipsis}
.ligne .droite{margin-left:auto; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-size:13px}
.ligne.cliquable{cursor:pointer; border-radius:var(--r-m); padding-inline:8px; transition:background var(--t-rapide)}
.ligne.cliquable:hover{background:var(--verre)}
.point-etat{width:7px;height:7px;border-radius:99px;flex:none; background:var(--texte-3)}
.point-etat.ok{background:var(--ok)} .point-etat.attente{background:var(--attente)} .point-etat.alerte{background:var(--alerte)} .point-etat.info{background:var(--info)}

.defile{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
.tableau{width:100%; border-collapse:collapse; font-size:13px; min-width:580px}
.tableau th{
  font:600 10.5px/1.3 var(--texte-police); letter-spacing:.06em; text-transform:uppercase; color:var(--texte-3);
  text-align:left; padding:8px 10px; white-space:nowrap; box-shadow:inset 0 -1px 0 var(--filet);
}
.tableau td{padding:10px; box-shadow:inset 0 -1px 0 var(--filet); vertical-align:middle}
.tableau tr:last-child td{box-shadow:none}
.tableau tbody tr{transition:background var(--t-rapide)}
.tableau tbody tr:hover{background:var(--verre)}
.tableau .num{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}

.champ{display:flex; flex-direction:column; gap:5px; min-width:0}
.champ label{font:600 12px/1.3 var(--texte-police); color:var(--texte-2)}
.champ input,.champ select,.champ textarea{
  height:36px; padding:0 11px; border-radius:var(--r-m); border:none; min-width:0;
  background:var(--fond-2); color:var(--texte); outline:none; width:100%; font-size:13.5px;
  box-shadow:var(--anneau-fort);
  transition:box-shadow var(--t-rapide);
}
[data-ambiance="sombre"] .champ input,[data-ambiance="sombre"] .champ select,[data-ambiance="sombre"] .champ textarea{background:var(--verre)}
.champ textarea{height:auto; min-height:84px; padding:9px 11px; resize:vertical; line-height:1.5}
.champ input:focus,.champ select:focus,.champ textarea:focus{box-shadow:0 0 0 1px var(--or), 0 0 0 3px var(--or-lueur)}
.champ input::placeholder,.champ textarea::placeholder{color:var(--texte-3)}
.champ select{appearance:none; padding-right:30px;
  background-image:linear-gradient(45deg,transparent 50%,var(--texte-3) 50%),linear-gradient(135deg,var(--texte-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size:5px 5px; background-repeat:no-repeat}
.champ input[type="date"],.champ input[type="time"]{font-family:var(--mono); font-size:13px}

.commutateur{display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none}
.commutateur input{position:absolute; opacity:0; width:0; height:0}
.commutateur i{width:34px; height:20px; border-radius:99px; background:var(--filet-fort); position:relative; transition:background var(--t-rapide); flex:none}
.commutateur i::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:99px; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform var(--t-rapide) var(--ressort)}
.commutateur input:checked + i{background:var(--or)}
.commutateur input:checked + i::after{transform:translateX(14px)}

.coche{display:flex; align-items:flex-start; gap:10px; padding:8px; border-radius:var(--r-m); cursor:pointer; transition:background var(--t-rapide)}
.coche:hover{background:var(--verre)}
.coche input{position:absolute; opacity:0; width:0; height:0}
.coche i{width:18px; height:18px; border-radius:5px; box-shadow:inset 0 0 0 1.5px var(--filet-fort); flex:none; display:grid; place-items:center; color:transparent; transition:all var(--t-rapide); margin-top:1px}
.coche i svg{width:12px;height:12px}
.coche input:checked + i{background:var(--or); box-shadow:none; color:#fff}
.coche input:checked ~ .texte{color:var(--texte-3)}
.coche .texte{flex:1; min-width:0; font-size:13.5px}
.coche .texte small{display:block; color:var(--texte-3); font-size:12px}

.segments{display:inline-flex; gap:2px; padding:2px; border-radius:var(--r-m); background:var(--verre-fort); max-width:100%; overflow-x:auto; scrollbar-width:none}
.segments::-webkit-scrollbar{display:none}
.segments button{height:26px; padding:0 11px; border-radius:var(--r-s); font:600 12.5px/1 var(--texte-police); color:var(--texte-2); transition:all var(--t-rapide); white-space:nowrap; flex:none}
.segments button:hover{color:var(--texte)}
.segments button[aria-selected="true"]{background:var(--fond-2); color:var(--texte); box-shadow:0 1px 2px rgba(16,24,40,.08)}
[data-ambiance="sombre"] .segments button[aria-selected="true"]{background:var(--fond-3); box-shadow:none}

.fil{display:flex; flex-direction:column; gap:8px; min-width:0}
.bulle{max-width:84%; padding:9px 12px; border-radius:var(--r-l); font-size:13.5px; line-height:1.45; position:relative; overflow-wrap:anywhere}
.bulle.eux{align-self:flex-start; background:var(--verre-fort); border-bottom-left-radius:4px}
.bulle.moi{align-self:flex-end; background:var(--marine); color:#fff; border-bottom-right-radius:4px}
[data-ambiance="sombre"] .bulle.moi{background:var(--or); color:#1A1206}
.bulle small{display:block; font-size:10.5px; opacity:.6; margin-top:3px}
.bouton.fil{display:inline-flex; flex-direction:row; gap:6px}

.bandeau{display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--r-l); font-size:13px; min-width:0; line-height:1.5}
.bandeau svg{width:16px;height:16px;flex:none;margin-top:2px}
.bandeau > div, .bandeau > span, .bandeau > p{min-width:0}
.bandeau.ok{background:var(--ok-fond); box-shadow:0 0 0 1px var(--ok-filet); color:var(--texte)} .bandeau.ok svg{color:var(--ok)}
.bandeau.attente{background:var(--attente-fond); box-shadow:0 0 0 1px var(--attente-filet)} .bandeau.attente svg{color:var(--attente)}
.bandeau.alerte{background:var(--alerte-fond); box-shadow:0 0 0 1px var(--alerte-filet)} .bandeau.alerte svg{color:var(--alerte)}
.bandeau.info{background:var(--info-fond); box-shadow:0 0 0 1px var(--info-filet)} .bandeau.info svg{color:var(--info)}
.bandeau b{font-weight:600}

.voile{position:fixed; inset:0; z-index:80; background:var(--voile-fond); display:grid; place-items:center; padding:16px; animation:fondu var(--t-moyen) both}
.feuille{
  width:min(560px, 100%); max-height:min(88dvh, 860px); overflow:auto; min-width:0;
  background:var(--fond-2); border-radius:var(--r-xl); box-shadow:var(--ombre-haute), var(--anneau);
  padding:20px; animation:monte var(--t-moyen) var(--courbe) both;
}
.feuille > .entete{display:flex; align-items:center; gap:10px; margin-bottom:16px; position:sticky; top:-20px; padding:4px 0; background:inherit; z-index:2}
.feuille > .entete h2{flex:1; min-width:0}
.feuille > .pied{display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap}
@media (max-width:640px){
  .voile{align-items:end; padding:0}
  .feuille{width:100%; max-height:92dvh; border-radius:var(--r-xl) var(--r-xl) 0 0; padding:16px 14px calc(16px + env(safe-area-inset-bottom))}
  .feuille > .entete{top:-16px}
  .feuille > .pied .bouton{flex:1 1 auto}
}
@keyframes fondu{from{opacity:0}}
@keyframes monte{from{transform:translateY(12px); opacity:0}}

.toasts{position:fixed; z-index:90; right:16px; top:calc(var(--barre) + 10px); display:flex; flex-direction:column; gap:6px; pointer-events:none}
@media (max-width:640px){ .toasts{left:10px; right:10px; top:auto; bottom:calc(var(--onglets) + 12px + env(safe-area-inset-bottom))} }
.toast{display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r-l); font-size:13px; pointer-events:auto;
  background:var(--fond-2); box-shadow:var(--ombre-haute), var(--anneau); color:var(--texte); animation:glisse var(--t-moyen) var(--courbe) both; max-width:360px}
.toast svg{width:16px;height:16px;flex:none}
.toast.ok svg{color:var(--ok)} .toast.alerte svg{color:var(--alerte)} .toast.or svg{color:var(--or)}
@keyframes glisse{from{transform:translateY(-6px); opacity:0}}

.squelette{border-radius:var(--r-s); background:linear-gradient(90deg,var(--verre) 25%,var(--verre-fort) 50%,var(--verre) 75%); background-size:200% 100%; animation:brille 1.3s linear infinite}
@keyframes brille{to{background-position:-200% 0}}

.agenda{display:grid; grid-template-columns:50px repeat(var(--colonnes,5),minmax(112px,1fr)); border-radius:var(--r-l); overflow:hidden; box-shadow:var(--anneau); min-width:620px; background:var(--fond-2)}
.agenda .entete-j{padding:8px 6px; text-align:center; font:600 11.5px/1.3 var(--texte-police); color:var(--texte-2); box-shadow:inset 0 -1px 0 var(--filet); background:var(--verre)}
.agenda .entete-j.aujourdhui{color:var(--or)}
.agenda .heure{font:500 10.5px/1 var(--mono); color:var(--texte-3); padding:5px 7px; text-align:right; box-shadow:inset -1px 0 0 var(--filet); height:42px}
.agenda .case{position:relative; box-shadow:inset 1px 1px 0 var(--filet); height:42px}
.agenda .rdv{position:absolute; left:2px; right:2px; padding:4px 6px; border-radius:var(--r-s); font-size:11px; line-height:1.3; overflow:hidden;
  background:var(--or-lueur); border-left:2px solid var(--or); color:var(--texte); cursor:pointer; z-index:1}
.agenda .rdv b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.agenda .rdv.info{background:var(--info-fond); border-left-color:var(--info)}
.agenda .rdv.ok{background:var(--ok-fond); border-left-color:var(--ok)}
.agenda .rdv.alerte{background:var(--alerte-fond); border-left-color:var(--alerte)}

.ponts{display:grid; grid-template-columns:repeat(auto-fit,minmax(144px,1fr)); gap:10px}
.pont{padding:12px; border-radius:var(--r-l); box-shadow:var(--anneau); background:var(--surface); display:flex; flex-direction:column; gap:7px; min-height:106px; position:relative; overflow:hidden; min-width:0; text-align:left; color:inherit}
.pont.occupe{box-shadow:0 0 0 1px var(--trait-or)}
.pont.libre{box-shadow:none; background:transparent; border:1px dashed var(--filet-fort)}
.pont .numero{font:600 10px/1 var(--texte-police); letter-spacing:.08em; text-transform:uppercase; color:var(--texte-3)}
.pont .qui{font:600 13px/1.35 var(--texte-police); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pont .voiture-mini{width:100%; height:22px; opacity:.8; color:var(--or)}

.apparait{animation:apparait var(--t-lent) var(--courbe) both}
.apparait:nth-child(2){animation-delay:40ms} .apparait:nth-child(3){animation-delay:80ms} .apparait:nth-child(4){animation-delay:120ms}
.apparait:nth-child(5){animation-delay:160ms} .apparait:nth-child(6){animation-delay:200ms}
@keyframes apparait{from{opacity:0; transform:translateY(8px)}}

.entree{min-height:100dvh; display:grid; place-items:center; padding:24px}
.entree .carte-entree{width:min(1040px,100%)}
.entree .marque{display:flex; align-items:center; gap:14px; margin-bottom:28px}
.entree .marque svg{width:64px;height:40px; color:var(--or)}
.entree .marque b{font:800 19px/1 var(--titre); letter-spacing:.02em}
.entree .marque small{display:block; font:600 10px/1 var(--texte-police); letter-spacing:.16em; text-transform:uppercase; color:var(--texte-3); margin-top:6px}
.roles{display:grid; grid-template-columns:repeat(auto-fit,minmax(212px,1fr)); gap:10px; margin-top:22px}
.role{
  text-align:left; padding:18px; border-radius:var(--r-l); color:inherit;
  background:var(--surface); box-shadow:var(--anneau);
  display:flex; flex-direction:column; gap:9px; position:relative; overflow:hidden; min-height:178px;
  transition:box-shadow var(--t-moyen), transform var(--t-moyen) var(--courbe);
}
.role:hover{transform:translateY(-2px); box-shadow:0 0 0 1px var(--trait-fort), var(--ombre-haute)}
.role .ico{width:36px; height:36px; border-radius:var(--r-m); display:grid; place-items:center; color:var(--or); background:var(--or-lueur)}
.role .ico svg{width:19px;height:19px}
.role h3{font-size:1rem}
.role p{font-size:12.8px; color:var(--texte-2); line-height:1.5}
.role .qui{margin-top:auto; display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--texte-3); min-width:0}
.role .qui span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.role .fleche{position:absolute; right:16px; top:16px; width:17px; height:17px; color:var(--texte-3); transition:transform var(--t-moyen) var(--courbe), color var(--t-moyen)}
.role:hover .fleche{transform:translateX(3px); color:var(--or)}
@media (max-width:640px){ .role{min-height:0; padding:15px} .roles{grid-template-columns:1fr} }

.langues{display:inline-flex; gap:1px; padding:2px; border-radius:var(--r-m); background:var(--verre-fort)}
.langues button{height:24px; padding:0 7px; border-radius:var(--r-s); font:700 11px/1 var(--texte-police); letter-spacing:.03em; color:var(--texte-3)}
.langues button:hover{color:var(--texte)}
.langues button[aria-pressed="true"]{background:var(--fond-2); color:var(--texte)}
[data-ambiance="sombre"] .langues button[aria-pressed="true"]{background:var(--fond-3)}

.separateur{height:1px; background:var(--filet); margin:4px 0}
.vide{padding:28px 18px; text-align:center; color:var(--texte-3); border:1px dashed var(--filet-fort); border-radius:var(--r-l); font-size:13px}
.vide svg{width:26px;height:26px;margin:0 auto 8px; opacity:.5}
.photo{aspect-ratio:4/3; border-radius:var(--r-l); overflow:hidden; position:relative; background:var(--verre-fort); box-shadow:var(--anneau)}
.photo img{width:100%; height:100%; object-fit:cover}
.photo .legende{position:absolute; left:0; right:0; bottom:0; padding:20px 10px 8px; font-size:11.5px; color:#fff; background:linear-gradient(transparent, rgba(8,12,20,.82))}
.photo.dessin{display:grid; place-items:center; color:var(--texte-3)}
.photo.dessin svg{width:34%; height:auto; opacity:.4}
.qr svg{display:block}
.hors-ligne{display:none; align-items:center; gap:6px; font-size:11.5px; color:var(--attente)}
body.hors-ligne .hors-ligne{display:inline-flex}

:root{
  --fil-lumiere:inset 0 1px 0 rgba(255,255,255,.75);
  --ombre-survol:0 10px 24px -14px rgba(15,23,42,.28), 0 2px 6px -3px rgba(15,23,42,.10);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
[data-ambiance="sombre"]{
  --fil-lumiere:inset 0 1px 0 rgba(255,255,255,.06);
  --ombre-survol:0 12px 28px -14px rgba(0,0,0,.7);
}

.ciel::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(900px 520px at 0% 0%, var(--or-lueur), transparent 70%),
    var(--grain);
  opacity:.9;
}

.panneau{box-shadow:var(--anneau), var(--fil-lumiere); transition:box-shadow var(--t-moyen), transform var(--t-moyen)}
.panneau.or{box-shadow:0 0 0 1px var(--trait-fort), var(--fil-lumiere), 0 0 0 4px var(--or-lueur)}
a.panneau:hover,button.panneau:hover,.panneau[role="button"]:hover,.panneau.cliquable:hover{
  box-shadow:var(--anneau-fort), var(--fil-lumiere), var(--ombre-survol); transform:translateY(-1px)
}
.indicateur{transition:transform var(--t-moyen)}

.bouton.or{
  background:linear-gradient(180deg, var(--marine-2), var(--marine));
  box-shadow:var(--fil-lumiere), 0 1px 2px rgba(15,23,42,.24);
}
.bouton.or:hover{background:linear-gradient(180deg, #25305A, var(--marine-2)); box-shadow:var(--fil-lumiere), 0 4px 12px -4px rgba(11,37,69,.5)}
[data-ambiance="sombre"] .bouton.or{background:linear-gradient(180deg, #8ED8EA, var(--or)); color:#15202B; box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.bouton.ok{background:linear-gradient(180deg, #059669, var(--ok)); box-shadow:var(--fil-lumiere)}
.bouton.fil:hover,.bouton.doux:hover{box-shadow:var(--anneau-fort), var(--fil-lumiere)}
.bouton:focus-visible{outline:none; box-shadow:0 0 0 2px var(--fond), 0 0 0 4px var(--or)}

.rail{
  background:linear-gradient(180deg, var(--marine-2) 0%, var(--marine) 38%, #070A14 100%);
  box-shadow:inset -1px 0 0 rgba(92,198,222,.35);
}
.rail .lien[aria-current="page"]{box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}

.jauge > i{background:linear-gradient(90deg, var(--or-pale), var(--or))}
.anneau .part{stroke:url(#atDegrade)}

.champ input:focus,.champ select:focus,.champ textarea:focus{box-shadow:0 0 0 1px var(--or), 0 0 0 4px var(--or-lueur)}

.tableau tbody tr:nth-child(even){background:var(--verre)}
.tableau tbody tr:hover{background:var(--or-lueur)}

.badge,.puce{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
[data-ambiance="sombre"] .badge,[data-ambiance="sombre"] .puce{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}
@media print{
  .ciel,.rail,.barre,.onglets,.toasts{display:none !important}
  body{background:#fff; color:#000}
  .voile{position:static; background:#fff; display:block; padding:0}
  .feuille{max-height:none; box-shadow:none; width:100%}
  .panneau,.indicateur{box-shadow:0 0 0 1px #ddd; break-inside:avoid; background:#fff}
}

.ligne>svg:not([class]){flex:none;width:18px;height:18px;color:var(--texte-3)}