/* QOPO Clock — le planning, un tableau blanc. Pensé pour la TABLETTE et le grand écran tactile des
   séances (Jonathan, 01.11) ; sur un téléphone il se consulte, en faisant défiler. Charte QOPO :
   barre pétrole, écran de travail clair ; les couleurs d'entité ne disent qu'une chose, QUI FACTURE.
   Rien ne dépend du survol de la souris : tout ce qui se voit au survol se voit aussi au doigt. */
body { --entite-a: #C77605; --entite-b: #D85F5A; --entite-c: #705CB2; --entite-z: #2E6FB5;
       --col-libelle: 13; --jour: 5.5; --ligne: 3.4; --poignee: 22px; --taille: 1; }

body.tableau { overflow: hidden; height: 100vh; height: 100dvh; display: flex; flex-direction: column; }
.barre-planning { flex-wrap: wrap; justify-content: space-between; }
.barre-planning .barre-titre { text-align: left; flex: 1 1 8rem; }
.lien-retour { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.vues, .semaines { display: flex; gap: .3rem; align-items: center; }
.vue, .aujourdhui { min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(255,255,255,.35); border-radius: 10px;
                    background: transparent; color: #fff; font: 800 .95rem var(--typo); }
.vue[aria-pressed="true"] { background: #fff; color: var(--petrole); }

/* La ligne d'état FLOTTE au-dessus du tableau : en séance, un tableau qui saute de trente pixels à chaque geste fait rater le suivant. */
.etat-planning { position: fixed; left: 50%; transform: translateX(-50%); bottom: 3.4rem; z-index: 10; margin: 0; max-width: min(44rem, 92vw);
                 display: flex; align-items: center; gap: 1rem; font-size: calc(1rem * var(--taille));
                 background: #fff; border: 1px solid var(--trait); border-radius: 12px; padding: .55rem .9rem; box-shadow: 0 4px 14px rgba(0,0,0,.15); }
.etat-planning .lien { flex: none; padding: 0 .6rem; border: 1px solid var(--sauge); border-radius: 10px; }
#bloc-connexion { margin: 1rem; }
body.occupe .tableau-cadre { cursor: progress; }

.tableau-cadre { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--fond); }
.grille { position: relative; display: grid; min-width: max-content; }
.tete-jours { grid-column: 2; position: sticky; top: 0; z-index: 3; display: flex; }
.case-tete, .libelle { position: sticky; background: #fff; z-index: 3; }
.case-tete { top: 0; height: calc(3rem * var(--taille)); border-bottom: 1px solid var(--trait); border-left: 1px solid var(--trait);
             display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: calc(.85rem * var(--taille)); color: var(--sourd); }
.case-tete strong { color: var(--texte); font-size: calc(1rem * var(--taille)); }
.case-tete.aujourdhui-col { background: #e6eded; }
.case-tete.cible-jour { background: var(--sauge); color: #fff; }
.case-tete.cible-jour strong { color: #fff; }
.case-tete.coin { left: 0; z-index: 5; border-left: 0; align-items: flex-start; padding-left: .8rem; }
.libelle { left: 0; z-index: 4; display: flex; align-items: center; gap: .5rem; padding: 0 .6rem 0 .8rem;
           border-bottom: 1px solid var(--trait); font-weight: 800; font-size: calc(.92rem * var(--taille)); overflow: hidden; }
.libelle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libelle small { display: block; font-weight: 500; color: var(--sourd); font-size: calc(.78rem * var(--taille)); }
.libelle .pastille-entite { flex: none; width: 6px; align-self: stretch; margin: .45rem 0; border-radius: 3px; background: var(--sauge); }
.libelle.cible { background: #e6eded; }

.piste { position: relative; border-bottom: 1px solid var(--trait); }
.piste.cible { background: rgba(93,135,136,.14); }
.case { position: absolute; top: 0; bottom: 0; border-left: 1px solid #e3e8e6; }
.case.aujourdhui-col { background: rgba(93,135,136,.08); }

.bloc { position: absolute; height: calc(var(--ligne) * 1rem - .5rem); border-radius: 9px; background: #fff;
        border: 1px solid #b9c3c1; border-left: 6px solid var(--sauge); box-shadow: 0 1px 2px rgba(0,0,0,.08);
        display: flex; align-items: center; padding: 0 .55rem; overflow: hidden;
        color: var(--texte); touch-action: pan-x pan-y; user-select: none; -webkit-user-select: none; }
.bloc-texte { display: flex; flex-direction: column; min-width: 0; }
.bloc-titre, .bloc-sous { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bloc-titre { font-weight: 800; font-size: calc(.88rem * var(--taille)); }
.bloc-sous { display: none; font-weight: 500; color: var(--sourd); font-size: calc(.78rem * var(--taille)); }
.bloc.e-a { border-left-color: var(--entite-a); } .bloc.e-b { border-left-color: var(--entite-b); }
.bloc.e-c { border-left-color: var(--entite-c); } .bloc.e-z { border-left-color: var(--entite-z); }
.bloc.brouillon { border-style: dashed; opacity: .75; }
.bloc.choisi { outline: 3px solid var(--petrole); outline-offset: 1px; z-index: 2; touch-action: none; box-shadow: 0 6px 18px rgba(41,60,61,.3); }
.bloc.fantome { opacity: .7; z-index: 6; pointer-events: none; }
.bloc.interdit { outline-color: #b3261e; background: #fbe9e7; }
.poignee { display: none; position: absolute; top: 0; bottom: 0; width: var(--poignee); touch-action: none; }
.poignee::after { content: ""; position: absolute; top: 22%; bottom: 22%; left: calc(50% - 3px); width: 6px; border-radius: 3px; background: var(--petrole); }
.poignee.debut { left: 0; } .poignee.fin { right: 0; }
.bloc.choisi .poignee { display: block; }
.bloc.choisi .bloc-texte { margin: 0 calc(var(--poignee) - .55rem); }

.aide { margin: 0; padding: .45rem 1rem calc(.45rem + env(safe-area-inset-bottom)); font-size: calc(.82rem * var(--taille)); color: var(--sourd);
        background: #fff; border-top: 1px solid var(--trait); }

.fenetre { border: 0; border-radius: 14px; padding: 1rem; width: min(32rem, calc(100vw - 2rem)); max-height: 86vh; color: var(--texte); }
.fenetre::backdrop { background: rgba(41,60,61,.45); }
.fenetre h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.choix-liste { list-style: none; margin: .6rem 0; padding: 0; max-height: 50vh; overflow: auto; }
.choix-liste button { width: 100%; min-height: 48px; text-align: left; border: 0; border-bottom: 1px solid var(--trait);
                      background: #fff; font: 500 1rem var(--typo); color: var(--texte); padding: .4rem .3rem; }
.choix-liste button small { display: block; color: var(--sourd); font-size: .8rem; }
textarea { width: 100%; font: 500 16px var(--typo); border: 1px solid #b9c3c1; border-radius: 10px; padding: .5rem .6rem; color: var(--texte); }
.fiche-actions { display: flex; flex-direction: column; gap: .2rem; margin-top: .6rem; }
.lien-danger { color: #9a4b12; }

/* LE MODE RÉUNION : un écran de 65 à 75 pouces, debout, à un ou deux mètres. Tout grandit — lignes, cases,
   poignées (48 px : un pouce, pas une pointe de souris), textes — et chaque bloc dit aussi ses jours et son statut. */
body.reunion { --col-libelle: 17; --jour: 8; --ligne: 5.4; --poignee: 48px; --taille: 1.3; }
body.reunion .bloc-sous { display: block; }
body.reunion .vue, body.reunion .aujourdhui, body.reunion .jour-fleche { min-height: 56px; font-size: 1.15rem; }
body.reunion .jour-fleche { width: 56px; }
body.reunion .fenetre { width: min(44rem, calc(100vw - 2rem)); font-size: 1.2rem; }
body.reunion .choix-liste button { min-height: 64px; font-size: 1.25rem; }
body.reunion select, body.reunion input, body.reunion textarea { min-height: 56px; font-size: 1.2rem; }

@media (max-width: 40rem) { body:not(.reunion) { --col-libelle: 8.5; --jour: 4.4; } .vue, .aujourdhui { padding: 0 .6rem; } }