/* ==========================================================================
   LANDING PORTFOLIO (shell console : index.php) — disposition mobile
   Scope : sélecteurs propres à la page d'accueil console du portfolio
   (.hero / .secgrid / .seccard / .contact / .tagk n'existent sur aucun
   autre site abrt — sûr de surcharger directement, sans classe supplémentaire).
   Tout est sous @media (max-width: 880px) : ne touche pas le rendu desktop.
   Variables CSS du thème (--accent, --surface, --border, etc.) réutilisées
   telles que définies par console.css / palette.js — aucune couleur en dur.
   ========================================================================== */

@media (max-width: 880px) {
    /* ---------- Annule le masquage global de mobile-prod.css ----------
       mobile-prod.css fait `body.console > .shell{display:none}` pour
       remplacer le shell par une maquette `.mobile-app` (SiteTracker/GU/
       Dashboard). La landing portfolio n'a PAS de `.mobile-app` → sans ça,
       elle devient un écran noir. On ré-affiche donc le shell normal
       (comme les sous-pages via `.pf-subpage`) et on garde le drawer mobile. */
    body.console.pf-landing { background: var(--bg) !important; color: var(--text) !important; }
    body.console.pf-landing > .shell { display: block !important; }
    body.console.pf-landing > .mobile-app { display: none !important; }

    /* ---------- Hero : empilé, centré, aéré ---------- */
    .console .hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
        padding: 26px 18px;
        margin-bottom: 16px !important; /* override du style inline index.php */
    }
    .console .hero .ava {
        width: 64px;
        height: 64px;
        font-size: 20px;
        border-radius: 16px;
    }
    .console .hero h2 {
        font-size: 19px;
    }
    .console .hero .role {
        font-size: 13px;
        margin-top: 4px;
    }
    .console .hero p {
        margin-top: 10px;
        font-size: 13px;
        max-width: 100%;
    }
    .console .hero .skills {
        justify-content: center;
        margin-top: 12px;
        gap: 6px;
    }
    .console .tagk {
        font-size: 11px;
        padding: 4px 9px;
    }

    /* ---------- Sections du portfolio : grille en 1 colonne, cartes aérées ---------- */
    .console .seclbl {
        margin-top: 22px;
        margin-bottom: 11px;
    }
    .console .seclbl:first-child {
        margin-top: 0;
    }
    .console .secgrid {
        gap: 10px;
    }
    .console .seccard {
        padding: 14px;
        gap: 12px;
        align-items: center;
    }
    .console .seccard .ic {
        width: 38px;
        height: 38px;
    }
    .console .seccard h3 {
        font-size: 14px;
    }
    .console .seccard p {
        font-size: 12px;
    }

    /* ---------- Bloc contact : empilé, pas de débordement ---------- */
    .console .contact {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        gap: 12px;
        padding: 18px;
    }
    .console .contact .sp {
        display: none;
    }
    .console .contact .btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .console .hero {
        padding: 22px 14px;
    }
    .console .hero .ava {
        width: 56px;
        height: 56px;
        font-size: 18px;
    }
    .console .hero h2 {
        font-size: 17px;
    }
    .console .hero .role {
        font-size: 12.5px;
    }
    .console .seccard {
        padding: 12px;
    }
}