/* ============================================================ style.css — fichier CSS unique pour tout le site Structure : 1. Variables & reset global 2. Pages publiques (.public-page) → index, meetTheTeam, review, sign-in, sign-up 3. Dashboard (.has-sidebar) → dashboard.php et pages connectées ============================================================ */ /* ── 1. VARIABLES GLOBALES ── */ :root { --cream: #FAF5E5; --brown: #604A28; --brown-light: #8a6d3f; --white: #ffffff; --black: #111111; --card-bg: #ffffff; --shadow: 0 4px 24px rgba(96,74,40,0.10); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--black); overflow-x: hidden; } /* ============================================================ 2. PAGES PUBLIQUES — tout scopé sous body.public-page (ajoute class="public-page" sur dans index.html, meetTheTeam.php, review.php, sign-in.php, sign-up.php) ============================================================ */ /* ── NAVBAR publique ── */ body.public-page nav#navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 40px; height: 100px; background: rgba(250,245,229,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(96,74,40,0.08); transition: box-shadow 0.3s; } body.public-page nav#navbar.scrolled { box-shadow: 0 2px 20px rgba(96,74,40,0.12); } body.public-page .nav-left { display: flex; align-items: center; gap: 14px; } body.public-page .nav-center { display: flex; justify-content: center; } body.public-page .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } body.public-page .nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } body.public-page .nav-logo-icon { width: 36px; height: 36px; background: var(--brown); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; } /* Sélecteur de langue */ body.public-page .lang-selector { position: relative; } body.public-page .lang-btn { display: flex; align-items: center; gap: 6px; background: rgba(96,74,40,0.07); border: 1.5px solid rgba(96,74,40,0.15); border-radius: 20px; padding: 6px 14px; cursor: pointer; font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; color: var(--brown); transition: background 0.2s, border-color 0.2s; } body.public-page .lang-btn:hover { background: rgba(96,74,40,0.13); border-color: var(--brown); } body.public-page .lang-btn .arrow { transition: transform 0.3s; font-size: 10px; } body.public-page .lang-selector.open .lang-btn .arrow { transform: rotate(180deg); } body.public-page .lang-dropdown { display: none; position: absolute; top: calc(100% + 8px); left: 0; min-width: 140px; background: var(--white); border: 1.5px solid rgba(96,74,40,0.12); border-radius: 12px; padding: 6px; box-shadow: 0 8px 32px rgba(96,74,40,0.15); animation: fadeDown 0.2s ease; } body.public-page .lang-selector.open .lang-dropdown { display: block; } @keyframes fadeDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } body.public-page .lang-option { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--black); transition: background 0.15s; } body.public-page .lang-option:hover { background: var(--cream); } body.public-page .lang-option.active { font-weight: 600; color: var(--brown); } body.public-page .flag { font-size: 18px; } /* Nav links */ body.public-page .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; } body.public-page .nav-links a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--black); padding: 8px 16px; border-radius: 20px; transition: background 0.2s, color 0.2s; } body.public-page .nav-links a:hover { background: rgba(96,74,40,0.08); color: var(--brown); } body.public-page .nav-links a.active { color: var(--brown); font-weight: 600; } body.public-page .btn-signup { border: 1.5px solid var(--brown); border-radius: 20px; padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--brown); background: transparent; cursor: pointer; transition: background 0.2s, color 0.2s; font-family: 'DM Sans', sans-serif; } body.public-page .btn-signup:hover { background: var(--brown); color: var(--cream); } body.public-page .avatar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--brown); color: var(--cream); border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } body.public-page .avatar-btn:hover { transform: scale(1.1); } /* Hamburger */ body.public-page .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; } body.public-page .hamburger span { display: block; width: 24px; height: 2px; background: var(--brown); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } body.public-page .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.public-page .hamburger.open span:nth-child(2) { opacity: 0; } body.public-page .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu mobile */ body.public-page .mobile-menu { display: none; position: fixed; top: 68px; left: 0; right: 0; background: rgba(250,245,229,0.97); backdrop-filter: blur(16px); padding: 20px 24px 30px; border-bottom: 1.5px solid rgba(96,74,40,0.12); z-index: 999; animation: slideDown 0.3s ease; } body.public-page .mobile-menu.open { display: block; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } body.public-page .mobile-links { list-style: none; margin-bottom: 20px; } body.public-page .mobile-links li a { display: block; padding: 13px 0; font-size: 17px; font-weight: 500; color: var(--black); text-decoration: none; border-bottom: 1px solid rgba(96,74,40,0.08); transition: color 0.2s, padding-left 0.2s; } body.public-page .mobile-links li a:hover { color: var(--brown); padding-left: 6px; } body.public-page .mobile-actions { display: flex; flex-direction: column; gap: 12px; } body.public-page .mobile-lang { display: flex; gap: 8px; } body.public-page .mobile-lang-btn { flex: 1; padding: 10px; border: 1.5px solid rgba(96,74,40,0.18); border-radius: 10px; background: transparent; cursor: pointer; font-size: 14px; font-family: 'DM Sans', sans-serif; color: var(--brown); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.2s; } body.public-page .mobile-lang-btn:hover, body.public-page .mobile-lang-btn.active { background: var(--brown); color: var(--cream); } body.public-page .btn-signup-mobile { background: var(--brown); color: var(--cream); border: none; border-radius: 12px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: opacity 0.2s; } body.public-page .btn-signup-mobile:hover { opacity: 0.88; } /* ── HERO ── */ body.public-page .hero { min-height: 100vh; background: var(--cream); display: flex; align-items: center; padding: 100px 60px 60px; gap: 60px; } body.public-page .hero-text { flex: 1; max-width: 500px; } body.public-page .hero-tag { display: inline-block; background: rgba(96,74,40,0.1); color: var(--brown); border-radius: 20px; padding: 5px 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 24px; animation: fadeUp 0.7s ease both; } body.public-page .hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900; line-height: 1.1; color: var(--black); margin-bottom: 22px; animation: fadeUp 0.7s 0.1s ease both; } body.public-page .hero h1 span { color: var(--brown); } body.public-page .hero p { font-size: 16px; line-height: 1.75; color: #444; margin-bottom: 36px; animation: fadeUp 0.7s 0.2s ease both; } body.public-page .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; animation: fadeUp 0.7s 0.3s ease both; } body.public-page .btn-primary { background: var(--brown); color: var(--cream); border: none; border-radius: 12px; padding: 14px 28px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; text-decoration: none; display: inline-block; } body.public-page .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(96,74,40,0.35); background: #7a5e32; } body.public-page .btn-secondary { background: transparent; border: 1.5px solid var(--brown); color: var(--brown); border-radius: 12px; padding: 14px 28px; font-size: 15px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.2s, color 0.2s, transform 0.2s; text-decoration: none; display: inline-block; } body.public-page .btn-secondary:hover { background: rgba(96,74,40,0.07); transform: translateY(-2px); } body.public-page .hero-image { flex: 1; display: flex; justify-content: center; animation: fadeUp 0.8s 0.15s ease both; } body.public-page .photo-frame { position: relative; width: 340px; } body.public-page .photo-browser { background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(96,74,40,0.2); overflow: hidden; transition: transform 0.4s cubic-bezier(.25,.8,.25,1), box-shadow 0.4s; } body.public-page .photo-browser:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 32px 80px rgba(96,74,40,0.28); } body.public-page .browser-bar { background: #f2f2f2; padding: 10px 14px; display: flex; gap: 6px; align-items: center; } body.public-page .dot { width: 11px; height: 11px; border-radius: 50%; } body.public-page .dot.red { background: #ff5f57; } body.public-page .dot.yellow { background: #febc2e; } body.public-page .dot.green { background: #28c840; } body.public-page .photo-browser img { width: 100%; height: 340px; object-fit: cover; display: block; } body.public-page .photo-placeholder { width: 100%; height: 340px; background: linear-gradient(135deg, #d4b896 0%, #a07850 100%); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 28px; color: #fff; letter-spacing: 2px; } @keyframes fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } /* Wave */ body.public-page .wave-transition, body.public-page .wave-transition-2 { display: block; width: 100%; margin-top: -2px; line-height: 0; } /* ── SERVICES ── */ body.public-page .services { background: var(--white); padding: 80px 60px 100px; } body.public-page .section-header { text-align: center; margin-bottom: 56px; } body.public-page .section-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; color: var(--black); margin-bottom: 10px; } body.public-page .section-header p { font-size: 15px; color: #888; } body.public-page .services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1100px; margin: 0 auto; } body.public-page .service-card { background: var(--cream); border-radius: 18px; padding: 28px 22px 0; overflow: hidden; cursor: pointer; position: relative; transition: transform 0.35s cubic-bezier(.25,.8,.25,1), box-shadow 0.35s; border: 1.5px solid transparent; } body.public-page .service-card:hover { transform: translateY(-10px); box-shadow: 0 20px 48px rgba(96,74,40,0.16); border-color: rgba(96,74,40,0.12); } body.public-page .service-card h3 { font-family: 'Playfair Display', serif; font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--black); } body.public-page .service-card p { font-size: 14px; line-height: 1.65; color: #555; margin-bottom: 20px; } body.public-page .service-card p strong { color: var(--brown); } body.public-page .service-visual { height: 160px; border-radius: 12px 12px 0 0; overflow: hidden; margin-top: 10px; } body.public-page .visual-orange { background: linear-gradient(145deg, #f5c07a, #e8933a); position: relative; height: 100%; } body.public-page .visual-teal-dots { background: #42b8c2; position: relative; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 16px; } body.public-page .teal-dot { width: 36px; height: 36px; background: #c9a830; border-radius: 50%; } body.public-page .visual-gradient { background: linear-gradient(135deg, #5fc4b2 0%, #f5b97c 100%); height: 100%; } body.public-page .visual-sand { background: linear-gradient(145deg, #f5c07a, #e8933a); height: 100%; opacity: 0.7; } /* ── EXPERIENCE ── */ body.public-page .experience { background: var(--cream); padding: 90px 60px 100px; } body.public-page .experience > .section-header { text-align: left; margin-bottom: 48px; } body.public-page .experience > .section-header h2 { font-size: clamp(2rem, 4vw, 3rem); } body.public-page .exp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; } body.public-page .exp-card { background: var(--white); border-radius: 16px; padding: 28px 26px; box-shadow: var(--shadow); transition: transform 0.3s, box-shadow 0.3s; position: relative; overflow: hidden; } body.public-page .exp-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--brown); transform: scaleY(0); transform-origin: bottom; transition: transform 0.35s cubic-bezier(.25,.8,.25,1); } body.public-page .exp-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(96,74,40,0.15); } body.public-page .exp-card:hover::before { transform: scaleY(1); } body.public-page .exp-card h4 { font-family: 'Playfair Display', serif; font-size: 17px; font-weight: 700; color: var(--black); margin-bottom: 4px; } body.public-page .exp-date { font-size: 12px; color: var(--brown); font-weight: 600; letter-spacing: 0.05em; margin-bottom: 14px; display: block; } body.public-page .exp-card p { font-size: 14px; line-height: 1.7; color: #555; } body.public-page .exp-card.wide { grid-column: 1 / -1; } /* Scroll reveal */ body.public-page .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; } body.public-page .reveal.visible { opacity: 1; transform: translateY(0); } body.public-page .reveal-delay-1 { transition-delay: 0.1s; } body.public-page .reveal-delay-2 { transition-delay: 0.2s; } body.public-page .reveal-delay-3 { transition-delay: 0.3s; } body.public-page .reveal-delay-4 { transition-delay: 0.4s; } /* ── FOOTER public ── */ body.public-page footer { background: var(--brown); color: var(--cream); text-align: center; padding: 40px; font-size: 14px; } body.public-page footer a { color: var(--cream); opacity: 0.7; text-decoration: none; margin: 0 8px; } body.public-page footer a:hover { opacity: 1; } body.public-page .footer-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 700; margin-bottom: 10px; } /* ── RESPONSIVE public ── */ @media (max-width: 900px) { body.public-page .services-grid { grid-template-columns: 1fr 1fr; } body.public-page .hero { flex-direction: column; padding: 100px 30px 60px; text-align: center; } body.public-page .hero-btns { justify-content: center; } body.public-page .hero-image { order: -1; } body.public-page .photo-frame { width: 280px; } body.public-page .photo-placeholder { height: 260px; } body.public-page .experience { padding: 60px 30px 80px; } body.public-page .services { padding: 60px 30px 80px; } body.public-page .exp-grid { grid-template-columns: 1fr; } body.public-page .exp-card.wide { grid-column: 1; } } @media (max-width: 700px) { body.public-page nav#navbar { padding: 0 20px; grid-template-columns: 1fr auto; } body.public-page .nav-center { display: none; } body.public-page .btn-signup { display: none; } body.public-page .avatar-btn { display: none; } body.public-page .hamburger { display: flex; } body.public-page .lang-selector { display: none; } body.public-page .hero { padding: 90px 20px 50px; } body.public-page .hero h1 { font-size: 2.2rem; } body.public-page .services { padding: 50px 20px 60px; } body.public-page .services-grid { grid-template-columns: 1fr; } body.public-page .experience { padding: 50px 20px 60px; } } /* ============================================================ 3. DASHBOARD — tout scopé sous body.has-sidebar (sidebar.js ajoute automatiquement cette classe) ============================================================ */ /* Layout principal : sidebar fixe à gauche | contenu à droite en colonne */ body.has-sidebar { display: flex; min-height: 100vh; align-items: stretch; overflow-x: hidden; } body.has-sidebar .sidebar-page-content { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; } /* ── Sidebar ── */ body.has-sidebar .sidebar { width: 240px; min-height: 100vh; background: var(--cream); border-right: 1.5px solid rgba(96,74,40,0.10); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0; z-index: 200; transition: transform 0.3s cubic-bezier(.25,.8,.25,1); } body.has-sidebar .sidebar-header { padding: 20px 20px 12px; } body.has-sidebar .sidebar-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } body.has-sidebar .sidebar-logo-img { height: 54px; width: auto; object-fit: contain; border-radius: 8px; display: block; } body.has-sidebar .sidebar-logo-fallback { display: flex; align-items: center; gap: 8px; } body.has-sidebar .sidebar-logo-icon { width: 36px; height: 36px; background: var(--brown); border-radius: 50%; color: var(--cream); font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.has-sidebar .sidebar-brand-name { font-size: 14px; font-weight: 700; color: var(--black); } body.has-sidebar .sidebar-subtitle { font-size: 12px; color: #888; padding: 4px 0 0 2px; font-weight: 500; } body.has-sidebar .sidebar-divider { height: 1px; background: rgba(96,74,40,0.10); margin: 8px 16px; } body.has-sidebar .sidebar-nav { flex: 1; padding: 8px 12px; } body.has-sidebar .sidebar-section-label { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #bbb; padding: 4px 8px 10px; } body.has-sidebar .sidebar-menu { list-style: none; display: flex; flex-direction: column; gap: 2px; } body.has-sidebar .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-size: 14px; font-weight: 500; color: var(--black); transition: background 0.18s, color 0.18s; } body.has-sidebar .sidebar-link:hover { background: rgba(96,74,40,0.08); color: var(--brown); } body.has-sidebar .sidebar-active { background: var(--brown) !important; color: var(--cream) !important; font-weight: 600; } body.has-sidebar .sidebar-icon { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; } body.has-sidebar .sidebar-footer { padding: 0 0 16px; } body.has-sidebar .sidebar-user { display: flex; align-items: center; gap: 10px; padding: 12px 16px; } body.has-sidebar .sidebar-avatar { width: 36px; height: 36px; background: var(--brown); border-radius: 50%; color: var(--cream); font-size: 18px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body.has-sidebar .sidebar-user-info { display: flex; flex-direction: column; } body.has-sidebar .sidebar-user-name { font-size: 13px; font-weight: 600; color: var(--black); } body.has-sidebar .sidebar-user-role { font-size: 11px; color: #888; } /* Bouton hamburger mobile */ body.has-sidebar .sidebar-toggle { display: none; position: fixed; top: 16px; left: 16px; z-index: 400; width: 40px; height: 40px; background: var(--brown); border: none; border-radius: 10px; cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; } body.has-sidebar .sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--cream); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } body.has-sidebar .sidebar-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.has-sidebar .sidebar-toggle.open span:nth-child(2) { opacity: 0; } body.has-sidebar .sidebar-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } body.has-sidebar .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 199; } body.has-sidebar .sidebar-overlay.open { display: block; } /* ── Navbar du dashboard (injectée par nav.js) ── */ body.has-sidebar nav#navbar { position: sticky; top: 0; z-index: 100; flex-shrink: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 32px; height: 68px; background: rgba(250,245,229,0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1.5px solid rgba(96,74,40,0.08); /* PAS de position:fixed ni left/right — elle reste dans le flux flex */ } body.has-sidebar nav#navbar .nav-left { display: flex; align-items: center; gap: 14px; } body.has-sidebar nav#navbar .nav-center { display: flex; justify-content: center; } body.has-sidebar nav#navbar .nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; } body.has-sidebar nav#navbar .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; } body.has-sidebar nav#navbar .nav-links a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--black); padding: 6px 14px; border-radius: 20px; transition: background 0.2s, color 0.2s; } body.has-sidebar nav#navbar .nav-links a:hover { background: rgba(96,74,40,0.08); color: var(--brown); } body.has-sidebar nav#navbar .btn-signup { border: 1.5px solid var(--brown); border-radius: 20px; padding: 8px 20px; font-size: 14px; font-weight: 600; color: var(--brown); background: transparent; cursor: pointer; transition: background 0.2s, color 0.2s; font-family: 'DM Sans', sans-serif; } body.has-sidebar nav#navbar .btn-signup:hover { background: var(--brown); color: var(--cream); } body.has-sidebar nav#navbar .avatar-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--brown); color: var(--cream); border: none; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; transition: transform 0.2s; } body.has-sidebar nav#navbar .avatar-btn:hover { transform: scale(1.08); } /* Topbar alternative (si pas de nav.js) */ body.has-sidebar .dash-topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 68px; background: rgba(250,245,229,0.95); backdrop-filter: blur(12px); border-bottom: 1.5px solid rgba(96,74,40,0.08); position: sticky; top: 0; z-index: 100; flex-shrink: 0; } /* ── Contenu principal ── */ body.has-sidebar .dash-main { flex: 1; padding: 32px 32px 60px; overflow-y: auto; } body.has-sidebar .dash-welcome { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--black); margin-bottom: 24px; } /* 3 cartes stats */ body.has-sidebar .stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 28px; } body.has-sidebar .stat-card { background: #FEF7E5; border-radius: 16px; padding: 20px 24px; border: 1.5px solid rgba(96,74,40,0.08); } body.has-sidebar .stat-label { font-size: 13px; color: #888; margin-bottom: 6px; font-weight: 500; } body.has-sidebar .stat-value { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 700; color: var(--black); } body.has-sidebar .stat-value.highlight { color: var(--brown); } /* Grille 2×2 */ body.has-sidebar .panels-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Panel carte */ body.has-sidebar .panel { background: var(--white); border-radius: 18px; padding: 24px; border: 1.5px solid rgba(96,74,40,0.07); } body.has-sidebar .panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } body.has-sidebar .panel-title { font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 700; color: var(--black); } body.has-sidebar .panel-meta { font-size: 12px; color: #bbb; } body.has-sidebar .panel-empty { text-align: center; color: #ccc; font-size: 13px; padding: 20px 0; } /* Book lesson */ body.has-sidebar .lesson-list { display: flex; flex-direction: column; } body.has-sidebar .lesson-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(96,74,40,0.07); } body.has-sidebar .lesson-row:last-child { border-bottom: none; } body.has-sidebar .lesson-info { font-size: 14px; color: var(--black); font-weight: 500; } body.has-sidebar .lesson-detail { font-size: 12px; color: #aaa; margin-top: 2px; } body.has-sidebar .btn-book-sm { background: var(--brown); color: var(--cream); border: none; border-radius: 20px; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: none; white-space: nowrap; transition: background 0.2s, transform 0.15s; display: inline-block; } body.has-sidebar .btn-book-sm:hover { background: #7a5e32; transform: translateY(-1px); } /* Planning */ body.has-sidebar .planning-list { display: flex; flex-direction: column; } body.has-sidebar .planning-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(96,74,40,0.07); } body.has-sidebar .planning-row:last-child { border-bottom: none; } body.has-sidebar .planning-date { font-size: 13px; font-weight: 600; color: var(--black); } body.has-sidebar .planning-duration { font-size: 12px; color: #aaa; margin-top: 2px; } body.has-sidebar .lesson-tag { font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 20px; white-space: nowrap; } body.has-sidebar .tag-group { background: var(--brown); color: var(--cream); } body.has-sidebar .tag-private { background: transparent; border: 1.5px solid var(--brown); color: var(--brown); } body.has-sidebar .tag-other { background: rgba(96,74,40,0.1); color: var(--brown); } /* Resources */ body.has-sidebar .resource-list { display: flex; flex-direction: column; } body.has-sidebar .resource-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid rgba(96,74,40,0.07); } body.has-sidebar .resource-row:last-child { border-bottom: none; } body.has-sidebar .resource-name { font-size: 14px; color: var(--black); font-weight: 500; } body.has-sidebar .btn-download { background: var(--brown); color: var(--cream); border: none; border-radius: 20px; padding: 7px 16px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: none; transition: background 0.2s; display: inline-block; } body.has-sidebar .btn-download:hover { background: #7a5e32; } /* Chat room */ body.has-sidebar .room-body { display: flex; flex-direction: column; height: 220px; } body.has-sidebar .chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0 10px; scrollbar-width: thin; } body.has-sidebar .chat-bubble { max-width: 72%; padding: 9px 14px; border-radius: 14px; font-size: 13px; line-height: 1.5; } body.has-sidebar .chat-bubble.them { background: #FEF7E5; color: var(--black); align-self: flex-start; border-bottom-left-radius: 4px; } body.has-sidebar .chat-bubble.me { background: var(--brown); color: var(--cream); align-self: flex-end; border-bottom-right-radius: 4px; } body.has-sidebar .chat-empty { text-align: center; color: #ccc; font-size: 13px; margin: auto; } body.has-sidebar .chat-input-row { display: flex; gap: 8px; margin-top: 10px; } body.has-sidebar .chat-input { flex: 1; border: 1.5px solid rgba(96,74,40,0.15); border-radius: 10px; padding: 9px 14px; font-size: 13px; font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--black); outline: none; transition: border-color 0.2s; } body.has-sidebar .chat-input:focus { border-color: var(--brown); } body.has-sidebar .chat-input::placeholder { color: #bbb; } body.has-sidebar .btn-send { background: var(--brown); color: var(--cream); border: none; border-radius: 10px; padding: 9px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.2s; } body.has-sidebar .btn-send:hover { background: #7a5e32; } body.has-sidebar .btn-join { background: transparent; border: 1.5px solid var(--brown); border-radius: 20px; padding: 5px 16px; font-size: 12px; font-weight: 600; color: var(--brown); cursor: pointer; font-family: 'DM Sans', sans-serif; transition: background 0.2s, color 0.2s; } body.has-sidebar .btn-join:hover { background: var(--brown); color: var(--cream); } /* Footer dashboard */ body.has-sidebar footer { background: var(--brown); color: var(--cream); padding: 28px 32px; font-size: 13px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; } body.has-sidebar footer a { color: rgba(250,245,229,0.7); text-decoration: none; transition: color 0.2s; } body.has-sidebar footer a:hover { color: var(--cream); } /* ── Responsive dashboard ── */ @media (max-width: 960px) { body.has-sidebar .panels-grid { grid-template-columns: 1fr; } body.has-sidebar .stats-row { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { body.has-sidebar .sidebar { position: fixed; top: 0; left: 0; transform: translateX(-100%); height: 100vh; z-index: 300; box-shadow: 4px 0 24px rgba(96,74,40,0.15); } body.has-sidebar .sidebar.open { transform: translateX(0); } body.has-sidebar .sidebar-toggle { display: flex; } body.has-sidebar nav#navbar { padding: 0 16px 0 64px; } body.has-sidebar nav#navbar .nav-links, body.has-sidebar nav#navbar .nav-center { display: none; } } @media (max-width: 600px) { body.has-sidebar .dash-main { padding: 20px 16px 48px; } body.has-sidebar .stats-row { grid-template-columns: 1fr; } body.has-sidebar .panels-grid { grid-template-columns: 1fr; } }