/* ============================================================================
   HORA · Espace prestataire — couche « application »
   ----------------------------------------------------------------------------
   La maquette (assets/maquette.css) n'est pas modifiée : elle décrit un
   présentoir, un iPhone dessiné sur une page claire. Ce fichier ne fait que
   l'habiller pour un vrai usage :

     - l'écran occupe toute la surface, sans cadre ni barres simulées ;
     - les encoches et la barre d'accueil sont respectées par les marges
       sûres, l'aura continuant de passer dessous ;
     - s'y ajoutent les états qu'une maquette n'a pas : erreur de connexion,
       chargement, bouton occupé, hors-ligne.

   Tout ce qui est ajouté ici reprend les variables et les proportions de la
   maquette. Aucune couleur en dur qui ne vienne d'elle.
   ========================================================================== */

/* ── Plein écran, toujours ─────────────────────────────────────────────────
   La maquette posait l'écran dans un iPhone dessiné, sur une page grise : un
   présentoir, pas une application. Ici l'écran EST l'application — il occupe
   toute la surface, et c'est l'appareil qui fournit le cadre.

   Disparaissent avec le cadre : la barre d'état simulée (« 9:41 », réseau,
   batterie) et la barre d'accueil dessinée. Le système dessine les siennes,
   par-dessus ; en dessiner d'autres les afficherait en double. */
html, body { height: 100%; }
body {
  margin: 0; padding: 0; gap: 0;
  display: block;
  background: var(--bg, #000);
  overflow: hidden;               /* le défilement a lieu dans .doc */
  overscroll-behavior: none;
}
.stage {
  display: block; gap: 0;
  width: 100%;
  height: 100vh; height: 100dvh;
}
.screen {
  width: 100%; height: 100%;
  border-radius: 0;
}

/* ── Encoche, Dynamic Island, barre d'accueil ──────────────────────────────
   Les marges sûres sont posées sur les éléments de bord, pas sur .screen :
   l'aura doit continuer de couvrir toute la surface, jusque sous l'encoche.

   En bas, on REMPLACE la marge de la maquette, on ne s'y ajoute pas : ses 30px
   sous la barre d'onglets et ses 32px sous le pied de la connexion servaient
   déjà à dégager la barre d'accueil dessinée. Les additionner à la marge sûre
   de l'appareil doublait l'espace — 64px au lieu de 34 sur un iPhone récent.
   D'où max() plutôt que calc() : la plus grande des deux suffit.

   En haut au contraire, la marge s'ajoute : celle de la maquette venait de la
   barre d'état simulée, qui a disparu. Le plancher de 24px est là pour Android,
   dont le webview déclare souvent une marge sûre nulle alors que la barre
   d'état le recouvre bel et bien. */
html.is-native .hd   { padding-top: calc(18px + max(env(safe-area-inset-top, 0px), 24px)); }
html.is-native .auth { padding-top: max(env(safe-area-inset-top, 0px), 24px); }
html.is-native .tabs { padding-bottom: max(env(safe-area-inset-bottom, 0px), 30px); }
html.is-native .auth > .foot { padding-bottom: max(env(safe-area-inset-bottom, 0px), 32px); }
html.is-native .sh-body      { padding-bottom: max(env(safe-area-inset-bottom, 0px), 34px); }

/* Installée depuis le navigateur (PWA) : même traitement, sans le plancher —
   le navigateur, lui, déclare correctement ses marges sûres. */
@media (display-mode: standalone), (display-mode: fullscreen) {
  .hd   { padding-top: calc(18px + env(safe-area-inset-top, 0px)); }
  .auth { padding-top: env(safe-area-inset-top, 0px); }
  .tabs { padding-bottom: max(env(safe-area-inset-bottom, 0px), 30px); }
  .auth > .foot { padding-bottom: max(env(safe-area-inset-bottom, 0px), 32px); }
  .sh-body { padding-bottom: max(env(safe-area-inset-bottom, 0px), 34px); }
}

/* ── Un vrai clavier, un vrai défilement ───────────────────────────────────
   iOS remonte la page entière quand le clavier s'ouvre. On borne. */
.screen { overscroll-behavior: contain; }
.doc { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.auth { overscroll-behavior: contain; }
input, button { font-size: max(16px, 1em); } /* pas de zoom auto iOS */
.line input, .efield input { font-size: 16px; }

/* ── Connexion : ce que la maquette n'a pas ────────────────────────────────
   Un message d'erreur, et un bouton qui dit qu'il travaille. */
.auth .err {
  margin: 14px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--no); letter-spacing: -.005em; min-height: 0;
}
.auth .err:empty { display: none; }
.line.societe { border-top: 0; }

.go[disabled], .go.busy { opacity: .55; cursor: default; filter: none; }
.go .spin, .yes .spin, .no .spin { margin-right: 8px; }

/* Roue d'attente, dans les traits de la maquette (1.4px, currentColor). */
.spin {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 1.6px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s } }

