/*
 * aurora.css — Design System Aurora, TechAstro v2
 *
 * Charte Electric Blue / Navy.
 * Fichier unique : tokens, polices self-host, typo, utilitaires HUD,
 * badges sémantiques, honeypot OBLIGATOIRE.
 *
 * Sections :
 *   1. Tokens CSS (:root)
 *   2. @font-face self-host (zéro CDN runtime — G2)
 *   3. Typographie de base
 *   4. Utilitaires HUD (préfixe ta-)
 *   5. Badges sémantiques (ta-badge + modificateurs)
 *   6. Honeypot anti-spam (GUIDE_FRONTEND_CUSTOM §6 — obligatoire)
 *
 * @author TechAstro
 * @since  2026-06-25
 */

/* ═══════════════════════════════════════════════════════════════════
   1. TOKENS CSS
   Palette Electric Blue / Navy + sémantiques + familles de polices.
   Valeurs EXACTES issues de la spec graphique Aurora §7.
   ═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Palette principale ────────────────────────────────────────── */
    --c-blue:#1a6fff;
    --c-blue-light:#5fa0ff;
    --c-navy:#0a2050;
    --c-navy-light:#0d2d70;
    --c-bg:#eef4fc;

    /* ── Couleurs sémantiques (états : succès, avertissement, erreur) ─ */
    --c-success:#28a745;
    --c-warning:#ffc107;
    --c-danger:#dc3545;
    --c-grey:#6c757d;

    /* ── Accent violet (dégradés bleu→violet des maquettes 2026) ─────── */
    --c-violet:#785aff;
    /* Dégradé signature (CTA, titres accentués, icônes) */
    --grad-aurora:linear-gradient(110deg,#1a6fff,#785aff);

    /* ── Familles de polices (maquettes 2026 : Space Grotesk + Space Mono) ─ */
    --font-display:'Space Grotesk',system-ui,sans-serif;
    --font-body:'DM Sans',system-ui,sans-serif;
    --font-mono:'Space Mono',ui-monospace,monospace;
}

/* ═══════════════════════════════════════════════════════════════════
   2. @font-face SELF-HOST
   Polices téléchargées depuis fontsource (build-time), stockées dans
   ../fonts/ (relatif à ce fichier CSS).
   font-display:swap → texte visible pendant le chargement (LCP).
   Aucun chargement CDN runtime (G2 — CSP self).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Space Grotesk 400/500/600/700 — titres & affichage ───────────── */
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/spacegrotesk-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/spacegrotesk-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/spacegrotesk-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('../fonts/spacegrotesk-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── DM Sans 400 (Regular) — corps de texte ───────────────────────── */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dmsans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ── DM Sans 500 (Medium) — libellés, boutons ─────────────────────── */
@font-face {
    font-family: 'DM Sans';
    src: url('../fonts/dmsans-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* ── Space Mono 400/700 — labels, nav, données techniques ─────────── */
@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/spacemono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/spacemono-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ═══════════════════════════════════════════════════════════════════
   3. TYPOGRAPHIE DE BASE
   Règles globales : familles appliquées selon le rôle sémantique.
   ═══════════════════════════════════════════════════════════════════ */

/* Corps de texte par défaut */
body {
    font-family: var(--font-body);
    background-color: var(--c-bg);
    color: var(--c-navy);
}

/* Titres h1–h6 → police d'affichage Space Grotesk */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--c-navy);
}

/* Code et données techniques → fonte mono */
code, kbd, pre, samp, .mono {
    font-family: var(--font-mono);
}

/* Labels de formulaire → fonte mono pour lisibilité champ-valeur */
label {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════
   4. UTILITAIRES HUD (préfixe ta-)
   Effets visuels inspirés des interfaces de navigation spatiale
   (Head-Up Display). Appliqués via classes utilitaires sur conteneurs.
   ═══════════════════════════════════════════════════════════════════ */

/* ── ta-dotgrid : fond quadrillé de points navy sur navy-light ─────
   Simule une grille de projection holographique.                     */
.ta-dotgrid {
    background-color: var(--c-navy);
    background-image: radial-gradient(
        circle,
        var(--c-navy-light) 1px,
        transparent 1px
    );
    background-size: 20px 20px;
}

/* ── ta-scanline : balayage lumineux animé (bleu clair, opacité faible)
   Evoque un balayage radar/HUD sur fond sombre.                      */
.ta-scanline {
    position: relative;
    overflow: hidden;
}

.ta-scanline::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(95, 160, 255, 0.08) 50%,
        transparent 100%
    );
    animation: ta-scan 4s linear infinite;
    pointer-events: none;
}

