/* ============================================================
   GENSHI — pages service restantes : heros graphiques
   (en plus de genshi-v3.css + genshi-v4.css ; thème clair)
   Apps · Contenu · Réseaux · Maintenance
   ============================================================ */

/* carte mock générique (reprend l'esprit .serp / .auto-live) */
.spec-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.schip{ font-family:var(--f-mono); font-size:12px; color:var(--dim); border:1px solid var(--line); border-radius:100px; padding:7px 13px; }
.schip b{ color:var(--fg); font-weight:500; }
.mockcard{ border:1px solid var(--line); border-radius:18px; background:var(--bg-2); overflow:hidden; box-shadow:0 34px 64px -38px rgba(20,20,20,.45); }
.mc-top{ display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--line); font-family:var(--f-mono); font-size:12px; color:var(--dim); }
.mc-top .dot3{ display:flex; gap:6px; } .mc-top .dot3 i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.mc-top .right{ margin-left:auto; color:var(--accent); display:inline-flex; align-items:center; gap:7px; }
.mc-top .pulse{ width:7px; height:7px; border-radius:50%; background:var(--accent); }
@media (prefers-reduced-motion: no-preference){ .mc-top .pulse{ animation:mcpulse 1.5s ease-in-out infinite; } }
@keyframes mcpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.mc-foot{ padding:13px 16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; font-family:var(--f-mono); font-size:12.5px; color:var(--dim); background:color-mix(in srgb,var(--accent) 5%, transparent); }
.mc-foot svg{ width:15px; height:15px; color:var(--accent); flex:none; }
.mc-foot b{ color:var(--accent); }

/* ===== APPS : téléphone ===== */
.phone-stage{ display:grid; place-items:center; padding:26px 16px; }
.phone{ width:min(230px,58%); aspect-ratio:9/18.5; border-radius:30px; border:2.5px solid var(--fg); background:var(--bg); padding:10px; display:flex; flex-direction:column; gap:9px; position:relative; box-shadow:0 24px 48px -24px rgba(20,20,20,.5); }
.phone::before{ content:""; position:absolute; top:9px; left:50%; transform:translateX(-50%); width:34%; height:13px; border-radius:100px; background:var(--fg); }
.phone .p-hero{ margin-top:24px; height:24%; border-radius:14px; background:linear-gradient(135deg,var(--accent-deep),var(--accent)); position:relative; overflow:hidden; }
.phone .p-hero::after{ content:""; position:absolute; left:10%; bottom:12%; width:55%; height:9px; border-radius:100px; background:rgba(255,255,255,.85); }
.phone .p-row{ display:flex; gap:8px; }
.phone .p-card{ flex:1; aspect-ratio:1; border-radius:11px; background:var(--bg-3); }
.phone .p-card.hl{ background:color-mix(in srgb,var(--accent) 22%, var(--bg-3)); }
.phone .p-line{ height:9px; border-radius:100px; background:var(--bg-3); }
.phone .p-line.s{ width:62%; }
.phone .p-cta{ margin-top:auto; height:34px; border-radius:100px; background:var(--accent); display:grid; place-items:center; }
.phone .p-cta i{ width:36%; height:7px; border-radius:100px; background:rgba(255,255,255,.9); }
.phone .p-nav{ display:flex; justify-content:space-around; padding:7px 0 2px; border-top:1px solid var(--line); }
.phone .p-nav i{ width:9px; height:9px; border-radius:50%; background:var(--dim-2); opacity:.5; }
.phone .p-nav i.on{ background:var(--accent); opacity:1; }

/* ===== CONTENU : document qui s'écrit ===== */
.doc-body{ padding:22px 24px; display:flex; flex-direction:column; gap:12px; min-height:240px; }
.doc-kicker{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.doc-title{ font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2vw,24px); line-height:1.15; }
.doc-p{ font-size:14px; color:var(--dim); line-height:1.65; min-height:5.2em; }
.doc-p .cursor{ display:inline-block; width:8px; height:1.05em; background:var(--accent); vertical-align:-2px; margin-left:2px; animation:docblink 1s steps(1) infinite; }
@keyframes docblink{ 50%{ opacity:0; } }
.doc-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.doc-chip{ font-family:var(--f-mono); font-size:11px; color:var(--dim); border:1px solid var(--line); border-radius:100px; padding:4px 10px; }
.doc-chip.ok{ color:var(--accent); border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); }

