/* ============================================================ corp.css — Direction artistique commune Cop1 Corp ------------------------------------------------------------ Même DA que l'accueil (home.css), déclinée pour toutes les autres pages SANS toucher style.css ni style_secret.css (partagés, et erreur.html doit rester intact). Principe : ce fichier se charge EN DERNIER sur chaque page qui l'adopte — le lien lui-même sert d'opt-in, pas besoin de classe. Il rebascule la palette en redéfinissant les variables --corp-* que les deux feuilles historiques utilisent partout, remplace le fond (aurora + grille + grain au lieu des halos rouges et de la pluie de coquelicots), et aplatit les composants "pixel". ============================================================ */ /* Monocraft : déjà déclaré par style.css/style_secret.css, mais redéclaré ici pour les pages autonomes (chess, portfolio). */ @font-face { font-family: "Monocraft"; src: url("../fonts/monocraft-font/Monocraft-ttf/Monocraft.ttf") format("truetype"); font-display: swap; } /* ---------- 1. Palette : on rebrande les tokens historiques ---------- */ :root { --corp-red: #e8392f; --corp-red-dark: #b92c24; --corp-green: #5ec46e; --corp-green-dark: #3f9c4e; --corp-black: #0b0a0e; --corp-gray: #15131a; --corp-gray-2: #221f29; --corp-text: #ecebf1; --corp-accent: #ffce4d; /* 4px → 1px : toutes les bordures/épaisseurs "pixel" deviennent fines */ --pixel: 1px; /* tokens DA (mêmes valeurs que home.css) */ --surface: rgba(255, 255, 255, .028); --surface-2: rgba(255, 255, 255, .055); --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --ink: #ecebf1; --muted: #9a98a6; --faint: #6f6d7a; --r: 4px; } /* ---------- 2. Fond travaillé partagé (markup includes/background.php) ---------- Le fond est maintenant un markup commun (.site-bg + .bg-aurora/.bg-grid/ .bg-grain), inclus juste après via includes/background.php, EXACTEMENT comme l'accueil. On neutralise donc les anciens calques décoratifs hérités. */ body { background: var(--corp-black); color: var(--ink); font-family: "Monocraft", ui-monospace, monospace; } /* Anciens halos rouges / pluie de coquelicots / pixels : supprimés */ body::before, body::after { content: none !important; } html::before, html::after { content: none !important; } /* Calque de fond (mêmes valeurs que home.css). z-index négatif pour rester derrière le contenu des pages qui ne sont pas positionnées. */ .site-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; background: var(--corp-black); } .bg-aurora { position: absolute; inset: -25%; background: radial-gradient(38% 42% at 18% 22%, rgba(232, 57, 47, .22), transparent 70%), radial-gradient(34% 40% at 82% 30%, rgba(94, 196, 110, .14), transparent 70%), radial-gradient(46% 50% at 50% 92%, rgba(232, 57, 47, .16), transparent 72%), radial-gradient(30% 34% at 70% 70%, rgba(255, 206, 77, .10), transparent 70%); filter: blur(40px) saturate(115%); animation: corpAuroraDrift 26s ease-in-out infinite alternate; } @keyframes corpAuroraDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.06); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.02); } } .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 46px 46px, 46px 46px; -webkit-mask: radial-gradient(120% 90% at 50% 18%, #000 35%, transparent 85%); mask: radial-gradient(120% 90% at 50% 18%, #000 35%, transparent 85%); opacity: .6; } .bg-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .04; mix-blend-mode: overlay; } @media (prefers-reduced-motion: reduce) { .bg-aurora { animation: none; } } ::selection { background: rgba(232, 57, 47, .45); color: #fff; } /* ---------- 3. Header partagé ---------- Tout le style du header (transparent en haut → solide au scroll, hamburger, logo, boutons) vit dans header.css, émis par includes/header.php lui-même APRÈS cette feuille : il gagne donc les égalités de spécificité. Rien à redéfinir ici. */ /* ---------- 4. Typo : fin des ombres dures ---------- Les deux feuilles historiques posent des text-shadow "pixel" (2px 2px 0 #000) sur une dizaine de sélecteurs différents : on coupe tout, la nouvelle DA n'utilise pas d'ombre de texte. */ *, *::before, *::after { text-shadow: none !important; } /* ---------- 5. Boutons : pixel → flat pro ---------- */ .btn, .btn-header-auth, .admin-service-btn, .dl-btn, .upload-submit, .mc-host-submit, .dl-copy-btn, .quiz-hardcore-toggle { border: 1px solid var(--line-2); border-radius: 3px; box-shadow: none; text-shadow: none; transition: transform .15s ease, filter .15s ease, border-color .15s ease; } .btn:hover, .btn-header-auth:hover, .admin-service-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .9); } .btn:active, .btn-header-auth:active, .admin-service-btn:active { transform: translateY(0); box-shadow: none; } .btn-red, .btn-connect { background: var(--corp-red); border-color: rgba(232, 57, 47, .6); } .btn-green { background: rgba(94, 196, 110, .16); border-color: rgba(94, 196, 110, .45); color: var(--corp-green); } .btn-grey, .btn-deconnect { background: var(--surface-2); border-color: var(--line-2); color: var(--ink); } .admin-service-btn { background: var(--surface-2); color: var(--ink); } /* ---------- 6. Cartes & panneaux → surfaces ---------- */ .auth-card, .dash-card, .admin-card, .admin-user-card, .admin-ai-card, .dl-card, .dl-error-card, .upload-card, .mc-host-card, .profile-block, .service-card, .contact-card, .creator-card, .hero-box, .quiz-layout-section, .terminal-wrap, .result-box, .panel, .item-gallery-modal, .admin-history-section, .chat-container, .uploads-table-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 24px 60px -36px rgba(0, 0, 0, .9); } /* Bordures pixel internes : on les calme */ .pixel, .pixel-inset { border-color: var(--line); box-shadow: none; border-radius: var(--r); } /* ---------- 7. Formulaires ---------- */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="url"], input[type="search"], select, textarea { background: rgba(0, 0, 0, .38); border: 1px solid var(--line-2); border-radius: 3px; color: var(--ink); box-shadow: none; } input:focus, select:focus, textarea:focus { outline: none; border-color: rgba(232, 57, 47, .55); box-shadow: 0 0 0 3px rgba(232, 57, 47, .14); } /* Zone de drop (partage de fichiers) */ .drop-zone { border: 1px dashed rgba(94, 196, 110, .4); border-radius: var(--r); background: var(--surface); } /* Tableaux */ .uploads-table th, .uploads-table td { border-color: var(--line); } /* Page de téléchargement : liste de fichiers. Le markup multi-fichiers de download.php (.dl-file-row & co) n'a jamais eu de CSS desktop dans style_secret.css — l'icône 56px de l'ancien layout mono-fichier s'appliquait et tout s'empilait. Le layout en lignes est défini ici. */ .dl-files-list { display: grid; gap: 8px; margin: 14px 0; } .dl-file-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 3px; } .dl-file-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .dl-file-row .dl-file-icon { display: inline-block; margin: 0; font-size: 13px; letter-spacing: .06em; color: var(--corp-accent); flex-shrink: 0; } .dl-file-name { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dl-file-size { color: var(--faint); font-size: 12px; flex-shrink: 0; } .dl-file-btn { flex-shrink: 0; padding: 8px 16px; } .dl-zip-row { margin: 4px 0 10px; } /* Onglets modèles (ChienGPT) : relief pixel → chips plats */ .pixel-radio-btn { background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 3px; color: var(--muted); } .pixel-radio:hover .pixel-radio-btn { background: var(--surface-2); color: var(--ink); } .pixel-radio input[type="radio"]:checked + .pixel-radio-btn { background: rgba(232, 57, 47, .14); border-color: rgba(232, 57, 47, .55); color: var(--corp-red); box-shadow: none; } /* ---------- 8. Pied de page & divers ---------- */ footer { border-top: 1px solid var(--line); background: rgba(11, 10, 14, .6); box-shadow: none; } .footer-copy { color: var(--faint); box-shadow: none; } /* Vues de quiz masquées par défaut (ccna2.php) — la règle n'existait que dans style_secret.css, que ccna2 ne charge pas : sans elle, les vues "en cours" / "résultats" / "review" s'affichaient sous l'écran de configuration avant même de commencer. */ .quiz-hidden { display: none; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--corp-black); } ::-webkit-scrollbar-thumb { background: var(--corp-gray-2); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #2e2a38; }