/* ── Chargement d'un écran ─────────────────────────────────────────────────
   Pas de squelette clignotant : une ligne sobre, du même gris que « Journée
   libre » ou « Aucun événement ». */
.loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 46px 18px; font-size: 13.5px; color: var(--ink-3);
}
.retry {
  display: block; margin: 14px auto 0; padding: 10px 18px;
  border: 1px solid var(--glass-bd); border-radius: 12px; background: none;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--acc); cursor: pointer;
}
.retry:hover { border-color: currentColor; }

/* ── Hors-ligne ────────────────────────────────────────────────────────────
   Un bandeau discret sous l'en-tête : les données affichées restent celles
   du dernier chargement, on le dit plutôt que de faire semblant. */
.offline {
  flex: 0 0 auto; position: relative; z-index: 3;
  margin: 0 20px 10px; padding: 9px 13px; border-radius: 12px;
  background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  font-size: 12px; color: var(--ink-2); text-align: center; letter-spacing: -.01em;
}

/* ── Boutons d'action pendant l'envoi ──────────────────────────────────────*/
.act button[disabled] { opacity: .45; cursor: default; }
.act button[disabled]:hover { filter: none; border-color: var(--glass-bd); }

/* ── Champ société au login (quand le domaine ne suffit pas) ───────────────*/
.line input[name="societe"] { text-transform: none; }

/* ── Sélection et report des liens ─────────────────────────────────────────*/
a.file, a.sync { text-decoration: none; }
.file[disabled] { opacity: .5; cursor: default; }

/* ── Détails d'événement : la note de l'organisateur et la réponse donnée ──*/
.sh-body .mine { color: var(--ink-2); }

/* ── Rien à sélectionner par inadvertance dans une application ─────────────*/
.screen { -webkit-user-select: none; user-select: none; }
.screen input, .sh-note, .ev-when, .sh-sub { -webkit-user-select: text; user-select: text; }

/* ── Message d'échec sous une carte de demande ─────────────────────────────
   La ligne « reçue le … » existe déjà ; en cas d'échec elle porte le message,
   dans la couleur de refus de la maquette. */
.recv.err { color: var(--no); }

/* ── Interrupteur présent mais pas encore branché ──────────────────────────*/
.sw[disabled] { cursor: default; opacity: .55; }
.sw[disabled]:hover { color: inherit; }

/* ── Champs préremplis par le navigateur ───────────────────────────────────
   Chrome et Safari repeignent eux-mêmes les champs qu'ils remplissent : fond
   bleu pâle, texte noir. Sur le fond sombre de la maquette, cela donne deux
   pavés clairs au milieu de la bulle, alors qu'un champ saisi à la main reste
   transparent — l'incohérence saute aux yeux.

   Ce fond n'est pas supprimable directement : il est peint par le moteur, hors
   de portée du CSS. L'usage est de repousser sa transition si loin qu'il
   n'apparaît jamais, et de forcer la couleur du texte, qui elle est accessible
   par -webkit-text-fill-color. */
