/* Intercult77 — Styles v6 — Mockup Fabrizio */ /* data-theme="light" ou data-theme="dark" sur */ /* Structure : one-page, catégorie bar avec rollover, 5 sections descriptives */ :root { --yellow: #dfb900; --yellow-dark: #b89500; --black: #000000; --white: #ffffff; --gray-dark: #1a1a1a; --gray-mid: #333333; --gray-light: #cccccc; --light-bg: #f5f5f0; } * { margin: 0; padding: 0; box-sizing: border-box; } /* ═══════════════════════════════════════ THÈME SOMBRE (par défaut) ═══════════════════════════════════════ */ [data-theme="dark"] body { background: var(--black); color: var(--yellow); } [data-theme="dark"] a { color: var(--yellow); } [data-theme="dark"] a:hover { color: var(--white); } /* Top bar */ [data-theme="dark"] .top-bar { background: var(--black); border-bottom: 1px solid var(--yellow); } /* top-bar-links removed — nav is now category-bar */ /* Sections alternées dark */ [data-theme="dark"] .section-odd { background: var(--black); color: var(--yellow); } [data-theme="dark"] .section-even { background: var(--gray-dark); color: var(--yellow); } [data-theme="dark"] .section-title { color: var(--yellow); border-bottom: 1px solid var(--yellow); } [data-theme="dark"] .section-content p { color: var(--gray-light); } [data-theme="dark"] .section-content strong { color: var(--yellow); } [data-theme="dark"] .section-content h3 { color: var(--yellow); } /* Category bar dark */ [data-theme="dark"] .category-bar { background: var(--black); } [data-theme="dark"] .cat-item { color: var(--yellow); border-bottom-color: var(--gray-mid); } [data-theme="dark"] .cat-item:nth-child(odd) { background: var(--black); } [data-theme="dark"] .cat-item:nth-child(even) { background: var(--gray-dark); } /* Dark theme hover: subtle highlight */ [data-theme="dark"] .cat-item:hover { background: rgba(223, 185, 0, 0.08) !important; } /* Dark theme adjacent: slightly faded */ [data-theme="dark"] .cat-item.adjacent-hover { opacity: 0.5; } /* Cards dark */ [data-theme="dark"] .event-card, [data-theme="dark"] .lieu-card, [data-theme="dark"] .contact-form, [data-theme="dark"] .admin-form, [data-theme="dark"] .login-box { background: var(--gray-dark); border: 1px solid var(--gray-mid); } [data-theme="dark"] .event-card:hover { border-color: var(--yellow); } [data-theme="dark"] .media-link { color: var(--yellow); border: 1px solid var(--gray-mid); background: var(--gray-dark); } [data-theme="dark"] .media-link:hover { border-color: var(--yellow); background: var(--black); } [data-theme="dark"] .link-card { color: var(--yellow); border: 1px solid var(--gray-mid); background: var(--gray-dark); } [data-theme="dark"] .link-card:hover { border-color: var(--yellow); background: var(--black); } [data-theme="dark"] .lieu-card { border: 1px solid var(--gray-mid); background: var(--gray-dark); } /* Inputs dark */ [data-theme="dark"] .contact-form input, [data-theme="dark"] .contact-form textarea, [data-theme="dark"] .admin-form input, [data-theme="dark"] .admin-form textarea, [data-theme="dark"] .admin-form select { background: var(--black); color: var(--yellow); border-color: var(--gray-mid); } /* Badges dark */ [data-theme="dark"] .badge { color: var(--yellow); border-color: var(--yellow); } /* Gallery dark */ [data-theme="dark"] .gallery-item { background: var(--gray-dark); border: 1px solid var(--gray-mid); } [data-theme="dark"] .gallery-item:hover { border-color: var(--yellow); } [data-theme="dark"] .filter-btn { color: var(--yellow); border-color: var(--gray-mid); } [data-theme="dark"] .filter-btn.active, [data-theme="dark"] .filter-btn:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); } /* Buttons dark */ [data-theme="dark"] .btn-outline { color: var(--yellow); border: 2px solid var(--yellow); } [data-theme="dark"] .btn-outline:hover { background: var(--yellow); color: var(--black); } /* Footer dark */ [data-theme="dark"] footer { background: var(--black); border-top: 1px solid var(--yellow); } [data-theme="dark"] footer, [data-theme="dark"] .footer-social a { color: var(--gray-light); } [data-theme="dark"] .footer-social a:hover { color: var(--yellow); } /* Theme switch dark */ [data-theme="dark"] .theme-switch { color: var(--yellow); } /* Event details dark */ [data-theme="dark"] .event-date { color: var(--yellow); } [data-theme="dark"] .event-time { color: var(--gray-light); } [data-theme="dark"] .event-loc { color: var(--gray-light); } [data-theme="dark"] .event-info h3 { color: var(--white); } /* Headings dark */ [data-theme="dark"] h1, [data-theme="dark"] h2 { color: var(--yellow); } [data-theme="dark"] h3 { color: var(--white); } /* Admin dark */ [data-theme="dark"] .admin-nav { background: var(--gray-dark); border-bottom: 2px solid var(--yellow); } [data-theme="dark"] .admin-table { background: var(--gray-dark); border: 1px solid var(--gray-mid); } [data-theme="dark"] .admin-table th { background: var(--black); color: var(--yellow); border-bottom: 2px solid var(--yellow); } [data-theme="dark"] .admin-table td { border-bottom: 1px solid var(--gray-mid); color: var(--gray-light); } [data-theme="dark"] .stat-card { background: var(--gray-dark); border: 1px solid var(--gray-mid); } [data-theme="dark"] .stat-number { color: var(--yellow); } [data-theme="dark"] .stat-label { color: var(--gray-light); } [data-theme="dark"] .stat-link { color: var(--yellow); } /* Alerts dark */ [data-theme="dark"] .alert-success { background: #1a3a1a; color: #66ff66; border-color: #66ff66; } [data-theme="dark"] .alert-error { background: #3a1a1a; color: #ff6666; border-color: #ff6666; } /* Empty dark */ [data-theme="dark"] .empty { color: var(--gray-light); } /* ═══════════════════════════════════════ THÈME CLAIR ═══════════════════════════════════════ */ [data-theme="light"] body { background: var(--light-bg); color: #1a1a1a; } [data-theme="light"] a { color: #1a1a1a; } [data-theme="light"] a:hover { color: var(--yellow-dark); } /* Top bar */ [data-theme="light"] .top-bar { background: var(--white); border-bottom: 1px solid #1a1a1a; } /* top-bar-links removed — nav is now category-bar */ /* Sections alternées light */ [data-theme="light"] .section-odd { background: var(--white); color: #1a1a1a; } [data-theme="light"] .section-even { background: var(--light-bg); color: #1a1a1a; } [data-theme="light"] .section-title { color: #1a1a1a; border-bottom: 1px solid #1a1a1a; } [data-theme="light"] .section-content p { color: #222; } [data-theme="light"] .section-content strong { color: #1a1a1a; } [data-theme="light"] .section-content h3 { color: #1a1a1a; } /* Category bar light */ [data-theme="light"] .category-bar { background: var(--white); } [data-theme="light"] .cat-item { color: #1a1a1a; border-bottom-color: #ddd; } [data-theme="light"] .cat-item:nth-child(odd) { background: var(--white); } [data-theme="light"] .cat-item:nth-child(even) { background: var(--light-bg); } /* Light theme hover: subtle highlight */ [data-theme="light"] .cat-item:hover { background: rgba(223, 185, 0, 0.08) !important; } /* Light theme adjacent: slightly faded */ [data-theme="light"] .cat-item.adjacent-hover { opacity: 0.5; } /* Cards light */ [data-theme="light"] .event-card, [data-theme="light"] .lieu-card, [data-theme="light"] .contact-form, [data-theme="light"] .admin-form, [data-theme="light"] .login-box { background: var(--white); border: 1px solid #ddd; } [data-theme="light"] .event-card:hover { border-color: var(--yellow); } [data-theme="light"] .media-link { color: #1a1a1a; border: 1px solid #ddd; background: var(--white); } [data-theme="light"] .media-link:hover { border-color: var(--yellow); background: var(--light-bg); } [data-theme="light"] .link-card { color: #1a1a1a; border: 1px solid #ddd; background: var(--white); } [data-theme="light"] .link-card:hover { border-color: var(--yellow); background: var(--light-bg); } [data-theme="light"] .lieu-card { border: 1px solid #ddd; background: var(--white); } /* Inputs light */ [data-theme="light"] .contact-form input, [data-theme="light"] .contact-form textarea, [data-theme="light"] .admin-form input, [data-theme="light"] .admin-form textarea, [data-theme="light"] .admin-form select { background: var(--white); color: #1a1a1a; border-color: #ccc; } /* Badges light */ [data-theme="light"] .badge { color: var(--yellow-dark); border-color: var(--yellow); } /* Gallery light */ [data-theme="light"] .gallery-item { background: var(--white); border: 1px solid #ddd; } [data-theme="light"] .gallery-item:hover { border-color: var(--yellow); } [data-theme="light"] .filter-btn { color: #1a1a1a; border-color: #ccc; } [data-theme="light"] .filter-btn.active, [data-theme="light"] .filter-btn:hover { background: var(--yellow); color: var(--black); border-color: var(--yellow); } /* Buttons light */ [data-theme="light"] .btn-outline { color: var(--yellow-dark); border: 2px solid var(--yellow-dark); } [data-theme="light"] .btn-outline:hover { background: var(--yellow); color: var(--black); } /* Footer light */ [data-theme="light"] footer { background: var(--white); border-top: 1px solid #1a1a1a; } [data-theme="light"] footer, [data-theme="light"] .footer-social a { color: #444; } [data-theme="light"] .footer-social a:hover { color: var(--yellow-dark); } /* Theme switch light */ [data-theme="light"] .theme-switch { color: #1a1a1a; } /* Event details light */ [data-theme="light"] .event-date { color: var(--yellow-dark); } [data-theme="light"] .event-time { color: #333; } [data-theme="light"] .event-loc { color: #333; } [data-theme="light"] .event-info h3 { color: #1a1a1a; } /* Headings light */ [data-theme="light"] h1, [data-theme="light"] h2 { color: #1a1a1a; } [data-theme="light"] h3 { color: #333; } /* Admin light */ [data-theme="light"] .admin-nav { background: var(--light-bg); border-bottom: 2px solid var(--yellow); } [data-theme="light"] .admin-table { background: var(--white); border: 1px solid #ddd; } [data-theme="light"] .admin-table th { background: var(--light-bg); color: #1a1a1a; border-bottom: 2px solid var(--yellow); } [data-theme="light"] .admin-table td { border-bottom: 1px solid #eee; color: #333; } [data-theme="light"] .stat-card { background: var(--white); border: 1px solid #ddd; } [data-theme="light"] .stat-number { color: var(--yellow-dark); } [data-theme="light"] .stat-label { color: #666; } [data-theme="light"] .stat-link { color: var(--yellow-dark); } /* Alerts light */ [data-theme="light"] .alert-success { background: #e8f5e8; color: #2a7a2a; border-color: #2a7a2a; } [data-theme="light"] .alert-error { background: #f5e8e8; color: #aa2a2a; border-color: #aa2a2a; } /* Empty light */ [data-theme="light"] .empty { color: #444; } /* ═══════════════════════════════════════ COMMUN (les deux thèmes) ═══════════════════════════════════════ */ body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; line-height: 1.6; transition: background 0.3s, color 0.3s; } a { text-decoration: none; transition: all 0.2s; } /* ── Top Bar ── */ .top-bar { padding: 1rem 2rem; display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; z-index: 100; transition: background 0.3s; } .top-bar-brand { display: flex; align-items: center; justify-content: center; text-decoration: none; order: -1; /* logo first */ } .top-bar-nav { display: flex; gap: 0; align-items: center; flex-wrap: wrap; justify-content: center; } .theme-switch { position: absolute; right: 1rem; top: 1rem; } .top-bar-nav a { text-decoration: none; padding: 0.6rem 1.2rem; font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; transition: all 0.2s; } [data-theme="dark"] .top-bar-nav a { color: var(--yellow); } [data-theme="dark"] .top-bar-nav a:hover { color: var(--white); background: var(--gray-dark); } [data-theme="light"] .top-bar-nav a { color: #1a1a1a; } [data-theme="light"] .top-bar-nav a:hover { color: var(--yellow-dark); background: #f0f0e8; } .top-bar-logo { height: 160px; width: auto; object-fit: contain; border: none !important; border-radius: 4px; padding: 0; } [data-theme="dark"] .top-bar-logo { background: var(--white); } [data-theme="light"] .top-bar-logo { background: var(--black); } /* theme-switch already defined above in top-bar */ [data-theme="light"] .theme-switch:hover { background: #f0f0e8; } /* ── Home Sections (one-page) ── */ .home-section { padding: 3rem 0; min-height: 50vh; transition: background 0.3s; } .section-inner { max-width: 1100px; margin: 0 auto; padding: 0 2rem; } .section-title { font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.08em; padding-bottom: 1rem; margin-bottom: 2rem; font-weight: 700; } .section-content p { font-size: 1rem; margin-bottom: 1rem; line-height: 1.7; max-width: 700px; } /* ── Category Bar — 5 vertical stacked bands ── */ .category-bar { display: flex; flex-direction: column; position: relative; z-index: 90; transition: background 0.3s; } .cat-item { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 2rem; text-decoration: none; text-align: center; transition: all 0.25s ease; cursor: pointer; border-bottom: 1px solid; } .cat-name { font-size: 1.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; transition: all 0.25s ease; display: block; } .cat-desc { font-size: 0.9rem; opacity: 0.75; margin-top: 0.5rem; display: block; transition: all 0.25s ease; max-width: 700px; line-height: 1.6; } [data-theme="dark"] .cat-name { color: var(--yellow); } [data-theme="dark"] .cat-desc { color: var(--gray-light); } [data-theme="light"] .cat-name { color: #1a1a1a; } [data-theme="light"] .cat-desc { color: #333; } /* Hover on category bands (desktop) — subtle */ @media (pointer: fine) { .cat-item:hover .cat-name { font-size: 1.9rem; /* +20% */ } .cat-item:hover .cat-desc { opacity: 1; } .cat-item { transition: all 0.4s ease; } } /* ── Event Grid ── */ .event-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 2rem; } .event-card { overflow: hidden; transition: border-color 0.3s; } .event-img { width: 100%; height: 200px; object-fit: cover; } .event-info { padding: 1rem; } .event-date { font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .event-time { font-size: 0.8rem; margin-left: 0.5rem; } .event-info h3 { margin: 0.5rem 0; font-size: 1.05rem; } .event-loc { font-size: 0.85rem; } /* ── Badges ── */ .badge { display: inline-block; padding: 0.2rem 0.6rem; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: transparent; border: 1px solid; } /* ── Lieu Card ── */ .lieu-card { padding: 2rem; border: 1px solid; max-width: 600px; transition: border-color 0.3s; } .lieu-card h3 { margin-bottom: 0.75rem; font-size: 1.2rem; } .lieu-card p { margin-bottom: 0.75rem; } /* ── Media Links ── */ .media-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; } .media-link { display: flex; flex-direction: column; align-items: center; padding: 1.5rem 2rem; border: 1px solid; text-decoration: none; text-align: center; min-width: 140px; transition: all 0.2s; } .media-link:hover { text-decoration: none; } .media-icon { font-size: 2rem; margin-bottom: 0.5rem; } .media-link span { font-weight: 600; font-size: 0.95rem; } .media-link small { font-size: 0.8rem; opacity: 0.7; margin-top: 0.25rem; } /* ── Links Grid ── */ .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .link-card { display: block; padding: 1.5rem; border: 1px solid; text-decoration: none; transition: all 0.2s; } .link-card:hover { text-decoration: none; } .link-card strong { display: block; font-size: 1rem; margin-bottom: 0.3rem; } .link-card small { opacity: 0.7; } /* ── Buttons ── */ .btn { display: inline-block; padding: 0.6rem 1.2rem; text-decoration: none; font-weight: 600; font-size: 0.9rem; cursor: pointer; border: none; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; } .btn-primary { background: var(--yellow); color: var(--black); } .btn-primary:hover { background: var(--yellow-dark); } /* ── Gallery ── */ .gallery-filters { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .filter-btn { padding: 0.4rem 1rem; border: 1px solid; background: transparent; cursor: pointer; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; } .gallery-item { overflow: hidden; transition: border-color 0.3s; } .gallery-item img { width: 100%; height: 220px; object-fit: cover; display: block; } .gallery-caption { padding: 0.75rem; font-size: 0.85rem; } /* ── Contact Form ── */ .contact-form, .admin-form { padding: 2rem; border: 1px solid; max-width: 600px; } .contact-form label, .admin-form label { display: block; margin: 1rem 0 0.3rem; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.05em; } .contact-form input, .contact-form textarea, .admin-form input, .admin-form textarea, .admin-form select { width: 100%; padding: 0.6rem; border: 1px solid; font-size: 1rem; font-family: inherit; transition: border-color 0.2s; } .contact-form input:focus, .contact-form textarea:focus, .admin-form input:focus, .admin-form textarea:focus, .admin-form select:focus { border-color: var(--yellow) !important; outline: none; } .contact-form textarea, .admin-form textarea { resize: vertical; } /* ── Video ── */ .video-wrapper { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 800px; margin: 0 auto; } .video-wrapper iframe, .video-wrapper video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; } .video-card { overflow: hidden; border: 1px solid; transition: border-color 0.3s; } .video-card:hover { border-color: var(--yellow) !important; } .video-card .video-wrapper { border: none; } .video-caption { padding: 0.75rem 1rem; font-size: 0.85rem; } /* ── Alerts ── */ .alert { padding: 1rem; margin-bottom: 1rem; border-left: 3px solid; } /* ── Admin ── */ .admin-nav { padding: 0.8rem 2rem; display: flex; justify-content: space-between; align-items: center; } .admin-nav .nav-links a { transition: color 0.2s; } .admin-nav .nav-links a:hover { color: var(--yellow) !important; } .admin-container { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem; } .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .stat-card { padding: 1.5rem; text-align: center; border: 1px solid; } .stat-number { display: block; font-size: 2.5rem; font-weight: 700; } .stat-label { font-size: 0.9rem; } .stat-link { display: block; margin-top: 0.5rem; font-size: 0.85rem; } .admin-table { width: 100%; overflow: hidden; border-collapse: collapse; border: 1px solid; } .admin-table th { padding: 0.75rem 1rem; text-align: left; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 2px solid var(--yellow); } .admin-table td { padding: 0.75rem 1rem; } .admin-table tr.unread { background: rgba(223, 185, 0, 0.05); } .actions { white-space: nowrap; } .message-content { padding: 0.75rem; margin: 0.5rem 0; white-space: pre-wrap; border: 1px solid; } .current-image { margin: 1rem 0; } .preview-img { max-height: 150px; } .admin-gallery .gallery-item { position: relative; } .admin-gallery .btn-delete { position: absolute; bottom: 0.5rem; right: 0.5rem; } .btn-link { background: none; border: none; cursor: pointer; font-size: 1rem; padding: 0.2rem; } .btn-delete { color: #ff4444 !important; } .login-box { max-width: 400px; margin: 4rem auto; padding: 2rem; text-align: center; border: 1px solid; } .login-box h1 { margin-bottom: 1.5rem; } /* ── Footer ── */ footer { text-align: center; padding: 2rem; font-size: 0.8rem; transition: background 0.3s; } .footer-content p { margin-bottom: 0.75rem; } .footer-social { display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .footer-social a { text-decoration: none; font-size: 0.8rem; transition: all 0.2s; } /* ── Empty ── */ .empty { text-align: center; padding: 3rem; } /* ── Page header (sub-pages) ── */ .page-header { padding: 2rem 0; margin-bottom: 1.5rem; } .page-header h1 { font-size: 2rem; text-transform: uppercase; letter-spacing: 0.05em; } /* ── Event List ── */ .event-list { display: flex; flex-direction: column; gap: 1rem; } .event-row { display: flex; gap: 1.5rem; padding: 1.5rem; border: 1px solid; transition: border-color 0.3s; } .event-date-col { min-width: 120px; text-align: center; } .event-date-col .day { font-weight: 700; } .event-date-col .formatted { display: block; font-size: 0.8rem; margin-top: 0.25rem; } .event-detail h3 { margin-bottom: 0.25rem; } .event-detail p { font-size: 0.9rem; margin: 0.15rem 0; } .event-detail .desc { margin-top: 0.5rem; } /* ═══════════════════════════════════════ MOBILE (GSM) — alternance sous-catégories ═══════════════════════════════════════ */ @media (max-width: 768px) { .top-bar { flex-direction: row; gap: 0; padding: 0.5rem 1rem; } .top-bar-logo { height: 55px; } .home-section { padding: 2rem 0; min-height: auto; } .section-inner { padding: 0 1rem; } .section-title { font-size: 1.3rem; } /* Category bar en colonne avec alternance */ .category-bar { flex-direction: column; position: static; } .cat-item { flex-direction: row; justify-content: space-between; padding: 1rem 1.5rem; min-height: auto; } .cat-desc { font-size: 0.7rem; display: block; opacity: 0.65; height: auto; margin-top: 0.2rem; } /* show desc on mobile */ /* Impair = fond blanc / texte noir */ [data-theme="dark"] .cat-item:nth-child(odd) { background: var(--white); color: var(--black); } [data-theme="dark"] .cat-item:nth-child(odd) .cat-name { color: var(--black); } /* Pair = fond noir / texte jaune doré */ [data-theme="dark"] .cat-item:nth-child(even) { background: var(--black); color: var(--yellow); } [data-theme="dark"] .cat-item:nth-child(even) .cat-name { color: var(--yellow); } /* Light theme mobile alternation */ [data-theme="light"] .cat-item:nth-child(odd) { background: var(--white); color: var(--black); } [data-theme="light"] .cat-item:nth-child(odd) .cat-name { color: var(--black); } [data-theme="light"] .cat-item:nth-child(even) { background: var(--black); color: var(--yellow); } [data-theme="light"] .cat-item:nth-child(even) .cat-name { color: var(--yellow); } /* Pas de hover sur mobile */ .cat-item:hover .cat-name { font-size: 0.95rem; } .cat-item.adjacent-hover { background: transparent !important; } .main-content { padding: 0; } .event-grid { grid-template-columns: 1fr; } .event-row { flex-direction: column; } .event-date-col { text-align: left; } .media-links { flex-direction: column; } .links-grid { grid-template-columns: 1fr; } .lieu-card { padding: 1.5rem; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .video-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════ ABOUT — Manchette + Collapsible Sections ═══════════════════════════════════════ */ /* Manchette: colonne 70% centrée, 15% marge de chaque côté */ .about-manifest { max-width: 70%; margin: 0 auto; padding: 4rem 0 3rem; } .about-manifest p { font-size: 1.15rem; line-height: 1.85; margin-bottom: 1.5rem; } /* Collapsible sections */ .about-sections { margin-top: 1rem; } .about-section { margin: 0; border: none; border-bottom: 1px solid; overflow: hidden; transition: background 0.3s; } .about-section summary { padding: 1.2rem 15%; font-weight: 700; font-size: 1rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.5rem; transition: background 0.2s; } .about-section summary::before { content: '▸'; font-size: 0.9rem; transition: transform 0.2s; } .about-section[open] summary::before { transform: rotate(90deg); } .about-section-content { padding: 0.5rem 15% 2rem; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .about-section-content p { font-size: 1rem; line-height: 1.75; margin-bottom: 1rem; } .about-lazy-img { max-width: 100%; height: auto; border-radius: 4px; margin-top: 1rem; } /* ── Dark theme: alternance noir / gris foncé ── */ [data-theme="dark"] .about-section { border-bottom-color: var(--gray-mid); background: var(--black); } [data-theme="dark"] .about-section-alt { background: var(--gray-dark); } [data-theme="dark"] .about-section summary { color: var(--yellow); } [data-theme="dark"] .about-section summary:hover { background: rgba(223, 185, 0, 0.08); } [data-theme="dark"] .about-section-content { color: var(--gray-light); } [data-theme="dark"] .about-section-content strong { color: var(--yellow); } /* ── Light theme: alternance blanc / beige clair ── */ [data-theme="light"] .about-section { border-bottom-color: #ddd; background: var(--white); } [data-theme="light"] .about-section-alt { background: var(--light-bg); } [data-theme="light"] .about-section summary { color: #1a1a1a; } [data-theme="light"] .about-section summary:hover { background: rgba(223, 185, 0, 0.08); } /* ── Mobile: pleine largeur ── */ @media (max-width: 768px) { .about-manifest { max-width: 100%; padding: 2rem 1.5rem 1.5rem; } .about-section summary { padding: 1rem 1.5rem; } .about-section-content { padding: 0.5rem 1.5rem 1.5rem; } .about-manifest p { font-size: 1rem; line-height: 1.7; } } /* ═══════════════════════════════════════ GALLERY — In-section grid ═══════════════════════════════════════ */ .gallery-sections { margin-top: 0; } .gallery-sections .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; max-width: 70%; } @media (max-width: 768px) { .gallery-sections .gallery-grid { max-width: 100%; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } } /* ═══════════════════════════════════════ LIGHTBOX ═══════════════════════════════════════ */ .lightbox-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.92); z-index: 9999; justify-content: center; align-items: center; flex-direction: column; cursor: pointer; opacity: 0; transition: opacity 0.3s ease; } .lightbox-overlay.active { display: flex; opacity: 1; } .lightbox-img { max-width: 80vw; max-height: 80vh; object-fit: contain; border-radius: 4px; cursor: default; box-shadow: 0 0 40px rgba(0, 0, 0, 0.5); } .lightbox-close { position: absolute; top: 1.5rem; right: 2rem; background: none; border: none; color: var(--yellow); font-size: 2.5rem; cursor: pointer; z-index: 10000; line-height: 1; transition: transform 0.2s; } .lightbox-close:hover { transform: scale(1.2); } .lightbox-caption { color: var(--gray-light); font-size: 1rem; margin-top: 1rem; text-align: center; max-width: 80vw; } [data-theme=light] .lightbox-overlay { background: rgba(255, 255, 255, 0.94); } [data-theme=light] .lightbox-close { color: #1a1a1a; } [data-theme=light] .lightbox-caption { color: #555; } /* Hover cursor on clickable images */ .gallery-item img, .about-lazy-img { cursor: zoom-in; transition: opacity 0.2s; } .gallery-item img:hover, .about-lazy-img:hover { opacity: 0.85; }