/* ---- LE CSS EST SOIT GÉNÉRÉ PAR INTEL ARTI SOIT RÉUTILISÉ D'UN AUTRE PROJET ---- */ /* ---- Variables globales du thème (sombre par défaut) ---- */ :root { --bg: #0a0a10; --bg-soft: #10101a; --surface: #13131d; --surface-2: #1a1a28; --surface-3: #202030; --border: #262638; --border-strong: #34344a; --accent: #ff7a1a; --accent-strong: #e8630a; --accent-light: #ffa155; --accent-soft: rgba(255, 122, 26, 0.14); --accent-border: rgba(255, 122, 26, 0.32); --text: #f2f2f8; --text-soft: #c7c7d6; --text-muted: #9b9bb2; --danger: #e5484d; --danger-dark: #b03538; --success: #46d369; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.25); --shadow: 0 14px 34px rgba(0, 0, 0, 0.35); --shadow-accent: 0 14px 34px rgba(255, 122, 26, 0.22); --glow-1: rgba(255, 122, 26, 0.14); --glow-2: rgba(255, 122, 26, 0.07); --header-bg: rgba(12, 12, 18, 0.78); --nav-bg: rgba(12, 12, 18, 0.97); --footer-bg: rgba(12, 12, 18, 0.6); --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color-scheme: dark; } /* ---- Thème clair : activé via data-theme="light" sur ---- */ [data-theme="light"] { --bg: #f4f4f9; --bg-soft: #ffffff; --surface: #ffffff; --surface-2: #f1f1f7; --surface-3: #e9e9f2; --border: #e3e3ee; --border-strong: #cfcfe0; --accent-light: #d95d00; --accent-soft: rgba(255, 122, 26, 0.1); --accent-border: rgba(255, 122, 26, 0.3); --text: #191924; --text-soft: #3c3c4e; --text-muted: #6d6d84; --shadow-sm: 0 4px 14px rgba(30, 30, 60, 0.08); --shadow: 0 14px 34px rgba(30, 30, 60, 0.12); --shadow-accent: 0 14px 34px rgba(255, 122, 26, 0.18); --glow-1: rgba(255, 122, 26, 0.1); --glow-2: rgba(255, 122, 26, 0.05); --header-bg: rgba(255, 255, 255, 0.82); --nav-bg: rgba(255, 255, 255, 0.98); --footer-bg: rgba(255, 255, 255, 0.7); color-scheme: light; } /* ---- Reset / base ---- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { height: 100%; margin: 0; padding: 0; } /* Background de page */ body { background: radial-gradient(1000px 500px at 85% -10%, var(--glow-1), transparent 60%), radial-gradient(800px 420px at -10% 30%, var(--glow-2), transparent 55%), var(--bg); background-attachment: fixed; transition: background-color 0.3s ease, color 0.3s ease; color: var(--text); font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased; /* Sticky footer */ display: flex; flex-direction: column; min-height: 100vh; } main { flex: 1; /* Pousse le footer vers le bas si le contenu est court */ width: 100%; } img { max-width: 100%; } ::selection { background: var(--accent); color: white; } /* ---- Header de la page ---- */ /* header : sticky avec effet de flou */ .site-header { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px clamp(16px, 4vw, 48px); background: var(--header-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); transition: background-color 0.3s ease; } /* Groupe nav + boutons à droite du header */ .header-right { display: flex; align-items: center; gap: 10px; } /* Titre de la page ou même le Logo */ .titre-de-page { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; color: var(--text); white-space: nowrap; } /* Barre de navigation */ .site-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .site-nav a { color: var(--text-muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 14px; border-radius: 10px; transition: color 0.2s ease, background-color 0.2s ease; } .site-nav a:hover { background-color: var(--surface-2); color: var(--text); } /* Lien de la page courante */ .site-nav a.active { color: var(--accent-light); background-color: var(--accent-soft); } /* Bouton Connexion / Deconnexion mis en avant */ .site-nav a.nav-cta { margin-left: 8px; color: white; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 6px 18px rgba(255, 122, 26, 0.3); } .site-nav a.nav-cta:hover { filter: brightness(1.1); } /* Bouton de changement de thème (lune / soleil) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text-muted); font-size: 16px; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .theme-toggle:hover { color: var(--accent-light); border-color: var(--accent-border); transform: translateY(-1px); } /* En sombre on montre le soleil (passer en clair), en clair la lune */ .theme-toggle .fa-moon { display: none; } [data-theme="light"] .theme-toggle .fa-sun { display: none; } [data-theme="light"] .theme-toggle .fa-moon { display: inline; } /* Bouton burger (mobile uniquement) */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } .nav-toggle span { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } /* Animation du burger en croix quand le menu est ouvert */ .nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-open .nav-toggle span:nth-child(2) { opacity: 0; } .nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Responsive : navigation mobile en panneau déroulant */ @media (max-width: 860px) { .nav-toggle { display: flex; } .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px 16px 16px; background: var(--nav-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); } .nav-open .site-nav { display: flex; } .site-nav a { padding: 13px 16px; font-size: 16px; } .site-nav a.nav-cta { margin-left: 0; margin-top: 6px; text-align: center; } } /* ---- Message dev / cache ---- */ .dev-cache-notice { margin: 24px auto; padding: 16px 20px; max-width: 900px; width: calc(100% - 32px); border-radius: 14px; background: linear-gradient(135deg, rgba(108, 99, 255, 0.16), rgba(87, 79, 224, 0.1)); border: 1px solid rgba(108, 99, 255, 0.35); color: #dcd9ff; font-size: 0.95rem; line-height: 1.6; } .dev-cache-notice strong { color: #b7b1ff; } .dev-cache-notice::before { content: "⚠️"; margin-right: 10px; font-size: 1.05rem; } /* Version thème clair du bandeau d'avertissement */ [data-theme="light"] .dev-cache-notice { background: linear-gradient(135deg, rgba(108, 99, 255, 0.12), rgba(87, 79, 224, 0.07)); border-color: rgba(108, 99, 255, 0.35); color: #4a43c0; } [data-theme="light"] .dev-cache-notice strong { color: #3a34a8; } /* ---- Message admin en haut des listes ---- */ .admin-notice { margin: 20px auto 0; padding: 12px 18px; max-width: 900px; width: calc(100% - 32px); text-align: center; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--text-soft); font-size: 0.95rem; } .admin-notice a { color: var(--accent-light); font-weight: 600; } /* ---- HERO (page d'accueil) ---- */ .hero { max-width: 1200px; margin: 0 auto; /* Le hero occupe presque tout l'écran pour un rendu plus aéré */ min-height: calc(100vh - 220px); display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: clamp(70px, 12vw, 140px) clamp(20px, 4vw, 40px) clamp(90px, 12vw, 130px); text-align: center; } /* Flèche animée qui invite à défiler vers le bas */ .scroll-indicator { position: absolute; bottom: 26px; left: 50%; margin-left: -23px; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--accent-light); background: var(--accent-soft); border: 1px solid var(--accent-border); font-size: 17px; opacity: 0; animation: scrollFadeIn 0.6s ease 0.9s forwards, scrollBounce 2s ease-in-out 1.5s infinite; transition: background-color 0.2s ease, color 0.2s ease; } .scroll-indicator:hover { background: var(--accent); color: white; } @keyframes scrollFadeIn { to { opacity: 1; } } @keyframes scrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 24px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-light); font-size: 14px; font-weight: 600; } .hero h1 { margin: 0 0 18px; font-size: clamp(34px, 6vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } /* Reflet lumineux qui balaye le prénom en continu */ .hero h1 .accent { background: linear-gradient( 120deg, var(--accent-light) 0%, var(--accent) 35%, #ffd9b3 50%, var(--accent) 65%, var(--accent-light) 100% ); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: heroShimmer 4s linear infinite; } /* Apparition en cascade des éléments du hero au chargement */ .hero-badge, .hero h1, .hero p, .hero-actions { opacity: 0; animation: heroFadeUp 0.7s ease forwards; } .hero h1 { animation-delay: 0.15s; } .hero p { animation-delay: 0.3s; } .hero-actions { animation-delay: 0.45s; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroShimmer { to { background-position: -200% center; } } /* Désactive les animations si l'utilisateur préfère un affichage sans mouvement */ @media (prefers-reduced-motion: reduce) { .hero-badge, .hero h1, .hero p, .hero-actions { animation: none; opacity: 1; } .hero h1 .accent { animation: none; } } .hero p { margin: 0 auto 32px; max-width: 640px; color: var(--text-muted); font-size: clamp(16px, 2vw, 19px); line-height: 1.7; } .hero-actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 12px; font-size: 16px; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease; } .btn-primary { color: white; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); box-shadow: 0 10px 26px rgba(255, 122, 26, 0.32); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 14px 32px rgba(255, 122, 26, 0.4); } .btn-ghost { color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong); } .btn-ghost:hover { transform: translateY(-2px); background: var(--surface-3); border-color: var(--accent-border); } /* ---- Titres de pages (Projets / Expériences / etc.) ---- */ .page-header { max-width: 1200px; margin: clamp(28px, 5vw, 56px) auto 8px; padding: 0 clamp(16px, 4vw, 40px); } .page-header h1, .page-header h2 { margin: 0 0 8px; font-size: clamp(28px, 4.5vw, 42px); font-weight: 800; letter-spacing: -0.02em; } .page-header p { margin: 0; color: var(--text-muted); font-size: clamp(15px, 2vw, 17px); } /* ---- PAGE LOGIN ---- */ /* Centre la carte au milieu de la page */ .login-container { display: flex; justify-content: center; align-items: center; min-height: 70vh; padding: 40px 16px; } /* La carte de connexion */ .login-card { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 40px 36px; width: 380px; max-width: 100%; text-align: center; } /* Titre dans la carte */ .login-card .logo-blanc { color: var(--text); font-size: 26px; font-weight: 800; } .login-card .logo-violet { color: var(--accent); font-size: 26px; font-weight: 800; } /* Sous-titre */ .login-card p { color: var(--text); font-size: 22px; font-weight: 700; margin: 0 0 24px; } /* Labels */ .login-card label { display: block; text-align: left; color: var(--text-soft); margin-bottom: 6px; font-size: 14px; } /* Champs de texte */ .login-card input[type="text"], .login-card input[type="password"] { width: 100%; background-color: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; padding: 13px 15px; margin-bottom: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .login-card input[type="text"]:focus, .login-card input[type="password"]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.2); } .login-card input::placeholder { color: var(--text-muted); } /* Bouton connexion */ .login-card input[type="submit"] { width: 100%; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; border: none; border-radius: var(--radius-sm); padding: 14px; font-family: var(--font); font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 8px; box-shadow: 0 10px 24px rgba(255, 122, 26, 0.28); transition: transform 0.2s ease, filter 0.2s ease; } .login-card input[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.08); } /* ---- PAGE AJOUT PROJET / FORMULAIRES ADMIN ---- */ .project-container { display: flex; justify-content: center; padding: 14px clamp(16px, 4vw, 24px); } .project-form-card { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: clamp(20px, 4vw, 32px); width: 800px; max-width: 100%; } .project-state { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; padding: 7px 14px; background-color: rgba(10, 20, 12, 0.75); backdrop-filter: blur(6px); color: #7dff98; border: 1px solid rgba(57, 255, 90, 0.55); border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; } .project-header h2 { margin-top: 0; margin-bottom: 20px; font-size: 22px; font-weight: 700; display: flex; align-items: center; } .badge-admin { color: var(--accent); font-size: 14px; margin-left: 10px; font-weight: normal; } .form-row { display: flex; gap: 20px; margin-bottom: 20px; } .half-width { flex: 1; } .form-group { margin-bottom: 20px; } .form-group label, .project-form-card label { display: block; color: var(--text-soft); margin-bottom: 8px; font-size: 14px; font-weight: 500; } .project-banner { position: relative; overflow: hidden; } .project-form-card input[type="text"], .project-form-card input[type="url"], .project-form-card input[type="password"], .project-form-card textarea { width: 100%; background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-family: var(--font); font-size: 15px; padding: 12px 14px; margin-bottom: 16px; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .project-form-card input:focus, .project-form-card textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18); } .project-form-card textarea { min-height: 100px; resize: vertical; } /* Zone pour l'URL (qui remplace l'upload de fichier) */ .url-input-zone { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 40px 20px; text-align: center; background-color: var(--bg-soft); } .url-input-zone input { width: 80%; margin-top: 15px; } @media (max-width: 700px) { .form-row { flex-direction: column; gap: 0; } .url-input-zone { padding: 24px 12px; } .url-input-zone input { width: 100%; } } /* Case à cocher (formulaire notification du panel admin) */ .checkbox-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text-soft); font-size: 14px; cursor: pointer; } .checkbox-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; } /* Bouton violet */ .btn-submit { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; border: none; border-radius: var(--radius-sm); padding: 12px 24px; font-family: var(--font); font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 0.2s ease, filter 0.2s ease; } .btn-submit:hover { transform: translateY(-1px); filter: brightness(1.08); } /* ---- LISTES DE PROJETS / EXPÉRIENCES ---- */ .projects-title { color: var(--text); font-size: clamp(20px, 3vw, 26px); font-weight: 800; letter-spacing: -0.01em; max-width: 1280px; margin: 24px auto 4px; padding: 0 clamp(16px, 4vw, 40px) 16px; } .projects-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; max-width: 1280px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 48px; } .projects-list .project-card { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } .projects-list .project-card:hover { transform: translateY(-5px); border-color: var(--accent-border); box-shadow: var(--shadow-accent); } .project-banner img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.35s ease; } .project-card:hover .project-banner img { transform: scale(1.04); } .project-content { padding: 22px; display: flex; flex-direction: column; flex: 1; } .project-content h2 { margin: 0 0 12px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .project-content p { margin: 0 0 8px; color: var(--text-muted); font-size: 15px; line-height: 1.65; } .project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .tag { background-color: var(--accent-soft); color: var(--accent-light); border: 1px solid var(--accent-border); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } /* ---- Panel admin ---- */ .admin-actions { display: flex; gap: 12px; margin-top: auto; padding-top: 20px; flex-wrap: wrap; } .admin-actions .btn-submit { display: inline-block; text-decoration: none; text-align: center; } .btn-edit { background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); } .btn-delete { background: linear-gradient(180deg, var(--danger) 0%, var(--danger-dark) 100%); } .btn-delete:hover { filter: brightness(1.1); } @media (max-width: 700px) { .projects-list { grid-template-columns: 1fr; gap: 18px; } .project-banner img { height: 180px; } .admin-actions { flex-direction: column; } .admin-actions .btn-submit { width: 100%; } } /* ---- STYLES DU FOOTER ---- */ .site-footer { background-color: var(--footer-bg); border-top: 1px solid var(--border); margin-top: 48px; padding: 28px clamp(16px, 4vw, 40px); font-size: 14px; } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; max-width: 1200px; margin: 0 auto; } .footer-copyright { color: var(--text-muted); margin: 0; } .footer-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; } .footer-links a, .footer-links .discord-handle { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; padding: 6px 0; cursor: pointer; } .footer-links a:hover, .footer-links .discord-handle:hover { color: var(--accent-light); } /* Responsive : mobile */ @media (max-width: 700px) { .footer-content { flex-direction: column; text-align: center; } .footer-links { justify-content: center; } } /* ---- PAGE CONTACT ---- */ .contact-page { width: 100%; padding: clamp(32px, 6vw, 64px) clamp(14px, 4vw, 24px) clamp(48px, 8vw, 80px); } .contact-wrapper { max-width: 1100px; margin: 0 auto; } .contact-card { display: grid; grid-template-columns: 320px 1fr; gap: clamp(18px, 3vw, 32px); background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); } .contact-info { background: radial-gradient(400px 200px at 20% 0%, rgba(255, 122, 26, 0.16), transparent 70%), var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; justify-content: center; } .contact-title { margin: 0 0 10px; font-size: clamp(26px, 3vw, 32px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .contact-name { margin: 0 0 18px; font-size: 18px; font-weight: 600; color: var(--accent-light); } .contact-line { margin: 0 0 10px; font-size: 15px; color: var(--text-muted); line-height: 1.6; overflow-wrap: anywhere; } .contact-form { display: flex; flex-direction: column; gap: 16px; } .contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); padding: 14px 16px; font-size: 15px; font-family: var(--font); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .contact-form textarea { min-height: 180px; resize: vertical; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-muted); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.18); background-color: var(--surface-3); } .contact-form input[type="submit"] { width: fit-content; min-width: 220px; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; border: none; border-radius: var(--radius-sm); padding: 14px 24px; font-size: 15px; font-family: var(--font); font-weight: 600; cursor: pointer; box-shadow: 0 10px 24px rgba(255, 122, 26, 0.28); transition: filter 0.2s ease, transform 0.2s ease; } .contact-form input[type="submit"]:hover { filter: brightness(1.08); transform: translateY(-1px); } .contact-form input[type="submit"]:active { transform: translateY(0); } @media (max-width: 860px) { .contact-card { grid-template-columns: 1fr; } .contact-info { padding: 24px; } } @media (max-width: 560px) { .contact-grid { grid-template-columns: 1fr; } .contact-form input[type="submit"] { width: 100%; min-width: 0; } } /* ---- PAGE HOME ---- */ .quick-links-section { max-width: 1200px; margin: clamp(40px, 7vw, 70px) auto; padding: 0 clamp(20px, 4vw, 40px); } .quick-links-header { margin-bottom: 28px; } .quick-links-header h2 { margin: 0 0 10px; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .quick-links-header p { margin: 0; color: var(--text-muted); font-size: clamp(15px, 2vw, 18px); } .quick-links-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .quick-link-card { display: flex; flex-direction: column; justify-content: flex-start; min-height: 220px; padding: 28px; background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .quick-link-card:hover { transform: translateY(-6px); border-color: var(--accent-border); box-shadow: var(--shadow-accent); } .quick-link-icon { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-light); font-size: 22px; transition: transform 0.25s ease; } .quick-link-card:hover .quick-link-icon { transform: scale(1.08); } .quick-link-card h3 { margin: 0 0 10px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); } .quick-link-card p { margin: 0; color: var(--text-muted); font-size: 15.5px; line-height: 1.65; } /* Responsive */ @media (max-width: 1100px) { .quick-links-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .quick-links-grid { grid-template-columns: 1fr; } .quick-link-card { min-height: auto; padding: 24px; } } /* ---- BANDEAUX DE LOGOS (page d'accueil) : "Outils" et "Ils m'ont fait confiance" ---- */ .logo-banner-section { max-width: 1200px; margin: 60px auto; padding: 0 clamp(20px, 4vw, 40px); } .logo-banner-header { margin-bottom: 24px; text-align: center; } .logo-banner-header h2 { margin: 0; font-size: clamp(24px, 3.5vw, 34px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); } /* Fenêtre de défilement : masque les bords en dégradé pour un effet "infini" propre */ .logo-marquee { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); } /* Ligne de logos animée : contient la liste dupliquée deux fois (voir listLogos.php), la translation de -50% boucle donc exactement sur la deuxième copie => scroll infini */ .logo-track { display: flex; align-items: center; gap: 20px; width: max-content; animation: logoScroll 32s linear infinite; } .logo-marquee-reverse .logo-track { animation-direction: reverse; } .logo-marquee:hover .logo-track { animation-play-state: paused; } @keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pas de fond/bordure : les logos flottent directement sur le fond de la page, comme un bandeau "trusted by" classique */ .logo-tile { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 160px; height: 90px; padding: 18px 24px; background: transparent; border: none; text-decoration: none; transition: transform 0.2s ease; } a.logo-tile:hover { transform: translateY(-3px); } .logo-tile img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) opacity(0.6); transition: filter 0.25s ease; } .logo-tile:hover img { filter: grayscale(0) opacity(1); } /* Sur mobile le survol n'existe pas : on affiche les logos en couleur directement */ @media (hover: none) { .logo-tile img { filter: grayscale(0) opacity(0.85); } } @media (max-width: 620px) { .logo-tile { width: 130px; height: 74px; padding: 14px 18px; } } @media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; } .logo-marquee { -webkit-mask-image: none; mask-image: none; } } /* ---- Panel admin : grille des logos ---- */ .logo-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; max-width: 1200px; margin: 0 auto; padding: 8px clamp(16px, 4vw, 40px) 24px; } .logo-admin-item { display: flex; flex-direction: column; background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .logo-admin-preview { display: flex; align-items: center; justify-content: center; height: 90px; padding: 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); } .logo-admin-preview img { max-width: 100%; max-height: 100%; object-fit: contain; } .logo-admin-info { padding: 14px 16px 4px; } .logo-admin-info .tag { margin-bottom: 8px; } .logo-admin-info p { margin: 0; color: var(--text); font-size: 14.5px; font-weight: 600; } .logo-admin-item .admin-actions { padding: 12px 16px 16px; } /* ---- PAGE COMPÉTENCES ---- */ .skills-section { max-width: 1200px; margin: 0 auto; padding: clamp(32px, 6vw, 56px) clamp(20px, 4vw, 40px) clamp(40px, 6vw, 64px); } .skills-header { margin-bottom: 32px; } .skills-header h1 { margin: 0 0 10px; font-size: clamp(28px, 4.5vw, 42px); font-weight: 800; letter-spacing: -0.02em; } .skills-header p { margin: 0; color: var(--text-muted); font-size: clamp(15px, 2vw, 18px); } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; } .skill-category { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .skill-category:hover { transform: translateY(-4px); border-color: var(--accent-border); box-shadow: var(--shadow-accent); } .skill-category-icon { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-light); font-size: 21px; } .skill-category h2 { margin: 0 0 16px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } .skill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .skill-list li { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 15px; transition: border-color 0.2s ease, color 0.2s ease; } .skill-list li:hover { border-color: var(--accent-border); color: var(--text); } .skill-list li i { color: var(--accent-light); width: 18px; text-align: center; } /* Boutons admin dans les cartes de compétences */ .skill-category .admin-actions { margin-top: 18px; } /* Grille des compétences dans le panel admin : moins d'espace vertical que la page publique */ .skills-section-admin { padding-top: 0; padding-bottom: 24px; } /* ---- PAGE CGU ---- */ .cgu-page { max-width: 980px; margin: clamp(28px, 5vw, 48px) auto clamp(48px, 7vw, 72px); padding: 0 clamp(14px, 4vw, 24px); } .cgu-card { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow); } .cgu-card h1 { margin: 0 0 10px; color: var(--text); font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .cgu-card h2 { margin: 0 0 24px; color: var(--text-muted); font-size: 16px; font-weight: 500; } .cgu-card hr { border: none; height: 1px; background-color: var(--border); margin: 0 0 28px; } .cgu-card h3 { margin: 30px 0 12px; color: var(--accent-light); font-size: clamp(18px, 2.5vw, 22px); font-weight: 700; } .cgu-card p { margin: 0 0 14px; color: var(--text-soft); font-size: 15.5px; line-height: 1.8; } .cgu-card p:last-child { margin-bottom: 0; } .cgu-card br { display: none; } /* ==== CARTES CLIQUABLES (page markdown / lien externe) ==== */ /* Indicateur en bas de carte ; le ::after rend TOUTE la carte cliquable quand c'est un lien */ .projects-list .project-card { position: relative; } .card-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--accent-light); } a.card-link::after { content: ''; position: absolute; inset: 0; } .card-link-none { color: var(--text-muted); font-weight: 500; } /* ==== PAGE DE DÉTAILS (markdown) ==== */ .details-page { max-width: 920px; margin: clamp(24px, 4vw, 40px) auto clamp(48px, 7vw, 72px); padding: 0 clamp(14px, 4vw, 24px); } .details-back { margin-bottom: 20px; } .details-card { background: linear-gradient(180deg, var(--surface) 0%, var(--bg-soft) 100%); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .details-banner img { width: 100%; height: clamp(200px, 32vw, 320px); object-fit: cover; display: block; } .details-content { padding: clamp(22px, 4vw, 40px); } .details-type { display: inline-block; padding: 6px 14px; margin-bottom: 14px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-light); font-size: 13px; font-weight: 600; } .details-content h1 { margin: 0 0 12px; font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; } .details-meta { display: flex; gap: 20px; flex-wrap: wrap; margin: 0 0 16px; color: var(--text-muted); font-size: 15px; } .details-meta i { color: var(--accent-light); margin-right: 6px; } /* Contenu markdown rendu (via marked.js) */ .markdown-content { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: 16px; line-height: 1.8; } .markdown-content h1, .markdown-content h2, .markdown-content h3, .markdown-content h4 { color: var(--text); font-weight: 700; letter-spacing: -0.01em; margin: 28px 0 12px; line-height: 1.3; } .markdown-content h1 { font-size: 28px; } .markdown-content h2 { font-size: 23px; } .markdown-content h3 { font-size: 19px; } .markdown-content h4 { font-size: 17px; } .markdown-content p { margin: 0 0 14px; } .markdown-content a { color: var(--accent-light); font-weight: 600; } .markdown-content ul, .markdown-content ol { margin: 0 0 14px; padding-left: 26px; } .markdown-content li { margin-bottom: 6px; } .markdown-content img { max-width: 100%; border-radius: var(--radius-sm); margin: 10px 0; } .markdown-content code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-size: 14px; font-family: 'SF Mono', Menlo, Consolas, monospace; color: var(--accent-light); } .markdown-content pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px 18px; overflow-x: auto; margin: 0 0 16px; } .markdown-content pre code { background: none; border: none; padding: 0; color: var(--text-soft); } .markdown-content blockquote { margin: 0 0 16px; padding: 10px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--text-soft); } .markdown-content hr { border: none; height: 1px; background: var(--border); margin: 24px 0; } .markdown-content table { border-collapse: collapse; margin: 0 0 16px; width: 100%; } .markdown-content th, .markdown-content td { border: 1px solid var(--border); padding: 8px 12px; text-align: left; } .markdown-content th { background: var(--surface-2); color: var(--text); } /* ==== MINI LECTEUR PDF (page de détails) ==== */ .pdf-viewer-wrap { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); } .pdf-viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; color: var(--text-soft); font-size: 14.5px; font-weight: 600; } .pdf-viewer-toolbar i { color: var(--accent-light); margin-right: 8px; } .pdf-download-btn { padding: 8px 16px; font-size: 13.5px; text-decoration: none; } .pdf-viewer { width: 100%; height: 75vh; min-height: 420px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #525659; } @media (max-width: 700px) { .pdf-viewer { height: 60vh; } } /* ==== PANEL ADMIN (sous-catégories) ==== */ .admin-page { max-width: 1280px; margin: 0 auto; padding-bottom: 40px; } /* Sous-navigation par catégorie */ .admin-nav { display: flex; flex-wrap: wrap; gap: 8px; max-width: 1200px; margin: 20px auto 8px; padding: 0 clamp(16px, 4vw, 40px); } .admin-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-soft); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .admin-nav a:hover { color: var(--accent-light); border-color: var(--accent-border); transform: translateY(-1px); } .admin-nav a i { color: var(--accent-light); } /* Sections du panel */ .admin-section { max-width: 1280px; margin: 0 auto; padding: 26px 0 6px; /* L'ancre s'arrête sous le header sticky */ scroll-margin-top: 84px; } .admin-section-title { display: flex; align-items: center; gap: 12px; max-width: 1200px; margin: 0 auto 16px; padding: 0 clamp(16px, 4vw, 40px); font-size: clamp(21px, 3vw, 26px); font-weight: 800; letter-spacing: -0.01em; } .admin-section-title i { color: var(--accent-light); font-size: 0.85em; } /* Bloc repliable contenant chaque formulaire */ .admin-block { max-width: 1200px; margin: 0 auto 20px; padding: 0 clamp(16px, 4vw, 40px); } .admin-block summary { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer; user-select: none; transition: border-color 0.2s ease, background-color 0.2s ease; } .admin-block summary:hover { border-color: var(--accent-border); } .admin-block[open] summary { border-color: var(--accent-border); color: var(--accent-light); margin-bottom: 14px; } .admin-block .project-form-card { width: 100%; } /* Grand champ markdown dans les formulaires admin */ .project-form-card .markdown-textarea { min-height: 220px; font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13.5px; } /* ==== DRAG & DROP PDF (panel admin) ==== */ /* Bandeau indiquant le PDF déjà attaché, avec option de suppression */ .pdf-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 12px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-size: 14px; } .pdf-current i { color: var(--accent-light); font-size: 18px; } .pdf-current a { color: var(--accent-light); font-weight: 600; text-decoration: none; } .pdf-current a:hover { text-decoration: underline; } .pdf-remove-row { margin: 0 0 0 auto; } /* Zone de dépôt du fichier PDF */ .pdf-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 28px 20px; margin-bottom: 16px; text-align: center; background: var(--bg-soft); border: 2px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease; } .pdf-dropzone i { font-size: 26px; color: var(--accent-light); } .pdf-dropzone p { margin: 0; font-size: 14px; } .pdf-dropzone-browse { color: var(--accent-light); font-weight: 600; text-decoration: underline; } .pdf-dropzone-filename { font-size: 13px; font-weight: 600; color: var(--text); } /* Survol pendant qu'un fichier est glissé au-dessus de la zone */ .pdf-dropzone.dragging { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); } /* Un fichier valide a été sélectionné */ .pdf-dropzone.has-file { border-style: solid; border-color: var(--accent); } /* Section Données (export / import) */ .admin-data-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; } .admin-data-title i { color: var(--accent-light); margin-right: 8px; } .admin-data-text { margin: 0 0 16px; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; } .admin-data-warning { color: #ffb8bb; } [data-theme="light"] .admin-data-warning { color: #b03538; } .admin-export-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .admin-data-separator { border: none; height: 1px; background: var(--border); margin: 24px 0; } .project-form-card input[type="file"] { display: block; width: 100%; margin-bottom: 16px; padding: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); color: var(--text-soft); font-family: var(--font); font-size: 14px; } /* ==== BOUTON FLOTTANT EXPÉRIENCES <-> ÉCOLES ==== */ .section-jump { position: fixed; bottom: 24px; right: 24px; z-index: 200; width: 54px; height: 54px; border-radius: 50%; border: none; background: linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%); color: white; font-size: 20px; cursor: pointer; box-shadow: 0 10px 26px rgba(255, 122, 26, 0.4); transition: transform 0.2s ease, box-shadow 0.2s ease; } .section-jump:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(255, 122, 26, 0.5); } /* Par défaut (dans les expériences) : chapeau de diplômé = aller aux écoles */ .section-jump .fa-briefcase { display: none; } /* Dans la section écoles : sac de travail = remonter aux expériences */ .section-jump.mode-ecoles .fa-graduation-cap { display: none; } .section-jump.mode-ecoles .fa-briefcase { display: inline; } /* ==== NOTIFICATIONS TOAST ==== */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 40px); padding: 15px 22px; background: var(--surface-2); border: 1px solid var(--accent-border); border-radius: 14px; color: var(--text); font-size: 15px; font-weight: 500; box-shadow: var(--shadow); cursor: pointer; animation: toastIn 0.4s ease, toastOut 0.5s ease 4.5s forwards; } .toast i { color: var(--success); font-size: 19px; flex-shrink: 0; } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(24px); } } @keyframes toastOut { to { opacity: 0; transform: translateX(-50%) translateY(12px); visibility: hidden; } } /* ==== ANIMATIONS & INTERACTIONS ==== */ /* Transition entre les pages : fondu de l'ancienne page vers la nouvelle (View Transitions API, navigateurs récents uniquement, sans effet ailleurs) */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: pageOut 0.2s ease both; } ::view-transition-new(root) { animation: pageIn 0.3s ease both; } @keyframes pageOut { to { opacity: 0; } } @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } } /* Entrée du contenu à chaque chargement de page (pour les navigateurs sans View Transitions) */ main { animation: pageEnter 0.45s ease; } @keyframes pageEnter { from { opacity: 0; transform: translateY(12px); } } /* Si le navigateur gère les View Transitions on évite de cumuler les deux entrées */ @supports (view-transition-name: root) { main { animation: none; } } /* Apparition au défilement : la classe .reveal est posée en JS (footer), puis .visible est ajoutée quand l'élément entre dans l'écran */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; transition-delay: var(--reveal-delay, 0s); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ---- Micro-interactions ---- */ /* Liens de navigation : légère élévation au survol */ .site-nav a { transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .site-nav a:hover { transform: translateY(-1px); } /* Icône du bouton de thème : rotation au survol */ .theme-toggle i { transition: transform 0.35s ease; } .theme-toggle:hover i { transform: rotate(40deg) scale(1.12); } /* Tags : petite élévation au survol */ .tag { transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .tag:hover { transform: translateY(-2px); border-color: var(--accent); } /* Items de compétences : glissement vers la droite au survol */ .skill-list li { transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .skill-list li:hover { transform: translateX(4px); } /* Liens du footer : légère élévation au survol */ .footer-links a, .footer-links .discord-handle { display: inline-block; transition: color 0.2s ease, transform 0.2s ease; } .footer-links a:hover, .footer-links .discord-handle:hover { transform: translateY(-2px); } /* Effet d'appui sur tous les boutons */ .btn:active, .btn-submit:active, .login-card input[type="submit"]:active, .contact-form input[type="submit"]:active { transform: translateY(1px) scale(0.98); } /* On désactive tout si l'utilisateur préfère un affichage sans mouvement */ @media (prefers-reduced-motion: reduce) { main, ::view-transition-old(root), ::view-transition-new(root) { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } .site-nav a:hover, .tag:hover, .skill-list li:hover, .footer-links a:hover, .footer-links .discord-handle:hover { transform: none; } .scroll-indicator { animation: none; opacity: 1; } .toast { animation: none; } }