/**
 * indexMOBILEPORTRAIT.css — Mobile portrait (≤ 700px, orientation portrait)
 * ═══════════════════════════════════════════════════════════
 * Chargé via :
 *   <link media="screen and (max-width: 767px) and (orientation: portrait)">
 *
 * SOURCE DE VÉRITÉ unique pour tous les overrides portrait mobile.
 * Les blocs @media portrait ont été supprimés de index.php et
 * indexfaculte.php et centralisés ici.
 *
 * CHANGEMENT D'ORIENTATION :
 *   Le navigateur gère automatiquement le rechargement de cette feuille
 *   quand l'utilisateur pivote son appareil.
 */

/* ══════════════════════════════════════════════════════════════════════
   COMMUN — index.php + indexfaculte.php
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) and (orientation: portrait) {

    /* Taille de base légèrement agrandie */
    html { font-size: 18px; }

    /* Bouton dialogue : débordement sur petit écran → masqué,
       accessible via le hamburger. */
    #dialogue-btn { display: none !important; }

    /* Hamburger mobile */
    #mobile-menu-btn {
        display: inline-flex !important;
        right: max(110px, calc(env(safe-area-inset-right) + 96px)) !important;
        top:   max(12px,  env(safe-area-inset-top)) !important;
    }
    #mobile-menu {
        right: max(12px, env(safe-area-inset-right)) !important;
        top:   58px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════
   INDEX.PHP — Décor home (image université, personnages)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) and (orientation: portrait) {

    /* Image université : collée en haut, juste sous la barre système */
    #university-image {
        position: fixed !important;
        transform: translateX(-50%) !important;
        left: 50% !important;
        top: max(4px, env(safe-area-inset-top)) !important;
        display: block !important;
        margin: 0 !important;
        width: min(72vw, 340px) !important;
        height: auto !important;
        pointer-events: auto !important;
        z-index: 10 !important;
        transition: transform 1.5s cubic-bezier(.12,.8,.2,1),
                    opacity   0.8s ease !important;
    }
    #university-image.door-opening {
        transform: translateX(-50%) scale(4) !important;
    }

    /* Halo lumineux sur la porte (≈ 52% de la hauteur image) */
    .uni-door-glow {
        position: fixed !important;
        left: 50% !important;
        top: calc(max(4px, env(safe-area-inset-top)) + min(72vw, 340px) * 0.52 - 24px) !important;
        transform: none !important;
        width: 52px !important;
        height: 52px !important;
        margin-left: -26px !important;
        z-index: 10 !important;
    }

    /* Clickzone sur l'image */
    #university-clickzone {
        position: fixed !important;
        left: 50% !important;
        top: max(4px, env(safe-area-inset-top)) !important;
        transform: translateX(-50%) !important;
        width: min(72vw, 340px) !important;
        height: calc(min(72vw, 340px) * 0.8) !important;
        z-index: 11 !important;
        display: block !important;
    }

    /* Brick-wall : juste sous l'image, collé à droite */
    #brick-wall {
        position: fixed !important;
        top: calc(max(4px, env(safe-area-inset-top)) + 8px + min(72vw, 340px) * 0.85 - 24px) !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        width: min(30vw, 140px) !important;
        height: auto !important;
        bottom: auto !important;
        z-index: 9 !important;
        display: block !important;
    }
    #brick-wall .brick-wall-bg {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Prof (index.php) : ancré en bas à droite de l'écran. */
    .corner-teacher {
        display: block !important;
        position: fixed !important;
        right: 2vw !important;
        left: auto !important;
        top: auto !important;
        bottom: 0 !important;
        width: 30vw !important;
        height: auto !important;
        margin: 0 !important;
        float: none !important;
        z-index: 20 !important;
    }
    .corner-teacher img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        object-position: bottom !important;
    }

    /* Bloc intro-welcome : tout en bas, scrollable */
    #intro-welcome {
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: max(10px, env(safe-area-inset-bottom)) !important;
        top: auto !important;
        width: auto !important;
        max-height: 20vh;
        overflow-y: auto;
        padding: 10px 12px !important;
        background: rgba(253,249,238,.96) !important;
        border: 2px solid rgba(184,134,31,.5);
        border-radius: 12px;
        font-size: .82rem;
        z-index: 30 !important;
        display: block !important;
    }
    #intro-welcome .iw-h { font-size: .95rem; margin: 6px 0 4px; }
    #intro-welcome .iw-title { font-size: 1.1rem; margin: 0 0 6px; }
    #intro-welcome .iw-lede,
    #intro-welcome .iw-foot { font-size: .78rem; line-height: 1.35; margin: 4px 0; }
    #intro-welcome .iw-nav {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        margin: 6px 0;
    }
    #intro-welcome .iw-nav a {
        display: block;
        padding: 10px 8px;
        background: #f5c842;
        color: #1a2744 !important;
        border-radius: 8px;
        font-size: .82rem;
        font-weight: 700;
        text-align: center;
        text-decoration: none;
        border: 1px solid #b8861f;
    }

    /* En mode SPA, le décor home disparaît. */
    body.spa-active #university-image,
    body.spa-active .uni-door-glow,
    body.spa-active #university-clickzone,
    body.spa-active #brick-wall,
    body.spa-active .corner-teacher,
    body.spa-active #intro-welcome { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   INDEXFACULTE.PHP — Hall + Facultés + Prof flottant
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) and (orientation: portrait) {

    /* Voile navy d'index.php : inutile dans indexfaculte en portrait */
    #university-navy-veil { display: none !important; }

    /* ── Hall (data-faculty="") ──
       indexhall.js gère background-size:auto 100vh + scroll horizontal.
       On ne surcharge que ce qui ne doit pas entrer en conflit. */
    body[data-faculty=""] {
        background-color: #0d1b2a !important;
    }
    body[data-faculty=""] #ucApp {
        padding-top: 0 !important;
    }

    /* ── Facultés (data-faculty non vide) ──
       Bandeau image en haut (32vh, contain), fond crème en dessous. */
    body[data-faculty]:not([data-faculty=""]) {
        background-image: none !important;
        background-color: #f8f1dd !important;
    }
    body[data-faculty]:not([data-faculty=""])::before {
        content: "";
        position: fixed;
        left: 0; right: 0; top: 0;
        height: 32vh;
        background-image: var(--faculty-bg-url, none);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        background-color: #0d1b2a;
        z-index: 0;
        pointer-events: none;
        box-shadow: 0 6px 16px rgba(0,0,0,.25);
        border-bottom: 2px solid rgba(184,134,31,.4);
    }
    body[data-faculty]:not([data-faculty=""]) #ucApp {
        padding-top: 32vh !important;
        position: relative;
        z-index: 1;
    }
    body[data-faculty]:not([data-faculty=""]) .notebook {
        margin: 8px !important;
    }

    /* Boutons / liens : taille adaptée au petit écran */
    .iw-nav a, .iw-btn, .faculty-card, .slot-btn {
        font-size: 1rem !important;
        padding: 10px 14px !important;
        min-height: 44px !important;
    }
    .iw-nav { gap: 8px !important; }

    /* ── Hall : texte des slots facultés ── */
    .folder.in-slot {
        font-size: 0.7rem !important;
        letter-spacing: .01em !important;
    }

    /* ── Prof flottant (indexfaculte) ──
       Les règles inline de indexfaculte.php fixent height:180px (<700px)
       et height:150px (<420px) sans distinction d'orientation.
       On surcharge ici avec une spécificité équivalente mais en portrait
       pour rester visible. La hauteur 200px est un bon compromis. */
    #gapitFloatingTeacher.gapit-floating-teacher {
        left: 6px !important;
        right: auto !important;
        bottom: 8px !important;
        top: auto !important;
    }
    #gapitFloatingTeacher.gapit-floating-teacher img,
    #gapitFloatingTeacher.gapit-floating-teacher > img {
        height: 200px !important;
    }

    /* ── Indicateur de langue (afflngvisit) ── */
    #afflngvisit {
        left: 6px !important;
        top: calc(40vh + 146px) !important;
        bottom: auto !important;
    }
}