/* Cockpit Plaza — feuille de style. Mobile d'abord ; thème clair et sombre selon l'appareil. */
:root{
  --fond:#f3efe7;--fond-2:#ebe5d9;--carte:#fffdf9;--encre:#17262b;--doux:#5c6b70;--pale:#8b989c;--trait:#e2dacb;
  --marque:#0e4252;--marque-2:#17667c;--marque-pale:#dcebee;--or:#c28a1c;--or-pale:#f6ead0;
  --ok:#23774a;--ok-pale:#dff1e6;--alerte:#a8322a;--alerte-pale:#f9e3e1;--attente:#9a6208;--attente-pale:#f8ebcf;--info:#1f5f8a;--info-pale:#dfecf6;
  --ombre:0 1px 2px rgba(23,38,43,.06),0 6px 18px -8px rgba(23,38,43,.18);--sur-marque:#fff;
  --r:16px;--r-s:10px;
  --pile:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --titres:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --fond:#0d171a;--fond-2:#111e22;--carte:#16252a;--encre:#e8eeee;--doux:#a3b3b7;--pale:#77888d;--trait:#253940;
  --marque:#8fd0e0;--marque-2:#5fb3c7;--marque-pale:#17323a;--or:#f0c35a;--or-pale:#3a2f14;
  --ok:#7bd8a2;--ok-pale:#14321f;--alerte:#ff9f97;--alerte-pale:#3b1d1b;--attente:#f0c35a;--attente-pale:#3a2f14;--info:#8fc4ea;--info-pale:#152c3d;
  --ombre:0 1px 2px rgba(0,0,0,.3),0 8px 20px -10px rgba(0,0,0,.6);
  --sur-marque:#0b1a1f;color-scheme:dark}}
:root[data-theme="dark"]{
  --fond:#0d171a;--fond-2:#111e22;--carte:#16252a;--encre:#e8eeee;--doux:#a3b3b7;--pale:#77888d;--trait:#253940;
  --marque:#8fd0e0;--marque-2:#5fb3c7;--marque-pale:#17323a;--or:#f0c35a;--or-pale:#3a2f14;
  --ok:#7bd8a2;--ok-pale:#14321f;--alerte:#ff9f97;--alerte-pale:#3b1d1b;--attente:#f0c35a;--attente-pale:#3a2f14;--info:#8fc4ea;--info-pale:#152c3d;
  --ombre:0 1px 2px rgba(0,0,0,.3),0 8px 20px -10px rgba(0,0,0,.6);
  --sur-marque:#0b1a1f;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--encre);font:16px/1.5 var(--pile);-webkit-font-smoothing:antialiased}
a{color:var(--marque-2)}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
main{max-width:1240px;margin:0 auto;padding-block:14px calc(40px + env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1{font:700 1.55rem/1.15 var(--titres);letter-spacing:-.01em;margin:.1em 0 .2em;text-wrap:balance}
h2{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--or);outline-offset:2px;border-radius:6px}

/* barre du haut */
.barre{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;padding-top:calc(11px + env(safe-area-inset-top));
  background:linear-gradient(100deg,#0b3644,#135a6e);color:#fff;box-shadow:0 2px 14px -6px rgba(0,0,0,.5)}
.marque{color:#fff;font:700 1.02rem var(--titres);text-decoration:none;letter-spacing:.01em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.marque::before{content:"";width:22px;height:22px;border-radius:6px;background:#f2c14e url("icone.svg") center/cover}
.compte{display:flex;align-items:center;gap:12px;margin:0;min-width:0}
.compte .qui{font-size:.85rem;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw}
@media (max-width:430px){.compte .qui{display:none}}
.lien{background:rgba(255,255,255,.14);border:0;color:#fff;font:600 .8rem var(--pile);padding:8px 12px;border-radius:99px;cursor:pointer;white-space:nowrap}

/* choix de la journée */
.jour{display:flex;align-items:center;gap:8px;margin:12px 0 6px}
.choix{flex:1;margin:0}
.choix input{width:100%;font:600 1rem var(--pile);padding:11px 14px;border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);color:var(--encre);min-height:48px;box-shadow:var(--ombre)}
.fleche{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);text-decoration:none;font-size:1.5rem;line-height:1;color:var(--marque-2);box-shadow:var(--ombre)}
.fleche.inactif{opacity:.3;box-shadow:none}
.fraicheur{font-size:.8rem;color:var(--doux);margin:6px 2px 16px}
.pastille{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pale);margin-right:7px}
.pastille.direct{background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){.pastille.direct{animation:pouls 2.4s ease-out infinite}}
@keyframes pouls{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

/* tableau de bord */
.hero{margin-bottom:12px}
.occupation{display:flex;align-items:center;gap:16px;padding:18px;border-radius:22px;text-decoration:none;color:#fff;
  background:radial-gradient(120% 140% at 0% 0%,#1b7a92 0%,#0e4252 55%,#0a2f3b 100%);box-shadow:0 14px 30px -16px rgba(10,47,59,.8)}
.anneau{width:128px;height:128px;flex:none}
.anneau .piste{stroke:rgba(255,255,255,.16);stroke-width:10}
.anneau .jauge{stroke:#f2c14e;stroke-width:10}
.anneau text{fill:#fff;stroke:none;text-anchor:middle}
.anneau .pct{font:700 26px var(--titres)}
.anneau .unite{font-size:14px;font-weight:600}
.anneau .sous{font:600 9px var(--pile);letter-spacing:.12em;text-transform:uppercase;fill:rgba(255,255,255,.7)}
.faits p{margin:0 0 4px;font-size:.95rem;color:rgba(255,255,255,.86)}
.faits strong{font:700 1.5rem var(--titres);color:#fff;margin-right:4px;font-variant-numeric:tabular-nums}
.faits span{opacity:.7}
.faits .voir{margin-top:10px;font-size:.82rem;font-weight:600;color:#f2c14e}
.chiffres{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.chiffre{position:relative;display:flex;flex-direction:column;gap:1px;padding:14px 14px 13px;border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);color:inherit;text-decoration:none;min-width:0;box-shadow:var(--ombre)}
.chiffre .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--marque-pale);color:var(--marque-2);margin-bottom:8px}
.chiffre .ico svg{width:19px;height:19px}
.chiffre.attention .ico{background:var(--alerte-pale);color:var(--alerte)}
.chiffre .lib{font-size:.78rem;color:var(--doux);font-weight:600}
.chiffre .val{font:700 1.75rem/1.1 var(--titres);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.chiffre .det{font-size:.78rem;color:var(--doux)}
.rubrique h2{font:650 .76rem var(--pile);letter-spacing:.1em;text-transform:uppercase;color:var(--doux);margin:28px 2px 9px}
.liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.liste a{display:flex;flex-direction:column;padding:13px 42px 13px 15px;text-decoration:none;color:inherit;position:relative;border:1px solid var(--trait);border-radius:var(--r);background:var(--carte);box-shadow:var(--ombre)}
.liste a::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-52%);font-size:1.5rem;color:var(--pale)}
.liste .t{font-weight:650}
.liste .p{font-size:.83rem;color:var(--doux)}

/* page d'un état */
.fil{display:flex;justify-content:space-between;gap:10px;font-size:.83rem;color:var(--pale);margin:2px 2px 6px}
.fil a{text-decoration:none;font-weight:600}
.entete-etat{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.phrase{color:var(--doux);margin:.1em 0 .6em;max-width:60ch;font-size:.93rem}
.bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 18px;border:0;border-radius:var(--r);background:var(--marque);color:var(--sur-marque);font:650 1rem var(--pile);text-decoration:none;cursor:pointer}
.bouton.clair{flex:none;min-height:42px;padding:0 14px;background:var(--carte);color:var(--marque-2);border:1px solid var(--trait);font-size:.9rem;box-shadow:var(--ombre)}
.bouton svg{width:18px;height:18px}
.bouton.plein{width:100%;margin-top:18px}
.resume{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.resume div{flex:1 1 104px;min-width:0;padding:11px 14px;border-radius:var(--r);background:var(--marque-pale);display:flex;flex-direction:column}
.resume .val{font:700 1.35rem/1.15 var(--titres);color:var(--marque);font-variant-numeric:tabular-nums}
.resume .lib{font-size:.76rem;color:var(--doux);font-weight:600}
.recherche{position:sticky;top:calc(52px + env(safe-area-inset-top));z-index:5;margin:0 -4px 6px;padding:6px 4px;background:linear-gradient(var(--fond) 70%,transparent)}
.recherche svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:19px;height:19px;color:var(--pale)}
.recherche input{width:100%;font:inherit;padding:12px 14px 12px 42px;border:1px solid var(--trait);border-radius:99px;background:var(--carte);color:var(--encre);min-height:48px;box-shadow:var(--ombre)}
.groupe{margin-top:18px}
.groupe h2{display:flex;align-items:center;gap:8px;margin:0 2px 8px;font:650 .92rem var(--pile);color:var(--encre)}
.groupe h2 .nom{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.groupe h2 .compte{flex:none;font-size:.74rem;font-weight:700;padding:1px 8px;border-radius:99px;background:var(--fond-2);color:var(--doux)}
.groupe h2 .total{margin-left:auto;flex:none;font-weight:700;color:var(--marque-2);font-variant-numeric:tabular-nums}
.cartes{display:grid;gap:9px;grid-template-columns:minmax(0,1fr)}
.carte-ligne{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r);padding:13px 14px;box-shadow:var(--ombre);min-width:0}
.carte-ligne .haut{display:flex;align-items:center;gap:11px}
.pastille-ch{flex:none;min-width:50px;padding:6px 8px;border-radius:12px;background:var(--marque);color:var(--sur-marque);font:700 1rem/1.1 var(--titres);text-align:center;font-variant-numeric:tabular-nums}
.pastille-ch small{display:block;font:600 .58rem var(--pile);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.carte-ligne .identite{flex:1;min-width:0}
.carte-ligne h3{margin:0;font:650 1rem/1.25 var(--pile);overflow-wrap:anywhere}
.carte-ligne .identite p{margin:1px 0 0;font-size:.82rem;color:var(--doux);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.montant{flex:none;text-align:right;line-height:1.1}
.montant strong{display:block;font:700 1.12rem var(--titres);font-variant-numeric:tabular-nums}
.montant small{font-size:.68rem;color:var(--pale);font-weight:600;letter-spacing:.04em}
.montant.negatif strong{color:var(--alerte)}
.heure-seule{flex:none;font:700 1rem var(--titres);color:var(--doux);font-variant-numeric:tabular-nums}
.puces{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.puce,.badge{font-size:.77rem;padding:3px 9px;border-radius:99px;background:var(--fond-2);color:var(--doux);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.puce.sejour{background:var(--or-pale);color:var(--attente);font-weight:600}
.puce.prix{background:var(--marque-pale);color:var(--marque);font-weight:700;font-variant-numeric:tabular-nums}
.badge{font-weight:700}
.badge.ok{background:var(--ok-pale);color:var(--ok)}
.badge.alerte{background:var(--alerte-pale);color:var(--alerte)}
.badge.attente{background:var(--attente-pale);color:var(--attente)}
.badge.info{background:var(--info-pale);color:var(--info)}
.note{margin:9px 0 0;font-size:.86rem;color:var(--encre);font-style:italic;overflow-wrap:anywhere}
.bas{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--trait);font-size:.8rem;color:var(--pale)}
.bas .acteur{padding-top:2px}
.bas details{margin-left:auto;text-align:right;min-width:0}
.bas summary{cursor:pointer;color:var(--marque-2);font-weight:600;list-style:none;padding:2px 0}
.bas summary::-webkit-details-marker{display:none}
.bas summary::after{content:" ▾"}
.bas details[open] summary::after{content:" ▴"}
.bas dl{margin:8px 0 0;text-align:left;display:grid;gap:4px}
.bas dl div{display:flex;justify-content:space-between;gap:12px}
.bas dt{color:var(--pale)}
.bas dd{margin:0;color:var(--encre);text-align:right;overflow-wrap:anywhere}
.bas details[open]{flex:1 1 100%}
.vide{padding:30px;text-align:center;color:var(--doux);border:1px dashed var(--trait);border-radius:var(--r);margin-top:14px}
.legende{font-size:.8rem;color:var(--pale);margin:18px 2px 0}

/* daily report */
.indicateur .periodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:11px 0 0}
.indicateur .periodes div{padding:8px 10px;border-radius:var(--r-s);background:var(--fond-2);min-width:0}
.indicateur dt{font:650 .66rem var(--pile);letter-spacing:.09em;text-transform:uppercase;color:var(--pale)}
.indicateur dd{margin:0;font:700 1rem var(--titres);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.indicateur dd.avant{font:500 .78rem var(--pile);color:var(--pale)}
.indicateur .haut{justify-content:space-between}

/* connexion */
body.porte{display:grid;min-height:100svh;place-items:center;background:radial-gradient(120% 90% at 50% 0%,#17667c 0%,#0e4252 45%,#0a2a34 100%)}
body.porte main{width:100%;max-width:430px}
.carte{background:var(--carte);border-radius:24px;padding:28px 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.carte h1{font-size:1.45rem}
.carte label{display:block;font-size:.84rem;font-weight:650;margin:16px 0 6px}
.carte input[type=text],.carte input[type=password]{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--trait);border-radius:12px;background:var(--fond);color:var(--encre);min-height:50px}
.carte input.code{font:700 1.6rem var(--titres);letter-spacing:.32em;text-align:center;font-variant-numeric:tabular-nums}
.alerte{background:var(--alerte-pale);color:var(--alerte);border-radius:12px;padding:10px 12px;font-size:.92rem;margin:12px 0}
.qr{display:block;margin:12px auto;background:#fff;border-radius:14px;padding:6px}
.secret{font-size:.8rem;color:var(--doux);text-align:center;word-break:break-all}
.retour{text-align:center;font-size:.9rem;margin:16px 0 0}

@media (min-width:640px){
  .cartes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .liste{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chiffres{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:980px){
  main{padding-block:22px 56px;padding-left:max(26px,env(safe-area-inset-left,0px));padding-right:max(26px,env(safe-area-inset-right,0px))}
  h1{font-size:2rem}
  .cartes{grid-template-columns:repeat(3,minmax(0,1fr))}
  .liste{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chiffres{grid-template-columns:repeat(6,minmax(0,1fr))}
  .jour{max-width:430px}
  .occupation{padding:26px 30px;gap:28px}
  .anneau{width:160px;height:160px}
  .faits strong{font-size:2rem}
  .faits p{font-size:1.05rem}
}
@media (prefers-reduced-motion:no-preference){
  .chiffre,.liste a,.carte-ligne,.bouton,.occupation{transition:transform .15s ease,box-shadow .15s ease}
  .chiffre:active,.liste a:active,.bouton:active,.occupation:active{transform:scale(.985)}
  @media (hover:hover){.chiffre:hover,.liste a:hover{transform:translateY(-2px);box-shadow:0 2px 3px rgba(23,38,43,.06),0 14px 26px -12px rgba(23,38,43,.3)}}
}