/* =========================================================================
   Les Cerises — portail (page racine du domaine)
   Tokens (fonds, texte, accent, ombres…) : design system commun tokens.css,
   chargé AVANT cette feuille. app-header.css fournit .btn / .btn-icon et
   les bascules d'icône (soleil/lune, cerise/pixel). On ne définit ici que
   le propre du portail : héro, grille de cartes d'apps, pied de page.
   ========================================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background-color: var(--bg-primary);
    color: var(--text-main);
    font-family: var(--font-body);
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

a { color: inherit; text-decoration: none; }

/* ---------------- Barre supérieure : bascules thème / communauté -------- */
.portal-topbar {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 20px;
}

/* ---------------- Héro ------------------------------------------------- */
.portal-hero {
    text-align: center;
    padding-block: 40px 56px;
}

/* Grande pastille : même recette que .logo-icon (app-header.css) — couleur
   unie animable + voile fixe pour le relief, jamais de dégradé d'accent
   (un dégradé ne se transitionne pas au switch de communauté). */
.portal-logo {
    width: 88px;
    height: 88px;
    border-radius: 24px;
    background-color: var(--accent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.06) 100%);
    color: var(--text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 28px var(--shadow-primary);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 24px;
}
.portal-logo i { width: 44px; height: 44px; }

.portal-hero h1 {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 6vw, 3.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* Signature : « Cerises » suit l'accent de la communauté. */
.portal-hero h1 strong {
    color: var(--accent);
    font-weight: 800;
    transition: color 0.3s ease;
}

.portal-tagline {
    margin-top: 12px;
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* ---------------- Grille des applications ------------------------------ */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    padding-bottom: 64px;
}

/* Carte d'app : conventions §5 du design system (fond secondaire, bordure,
   radius-md, survol translateY + bordure accent). Toute la carte est cliquable. */
.portal-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 24px;
    transition: transform var(--transition-fast), border-color var(--transition-fast),
        box-shadow var(--transition-fast), background-color 0.3s ease;
}

.portal-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
}

/* Pastille d'icône : même recette animable que la grande (couleur + voile). */
.card-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background-color: var(--accent);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0.06) 100%);
    color: var(--text-inverse);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px var(--shadow-primary);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}
.card-icon i { width: 24px; height: 24px; }

.portal-card h2 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

/* Signature : le suffixe « des Cerises » suit l'accent, comme partout. */
.portal-card h2 strong {
    color: var(--accent);
    font-weight: 700;
    transition: color 0.3s ease;
}

.portal-card p {
    color: var(--text-muted);
    font-size: 0.92rem;
    flex-grow: 1;
}

/* « Ouvrir → » : discret au repos, s'accentue avec la carte au survol. */
.card-go {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: color 0.2s ease, gap 0.2s ease;
}
.card-go i { width: 15px; height: 15px; }
.portal-card:hover .card-go {
    color: var(--accent);
    gap: 10px;
}

/* ---------------- Pied de page ----------------------------------------- */
.portal-footer {
    margin-top: auto;
    text-align: center;
    padding-block: 28px;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 0.85rem;
}
.portal-footer strong {
    color: var(--accent);
    font-weight: 600;
    transition: color 0.3s ease;
}