/* Animation de balayage vertical */
@keyframes ta-scan {
    0%   { top: -40%; }
    100% { top: 100%; }
}

/* ── ta-brackets : cadrage HUD avec crochets d'angle en --c-blue ───
   Délimite visuellement un élément clé (cible, zone active, etc.).  */
.ta-brackets {
    position: relative;
    display: inline-block;
}

/* Coin supérieur gauche */
.ta-brackets::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    border-top: 2px solid var(--c-blue);
    border-left: 2px solid var(--c-blue);
}

/* Coin inférieur droit */
.ta-brackets::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid var(--c-blue);
    border-right: 2px solid var(--c-blue);
}

/* ── ta-pulse : pulsation de couleur --c-blue vers --c-blue-light ──
   Signale une activité en cours (chargement, connexion, alerte).    */
.ta-pulse {
    animation: ta-pulse-anim 2s ease-in-out infinite;
}

@keyframes ta-pulse-anim {
    0%   { color: var(--c-blue); }
    50%  { color: var(--c-blue-light); }
    100% { color: var(--c-blue); }
}

/* ── ta-theme : fond de page principal (navy + dot grid) ───────────
   Classe appliquée sur <body> dans le layout de base.               */
.ta-theme {
    background-color: var(--c-navy);
    background-image: radial-gradient(
        circle,
        var(--c-navy-light) 1px,
        transparent 1px
    );
    background-size: 24px 24px;
    color: var(--c-bg);
}

/* ═══════════════════════════════════════════════════════════════════
   5. BADGES SÉMANTIQUES (ta-badge)
   Mapping état → couleur pour Devis / Projets / Factures (spec §6).

   Devis   : --blue (en attente), --grey (fermé)
   Projets : --blue (actif), --success (livré), --warning (en pause)
   Factures: --success (payée), --danger (en retard), --warning (partielle)

   La classe générique .ta-badge fixe la mise en forme commune ;
   les modificateurs --<état> surchargent uniquement la couleur.
   ═══════════════════════════════════════════════════════════════════ */

/* Classe générique : base commune à tous les badges */
.ta-badge {
    display: inline-block;
    padding: 0.25em 0.6em;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    border-radius: 0.25rem;
    white-space: nowrap;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Modificateurs sémantiques ─────────────────────────────────────── */

/* Succès (Projet livré, Facture payée) */
.ta-badge--success {
    background-color: var(--c-success);
    color: #fff;
}

/* Avertissement (Projet en pause, Facture partielle) */
.ta-badge--warning {
    background-color: var(--c-warning);
    color: var(--c-navy);
}

/* Danger / Erreur (Facture en retard) */
.ta-badge--danger {
    background-color: var(--c-danger);
    color: #fff;
}

/* Bleu — actif / en attente (Devis en attente, Projet actif) */
.ta-badge--blue {
    background-color: var(--c-blue);
    color: #fff;
}

/* Gris — neutre / fermé (Devis fermé, archive) */
.ta-badge--grey {
    background-color: var(--c-grey);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   6. HONEYPOT ANTI-SPAM
   OBLIGATOIRE — GUIDE_FRONTEND_CUSTOM §6.
   Masque un champ leurre des formulaires hors de l'écran visible.
   Les robots remplissent ce champ ; les humains ne le voient pas.
   Le style est EXACT et NE DOIT PAS être modifié.
   ═══════════════════════════════════════════════════════════════════ */
.fondation-honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}