/*
 * Tableau de progression — la face **portrait** de l'application.
 *
 * L'orientation choisit la face, et ce n'est pas un artifice : elle dit la
 * posture. À l'horizontale, l'appareil est *posé* — on le regarde de loin, sans
 * le toucher, d'où l'horloge à volets qui occupe l'écran. À la verticale, il
 * est *en main* — on le sort, on tape, on le range. Deux usages, deux mises en
 * page, aucun bouton à apprendre pour passer de l'une à l'autre.
 *
 * Tout ce fichier vit donc sous une requête d'orientation. En paysage, le
 * tableau n'existe pas : il n'est pas seulement caché, il ne prend aucune
 * place et ne reçoit aucune tape.
 */

/*
 * UNE SEULE PAGE DE PROGRESSION, ET ELLE EST ICI.
 *
 * Elle occupe l'écran en portrait, et se pose en surcouche en paysage quand on
 * la demande. Il y avait avant deux écrans montrant la même chose — cette page
 * et un panneau « Progression » — dont l'un se rouvrait par-dessus l'autre.
 * Deux mises en page d'une même information finissent toujours par diverger ;
 * il n'en reste qu'une, et elle change seulement d'hôte.
 */
.tableau{
  display:none;flex-direction:column;
  position:fixed;inset:0;
  /* `inset:0` mesure la fenêtre telle que la page la connaît ; `dvh` mesure
     celle que le système affiche réellement, barres comprises. Les deux
     coïncident presque partout — et là où elles diffèrent, c'est la seconde
     qui décrit l'écran. Ignorée par les navigateurs qui ne la connaissent
     pas, auquel cas `inset:0` continue de faire le travail. */
  height:100dvh;
  /* Sous les voiles (10) : les catégories et la synchronisation s'ouvrent
     par-dessus elle, jamais l'inverse. */
  z-index:9;
  background:var(--bg);
  /* Marges latérales égales, comme la scène : sur un appareil dont l'encoche
     n'est que d'un côté, prendre chaque marge de son côté décentre tout.
     AUCUNE MARGE EN BAS : elle est portée par la zone qui défile, à l'intérieur
     d'elle. Posée ici, elle s'ajoutait SOUS le défilement — le contenu
     s'arrêtait avant le bord de l'écran, et la marge de sécurité de l'iPhone
     laissait une bande noire de cinquante pixels sous une carte coupée. */
  padding:max(env(safe-area-inset-top),14px)
          max(env(safe-area-inset-right),env(safe-area-inset-left),16px)
          0
          max(env(safe-area-inset-right),env(safe-area-inset-left),16px);
  gap:14px;
  /* Rogne l'excédent de `.tab-corps` : voir « la géométrie » dans chrono.css. */
  overflow:hidden;
}

/* Demandée depuis la face paysage. */
.tableau.ouvert{display:flex;}

/* Sur un écran large, la colonne est ramenée au centre par ses marges plutôt
   que par une largeur maximale posée sur son contenu : les zones qui défilent
   débordent volontairement de trente-deux pixels pour cacher leur barre, et
   les plafonner désalignerait l'en-tête du corps. */
@media (orientation: landscape){
  .tableau.ouvert{
    padding-left:max(env(safe-area-inset-right),env(safe-area-inset-left),16px,
                     calc((100% - 720px) / 2));
    padding-right:max(env(safe-area-inset-right),env(safe-area-inset-left),16px,
                      calc((100% - 720px) / 2));
  }
}

/* Le bouton « Fermer » n'a de sens que posée sur autre chose : en portrait,
   elle n'est pas une surcouche, elle est la page. */
.tab-fermer{display:none;}
.tableau.ouvert .tab-fermer{display:block;}

