/* ============================================================
   IVANN 71 — Design system (tokens + coherence globale)
   Sentinel : DESIGN_SYSTEM_V1
   ============================================================ */
/* DESIGN_SYSTEM_V1 */

/* === Tokens : charte centrale ============================== */
:root {
    /* Fonds */
    --iv-bg:          #05080f;
    --iv-surface-1:   #0a0e14;
    --iv-surface-2:   #141a2b;
    --iv-surface-3:   #1f1b3a;

    /* Texte */
    --iv-text:        #e8eaf3;
    --iv-text-dim:    #9aa1ba;
    --iv-text-mute:   #6b7390;

    /* Accents */
    --iv-cyan:        #67e8f9;
    --iv-violet:      #c084fc;
    --iv-indigo:      #7c5cff;
    --iv-gold:        #fde047;
    --iv-green:       #34d399;
    --iv-red:         #fb7185;
    --iv-orange:      #fb923c;

    /* Degrades */
    --iv-grad-primary: linear-gradient(135deg, #7c5cff, #c084fc);
    --iv-grad-text:    linear-gradient(90deg, #67e8f9, #c084fc);

    /* Bordures & rayons */
    --iv-border:        rgba(255, 255, 255, 0.08);
    --iv-border-accent: rgba(124, 92, 255, 0.30);
    --iv-radius-sm:   8px;
    --iv-radius:      14px;
    --iv-radius-lg:   20px;
    --iv-radius-pill: 999px;

    /* Ombres */
    --iv-shadow:        0 14px 32px rgba(0, 0, 0, 0.50);
    --iv-glow-violet:   0 10px 30px -8px rgba(124, 92, 255, 0.70);
    --iv-glow-cyan:     0 0 18px rgba(103, 232, 249, 0.45);

    /* Espacements */
    --iv-space-1: 6px;
    --iv-space-2: 12px;
    --iv-space-3: 16px;
    --iv-space-4: 24px;
    --iv-space-5: 40px;

    /* Typographie */
    --iv-font:         'Inter', system-ui, -apple-system, sans-serif;
    --iv-font-display: 'Rajdhani', 'Inter', sans-serif;
    --iv-font-mono:    'JetBrains Mono', 'Consolas', monospace;

    /* Transitions */
    --iv-t-fast: 130ms ease;
    --iv-t:      200ms ease;
}

/* === Fond sombre garanti =================================== */
/* Plusieurs pages de jeu avaient un body BLANC : le sombre ne venait
   que des widgets qui couvrent le contenu -> du blanc apparaissait dans
   les marges / sous les widgets. On force le fond sombre partout ou
   cet asset se charge (pages gamifiees + cours, jamais l'admin). */
html, body { background-color: var(--iv-bg) !important; }

/* Le badge XP legacy (.ivann-xp-badge) se rendait en barre pleine largeur
   cassee (conteneur etire, bordure cyan, contenu tasse a gauche). Il fait
   doublon avec le HUD de la nav (devises) et le hub -> on le masque. */
.ivann-xp-badge { display: none !important; }

/* Texte narratif des champs body sur pages gamifiees : le theme laisse une
   couleur sombre par defaut (rgb(33,37,41)) -> texte quasi invisible sur le
   fond sombre. On force une couleur claire lisible. */
body.izi-game .field--name-body,
body.izi-game .field--name-body p,
body.izi-game .field--name-body li,
body.izi-game .field--name-body td,
body.izi-game .field--name-body th {
    color: #c4cad8;
}

/* Texte narratif d'intro (paragraphes directs du champ body, avant le
   widget) : transforme en encart d'intro DESIGNE — encadre centre,
   legerement teinte, largeur de lecture. Plus un paragraphe brut qui flotte. */
body.izi-game .field--name-body .field__item > p {
    max-width: 720px;
    margin: 10px auto 26px !important;
    padding: 14px 22px !important;
    box-sizing: border-box;
    background: linear-gradient(135deg, rgba(124, 92, 255, 0.09), rgba(103, 232, 249, 0.04));
    border: 1px solid rgba(124, 92, 255, 0.22);
    border-left: 3px solid #7c5cff;
    border-radius: 12px;
    color: #aab1c4 !important;
    font-size: 13.5px;
    line-height: 1.65;
    text-align: center;
}
/* Deux paragraphes d'intro consecutifs : on les rapproche */
body.izi-game .field--name-body .field__item > p + p {
    margin-top: -16px !important;
}
body.izi-game .field--name-body .field__item > ul {
    max-width: 720px;
    margin: 0 auto 22px !important;
    box-sizing: border-box;
}

/* === Coherence globale (pages gamifiees) =================== */

/* Lissage de police : texte plus net sur fond sombre */
body.izi-game {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Scrollbar themee */
body.izi-game ::-webkit-scrollbar { width: 11px; height: 11px; }
body.izi-game ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.03); }
body.izi-game ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--iv-indigo), var(--iv-violet));
    border-radius: var(--iv-radius-pill);
    border: 2px solid var(--iv-bg);
}
body.izi-game ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--iv-cyan), var(--iv-indigo));
}
body.izi-game { scrollbar-width: thin; scrollbar-color: var(--iv-violet) rgba(255, 255, 255, 0.04); }

