/* ============================================================
APSolute — Identité visuelle / Design tokens & composants
Aseptic Simulation Process & Holding Times
À inclure dans index.php :
Polices : ajouter dans (ou héberger en local, voir bas du fichier)
============================================================ */
:root {
/* Couleurs de marque */
--aps-blue: #1796F5; /* primaire */
--aps-sky: #3BBDFF;
--aps-cyan: #7FF6FF; /* éclat / highlight */
--aps-navy: #06204F; /* marine profond */
--aps-navy-2: #0E327E;
--aps-accent: #0FC9B4; /* teal complémentaire */
--aps-accent-soft: #DCFAF3;
/* Neutres */
--aps-ink: #0A1A33;
--aps-slate: #5B6B85;
--aps-line: #DCE6F2;
--aps-ice: #EAF1FB;
--aps-bg: #F4F8FE;
--aps-white: #FFFFFF;
/* Dégradés */
--aps-grad-blue: linear-gradient(180deg, var(--aps-sky), var(--aps-blue) 55%, #0E6FD6);
--aps-grad-glossy: linear-gradient(135deg, #9CFAFF 0%, #3BBDFF 40%, #1796F5 75%, #0E6FD6 100%);
--aps-grad-navy: linear-gradient(160deg, var(--aps-navy-2), var(--aps-navy));
/* Typographie */
--aps-font-display: 'Space Grotesk', system-ui, sans-serif;
--aps-font-body: 'Manrope', system-ui, sans-serif;
--aps-font-mono: 'JetBrains Mono', ui-monospace, monospace;
/* Rayons & ombres */
--aps-radius: 14px;
--aps-radius-lg: 22px;
--aps-shadow-sm: 0 10px 30px rgba(16,42,92,.06);
--aps-shadow-md: 0 14px 40px rgba(16,42,92,.08);
--aps-shadow-blue: inset 0 1px 0 rgba(255,255,255,.5), 0 10px 24px rgba(23,150,245,.4);
}
/* ---------- Base ---------- */
body.aps {
margin: 0;
font-family: var(--aps-font-body);
color: var(--aps-ink);
background: var(--aps-bg);
-webkit-font-smoothing: antialiased;
}
.aps h1, .aps h2, .aps h3 { font-family: var(--aps-font-display); letter-spacing: -.02em; }
.aps a { color: var(--aps-blue); }
/* ---------- Logotype texte ---------- */
.aps-wordmark { font-family: var(--aps-font-display); font-weight: 700; letter-spacing: -.025em; }
.aps-wordmark .aps { background: linear-gradient(180deg, var(--aps-sky), #0E6FD6);
-webkit-background-clip: text; background-clip: text; color: transparent; }
.aps-wordmark .olute { color: var(--aps-ink); }
/* sur fond foncé : ajouter la classe .on-dark */
.aps-wordmark.on-dark .aps { background: linear-gradient(180deg, var(--aps-cyan), var(--aps-sky));
-webkit-background-clip: text; background-clip: text; color: transparent; }
.aps-wordmark.on-dark .olute { color: #EAF4FF; }
/* ---------- Boutons ---------- */
.aps-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--aps-font-body); font-weight: 700; font-size: 15px;
padding: 12px 22px; border: 0; border-radius: 11px; cursor: pointer;
color: #fff; background: var(--aps-grad-blue); box-shadow: var(--aps-shadow-blue);
transition: transform .12s ease, box-shadow .12s ease;
}
.aps-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 14px 30px rgba(23,150,245,.5); }
.aps-btn:active { transform: translateY(0); }
.aps-btn--ghost { background: transparent; color: var(--aps-blue); box-shadow: none; border: 1px solid var(--aps-line); }
.aps-btn--accent { background: linear-gradient(180deg, color-mix(in srgb, var(--aps-accent) 80%, white), var(--aps-accent)); }
/* ---------- Champs de formulaire ---------- */
.aps-label { font-family: var(--aps-font-mono); font-size: 10.5px; letter-spacing: .14em;
text-transform: uppercase; color: var(--aps-slate); display: block; margin-bottom: 7px; }
.aps-input {
width: 100%; height: 44px; padding: 0 14px; font-size: 14px; font-family: var(--aps-font-body);
border: 1px solid var(--aps-line); border-radius: 10px; background: #F7FAFE; color: var(--aps-ink);
box-sizing: border-box; outline: none; transition: border-color .12s ease, box-shadow .12s ease;
}
.aps-input:focus { border-color: var(--aps-blue); box-shadow: 0 0 0 3px rgba(23,150,245,.15); }
/* ---------- Cartes ---------- */
.aps-card { background: #fff; border: 1px solid var(--aps-line); border-radius: var(--aps-radius-lg);
box-shadow: var(--aps-shadow-sm); padding: 24px; }
.aps-card--dark { background: var(--aps-grad-navy); color: #EAF4FF; border-color: #14336B; }
/* ---------- En-tête ---------- */
.aps-header { display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px; background: #fff; border-bottom: 1px solid var(--aps-ice); }
.aps-header .brand { display: flex; align-items: center; gap: 11px; }
.aps-header .brand img { width: 34px; height: 34px; object-fit: contain; }
.aps-header nav { display: flex; align-items: center; gap: 24px; font-weight: 600; font-size: 14px; color: var(--aps-slate); }
.aps-header nav a.active { color: var(--aps-ink); }
/* ---------- Étiquette de données / statut ---------- */
.aps-chip { display: inline-block; font-family: var(--aps-font-mono); font-size: 10px;
letter-spacing: .06em; padding: 6px 12px; border-radius: 7px; }
.aps-chip--ok { background: var(--aps-accent-soft); color: #0A8576; }
.aps-mono { font-family: var(--aps-font-mono); }
/* ---------- Fond marine + motif hexagone (héros / login) ---------- */
.aps-hero-dark { position: relative; overflow: hidden; color: #fff;
background: radial-gradient(120% 90% at 50% 0%, rgba(45,120,235,.45) 0%, rgba(8,26,66,0) 55%),
linear-gradient(180deg, #071A3E 0%, #04122E 100%); }
/* Hexagone décoratif réutilisable :
*/
.aps-hex polygon { fill: none; stroke: rgba(120,180,255,.22); stroke-width: 1; }
/* ============================================================
POLICES EN LOCAL (optionnel, si pas de CDN autorisé)
Placez les .woff2 dans /fonts/ et décommentez :
@font-face{font-family:'Space Grotesk';src:url('fonts/SpaceGrotesk.woff2') format('woff2');font-weight:400 700;font-display:swap;}
@font-face{font-family:'Manrope';src:url('fonts/Manrope.woff2') format('woff2');font-weight:400 800;font-display:swap;}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono.woff2') format('woff2');font-weight:400 600;font-display:swap;}
============================================================ */