@media (orientation: portrait){
  /* En portrait, la scène et ses commandes disparaissent entièrement. Les
     masquer sans les retirer laisserait des boutons invisibles sous les
     lignes : un bouton qu'on presse sans le voir est pire qu'un bouton
     absent. */
  .scene,.barre,.durees,.coin,.heure-coin,.marque{display:none !important;}

  /*
   * C'EST LE DOCUMENT QUI DÉFILE, comme dans TaskMint et KeyMint.
   *
   * Un cadre en `position:fixed` est borné à `innerHeight` — et iOS en retire
   * la hauteur de sa barre d'état : 894 points pour un écran de 956. La page
   * remplissait donc parfaitement une fenêtre amputée, et les soixante-deux
   * points manquants restaient noirs quoi qu'on écrive. Aucune marge, aucune
   * unité de fenêtre ne les rendait : ils étaient hors du cadre.
   *
   * Une page qui défile d'elle-même n'a pas cette borne. Le cadre fixe reste
   * en paysage, où il est justifié : l'horloge doit occuper l'écran sans
   * bouger, et rien n'y défile.
   */
  html,body{height:auto;min-height:100%;overflow:visible;}
  body{min-height:100dvh;background:var(--bg);}

  .tableau{
    display:flex;
    position:static;height:auto;min-height:100dvh;
    overflow:visible;
    padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
  }

  /* La zone de contenu n'est plus une zone de défilement : c'est la page. Sa
     largeur redevient normale — le débordement de trente-deux pixels ne
     servait qu'à cacher une barre qui n'existe plus ici. */
  .tableau .tab-corps.sans-barre{
    flex:0 0 auto;overflow:visible;
    width:100%;padding-right:0;padding-bottom:0;
  }

  /* Le bandeau d'annulation, lui, reste sous les yeux : il ne dure que quelques
     secondes, et le chercher en faisant défiler la page lui ferait rater sa
     seule raison d'être. */
  .tab-annuler{
    position:fixed;z-index:11;
    left:max(env(safe-area-inset-left),16px);
    right:max(env(safe-area-inset-right),16px);
    bottom:calc(env(safe-area-inset-bottom) + 12px);
    margin-bottom:0;
  }
}

/* ------------------------------------------------------------- en-tête */

.tab-tete{
  flex:0 0 auto;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.tab-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto;}

/* Le bouton des réglages : discret, dans le coin, comme les commandes de la
   face paysage. Il ouvre les panneaux qui existent déjà. */
