/* ------------------------------------------------------------------
   pwa.css — Tabelia installée sur l'écran d'accueil

   RÈGLE DE BASE : tout ce qui touche à la mise en page est préfixé par
   html[data-pwa='standalone']. Dans un navigateur ordinaire, ce fichier
   n'applique AUCUN style au plan de salle — seuls restent les deux
   éléments créés à la demande (mode d'emploi d'installation, invite de
   rotation), qui n'existent dans le DOM que si on les demande.
   ------------------------------------------------------------------ */

:root {
    --pwa-green: #0d4a30;
    --pwa-copper: #c97a35;
}

/* ── Application installée : encoche et barre de gestes ────────────── */
html[data-pwa='standalone'] body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    /* Pas de rebond élastique : dans une application de salle, le plan qui
       décolle du haut de l'écran donne l'impression d'un bug. */
    overscroll-behavior: none;
}

/* iOS zoome dès qu'un champ fait moins de 16 px, puis ne dézoome jamais
   complètement. Réservé à l'application installée : en navigateur, la
   taille des champs du plan reste celle que tu as réglée. */
html[data-pwa='standalone'][data-ios] input,
html[data-pwa='standalone'][data-ios] textarea,
html[data-pwa='standalone'][data-ios] select {
    font-size: max(16px, 1em);
}

/* Place pour l'invite de rotation, sans masquer le bas du plan. */
@media (max-width: 940px) and (orientation: portrait) {
    html[data-pwa='standalone'] body {
        padding-bottom: calc(env(safe-area-inset-bottom) + 58px);
    }
}

/* ── Invite de rotation ────────────────────────────────────────────── */
/* Créée uniquement en mode application, et seulement en portrait. */
#tabelia-rotate {
    position: fixed;
    /* Ancrée sur les deux bords : centrer un bloc qui se contracte donnait
       une pastille étroite où la phrase partait sur trois lignes. */
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: 520px;
    transform: translateY(140%);
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px 11px 16px;
    border-radius: 999px;
    background: var(--pwa-green);
    color: #fff;
    font: 600 13.5px/1.25 system-ui, -apple-system, sans-serif;
    box-shadow: 0 10px 28px rgba(13, 74, 48, 0.34);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.22s ease;
}
#tabelia-rotate.is-on {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
#tabelia-rotate .tr-ico {
    font-size: 17px;
    color: #e5a569;
    animation: tabelia-turn 2.6s ease-in-out infinite;
}
#tabelia-rotate .tr-txt { flex: 1; }
#tabelia-rotate .tr-x {
    flex: none;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
@keyframes tabelia-turn {
    0%, 62%, 100% { transform: rotate(0deg); }
    78%           { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
    #tabelia-rotate .tr-ico { animation: none; }
    #tabelia-rotate { transition: opacity 0.2s ease; }
}

/* ── Mode d'emploi d'installation ──────────────────────────────────── */
/* Affiché seulement au clic sur le bouton du menu Réglages. */
#tabelia-ios-hint {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    margin: 0 auto;
    max-width: 560px;
    z-index: 9100;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--pwa-green);
    color: #fff;
    box-shadow: 0 14px 38px rgba(13, 74, 48, 0.4);
    font: 400 13.5px/1.45 system-ui, -apple-system, sans-serif;
}
#tabelia-ios-hint .ih-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#tabelia-ios-hint strong { font-size: 15px; }
#tabelia-ios-hint b { color: #e5a569; }
#tabelia-ios-hint .ih-note {
    color: rgba(255, 255, 255, 0.72);
    font-size: 12.5px;
}
#tabelia-ios-hint .ih-x {
    flex: none;
    padding: 9px 14px;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font: 700 13px/1 system-ui, -apple-system, sans-serif;
    cursor: pointer;
}