/**
 * TMng2 — Phone Shell
 * Version: 2.2 — 18 mai 2026
 *
 * RÈGLE IMMUABLE :
 *   Header en TÊTE de page — Footer en PIED de page
 *
 * Structure HTML requise dans chaque page :
 *   .phone-screen
 *     header.tm-responsive-header   ← hors du scroll
 *     div.phone-scroll
 *       main.main-content
 *     footer.tm-footer               ← hors du scroll
 *
 * BUG-001 (18/05/2026) : les dimensions calibrées (header, boutons, footer)
 * étaient définies dans @media(min-width:769px) ET html.in-iframe mais ABSENTES
 * de @media(max-width:768px) — le mobile réel héritait de la CSS de base.
 * Elles sont désormais factorisées en variables --shell-* et appliquées une
 * seule fois, hors media query, donc valables dans les 3 contextes.
 */

/* ══════════════════════════════════════════════════════════
   DIMENSIONS CALIBRÉES — header, boutons, footer
   Appliquées dans TOUS les contextes (desktop, mobile réel, iframe).
   ══════════════════════════════════════════════════════════ */
.tm-responsive-header {
    height: var(--shell-header-h) !important;
    overflow: visible !important;
    flex-shrink: 0;
}
.tm-responsive-header .tm-header-logo {
    height: var(--shell-logo-h) !important;
}
.tm-responsive-header .tm-center-menu .tm-btn,
.tm-responsive-header .tm-btn-user {
    height: var(--shell-header-btn-h) !important;
    min-height: var(--shell-header-btn-h) !important;
    max-height: var(--shell-header-btn-h) !important;
    box-sizing: border-box !important;
    padding: 0 10px !important;
}
/* Largeur uniforme : LIST et ENR identiques */
.tm-responsive-header .tm-center-menu .tm-btn {
    min-width: var(--shell-header-btn-minw) !important;
}
.tm-responsive-header .tm-btn-user {
    padding: 0 8px !important;
    min-width: 0 !important;
    gap: 2px !important;
}
/* Boutons d'action : hauteur uniforme compacte + largeur bornée (BUG-027 généralisé 27/05).
   Largeur naturelle (contenu + padding) plafonnée à 220px partout dans TMng.
   Évite les boutons pleine largeur en portrait mobile. */
