/* ===================================================
   ORYS · index.css — Styles spécifiques à la page d'accueil
   Couleur accent : bleu #0096C7
   =================================================== */

:root {
    --neon: #0096C7;
    --neon-rgb: 0, 150, 199;
    --grid: #404040;
}

/* WebGL opacity index */
#webgl-container { opacity: 0.6; }

/* Bento cards */
.bento-card {
    background-color: rgba(26, 26, 26, 0.4);
    backdrop-filter: blur(5px);
    border: 1px solid #404040;
    transition: border-color 0.1s, background-color 0.1s;
}
.bento-card:hover {
    border-color: var(--neon);
    background-color: rgba(26, 26, 26, 0.8);
}

/* Terminal input (formulaire contact) */
.terminal-input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #404040;
    color: var(--neon);
    font-family: 'JetBrains Mono', monospace;
    outline: none;
    width: 100%;
    border-radius: 0;
    transition: border-color 0.1s;
    cursor: none;
}
.terminal-input:focus { border-bottom-color: var(--neon); }

/* Message de confirmation formulaire */
#form-success {
    display: none;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: var(--neon);
    border: 1px solid var(--neon);
    padding: 1rem;
    margin-top: 1rem;
    background: rgba(var(--neon-rgb), 0.05);
}

/* ── Diagramme de déploiement (Section méthode) ── */
@keyframes flow-dash { to { stroke-dashoffset: -20; } }
.flow-line { stroke-dasharray: 4 4; animation: flow-dash 1.5s linear infinite; }

@keyframes pulse-node { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.pulse-node { animation: pulse-node 1.8s ease-in-out infinite; }

@keyframes scan-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.scan-rotate { transform-origin: center; animation: scan-rotate 6s linear infinite; }

/* Phase cards */
.phase-card {
    position: relative;
    background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(0,0,0,0.9) 100%);
    border: 1px solid #404040;
    transition: all 0.15s;
}
.phase-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px;
    width: 16px; height: 16px;
    border-top: 1px solid var(--neon);
    border-left: 1px solid var(--neon);
}
.phase-card::after {
    content: '';
    position: absolute;
    bottom: -1px; right: -1px;
    width: 16px; height: 16px;
    border-bottom: 1px solid var(--neon);
    border-right: 1px solid var(--neon);
}
.phase-card:hover {
    border-color: var(--neon);
    background: linear-gradient(180deg, rgba(var(--neon-rgb), 0.05) 0%, rgba(0,0,0,0.9) 100%);
}

/* Use case schema icons */
.uc-schema {
    border: 1px solid #404040;
    background: rgba(0,0,0,0.4);
}

/* Camera corner decoration */
.cam-corner { stroke: var(--neon); fill: none; stroke-width: 2; }