/* Selection de texte unifiee */
body.izi-game ::selection { background: rgba(168, 132, 255, 0.35); color: #fff; }

/* Anneau de focus coherent au clavier */
body.izi-game a:focus-visible,
body.izi-game button:focus-visible,
body.izi-game input:focus-visible,
body.izi-game select:focus-visible,
body.izi-game textarea:focus-visible,
body.izi-game [tabindex]:focus-visible {
    outline: 2px solid var(--iv-cyan);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Scroll doux */
html { scroll-behavior: smooth; }

/* Coherence inter-pages : /skills et /shop avaient un titre en system-ui
   22px alors que toutes les autres pages utilisent le bandeau standard
   (JetBrains Mono, 26px, 900). On les aligne. */
.ivann-skill-tree__title,
.ivann-shop__title {
    font-family: var(--iv-font-mono) !important;
    font-size: 26px !important;
    font-weight: 900 !important;
}
/* Marge haute homogene des widgets de jeu */
#ivann-skill-tree, #ivann-shop { margin-top: 32px; }

/* /parcours : le catalogue etait coince a 750px (champ body Drupal plafonne)
   -> tout tasse dans la moitie gauche. On debride la largeur et on rend la
   grille des cours responsive (3 colonnes au lieu de 2 figees). */
body.izi-game-parcours .field,
body.izi-game-parcours .field--name-body,
body.izi-game-parcours .field__item {
    max-width: none !important;
    width: 100% !important;
}
body.izi-game-parcours .parcours-phase__steps {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
}

/* Masque le titre Drupal brut (non stylise) sur les pages a widget de jeu :
   chaque widget affiche deja son propre bandeau. Les pages de cours et
   /parcours gardent leur titre (pas de root #ivann-<jeu>). */
body:has(#ivann-hub, #ivann-bug-war, #ivann-bug-war-arena, #ivann-bug-war-async,
        #ivann-cyber-academie, #ivann-raid, #ivann-daily, #ivann-tournaments,
        #ivann-leaderboard, #ivann-achievements, #ivann-skill-tree, #ivann-shop,
        #ivann-avatar, #ivann-plaza, #ivann-spectator, #ivann-admin-stats)
    #block-izianet-page-title,
body:has(#ivann-hub, #ivann-bug-war, #ivann-bug-war-arena, #ivann-bug-war-async,
        #ivann-cyber-academie, #ivann-raid, #ivann-daily, #ivann-tournaments,
        #ivann-leaderboard, #ivann-achievements, #ivann-skill-tree, #ivann-shop,
        #ivann-avatar, #ivann-plaza, #ivann-spectator, #ivann-admin-stats)
    .block-page-title-block {
    display: none !important;
}

/* Accessibilite : on coupe les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.izi-game *,
    body.izi-game *::before,
    body.izi-game *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}