/* ==========================================================================
   Coquille applicative — pile de vues, en-têtes, barre d'onglets, feuilles.

   Reprise du prototype validé (« POC GIVAT »). Le modèle n'est pas celui
   d'un site : c'est une pile de vues façon iOS. Un écran ne remplace pas le
   précédent, il se pose dessus et glisse. C'est ce qui rend le retour en
   arrière compréhensible sans lire un fil d'Ariane.

   Sur ordinateur (≥ 1024 px) la barre latérale remplace la barre d'onglets
   et les feuilles modales : c'est la seule différence assumée avec le
   prototype, qui ne traite que le téléphone.

   Aucune couleur écrite ici : uniquement des variables de tokens.css.
   ========================================================================== */

/* ==========================================================================
   Ossature
   ========================================================================== */

.appli {
  display: grid;
  grid-template-columns: 1fr;
  height: 100dvh;
  overflow: hidden;
}

.appli__corps {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* ==========================================================================
   Pile de vues
   ========================================================================== */

.pile-vues {
  position: relative;
  flex: 1;
  overflow: hidden;
}

.vue {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--fond);
  will-change: transform;
}

/* Chaque vue défile pour son propre compte : c'est ce qui permet à l'écran
   sortant de garder sa position pendant que le suivant glisse par-dessus.
   Le rembourrage bas dégage la barre d'onglets flottante et le retrait de
   l'appareil — sinon la dernière ligne d'une liste passe dessous. */
.vue__defilement {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 0 calc(var(--pas) * 4)
           calc(var(--hauteur-onglets) + var(--retrait-bas) + var(--pas) * 7);
}

.vue__defilement > * + * { margin-top: calc(var(--pas) * 4); }

.vue--entre-pile  { animation: vue-entre-pile 0.34s var(--sortie) both; }
.vue--sort-pile   { animation: vue-sort-pile 0.34s var(--sortie) both; }
.vue--sort-retour { animation: vue-sort-retour 0.3s var(--sortie) both; }
.vue--entre-retour{ animation: vue-entre-retour 0.3s var(--sortie) both; }
.vue--fondu       { animation: vue-fondu 0.26s var(--sortie) both; }

@keyframes vue-entre-pile {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
/* L'écran sortant recule d'un quart et s'assombrit : c'est ce décalage qui
   dit « il est toujours là, derrière ». Sans lui, la transition ressemble à
   un changement de page. */
@keyframes vue-sort-pile {
  from { transform: translateX(0); filter: brightness(1); }
  to   { transform: translateX(-26%); filter: brightness(0.94); }
}
@keyframes vue-sort-retour {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}
@keyframes vue-entre-retour {
  from { transform: translateX(-26%); filter: brightness(0.94); }
  to   { transform: translateX(0); filter: brightness(1); }
}
@keyframes vue-fondu {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: scale(1); }
}

/* Bande de saisie du geste de retour. Purement visuelle : elle ne capte
   aucun tap, c'est le document qui écoute (core/gestes.js). */
.zone-retour {
  position: absolute;
  top: 46px; right: 0; bottom: 0;
  width: 26px;
  z-index: 95;
  pointer-events: none;
}

/* ==========================================================================
   En-têtes
   ========================================================================== */

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  padding: calc(var(--pas) * 5) calc(var(--pas) * 4) calc(var(--pas) * 2);
  background: linear-gradient(to bottom, var(--fond) 62%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
}

/* Écran empilé : fond plein, sinon le titre du précédent transparaît
   pendant le glissement. */
.entete--pleine {
  background: color-mix(in srgb, var(--fond) 86%, transparent);
  border-bottom: 1px solid transparent;
}

/* Posée dès 6 px de défilement par la coquille. Le filet n'apparaît qu'à ce
   moment : au repos, rien ne sépare l'en-tête du contenu. */
.entete--defilee {
  background: color-mix(in srgb, var(--fond) 92%, transparent);
  border-bottom: 1px solid var(--filet);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--encre) 5%, transparent);
}