.phone-scroll .tm-btn {
    height: var(--shell-action-btn-h) !important;
    min-height: var(--shell-action-btn-h) !important;
    max-height: var(--shell-action-btn-h) !important;
    max-width: 220px !important;
    box-sizing: border-box !important;
    font-size: var(--font-size-sm) !important;
}
.tm-footer {
    height: var(--shell-footer-h) !important;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════
   DESKTOP : cadre téléphone
   ══════════════════════════════════════════════════════════ */
/* Maquette téléphone desktop : largeur ≥769px ET hauteur suffisante (≥601px).
   La condition de hauteur évite qu'un téléphone EN PAYSAGE (large mais court)
   hérite du cadre de 826px et déborde — cf. BUG-009. */
@media (min-width: 769px) and (min-height: 601px) {

    body {
        background:
            radial-gradient(ellipse 70% 70% at 30% 20%, rgba(59,130,246,.08) 0%, transparent 60%),
            radial-gradient(ellipse 80% 80% at 50% 40%, #1e3654 0%, #0d1b2e 55%, #060e1a 100%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh !important;
        padding: 24px !important;
    }

    .phone-shell {
        position: relative;
        width: 412px;
        height: 826px;
        background: linear-gradient(160deg, #3a3a3c 0%, #1c1c1e 45%, #2c2c2e 100%);
        border-radius: 54px;
        box-shadow:
            0 0 0 1px rgba(255,255,255,.08),
            0 0 0 3px #0a0a0a,
            0 40px 90px rgba(0,0,0,.85),
            0 12px 30px rgba(0,0,0,.6),
            inset 0 1px 0 rgba(255,255,255,.06);
        flex-shrink: 0;
    }

    .phone-shell::before {
        content: '';
        position: absolute;
        left: -3.5px; top: 128px;
        width: 3.5px; height: 36px;
        background: #2c2c2e;
        border-radius: 3px 0 0 3px;
        box-shadow: 0 52px 0 3.5px #2c2c2e;
    }

    .phone-shell::after {
        content: '';
        position: absolute;
        right: -3.5px; top: 165px;
        width: 3.5px; height: 68px;
        background: #2c2c2e;
        border-radius: 0 3px 3px 0;
    }

    .phone-notch { display: none !important; }

    /* ── Écran : flex-column — header | scroll | footer ── */
    .phone-screen {
        position: absolute;
        inset: 10px;
        border-radius: 45px;
        overflow: hidden;
        background: linear-gradient(135deg, #84b3ed 0%, #4c7ced 100%);
        display: flex;
        flex-direction: column;
    }

    /* ── Header ancré en tête (dimensions : bloc partagé) ── */
    .phone-screen > .tm-responsive-header {
        position: relative !important;
    }

    /* ── Zone scrollable : milieu ──────────────────────── */
    .phone-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        scroll-behavior: smooth;
        scrollbar-width: none;
    }
    .phone-scroll::-webkit-scrollbar { display: none; }

    .phone-scroll .main-content,
    .phone-scroll .page-content {
        padding-bottom: var(--spacing-md) !important;
    }

    /* ── Footer ancré en pied (hauteur : bloc partagé) ─── */
    .phone-screen > .tm-footer {
        position: static !important;
    }
    .phone-screen > .tm-footer .tm-footer-bar {
        padding: 0 20px !important;
    }

    /* ── Indicateur home ──────────────────────────────── */
    .ph-home-bar {
        position: absolute;
        bottom: 7px;
        left: 50%;
        transform: translateX(-50%);
        width: 134px; height: 5px;
        background: rgba(255,255,255,.28);
        border-radius: 3px;
        pointer-events: none;
    }

    .phone-label {
        color: rgba(255,255,255,.2);
        font-size: 11px;
        margin-top: 18px;
        font-family: -apple-system, 'Segoe UI', sans-serif;
        letter-spacing: .1em;
        text-transform: uppercase;
        user-select: none;
    }

    /* ── Code couleur zones de contenu (phone-scroll uniquement)
       Header et footer : inchangés sur toutes les pages
       ENR + detail : bleu (défaut)
       LIST         : vert discret
       USER         : mauve discret
    ── */
    body.list-page .phone-scroll {
        background: linear-gradient(135deg, #84d4b4 0%, #2d9470 100%);
    }

    body.profile-page .phone-scroll,
    body.reglages-page .phone-scroll,
    body.adm-page .phone-scroll,
    body.aide-page .phone-scroll {
        background: linear-gradient(135deg, #c4a4d4 0%, #7c54ac 100%);
    }

    body.login-page .phone-screen {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    body.login-page .main-content {
        padding: 0 !important;
        display: block !important;
    }

    /* ── Paysage : phone-shell pivoté (826 × 412) ─────────── */
    html.landscape-view .phone-shell {
        width: 826px;
        height: 412px;
    }

    /* Boutons volume → bord haut */
    html.landscape-view .phone-shell::before {
        top: -3.5px; left: auto; right: 128px;
        width: 36px;  height: 3.5px;
        border-radius: 3px 3px 0 0;
        box-shadow: -52px 0 0 3.5px #2c2c2e;
    }

    /* Bouton power → bord bas */
    html.landscape-view .phone-shell::after {
        bottom: -3.5px; top: auto; right: auto; left: 165px;
        width: 68px; height: 3.5px;
        border-radius: 0 0 3px 3px;
    }

    /* Home bar → bord droit */
    html.landscape-view .ph-home-bar {
        right: 7px; bottom: auto; left: auto;
        top: 50%; transform: translateY(-50%);
        width: 5px; height: 134px;
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE : shell borné, calqué sur le mode iframe.
   Le cadre disparaît (display:contents) MAIS body garde une hauteur
   définie et .phone-scroll reste un vrai conteneur de défilement —
   sinon le bas de page (pagination LIST, barre Action Detail) devient
   inaccessible (BUG-006/007).
   Les pages de login (formulaire court, centré) gardent l'ancien
   comportement transparent.
   ══════════════════════════════════════════════════════════ */
/* Plein écran applicatif : mobile portrait (largeur ≤768px) OU tout écran court
   (hauteur ≤600px) — ce dernier cas couvre le téléphone EN PAYSAGE (BUG-009). */
@media (max-width: 768px), (max-height: 600px) {
    .phone-shell,
    .phone-screen { display: contents; }
    .phone-notch,
    .ph-home-bar,
    .phone-label  { display: none !important; }

    /* Login / reset : shell transparent (pas de hauteur bornée) */
    body.login-page .phone-scroll { display: contents; }

    /* Pages applicatives : header en tête, footer en pied,
       contenu défilant entre les deux dans .phone-scroll */
    body:not(.login-page) {
        height: 100vh;
        height: 100svh;   /* small viewport : footer toujours au-dessus de la barre Safari (haut OU bas) */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    body:not(.login-page) .tm-responsive-header {
        position: relative !important;
    }
    body:not(.login-page) .phone-scroll {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        scrollbar-width: none;
    }
    body:not(.login-page) .phone-scroll::-webkit-scrollbar { display: none; }
    body:not(.login-page) .tm-footer {
        position: static !important;
    }
}

/* ══════════════════════════════════════════════════════════
   IFRAME (dev dual-view)
   — phone-shell + phone-screen : transparents
   — phone-scroll : conserve son rôle de conteneur scrollable
   — body : flex-column 100vh — header en tête, footer en pied
   — dimensions header/boutons/footer : bloc partagé
   ══════════════════════════════════════════════════════════ */
html.in-iframe .phone-shell,
html.in-iframe .phone-screen  { display: contents !important; }
html.in-iframe .phone-notch,
html.in-iframe .ph-home-bar,
html.in-iframe .phone-label   { display: none !important; }

html.in-iframe body {
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: var(--bg-body, linear-gradient(135deg,#84b3ed,#4c7ced)) !important;
}

html.in-iframe .tm-responsive-header {
    position: relative !important;
}

html.in-iframe .phone-scroll {
    flex: 1 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    scrollbar-width: none !important;
}
html.in-iframe .phone-scroll::-webkit-scrollbar { display: none !important; }

html.in-iframe .tm-footer {
    position: static !important;
}
html.in-iframe .tm-footer .tm-footer-bar {
    padding: 0 20px !important;
}

/* En paysage smartphone : désactive le lien navigationnel du logo header.
   L'overlay portrait-required (z-index 99999) couvre le contenu mais PAS la
   safe-area-left/right (~48px sur iPhone Pro Max). Le logo, positionné absolute
   top/left:0, dépasse dans cette zone et reste cliquable → navigation accidentelle
   vers content.html. pointer-events:none résout. */
@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
    .tm-responsive-header > a {
        pointer-events: none;
        cursor: default;
    }
}