.tab-reglages{
  flex:0 0 auto;
  width:40px;height:40px;border-radius:12px;
  border:1px solid var(--border-strong);background:var(--surface);
  color:var(--text2);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.tab-reglages svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.tab-reglages:active{color:var(--text);border-color:var(--text);}

/* ------------------------------------------------------------- le corps */

/*
 * Une colonne : les totaux, la semaine, puis une ligne par catégorie. La face
 * portrait EST la page de progression — on y arrive pour voir son blason en
 * grand et son niveau, pas pour piloter une grille.
 */
.tab-corps{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:clamp(10px,1.8vh,16px);
  /*
   * LE CONTENU VA JUSQU'EN BAS DE L'ÉCRAN, marge de sécurité comprise.
   *
   * Celle-ci n'est pas une zone interdite : c'est là que passe la barre
   * d'accueil, qui flotte par-dessus la page. La réserver ne protégeait rien —
   * elle laissait seulement un bandeau noir au bas d'une application qui, elle,
   * est noire.
   */
  padding-bottom:0;
}

.tab-resume{display:flex;flex-direction:column;gap:clamp(10px,1.8vh,16px);}

/*
 * Les trois totaux sont plus sobres ici que dans le panneau : le portrait leur
 * donne trois colonnes sur 375 px, où « 11 h 40 » passait à la ligne et
 * doublait la hauteur des cartes. Ils accompagnent le blason, ils ne lui
 * disputent pas la place.
 */
.tab-resume .total-valeur{
  font-size:clamp(15px,2.4vh,20px);
  white-space:nowrap;
}
.tab-resume .total-nom{font-size:10px;}
.tab-resume .total{padding:10px 11px;}

/* La semaine tient dans une bande plus courte : ce qu'on vient regarder ici,
   c'est la régularité, pas la mesure. */
.tab-resume .barre-jour .fut{height:clamp(56px,10vh,84px);}

/*
 * Une ligne de catégorie est un bouton sur toute sa largeur : viser une cible
 * de quelques millimètres d'une main occupée est exactement ce qu'on veut
 * éviter. Le style reste celui des lignes de `suivi.css`, pour que les deux
 * faces ne divergent pas.
 */
.ligne-bouton{
  width:100%;
  font-family:inherit;text-align:left;
  color:var(--text);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s,border-color .12s,background .12s;
}
.ligne-bouton:active{
  transform:scale(.985);
  border-color:var(--text);background:var(--surface2);
}

/* Le bas d'une ligne : le reste à parcourir à gauche, le compte du jour à
   droite — la seule chose qu'on vient vérifier avant de taper. */
.ligne-bas{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
}
.ligne-jour{
  flex:0 0 auto;
  color:var(--text);font-weight:700;
  font-size:clamp(11px,1.6vh,13px);
}

/* Créer : le trait interrompu la distingue sans la reléguer. */
.ligne-neuve{
  border-style:dashed;color:var(--text2);
  text-align:center;font-weight:700;
  font-size:clamp(14px,2.1vh,16px);
  padding:clamp(13px,2.2vh,18px);
}

/* --------------------------------------------------------------- la marque */

/*
 * En pied, et dans le flux : la marque de la face paysage est fixée en haut de
 * l'écran, ce qui convient à une horloge qu'on ne touche pas. Ici la page
 * défile et se tape ; une marque flottante masquerait une ligne, et recevrait
 * les gestes qui lui étaient destinés.
 */
.tab-marque{
  flex:0 0 auto;align-self:center;
  height:13px;width:auto;opacity:.22;
  margin:6px 0 2px;
  user-select:none;-webkit-user-select:none;pointer-events:none;
}

/* ------------------------------------------------------- barre d'annulation */

/*
 * Un `+1` de travers agace davantage qu'un oubli : il fausse un compte qu'on
 * regarde. L'annulation reste donc offerte quelques secondes, sans jamais
 * demander confirmation au moment du geste — confirmer chaque tape coûterait
 * cher à chaque fois pour éviter une erreur rare.
 */
/* Ces deux-là gardent la marge de sécurité, et pour une raison précise : on
   les TOUCHE. Un bouton posé au ras du bord dispute sa place au balayage
   d'accueil du système, qui gagne — la tape part ailleurs. Ce qui se lit peut
   descendre jusqu'en bas ; ce qui se presse, non. */
.tab-annuler{
  flex:0 0 auto;
  margin-bottom:max(env(safe-area-inset-bottom),14px);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 14px;
  border-radius:14px;
  border:1px solid var(--border-strong);background:var(--surface2);
  color:var(--text3);font-weight:600;font-size:13px;
}
.tab-annuler[hidden]{display:none;}
.tab-annuler button{
  flex:0 0 auto;
  background:none;border:none;padding:4px 0;
  color:var(--text);font-family:inherit;font-weight:700;font-size:13px;
  text-decoration:underline;text-underline-offset:4px;
  cursor:pointer;
}

/* -------------------------------------------------- création d'une catégorie */

.tab-neuve{
  flex:0 0 auto;
  margin-bottom:max(env(safe-area-inset-bottom),14px);
  display:flex;flex-direction:column;gap:10px;
  padding:14px;
  border:1px solid var(--border-strong);border-radius:16px;
  background:var(--surface);
}
.tab-neuve[hidden]{display:none;}
/* Visé sur le champ de texte, et non sur `input` : la règle large gagnait
   contre `.rythme-champ` — plus spécifique d'un cran — et étirait le nombre
   sur toute la largeur, rejetant son unité à la ligne. */
.tab-neuve input[type="text"]{
  width:100%;
  padding:11px 13px;border-radius:11px;
  border:1px solid var(--border-strong);background:var(--surface2);
  color:var(--text);font-family:inherit;font-weight:600;font-size:15px;
}
.tab-neuve input[type="text"]:focus{outline:none;border-color:var(--text);}
.rythme-neuve{padding:2px 2px 0;}

.tab-neuve-pied{display:flex;gap:9px;align-items:center;flex-wrap:wrap;}
.tab-neuve-pied .bouton{flex:0 0 auto;}
.tab-neuve-pied .lien{flex:0 0 auto;}
.tab-neuve-pied .unites{flex:1 1 100%;order:-1;}

/* Le vide : un tableau sans catégorie ne doit pas ressembler à une panne. */
.tab-vide{
  color:var(--text2);font-weight:600;font-size:14px;line-height:1.5;
  text-align:center;padding:24px 8px;
}