/* ============================================================
   Marcel — Habillage de la tablette du dépôt
   tablette.css  (chargé par index.html, appliqué par modules/tablette.js)

   Écrit pour un doigt sur un écran tenu à bout de bras, dehors :
     · cibles de 56 px au minimum — un pouce mouillé ne vise pas mieux ;
     · contrastes appuyés, la lumière du jour mange les gris clairs ;
     · aucun effet de survol : il n'y a pas de souris, et un état
       « survolé » resté collé après un appui trompe sur ce qui est actif.

   Rien ici ne touche l'application normale : tout est préfixé .tab-,
   et body.mode-tablette n'est posé que par Tablette.boot().
   ============================================================ */

body.mode-tablette {
  margin: 0;
  background: #f1f5f9;
  /* Empêche le rebond élastique iPadOS, qui décolle la page pendant qu'on
     signe et fait sauter le trait. */
  overscroll-behavior: none;
}

#tablette {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #0f172a;
  -webkit-text-size-adjust: 100%;
}

/* ---- Bandeau ---- */

.tab-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 26px;
  background: #0f172a;
  color: #fff;
  /* La tablette reste posée : le bandeau ne doit pas disparaître au
     défilement, c'est le seul endroit d'où l'on se déconnecte. */
  position: sticky;
  top: 0;
  z-index: 10;
}

