/* ─── Reglages d'ecran telephone, hors bundle ──────────────────────────────
   Cette feuille accompagne public/mobile.js. Elle traite ce qui vit en dehors
   de l'application React : le bandeau d'installation, les pastilles flottantes
   de la couche compte, les marges de securite de l'iPhone et les regles qui
   doivent s'appliquer meme avant que le bundle ne soit monte.

   Les reglages internes a l'application (navigation basse, diagnostic, grilles)
   restent dans le bloc de style `et` du bundle. */

/* ── Bases : elles valent aussi pendant le chargement ─────────────────────── */
html {
  -webkit-text-size-adjust: 100%; /* iOS gonfle sinon le texte en paysage */
  text-size-adjust: 100%;
  /* `clip` et non `hidden` : `hidden` ferait de la page une zone de defilement
     et casserait tous les en-tetes colles de l'application. */
  overflow-x: clip;
}

body {
  overscroll-behavior-y: contain; /* le defilement ne se propage pas a la page */
}

/* Rien ne depasse de la largeur de l'ecran, quelle que soit la source. */
img,
svg,
video,
canvas {
  max-width: 100%;
}

/* Marges de securite laterales (encoche en paysage, bords arrondis). */
@media (max-width: 900px) and (orientation: landscape) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}

/* Sur ecran tactile, un champ sous 16 px declenche un zoom automatique de
   Safari a la mise au point, dont l'utilisateur ne revient jamais seul. */
@media (hover: none) and (max-width: 900px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── Application installee ────────────────────────────────────────────────
   iOS reserve deja la barre de statut quand le style est « default » : rien a
   compenser en haut. Ce qui change, c'est le geste — plus de barre d'adresse,
   donc plus de « tirer pour recharger » a laisser passer au navigateur. */
.su-standalone body {
  overscroll-behavior-y: none;
}

/* Le bandeau d'installation occupe le meme coin que les pastilles flottantes. */
.su-install-visible #structup-account-pill,
.su-install-visible #structup-notif-bell,
.su-install-visible #structup-notif-panel {
  display: none !important;
}

/* ── Feuille « Plus » ouverte ─────────────────────────────────────────────
   La feuille de raccourcis du bundle monte a z-index 91 ; la pastille de
   compte, la cloche et le bandeau d'installation vivent hors du bundle et bien
   au-dessus (8000 et plus). Sans cette regle, ils flottent par-dessus la liste.
   Le bundle pose la classe le temps que la feuille reste ouverte. */
.su-sheet-open #structup-account-pill,
.su-sheet-open #structup-notif-bell,
.su-sheet-open #structup-notif-panel,
.su-sheet-open #su-install {
  display: none !important;
}

/* ── Clavier virtuel ouvert ───────────────────────────────────────────────
   Tout ce qui flotte en bas de l'ecran recouvrirait le champ en cours. */
.su-keyboard .sw-bottom-notch-wrap,
.su-keyboard #structup-account-pill,
.su-keyboard #structup-notif-bell,
.su-keyboard #su-install {
  display: none !important;
}

.su-keyboard body {
  padding-bottom: 0 !important;
}

/* ── Couche compte : pastilles flottantes ─────────────────────────────────
   La barre de navigation de l'application occupe 68 px + 12 px + la zone du
   trait d'accueil : les pastilles se calent au-dessus, sans jamais chevaucher. */
@media (max-width: 900px) {
  #structup-account-pill {
    bottom: calc(96px + env(safe-area-inset-bottom));
    right: max(14px, env(safe-area-inset-right));
  }

  #structup-notif-bell {
    bottom: calc(150px + env(safe-area-inset-bottom));
    right: max(14px, env(safe-area-inset-right));
  }

  /* Le panneau de notifications devient une feuille : ancre en bas, pleine
     largeur, lisible d'un pouce. */
  #structup-notif-panel {
    left: 10px;
    right: 10px;
    width: auto;
    bottom: calc(96px + env(safe-area-inset-bottom));
    max-height: min(64vh, 420px);
    border-radius: 18px;
  }

  .sua-notif-item {
    padding: 15px 16px;
    min-height: 56px;
  }

  .sua-notif-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── Couche compte : inscription, connexion, profil ───────────────────────── */
@media (max-width: 620px) {
  #structup-account {
    padding: calc(18px + env(safe-area-inset-top)) 14px calc(40px + env(safe-area-inset-bottom));
  }

  .sua-card {
    padding: 20px 16px;
    border-radius: 18px;
  }

  /* Deux champs cote a cote deviennent illisibles sous 380 px. */
  .sua-row {
    flex-wrap: wrap;
  }

  .sua-row > * {
    flex: 1 1 150px;
  }

  .sua-btn,
  .sua-tab {
    min-height: 48px;
  }

  .sua-btn-link {
    min-height: 44px;
  }

  .sua-admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sua-admin-actions .sua-btn-mini {
    flex: 1 1 auto;
    min-height: 44px;
  }
}

@media (max-width: 380px) {
  .sua-row > * {
    flex: 1 1 100%;
  }
}

/* ── Bandeau « ajouter a l'ecran d'accueil » ──────────────────────────────
   Pose au-dessus de tout, sous la barre de navigation dans l'ordre de lecture
   mais au-dessus d'elle a l'ecran. Il ne s'affiche que sur telephone. */
#su-install {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  z-index: 8500;
  display: grid;
  grid-template-columns: 44px 1fr;
  grid-template-areas:
    'icone texte'
    'actions actions';
  gap: 10px 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1.5px solid #eae7f8;
  background: #fff;
  box-shadow: 0 18px 44px rgba(27, 29, 58, 0.22);
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: su-install-up 0.28s ease;
}

@keyframes su-install-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.su-install-icone {
  grid-area: icone;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid #f0eefa;
}

.su-install-texte {
  grid-area: texte;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.su-install-texte strong {
  font-family: 'Quicksand', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #1b1d3a;
}

.su-install-texte span {
  font-size: 12.5px;
  line-height: 1.5;
  color: #565b7d;
}

.su-install-actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
}

.su-install-btn {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6d5ce8 0%, #8b7cf6 100%);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.su-install-btn-ghost {
  flex: 0 0 auto;
  background: #f5f3fd;
  color: #565b7d;
  border: 1.5px solid #eae7f8;
}

/* Au-dela du telephone, l'invite d'installation n'a pas de sens. */
@media (min-width: 901px) {
  #su-install {
    display: none !important;
  }
}

/* ── Ecran de chargement ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  #boot-logo {
    width: 92px;
  }

  #boot-fallback {
    padding: 24px 20px;
  }
}