.line input:-webkit-autofill,
.line input:-webkit-autofill:hover,
.line input:-webkit-autofill:focus,
.line input:-webkit-autofill:active,
.efield input:-webkit-autofill,
.efield input:-webkit-autofill:hover,
.efield input:-webkit-autofill:focus,
.efield input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* Forme standardisée, désormais reconnue par Chrome, Safari et Firefox. */
.line input:autofill,
.efield input:autofill {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 600000s 0s, color 600000s 0s;
}

/* ── Survol collé au doigt ─────────────────────────────────────────────────
   La maquette met en valeur au survol : fond gris sur une ligne, couleur
   d'accent sur un lien, opacité sur un bouton. C'est juste à la souris. Au
   doigt, iOS attribue l'état :hover à l'élément touché et l'y laisse jusqu'au
   tap suivant — d'où la ligne du Profil qui reste éclairée après qu'on a
   refermé la feuille par-dessus elle.

   On ne touche pas maquette.css : on remet ici, pour les appareils sans
   dispositif de survol, la valeur que chaque règle avait avant :hover. */
/* Les états sélectionnés — .sel sur un jour, .on sur une pastille ou un mois —
   ont exactement la même spécificité que les règles de survol ci-dessous, qui
   sont chargées après et l'emportaient donc. Sur un écran tactile le survol
   reste collé après un appui : le jour choisi perdait son dégradé et il ne
   restait que son texte blanc, invisible sur la carte. D'où les :not(). */
@media (hover: none) {
  /* Opacité */
  .line .show:hover, .forgot:hover, .alt a:hover,
  .sync:hover, .nall:hover, .more:hover { opacity: 1; }

  /* Luminosité */
  .go:hover, .act .yes:hover { filter: none; }

  /* Fonds de ligne */
  .erow:hover, .prow:hover,
  .pick-grid button:not(.on):hover, .yr-menu button:not(.on):hover { background: none; }
  .grid > .day:not(.sel):hover .n { background: none; }

  /* Couleurs de texte */
  .pick-year button:hover, .arrows button:hover,
  .seg2 button:hover, .appear button:hover, .ef-b:hover { color: var(--ink-3); }
  .chip:not(.on):hover, .pick-grid button:not(.on):hover, .yr-menu button:not(.on):hover { color: var(--ink-2); }
  .sh-back:hover, .close:hover { color: var(--ink-2); }
  .nrow:hover, .srow:hover { color: var(--ink); }

  /* Bordures */
  .cbtn:hover, .out:hover, .act .no:hover, .file:hover { border-color: var(--glass-bd); }

  /* Le crayon d'un champ en cours d'édition garde sa couleur d'accent :
     c'est un état, pas un survol. */
  .efield.on .ef-b:hover { color: var(--acc); }
}

/* ── Écran de connexion quand le clavier s'ouvre ───────────────────────────
   La maquette pose .auth en colonne : .mid centré occupe la place libre,
   .foot reste en bas. Elle a été dessinée pour un écran entier, sans clavier.

   Le clavier d'iOS réduit la hauteur du webview de moitié. Comme .mid porte
   min-height:0 et .auth overflow:hidden, le contenu déborde de sa case sans
   rien décaler : le logo sort par le haut, et le trait de séparation du pied
   vient barrer le bouton « Se connecter ».

   On rend donc la colonne défilante et on empêche .mid de rétrécir sous son
   contenu. Écran entier, rien ne change — c'est seulement quand la place
   manque que ça défile au lieu de se chevaucher. */
.auth {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.auth::-webkit-scrollbar { display: none; }
.auth > .mid {
  flex: 1 0 auto;      /* prend au moins la hauteur de son contenu */
  min-height: auto;
  padding-bottom: 8px;
}

/* ── Deux prestations le même jour ─────────────────────────────────────────
   La maquette ne montrait qu'une fiche par date : on répète le même panneau
   quand il y en a plusieurs (voir calScreen), et deux panneaux se touchaient
   bord à bord. On lisait une seule fiche très longue au lieu de deux. */
.panel.ev + .panel.ev { margin-top: 14px; }