/* ============================================================
 *  tech.css — Direction artistique « Terminal / dev », tempérée
 *  Tech SANS être froid : la signature tech vient de la TYPO
 *  monospace, du curseur et de la grille de points ; les COULEURS
 *  restent chaleureuses (or sur les accents, turquoise en appui).
 *  Posée après extra/home/formations. Aucune dépendance externe.
 * ============================================================ */

:root {
    /* Pile monospace SYSTÈME (police de terminal de l'OS) — pas de CDN */
    --coghit-mono: ui-monospace, "Cascadia Code", "JetBrains Mono",
        "Fira Code", "SF Mono", "DejaVu Sans Mono", Consolas, monospace;
}

/* ------------------------------------------------------------
 *  Typo monospace sur les accents « tech »
 *  (PAS sur les chiffres des tuiles — gardés en or, sans-serif)
 * ------------------------------------------------------------ */
.md-header__nav-link,
.course-meta span,
.course-hero__tag,
.tarif-card__name,
.tarif-card__price,
.tarif-card__badge,
.md-typeset .md-button,
.btn-primary {
    font-family: var(--coghit-mono);
}

.md-header__nav-link { letter-spacing: -0.01em; }

/* Hero : on élargit le conteneur pour que « …à nos côtés_ » (avec le
 * curseur monospace) tienne sur UNE ligne en desktop, quelle que soit
 * la police de terminal système. */
.hero__inner { max-width: 1000px; }

/* ------------------------------------------------------------
 *  Curseur de terminal clignotant après le titre du hero,
 *  en OR (comme le « _ » du logo Coghit)
 * ------------------------------------------------------------ */
.hero .hero__title::after {
    content: "_";
    margin-left: 0.04em;
    color: var(--coghit-gold);
    font-family: var(--coghit-mono);
    font-weight: 700;
    animation: term-blink 1.1s step-end infinite;
}

@keyframes term-blink {
    50% { opacity: 0; }
}

/* ------------------------------------------------------------
 *  Fond « grille de points » discret (texture tech) sur les
 *  zones sombres — sans refroidir la palette.
 * ------------------------------------------------------------ */
.hero {
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(135deg, #2a2018 0%, #342820 55%, #1e1712 100%);
    background-size: 22px 22px, auto;
}

.course-hero {
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        radial-gradient(720px 320px at 100% 0, rgba(15, 173, 168, 0.16), transparent 60%),
        linear-gradient(135deg, #2a2018 0%, #342820 60%, #1e1712 100%);
    background-size: 20px 20px, auto, auto;
}

/* ------------------------------------------------------------
 *  Halos du hero : on retire le halo CENTRAL, et on équilibre
 *  chaud/froid (un halo turquoise + un halo or) pour éviter le
 *  « tout froid ».
 * ------------------------------------------------------------ */
.hero__glow .g3 { display: none; }                 /* halo central supprimé */
.hero__glow .g2 { background: var(--coghit-gold); } /* halo droit → or (chaud) */