/* ===== RÉSEAUX : posts empilés ===== */
.social-stage{ position:relative; padding:30px 26px 36px; display:flex; flex-direction:column; gap:14px; }
.post{ border:1px solid var(--line); border-radius:14px; background:var(--bg); padding:15px 16px; display:flex; flex-direction:column; gap:10px; box-shadow:0 14px 30px -20px rgba(20,20,20,.35); }
.post .p-head{ display:flex; align-items:center; gap:10px; }
.post .avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--accent-deep),var(--accent)); flex:none; }
.post .who{ font-family:var(--f-display); font-weight:600; font-size:13.5px; }
.post .when{ font-family:var(--f-mono); font-size:10.5px; color:var(--dim-2); }
.post .p-txt{ font-size:13px; color:var(--dim); line-height:1.5; }
.post .p-img{ height:64px; border-radius:9px; background:color-mix(in srgb,var(--accent) 14%, var(--bg-3)); }
.post .p-stats{ display:flex; gap:16px; font-family:var(--f-mono); font-size:11.5px; color:var(--dim); }
.post .p-stats b{ color:var(--accent); font-weight:500; }
.post.ghost{ opacity:.55; transform:scale(.97); }
.sched{ position:absolute; right:14px; top:16px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); border-radius:100px; padding:4px 10px; }

/* ===== WEB : aperçu navigateur ===== */
.web-prev{ padding:0; }
.web-prev .wp-url{ flex:1; font-family:var(--f-mono); font-size:11.5px; color:var(--dim-2); background:var(--bg-3); border-radius:100px; padding:6px 14px; }
.wp-body{ padding:22px 22px 26px; display:flex; flex-direction:column; gap:14px; }
.wp-nav{ display:flex; align-items:center; justify-content:space-between; }
.wp-logo{ font-family:var(--f-display); font-weight:700; font-size:15px; }
.wp-links{ display:flex; gap:10px; }
.wp-links i{ width:34px; height:7px; border-radius:100px; background:var(--bg-3); }
.wp-h{ font-family:var(--f-display); font-weight:600; font-size:clamp(19px,2vw,24px); line-height:1.1; letter-spacing:-.02em; max-width:86%; }
.wp-h .ac{ color:var(--accent); }
.wp-sub{ display:flex; flex-direction:column; gap:7px; }
.wp-sub i{ height:8px; border-radius:100px; background:var(--bg-3); }
.wp-sub i.s{ width:62%; }
.wp-cta{ width:42%; height:30px; border-radius:100px; background:var(--accent); display:grid; place-items:center; }
.wp-cta i{ width:50%; height:7px; border-radius:100px; background:rgba(255,255,255,.9); }
.wp-cards{ display:flex; gap:10px; margin-top:4px; }
.wp-cards i{ flex:1; height:52px; border-radius:9px; background:var(--bg-3); }
.wp-cards i.hl{ background:linear-gradient(135deg,var(--accent-deep),var(--accent)); }

/* ===== MAINTENANCE : tableau de veille ===== */
.watch-body{ padding:18px 20px; display:flex; flex-direction:column; }
.wrow{ display:flex; align-items:center; gap:13px; padding:11px 0; border-top:1px solid var(--line-2); font-size:14px; }
.wrow:first-child{ border-top:0; }
.wrow .st{ width:21px; height:21px; border-radius:50%; flex:none; display:grid; place-items:center; background:color-mix(in srgb,var(--accent) 14%, transparent); color:var(--accent); }
.wrow .st svg{ width:12px; height:12px; }
.wrow .t{ margin-left:auto; font-family:var(--f-mono); font-size:11.5px; color:var(--accent2); white-space:nowrap; }
.uptime{ display:flex; gap:3px; padding:14px 0 4px; }
.uptime i{ flex:1; height:26px; border-radius:3px; background:color-mix(in srgb,var(--accent) 75%, transparent); }
.uptime i.low{ background:color-mix(in srgb,var(--accent) 30%, transparent); }
.uptime-cap{ font-family:var(--f-mono); font-size:11px; color:var(--dim-2); display:flex; justify-content:space-between; padding-bottom:6px; }