.entete__rang {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  min-height: 38px;
}
.entete__espace { flex: 1; }

.entete__bloc-titre { padding-top: calc(var(--pas) * 2); }
.entete--pleine .entete__bloc-titre { padding: calc(var(--pas) * 1.5) 0 var(--pas); }

.entete__titre {
  font-family: var(--police-titre);
  font-size: 1.62rem;
  font-weight: 700;
  letter-spacing: -0.6px;
  line-height: 1.15;
}
.entete__sous-titre {
  font-size: 0.78rem;
  color: var(--encre-55);
  font-weight: 600;
  margin-top: 1px;
}

/* --- Boutons d'en-tête ----------------------------------------------------

   Ils sont **peints** à 38 px, comme dans le prototype : à 44 px, trois
   pastilles côte à côte écrasent le titre sur un écran de 375 px. Mais le §6
   impose une cible de 44 px, et une cible n'est pas un dessin.

   Les deux tiennent ensemble par une zone de saisie transparente, centrée sur
   le bouton et plus grande que lui. On voit 38 px, on tape 44 px. */
.bouton-rond::after,
.pastille-compte::after,
.bouton-accueil::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: var(--cible-tactile);
  min-width: var(--cible-tactile);
}
.pastille-compte, .bouton-accueil { position: relative; }

.bouton-rond {
  position: relative;
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--carte);
  box-shadow: var(--ombre-1);
  color: var(--texte);
  border: 0;
  cursor: pointer;
  transition: transform var(--duree-anim) var(--ressort), background var(--duree-anim) ease;
}
.bouton-rond:hover { background: var(--primaire-clair); }
.bouton-rond:active { transform: scale(0.9); background: var(--primaire-clair); }
.bouton-rond svg { width: 1.25rem; height: 1.25rem; }

.bouton-rond__pastille {
  position: absolute;
  top: 6px; right: 7px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--danger);
  border: 2px solid var(--carte);
}

/* Pastille du compte : l'initiale de la personne connectée. C'est par elle
   qu'on atteint les réglages, comme dans les applications où le compte est
   la porte de l'administration. */
.pastille-compte {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--primaire), var(--primaire-profond));
  color: var(--sur-primaire);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: -0.3px;
  border: 0;
  cursor: pointer;
  box-shadow: var(--ombre-1);
  transition: transform var(--duree-anim) var(--ressort);
}
.pastille-compte:active { transform: scale(0.9); }

/* Bouton Accueil permanent. L'accueil n'occupe pas d'onglet — les quatre
   sont pris — il est ici, à la même place sur chaque écran. */
.bouton-accueil {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  height: 38px;
  padding: 0 13px 0 7px;
  border-radius: var(--r-pill);
  background: var(--carte);
  box-shadow: var(--ombre-1);
  color: var(--texte);
  border: 0;
  cursor: pointer;
  transition: transform var(--duree-anim) var(--ressort);
}
.bouton-accueil:hover { text-decoration: none; }
.bouton-accueil:active { transform: scale(0.94); }
.bouton-accueil.actif { background: var(--encre); color: var(--sur-encre); }
.bouton-accueil span { font-size: 0.8rem; font-weight: 700; letter-spacing: -0.2px; }
.bouton-accueil__logo { width: 26px; height: 26px; flex: 0 0 26px; color: var(--primaire); }
.bouton-accueil.actif .bouton-accueil__logo { color: currentColor; }

/* Sans fond, celui-ci peut simplement grandir : personne ne voit la
   différence, et la cible du §6 est atteinte sans artifice. */
.bouton-retour {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--cible-tactile);
  padding-right: calc(var(--pas) * 2);
  color: var(--primaire-profond);
  font-weight: 600;
  font-size: 0.97rem;
  background: none;
  border: 0;
  cursor: pointer;
}
.bouton-retour:active { opacity: 0.5; }
.bouton-retour svg { width: 1.3rem; height: 1.3rem; }