.tab-entete-titre  { display: flex; align-items: baseline; gap: 10px; }
.tab-marque        { font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.tab-sous-marque   { font-size: 15px; color: #94a3b8; font-weight: 600; }
.tab-entete-actions{ display: flex; align-items: center; gap: 16px; }
.tab-compte        { font-size: 15px; color: #cbd5e1; font-weight: 600; }

/* ---- Corps ---- */

.tab-vue {
  flex: 1;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 26px 22px 60px;
  box-sizing: border-box;
}

.tab-attente {
  padding: 90px 20px;
  text-align: center;
  font-size: 19px;
  color: #64748b;
}

.tab-section        { margin-bottom: 38px; }
.tab-section-entete { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tab-section-titre  { font-size: 20px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.2px; }
.tab-section-entete .tab-section-titre { margin-bottom: 16px; }

.tab-pastille {
  display: inline-block;
  min-width: 26px;
  padding: 2px 9px;
  margin-left: 6px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
  vertical-align: 2px;
}

.tab-note {
  margin: 16px 2px 0;
  font-size: 14px;
  line-height: 1.55;
  color: #64748b;
}

/* ---- Documents à signer ---- */

.tab-cartes { display: flex; flex-direction: column; gap: 12px; }

.tab-carte {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-left: 5px solid #2563eb;
  border-radius: 14px;
  padding: 16px 18px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab-carte:active { background: #eff6ff; border-color: #2563eb; }

.tab-carte-haut  { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.tab-carte-type  { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #2563eb; }
.tab-carte-num   { font-size: 13px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }
.tab-carte-qui   { font-size: 21px; font-weight: 700; line-height: 1.25; }
.tab-carte-quoi  { font-size: 16px; color: #475569; margin-top: 3px; }
.tab-carte-date  { font-size: 14px; color: #94a3b8; margin-top: 8px; }

.tab-vide {
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  padding: 40px 26px;
  text-align: center;
}
.tab-vide-titre { font-size: 19px; font-weight: 700; margin-bottom: 8px; }
.tab-vide-texte { font-size: 16px; color: #64748b; line-height: 1.55; max-width: 460px; margin: 0 auto 20px; }

/* ---- Créer sur place ---- */

.tab-grille {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tab-tuile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 84px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  font: inherit;
  color: #0f172a;
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.tab-tuile:active     { background: #eff6ff; border-color: #2563eb; }
.tab-tuile-icone      { color: #2563eb; display: flex; flex-shrink: 0; }
.tab-tuile-texte      { font-size: 17px; font-weight: 700; line-height: 1.3; }

/* ---- Retour ---- */

.tab-retour {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 52px;
  padding: 0 18px 0 10px;
  margin-bottom: 16px;
  background: transparent;
  border: none;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tab-retour:active { color: #0f172a; }

/* ---- Le document présenté ---- */

.tab-doc {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 18px;
}

.tab-doc-entete { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.tab-doc-titre  { font-size: 23px; font-weight: 800; margin: 0 0 18px; letter-spacing: -.3px; }
.tab-doc-entete .tab-doc-titre { margin-bottom: 18px; }
.tab-doc-num    { font-size: 15px; font-weight: 700; color: #94a3b8; font-variant-numeric: tabular-nums; }

.tab-recap-ligne {
  display: flex;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #f1f5f9;
}
.tab-recap-ligne:last-child { border-bottom: none; padding-bottom: 0; }
.tab-recap-cle {
  flex: 0 0 40%;
  max-width: 210px;
  font-size: 15px;
  color: #64748b;
  font-weight: 600;
}
.tab-recap-val {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  /* Un état des lieux saisi au bureau contient des retours à la ligne :
     les écraser rendrait le texte illisible au moment précis où le
     signataire doit le relire. */
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---- Conditions repliées ---- */

.tab-mentions {
  margin-top: 18px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}
.tab-mentions > summary {
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  cursor: pointer;
  list-style: none;
  min-height: 24px;
}
.tab-mentions > summary::-webkit-details-marker { display: none; }
.tab-mentions > summary::before { content: '▸ '; color: #94a3b8; }
.tab-mentions[open] > summary::before { content: '▾ '; }
.tab-mentions-texte {
  padding: 0 18px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  white-space: pre-wrap;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---- Formulaire ---- */

.tab-formulaire { display: flex; flex-direction: column; gap: 4px; }
.tab-groupe     { margin-bottom: 18px; }
.tab-facultatif { font-weight: 500; color: #94a3b8; }

/* Ces règles sont préfixées par #tablette, et pas seulement par leur classe.
   style.css pose des styles sur les SÉLECTEURS D'ÉLÉMENTS (`label`,
   `input[type="text"]`), plus spécifiques qu'une simple classe : sans le
   préfixe, un champ texte de la tablette héritait de 13,5 px et d'un cadre de
   1 px — c'est-à-dire du formulaire de bureau, à la souris. Le 13,5 px n'est
   pas qu'une question d'allure : en dessous de 16 px, Safari iPadOS zoome de
   lui-même à la mise au point et le formulaire déborde de l'écran. */

#tablette .tab-champ-label {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
  /* style.css met tous les <label> en capitales espacées. Ici les libellés
     sont des phrases lues par quelqu'un qui va signer : elles restent des
     phrases. */
  text-transform: none;
  letter-spacing: normal;
}

#tablette .tab-champ {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 58px;
  padding: 14px 16px;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  background: #fff;
  font-size: 17px;
  line-height: 1.35;
  font-family: inherit;
  color: #0f172a;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
#tablette .tab-champ:focus {
  outline: none;
  border-color: #2563eb;
  /* style.css pose un halo bleu au focus ; sur un cadre déjà épais il bave. */
  box-shadow: none;
}

#tablette select.tab-champ {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 48px;
}

#tablette .tab-zone { min-height: 96px; line-height: 1.5; resize: vertical; }

/* ---- Le pavé de signature ---- */

.tab-pave {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px 22px 24px;
  margin-bottom: 18px;
}

.tab-pave-entete {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.tab-pave-titre { font-size: 17px; font-weight: 800; }
.tab-pave-note  { font-size: 14px; color: #64748b; margin-top: 3px; }

.tab-canvas {
  display: block;
  width: 100%;
  height: 220px;
  background: #fff;
  border: 2px dashed #94a3b8;
  border-radius: 12px;
  margin-bottom: 20px;
  /* Sans cette ligne, le geste de signature fait défiler la page au lieu de
     tracer : c'est le comportement par défaut d'un écran tactile. */
  touch-action: none;
}

/* ---- Boutons ---- */

.tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 26px;
  border: none;
  border-radius: 12px;
  font: inherit;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tab-btn-principal        { background: #2563eb; color: #fff; }
.tab-btn-principal:active { background: #1d4ed8; }
.tab-btn-principal:disabled { background: #93c5fd; cursor: default; }

.tab-btn-large { width: 100%; min-height: 68px; font-size: 19px; }

.tab-btn-fantome {
  min-height: 48px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 10px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
  opacity: .85;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn-fantome:active { opacity: 1; }
.tab-section-entete .tab-btn-fantome,
.tab-pave-entete .tab-btn-fantome { color: #475569; }

/* ---- Confirmation ---- */

.tab-confirme {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 56px 30px 40px;
  text-align: center;
}
.tab-confirme-marque { color: #16a34a; display: flex; justify-content: center; margin-bottom: 20px; }
.tab-confirme-titre  { font-size: 25px; font-weight: 800; margin-bottom: 12px; }
.tab-confirme-texte  { font-size: 17px; color: #475569; line-height: 1.6; margin-bottom: 32px; }

/* ---- Ce qui n'a rien à faire sur la tablette ----
   L'assistant conversationnel s'installe tout seul au chargement de la page
   (modules/assistant-chat.js, à DOMContentLoaded), donc AVANT qu'on sache de
   quel compte il s'agit. Sa bulle flottait par-dessus le cadre de signature,
   et elle ouvre un accès aux données de l'entreprise sur un appareil qu'on
   tend à des gens de passage. */

body.mode-tablette #ac-fab,
body.mode-tablette #ac-panel { display: none !important; }

/* ---- Message passager ---- */

.tab-message {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 100;
  max-width: min(620px, calc(100vw - 40px));
  padding: 18px 24px;
  border: 2px solid;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}

/* ---- Tablette tenue à la verticale, ou petit écran ---- */

@media (max-width: 620px) {
  .tab-grille       { grid-template-columns: 1fr; }
  .tab-vue          { padding: 20px 16px 50px; }
  .tab-entete       { padding: 16px 18px; }
  .tab-compte       { display: none; }
  .tab-recap-ligne  { flex-direction: column; gap: 4px; }
  .tab-recap-cle    { flex: none; max-width: none; }
}