/* ---- 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; } /* ---- Bandeau de chiffres clés (page d'accueil) ---- */ .stats-strip { max-width: 900px; margin: 0 auto; padding: 0 20px 70px; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; text-align: center; } .stat-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 34px; min-width: 140px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); } .stat-number { font-size: clamp(28px, 4vw, 38px); font-weight: 800; letter-spacing: -0.02em; color: var(--accent); } .stat-label { font-size: 13.5px; color: var(--text-muted); font-weight: 600; } .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%); } } /* Carte derrière chaque logo : suit le thème actif comme le reste des cartes du site. C'est possible parce que les logos posés dessus ne sont plus affichés tels quels mais aplatis en silhouette monochrome adaptée au thème (voir la règle suivante) : sans ça, un logo blanc sur fond transparent (3S Sécurité, TerraTech) disparaîtrait sur une tuile claire, et un logo noir (Magyar, Gamm Vert) sur une tuile sombre */ .logo-tile { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 160px; height: 90px; padding: 18px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } a.logo-tile:hover { transform: translateY(-3px); border-color: var(--accent-border); background: var(--surface-2); } /* Bandeau "Ils m'ont fait confiance" : les logos fournis par les entreprises ont des teintes très variables (certains blancs, d'autres noirs, tous sur fond transparent). brightness(0) les aplatit en silhouette noire, invert(1) la repasse en blanc pour le thème sombre : lisible dans les deux thèmes, et rendu uniforme façon mur de partenaires. Le bandeau des outils, lui, garde les vraies couleurs (voir .logo-marquee-tools) */ .logo-tile img, .logo-tile i { max-width: 100%; max-height: 100%; object-fit: contain; filter: brightness(0) invert(1) opacity(0.55); transition: filter 0.25s ease; } [data-theme="light"] .logo-tile img, [data-theme="light"] .logo-tile i { filter: brightness(0) opacity(0.45); } /* Taille de la glyphe pour les icônes Devicon (les images gardent leur taille naturelle) */ /* La couleur suit le thème, sinon l'icône serait invisible sur la tuile en thème clair. :not(.colored) laisse intactes les icônes Devicon affichées aux couleurs de la marque dans le bandeau des outils (voir afficherVisuelItem dans functions/listSkills.php) */ .logo-tile i { font-size: 44px; line-height: 1; } .logo-tile i:not(.colored) { color: #e8e8f2; } [data-theme="light"] .logo-tile i:not(.colored) { color: #191924; } .logo-tile:hover img, .logo-tile:hover i { filter: brightness(0) invert(1) opacity(1); } [data-theme="light"] .logo-tile:hover img, [data-theme="light"] .logo-tile:hover i { filter: brightness(0) opacity(1); } /* Sur mobile le survol n'existe pas : on affiche les logos plus contrastés directement */ @media (hover: none) { .logo-tile img, .logo-tile i { filter: brightness(0) invert(1) opacity(0.8); } [data-theme="light"] .logo-tile img, [data-theme="light"] .logo-tile i { filter: brightness(0) opacity(0.7); } } /* Bandeau "Outils" : pas de niveaux de gris, on veut que les vrais logos des outils soient reconnaissables immédiatement, sans avoir à survoler chaque tuile */ .logo-marquee-tools .logo-tile img, .logo-marquee-tools .logo-tile i, .logo-marquee-tools .logo-tile:hover img, .logo-marquee-tools .logo-tile:hover i, [data-theme="light"] .logo-marquee-tools .logo-tile img, [data-theme="light"] .logo-marquee-tools .logo-tile i { filter: none; opacity: 1; } @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-preview i { font-size: 40px; color: var(--text); } .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; } /* Vraie image de logo (format "img:URL") pour les outils absents des polices d'icônes */ .skill-item-visual { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } /* 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; } /* Texte d'introduction sous un titre de section admin (voir Logos partenaires) */ .admin-section-intro { max-width: 1200px; margin: 0 auto 16px; padding: 0 clamp(16px, 4vw, 40px); } .admin-section-intro a { color: var(--accent-light); font-weight: 600; } /* 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; } } /* ---- MODE PRÉSENTATION : écran de saisie du code / écran "trop de tentatives" ---- Ces deux écrans vivent dans le chrome normal du site (header + footer), contrairement à la lecture immersive une fois déverrouillé (voir styles/presentation.css) */ .presentation-lock-container { display: flex; justify-content: center; align-items: center; min-height: 65vh; padding: 40px 16px; } .presentation-lock-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: 44px 40px; width: 460px; max-width: 100%; text-align: center; } .presentation-lock-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; margin-bottom: 20px; border-radius: 999px; background: var(--accent-soft); border: 1px solid var(--accent-border); color: var(--accent-light); font-size: 13px; font-weight: 700; } .presentation-lock-badge--danger { background: rgba(229, 72, 77, 0.12); border-color: rgba(229, 72, 77, 0.35); color: #ff8a8d; } [data-theme="light"] .presentation-lock-badge--danger { color: var(--danger-dark); } .presentation-lock-card h1 { margin: 0 0 10px; font-size: 26px; font-weight: 800; letter-spacing: -0.01em; color: var(--text); } .presentation-lock-card p { margin: 0 0 6px; color: var(--text-soft); font-size: 15px; line-height: 1.6; } .presentation-lock-card p:last-of-type { margin-bottom: 22px; } .presentation-lock-btn { width: 100%; justify-content: center; } .presentation-lock-error { margin: 16px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); background: rgba(229, 72, 77, 0.12); border: 1px solid rgba(229, 72, 77, 0.3); color: #ff8a8d; font-size: 14px; } [data-theme="light"] .presentation-lock-error { color: var(--danger-dark); } /* Les 9 cases du code PIN */ .presentation-pin-form { margin-top: 22px; } .pin-boxes { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; } .pin-box { width: 38px; height: 48px; text-align: center; 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: 20px; font-weight: 700; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .pin-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } /* Bouton "maintenir pour afficher" sous les cases du code : discret, il ne doit pas attirer l'oeil autant que le bouton Valider */ .pin-reveal { display: inline-flex; align-items: center; gap: 8px; margin: 0 auto 20px; padding: 7px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; /* Le maintien affiche le code : on empêche la sélection du texte du bouton pendant l'appui prolongé, sinon le navigateur surligne le libellé */ user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: color 0.2s ease, border-color 0.2s ease; } .pin-reveal:hover { color: var(--text-soft); border-color: var(--border-strong); } /* Pendant que le bouton est maintenu : accent orange pour montrer que le code est visible */ .pin-reveal.is-revealing { color: var(--accent-light); border-color: var(--accent-border); background: var(--accent-soft); } .pin-reveal:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .presentation-pin-submit { width: 100%; } .presentation-pin-submit:disabled { opacity: 0.5; cursor: not-allowed; filter: none; transform: none; } /* Pastilles "tentatives restantes", même principe que sur le captcha */ .pin-attempts { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; color: var(--text-muted); font-size: 13px; } .pin-attempts-dots { display: flex; gap: 6px; } .pin-attempts-dots span { width: 9px; height: 9px; border-radius: 50%; } .pin-attempts-dots .dot-filled { background: var(--accent); } .pin-attempts-dots .dot-empty { background: var(--border-strong); } @media (max-width: 480px) { .pin-box { width: 30px; height: 42px; font-size: 17px; } .pin-boxes { gap: 5px; } } /* Petit bouton "Insérer une image" au-dessus du champ markdown du mode présentation (panel admin) : insère la syntaxe markdown au curseur, sans avoir à s'en souvenir */ .markdown-toolbar { margin-bottom: 8px; } .markdown-insert-image { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-soft); font-family: var(--font); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .markdown-insert-image:hover { color: var(--accent-light); border-color: var(--accent-border); } /* ---- PAGE TABLEAU DE SYNTHÈSE ---- Le PDF est le contenu principal de la page : on lui donne plus de largeur et plus de hauteur que l'aperçu inséré dans une fiche projet, parce que le tableau est dense et qu'il devient vite illisible sur une petite surface */ .synthese-page { max-width: 1200px; margin: 20px auto clamp(48px, 7vw, 72px); padding: 0 clamp(14px, 4vw, 40px); } /* On réutilise .pdf-viewer-toolbar (voir plus haut) mais sans le trait de séparation hérité de .pdf-viewer-wrap, qui n'a pas lieu d'être en haut de page */ .synthese-page .pdf-viewer-toolbar { margin-bottom: 14px; } .synthese-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .synthese-viewer { height: 82vh; min-height: 520px; } .synthese-repli { color: var(--text-soft); padding: 20px; } /* Sur mobile l'aperçu intégré d'un PDF est souvent inutilisable (plusieurs navigateurs affichent juste une zone vide) : on le garde plus court, les deux boutons au-dessus restant le vrai chemin d'accès au document */ @media (max-width: 700px) { .synthese-viewer { height: 60vh; min-height: 360px; } .synthese-page .pdf-viewer-toolbar { flex-direction: column; align-items: flex-start; } }