/* QOPO Clock — l'écran du jour. Charte QOPO : pétrole #293c3d, sauge #5d8788, Goia ;
   barre pétrole, écran de travail clair (lisible au soleil), capsules à liseré sauge à gauche. */
@font-face { font-family: "Goia"; src: url("fonts/Goia-Medium.woff2?v=1") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Goia"; src: url("fonts/Goia-ExtraBold.woff2?v=1") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --petrole: #293c3d; --sauge: #5d8788; --fond: #f2f4f3; --carte: #fff; --trait: #d9dedc;
  --texte: #293c3d; --sourd: #5e6c6b; --alerte: #9a4b12;
  --typo: "Goia", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; background: var(--fond); }
body { margin: 0; font: 500 16px/1.4 var(--typo); color: var(--texte); background: var(--fond);
       padding-bottom: env(safe-area-inset-bottom); }

.barre { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: .5rem;
         background: var(--petrole); color: #fff; padding: calc(.6rem + env(safe-area-inset-top)) .75rem .6rem; }
.barre-titre { flex: 1; text-align: center; min-width: 0; }
.barre-date { font-weight: 800; font-size: 1.1rem; }
.barre-qui { font-size: .85rem; color: #dfe7e6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jour-fleche { width: 44px; height: 44px; border: 0; border-radius: 10px; background: rgba(255,255,255,.1);
               color: #fff; font: 800 1.6rem/1 var(--typo); }
.jour-fleche:disabled { opacity: .3; }

main { max-width: 34rem; margin: 0 auto; padding: .9rem 1rem 2rem; }
.capsule { background: var(--carte); border: 1px solid var(--trait); border-left: 4px solid var(--sauge);
           border-radius: 12px; padding: .8rem .9rem; margin-bottom: .9rem; }
.capsule h2 { display: flex; align-items: center; justify-content: space-between; gap: .5rem;
              margin: 0 0 .6rem; font-size: 1rem; font-weight: 800; }
.pastille { font-size: .8rem; font-weight: 500; color: var(--petrole); background: #e6eded;
            border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.pastille:empty { display: none; }

.rangee { display: flex; gap: .6rem; }
.rangee > * { flex: 1; min-width: 0; }
.champ { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .55rem; font-size: .85rem; color: var(--sourd); }
.champ-large { width: 100%; }
select, input { width: 100%; min-height: 44px; font: 500 16px var(--typo); color: var(--texte);
                background: #fff; border: 1px solid #b9c3c1; border-radius: 10px; padding: .45rem .6rem;
                -webkit-appearance: none; appearance: none; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--sauge) 50%), linear-gradient(135deg, var(--sauge) 50%, transparent 50%);
         background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
         padding-right: 2rem; }

.pause { display: flex; align-items: flex-end; gap: .5rem; }
.pause .champ { flex: 1; }
.retirer { flex: none; width: 44px; height: 44px; margin-bottom: .55rem; border: 1px solid #b9c3c1;
           border-radius: 10px; background: #fff; color: var(--sourd); font: 800 1.2rem/1 var(--typo); }

.tache { border-top: 1px solid var(--trait); padding-top: .6rem; margin-top: .2rem; }
.tache:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.duree { display: flex; align-items: center; gap: .5rem; margin-bottom: .55rem; }
.duree button { width: 44px; height: 44px; border: 1px solid #b9c3c1; border-radius: 10px; background: #fff;
                color: var(--petrole); font: 800 1.3rem/1 var(--typo); }
.duree output { flex: 1; text-align: center; font-weight: 800; font-size: 1.1rem; }

.lien { border: 0; background: none; color: var(--sauge); font: 800 .95rem var(--typo); padding: .4rem 0; min-height: 44px; }
.bouton { width: 100%; min-height: 48px; border: 0; border-radius: 12px; background: var(--petrole); color: #fff;
          font: 800 1rem var(--typo); margin-bottom: .5rem; }
.bouton.occupe { opacity: .55; }
.note { margin: .3rem 0 0; font-size: .85rem; color: var(--sourd); }
.reste { margin: .6rem 0 .4rem; font-weight: 800; color: var(--alerte); }
.etat { margin: .2rem 0 .8rem; font-size: .95rem; color: var(--sourd); }
.etat.erreur { color: var(--alerte); font-weight: 800; }
.etat.ok { color: var(--petrole); font-weight: 800; }
.liste { margin: 0; padding-left: 1.1rem; }
.liste li { margin: .15rem 0; }
.lien-planning { margin: -.4rem 0 .6rem; text-align: right; } .lien-planning a { text-decoration: none; display: inline-block; }