/* ================================================ GBONHI GROUP - Styles Principaux Design: Dark luxury, inspiré de l'Afrique moderne ================================================ */ /* ---- Variables CSS (couleurs et espacements) ---- */ :root { --or: #f0c040; --or-clair: rgba(240, 192, 64, 0.12); --or-bord: rgba(240, 192, 64, 0.30); --fond: #0a0a0a; --fond-2: #0f0f0f; --fond-3: #141414; --fond-4: #1a1a1a; /* Textes — hiérarchie lisible, contraste WCAG AA+ */ --texte: #ede8df; /* blanc chaud — 16:1 sur fond */ --texte-muted: #b0a89e; /* gris chaud clair — 8.8:1 sur fond */ --texte-dim: #7a7268; /* gris sombre — 4.5:1 sur fond */ --bord: rgba(255, 255, 255, 0.08); --bord-2: rgba(255, 255, 255, 0.14); --transition: 0.25s ease; --radius: 8px; --radius-lg: 14px; } /* * Thème clair — activé en posant data-theme="light" sur (cf. script * anti-flash dans layouts/app.blade.php + bouton .theme-toggle-btn). Retenu * après un retour terrain : le thème sombre par défaut était jugé peu * confortable par une partie du public (notamment les visiteurs plus âgés, * moins habitués aux interfaces sombres). Comme tout le site lit ses couleurs * via ces variables, ce seul bloc suffit à reclarifier l'ensemble des pages * sans toucher au HTML de chacune. Les couleurs des 5 pôles restent * inchangées (accents de marque, utilisés en petites touches). */ :root[data-theme="light"] { --or: #a8791a; --or-clair: rgba(168, 121, 26, 0.10); --or-bord: rgba(168, 121, 26, 0.30); --fond: #faf8f5; --fond-2: #ffffff; --fond-3: #f1eee8; --fond-4: #e8e4dc; --texte: #211d17; /* quasi-noir chaud — contraste très élevé sur fond clair */ --texte-muted: #5a5449; /* gris chaud moyen — ~7:1 sur fond clair */ --texte-dim: #85796a; /* gris chaud clair — ~4.5:1 sur fond clair */ --bord: rgba(0, 0, 0, 0.08); --bord-2: rgba(0, 0, 0, 0.14); } /* ---- Reset de base ---- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background-color: var(--fond); color: var(--texte); line-height: 1.7; overflow-x: hidden; /* Rendu sub-pixel optimal sur fond sombre */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* ---- Conteneur centré ---- */ .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } /* ================================================ TYPOGRAPHIE ================================================ */ h1, h2, h3, h4 { font-family: 'Syne', sans-serif; line-height: 1.15; color: var(--texte); } h1 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; line-height: 1.1; } h2 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.15; } h3 { font-size: 1.2rem; font-weight: 700; } h4 { font-size: 1rem; font-weight: 700; } p { color: var(--texte-muted); line-height: 1.85; font-size: 0.97rem; } strong { color: var(--texte); font-weight: 600; } a { text-decoration: none; color: inherit; } /* ================================================ BOUTONS ================================================ */ .btn { display: inline-block; padding: 0.7rem 1.8rem; border-radius: var(--radius); font-weight: 500; font-size: 0.88rem; letter-spacing: 0.5px; cursor: pointer; transition: all var(--transition); border: none; } .btn-gold { background: var(--or); color: #0a0a0a; font-weight: 600; } .btn-gold:hover { background: #e8b930; transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--texte); border: 1px solid var(--bord-2); } .btn-outline:hover { border-color: var(--or); color: var(--or); } /* Bouton outline coloré par pôle (--pc) — actions secondaires à côté d'un CTA doré principal */ .btn-outline-pole { background: transparent; color: var(--pc); border: 1.5px solid var(--pc); } .btn-outline-pole:hover { background: var(--pc); color: #0a0a0a; transform: translateY(-1px); } /* ---- Tag de section (petite étiquette dorée) ---- */ .section-tag { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--or); font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1rem; } .section-tag::before { content: ''; width: 30px; height: 1px; background: var(--or); } /* ================================================ NAVIGATION ================================================ */ /* * La navbar a un fond fixe rgba(10,10,10,.97) dans les DEUX thèmes (elle ne * suit jamais --fond) : tout son contenu direct (liens, boutons, logo, * hamburger, strip des pôles) reste donc en couleurs claires fixes plutôt * que var(--texte*)/var(--bord*)/var(--or), qui eux s'adaptent au thème. * Seuls les panneaux qui s'ouvrent AU-DESSUS (menus déroulants, menu mobile, * qui utilisent var(--fond-3)) suivent normalement le thème. */ .navbar { position: sticky; top: 0; z-index: 1000; background: rgba(10, 10, 10, 0.97); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; gap: 2rem; } /* Groupe boutons auth */ .nav-auth-btns { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } /* Auth + bascule thème regroupés : espacement compact plutôt que le grand gap de .nav-inner, pour ne pas pousser "S'inscrire" hors de l'écran. */ .nav-right-group { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; } /* Bouton connexion */ .nav-login-btn { font-size: .8rem; font-weight: 600; color: rgba(237, 232, 223, .75); padding: .45rem .95rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); white-space: nowrap; transition: color .2s, border-color .2s; text-decoration: none; flex-shrink: 0; } .nav-login-btn:hover { color: #ede8df; border-color: rgba(255,255,255,.3); } /* Bouton inscription */ .nav-register-btn { font-size: .8rem; font-weight: 600; color: #0a0a0a; background: #f0c040; padding: .45rem .95rem; border-radius: var(--radius); white-space: nowrap; transition: opacity .2s; text-decoration: none; flex-shrink: 0; } .nav-register-btn:hover { opacity: .85; } /* Bascule thème clair / sombre */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: none; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); color: rgba(237, 232, 223, .75); cursor: pointer; flex-shrink: 0; transition: color .2s, border-color .2s; } .theme-toggle-btn:hover { color: #f0c040; border-color: rgba(240,192,64,.4); } .theme-toggle-btn svg { width: 17px; height: 17px; } .theme-toggle-btn .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle-btn .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle-btn .icon-moon { display: block; } /* Avatar utilisateur connecté */ .nav-user-btn { display: flex; align-items: center; gap: .4rem; background: none; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: .38rem .7rem; cursor: pointer; color: rgba(237, 232, 223, .75); font-size: .8rem; transition: border-color .2s; flex-shrink: 0; } .nav-user-btn:hover { border-color: rgba(255,255,255,.3); color: #ede8df; } .nav-user-avatar { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #f0c040; color: #0a0a0a; font-family: 'Syne', sans-serif; font-weight: 800; font-size: .75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* Info utilisateur dans le dropdown */ .nav-drop-user-info { padding: .7rem 1rem; display: flex; flex-direction: column; gap: .1rem; } .nav-drop-user-info span { font-size: .85rem; font-weight: 600; color: var(--texte); } .nav-drop-user-info small { font-size: .7rem; color: var(--texte-dim); text-transform: capitalize; } /* Bouton déconnexion dans le dropdown */ .nav-drop-logout { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem 1rem; background: none; border: none; color: var(--texte-muted); font-size: .85rem; cursor: pointer; text-align: left; transition: color .15s, background .15s; font-family: 'DM Sans', sans-serif; } .nav-drop-logout:hover { color: #ef4444; background: rgba(239,68,68,.06); } /* Dropdown aligné à droite */ .nav-drop-right { right: 0; left: auto; } /* Logo + wordmark */ a.nav-logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; } .nav-logo-wordmark { font-family: 'Syne', sans-serif; font-size: .95rem; font-weight: 800; color: #ede8df; letter-spacing: .01em; line-height: 1; } /* Liens de navigation */ .nav-links { display: flex; list-style: none; gap: 2.2rem; } .nav-links a { color: rgba(237, 232, 223, .75); font-size: 0.85rem; letter-spacing: 0.5px; transition: color var(--transition); position: relative; } .nav-links a:hover, .nav-links a.active { color: #ede8df; } .nav-links a.active::after { content: ''; position: absolute; bottom: -4px; left: 0; right: 0; height: 1px; background: #f0c040; } /* Hamburger (mobile) */ .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .hamburger span { display: block; width: 24px; height: 2px; background: #ede8df; transition: all var(--transition); } /* Menu mobile */ .mobile-menu { display: none; flex-direction: column; background: var(--fond-3); padding: 1.5rem 2rem; border-bottom: 1px solid var(--bord); gap: 1rem; } .mobile-menu a { color: var(--texte-muted); font-size: 1rem; } .mobile-menu.open { display: flex; } /* ================================================ SECTION HERO (page d'accueil) ================================================ */ .hero { min-height: 88vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 6rem 0; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 75% 50%, rgba(245, 200, 66, 0.06) 0%, transparent 60%), radial-gradient(ellipse at 15% 85%, rgba(180, 100, 30, 0.08) 0%, transparent 50%); pointer-events: none; } /* Grande lettre G en arrière-plan décoratif */ .hero-deco { position: absolute; right: -80px; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: 55vw; font-weight: 800; color: rgba(245, 200, 66, 0.025); line-height: 1; pointer-events: none; user-select: none; } .hero .container { display: flex; justify-content: center; } .hero-content { max-width: 680px; width: 100%; position: relative; z-index: 2; text-align: center; } .hero-badge { display: inline-block; background: var(--or-clair); color: var(--or); padding: 0.4rem 1.2rem; border-radius: 3px; font-size: 0.75rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 2rem; border: 1px solid var(--or-bord); } .hero h1 { font-size: clamp(3rem, 7vw, 7rem); margin-bottom: 1.5rem; color: var(--texte); } .hero h1 em { color: var(--or); font-style: normal; } .hero .hero-desc { font-size: 1.1rem; color: var(--texte-muted); line-height: 1.9; margin-bottom: 2.5rem; max-width: 540px; margin-left: auto; margin-right: auto; } .hero-btns { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 4rem; justify-content: center; } /* Statistiques sous le hero */ .hero-stats { display: flex; gap: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--bord); justify-content: center; flex-wrap: wrap; } .stat-num { font-family: 'Syne', sans-serif; font-size: 2.2rem; font-weight: 700; color: var(--or); line-height: 1; } .stat-label { font-size: 0.75rem; color: var(--texte-dim); text-transform: uppercase; letter-spacing: 2px; margin-top: 0.3rem; } /* ================================================ SECTION PÔLES (grille des 5 domaines) ================================================ */ .poles-section { padding: 6rem 0; background: var(--fond); } .poles-intro { margin-bottom: 3rem; max-width: 600px; } .poles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; background: var(--bord); /* Lignes de séparation */ gap: 1px; } .pole-card { background: var(--fond-3); padding: 2rem 1.5rem; position: relative; transition: background var(--transition); cursor: pointer; } .pole-card:hover { background: var(--fond-4); } .pole-card:hover .pole-emoji { transform: scale(1.15); } .pole-badge { position: absolute; top: 1.2rem; right: 1.2rem; background: var(--or-clair); color: var(--or); font-size: 0.62rem; padding: 0.2rem 0.6rem; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase; } .pole-emoji { font-size: 2.2rem; display: block; margin-bottom: 1rem; transition: transform var(--transition); } .pole-name { color: var(--or); font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; } .pole-desc { font-size: 0.82rem; color: var(--texte-muted); line-height: 1.7; } .pole-link { display: inline-block; margin-top: 1rem; font-size: 0.8rem; color: var(--or); opacity: 0; transition: opacity var(--transition); } .pole-card:hover .pole-link { opacity: 1; } /* ================================================ SECTION PARTICIPATION ================================================ */ .participation-section { padding: 6rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); } .participation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .participation-text h2 { margin-bottom: 1.5rem; } .participation-text p { margin-bottom: 1rem; font-size: 0.95rem; } /* Cartes de participation */ .p-cards { display: flex; flex-direction: column; gap: 1rem; } .p-card { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius); padding: 1.5rem; display: flex; gap: 1.2rem; align-items: flex-start; transition: border-color var(--transition); } .p-card:hover { border-color: var(--or-bord); } .p-card-icon { width: 48px; height: 48px; background: var(--or-clair); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .p-card-content h4 { color: var(--texte); margin-bottom: 0.4rem; font-size: 0.95rem; } .p-card-content p { font-size: 0.83rem; line-height: 1.65; } /* ================================================ SECTION GAINS (avantages) ================================================ */ .gains-section { padding: 6rem 0; background: var(--fond-3); } .gains-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; } .gain-card { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius); padding: 2rem; position: relative; overflow: hidden; transition: border-color var(--transition), transform var(--transition); } .gain-card:hover { border-color: var(--or-bord); transform: translateY(-3px); } /* Ligne dorée en haut de chaque carte */ .gain-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--or); opacity: 0; transition: opacity var(--transition); } .gain-card:hover::before { opacity: 1; } .gain-num { font-family: 'Syne', sans-serif; font-size: 3.5rem; font-weight: 800; color: rgba(245, 200, 66, 0.1); line-height: 1; margin-bottom: 0.5rem; } .gain-card h4 { color: var(--texte); margin-bottom: 0.5rem; } .gain-card p { font-size: 0.83rem; line-height: 1.7; } /* ================================================ SECTION CONTRAT ================================================ */ .contrat-section { padding: 6rem 0; background: var(--fond); } .contrat-box { background: var(--fond-3); border: 1px solid var(--or-bord); border-radius: var(--radius-lg); padding: 3rem; max-width: 780px; margin: 3rem auto 0; } .contrat-box-title { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--or); margin-bottom: 2rem; text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--bord); } .clause-list { list-style: none; display: flex; flex-direction: column; gap: 0; } .clause-item { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.3rem 0; border-bottom: 1px solid var(--bord); } .clause-item:last-child { border-bottom: none; padding-bottom: 0; } .clause-num { width: 30px; height: 30px; background: var(--or-clair); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.72rem; color: var(--or); font-weight: 700; flex-shrink: 0; margin-top: 2px; } .clause-text { font-size: 0.88rem; color: var(--texte-muted); line-height: 1.75; } .clause-text strong { color: var(--texte); font-weight: 500; } /* ================================================ FORMULAIRE DE PARTICIPATION ================================================ */ .form-section { padding: 6rem 0; background: var(--fond-2); } .form-container { max-width: 680px; margin: 0 auto; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 3rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; font-size: 0.85rem; color: var(--texte-muted); margin-bottom: 0.5rem; letter-spacing: 0.3px; } .form-group label span.required { color: var(--or); } .form-control { width: 100%; background: var(--fond-2); border: 1px solid var(--bord-2); border-radius: var(--radius); padding: 0.75rem 1rem; color: var(--texte); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; transition: border-color var(--transition); } .form-control:focus { outline: none; border-color: var(--or-bord); } .form-control::placeholder { color: var(--texte-dim); } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 120px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ================================================ CTA (Appel à l'action) ================================================ */ .cta-section { padding: 7rem 0; text-align: center; background: linear-gradient(135deg, #0e0900 0%, var(--fond) 40%, #050e05 100%); border-top: 1px solid var(--bord); } .cta-section h2 { margin-bottom: 1.2rem; } .cta-section h2 em { color: var(--or); font-style: normal; } .cta-section p { max-width: 520px; margin: 0 auto 2.5rem; font-size: 1rem; } .cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ================================================ PIED DE PAGE ================================================ */ .footer { background: #050505; border-top: 1px solid var(--bord); } .footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; padding: 4rem 2rem; } .footer-logo { margin-bottom: 0.5rem; } .footer-brand p { font-size: 0.85rem; max-width: 260px; line-height: 1.7; margin-bottom: 1.5rem; } .footer-social { display: flex; gap: 1rem; } .footer-social a { display: flex; align-items: center; gap: 0.45rem; color: var(--texte-dim); font-size: 0.82rem; transition: color var(--transition); } .footer-social a:hover { color: var(--or); } .footer-social a svg { flex-shrink: 0; } .footer-links h4 { color: var(--texte); font-size: 0.85rem; margin-bottom: 1.2rem; letter-spacing: 1px; } .footer-links a { display: block; color: var(--texte-dim); font-size: 0.82rem; margin-bottom: 0.6rem; transition: color var(--transition); } .footer-links a:hover { color: var(--or); } .footer-bottom { border-top: 1px solid var(--bord); padding: 1.2rem 2rem; text-align: center; } .footer-bottom p { font-size: 0.78rem; color: var(--texte-dim); } /* ================================================ MESSAGES D'ALERTE (formulaires) ================================================ */ .alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: 0.88rem; } .alert-success { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); color: #4ade80; } .alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; } /* Erreurs de validation */ .invalid-feedback { color: #f87171; font-size: 0.8rem; margin-top: 0.4rem; display: block; } .form-control.is-invalid { border-color: rgba(239, 68, 68, 0.5); } /* ================================================ PAGE PÔLES (détail de chaque pôle) ================================================ */ .pole-detail { padding: 5rem 0; border-bottom: 1px solid var(--bord); } .pole-detail:nth-child(even) { background: var(--fond-2); } .pole-detail-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .pole-detail-inner.reverse { direction: rtl; } .pole-detail-inner.reverse > * { direction: ltr; } .pole-visual { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 3rem; text-align: center; } .pole-visual-emoji { font-size: 5rem; display: block; margin-bottom: 1rem; } .pole-visual-name { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--or); } .pole-detail-text h2 { margin-bottom: 1rem; } .pole-detail-text p { font-size: 0.95rem; margin-bottom: 1.2rem; } .pole-detail-features { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.5rem; } .pole-detail-features li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.88rem; color: var(--texte-muted); } .pole-detail-features li::before { content: '→'; color: var(--or); font-weight: 700; } /* ================================================ PAGE HERO GÉNÉRIQUE (pour sous-pages) ================================================ */ .page-hero { padding: 5rem 0 4rem; border-bottom: 1px solid var(--bord); background: linear-gradient(to bottom, var(--fond-2), var(--fond)); } .page-hero h1 { margin-bottom: 1rem; } .page-hero h1 em { color: var(--or); font-style: normal; } .page-hero .desc { max-width: 560px; font-size: 1rem; } /* ================================================ LOGOS — NAVBAR & FOOTER ================================================ */ .logo { display: flex; align-items: center; gap: 0.75rem; } .logo-img { height: 46px; width: auto; object-fit: contain; display: block; flex-shrink: 0; } .logo-text { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--or); letter-spacing: 3px; line-height: 1.1; display: flex; flex-direction: column; } .logo-text small { font-size: 0.55rem; font-weight: 400; color: var(--texte-muted); letter-spacing: 4px; text-transform: uppercase; } .footer-logo-img { height: 54px; width: auto; object-fit: contain; display: block; margin-bottom: 1rem; } /* ================================================ LOGOS — CARTES DES PÔLES (home page) ================================================ */ .pole-logo-wrap { display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; margin: 0 auto 1.2rem; border-radius: var(--radius-lg); background: var(--fond-3); border: 1px solid var(--bord); padding: 8px; overflow: hidden; } .pole-logo-img { width: 100%; height: 100%; object-fit: contain; } /* ================================================ LOGOS — VISUELS DÉTAIL PÔLES ================================================ */ .pole-visual-img { width: 180px; height: 180px; object-fit: contain; border-radius: var(--radius-lg); margin: 0 auto; display: block; } /* ================================================ SECTION APP / INNOVATION DIGITALE ================================================ */ .app-section { padding: 6rem 0; background: var(--fond-3); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); } .app-section-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: center; } .app-text h2 em { color: var(--or); font-style: normal; } .app-features { list-style: none; margin: 1.5rem 0 0; display: flex; flex-direction: column; gap: 0.75rem; } .app-features li { display: flex; align-items: center; gap: 0.75rem; font-size: 0.88rem; color: var(--texte-muted); } .app-feat-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex-shrink: 0; } .app-soon-row { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; } .app-soon-badge { background: var(--or-clair); color: var(--or); border: 1px solid var(--or-bord); padding: 0.3rem 1rem; border-radius: 3px; font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; } .app-soon-platforms { font-size: 0.82rem; color: var(--texte-dim); letter-spacing: 1px; } /* Maquette téléphone */ .app-visual { display: flex; justify-content: center; align-items: center; } .app-phone-mockup { width: 230px; height: 440px; background: var(--fond-4); border: 1.5px solid var(--bord-2); border-radius: 36px; padding: 14px; box-shadow: 0 0 0 1px var(--bord), 0 40px 80px rgba(0, 0, 0, 0.5), 0 0 60px rgba(245, 200, 66, 0.06); position: relative; } .app-phone-mockup::before { content: ''; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 60px; height: 4px; background: var(--bord-2); border-radius: 2px; } .app-phone-inner { width: 100%; height: 100%; background: var(--fond); border-radius: 26px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 2rem 1rem 1.5rem; gap: 0.5rem; } .app-screen-brand { font-family: 'Syne', sans-serif; font-size: 2.8rem; font-weight: 800; color: var(--or); line-height: 1; } .app-screen-title { font-size: 0.65rem; letter-spacing: 3px; color: var(--texte-dim); text-transform: uppercase; margin-bottom: 0.5rem; } .app-screen-poles { display: flex; flex-direction: column; gap: 0.35rem; width: 100%; } .asp-item { background: var(--fond-4); border: 1px solid var(--bord); border-radius: 6px; padding: 0.45rem 0.8rem; font-size: 0.72rem; color: var(--texte-muted); display: flex; align-items: center; gap: 0.5rem; } .asp-logo { width: 18px; height: 18px; object-fit: contain; border-radius: 3px; } /* ================================================ SCROLLBAR PERSONNALISÉE ================================================ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: var(--fond); } ::-webkit-scrollbar-thumb { background: rgba(245,200,66,0.25); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(245,200,66,0.55); } /* ================================================ KEYFRAMES ================================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(38px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-38px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(38px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.88); } to { opacity: 1; transform: scale(1); } } @keyframes floatAlt { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(1deg); } } @keyframes glowPulse { 0%,100% { box-shadow: 0 0 20px rgba(245,200,66,0.15), 0 4px 40px rgba(0,0,0,0.3); } 50% { box-shadow: 0 0 40px rgba(245,200,66,0.35), 0 4px 40px rgba(0,0,0,0.3); } } @keyframes marqueeFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes cursorBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } } @keyframes scanline { 0% { top: 14px; opacity: 0.7; } 100% { top: calc(100% - 14px); opacity: 0; } } @keyframes orbDrift1 { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(28px,-38px) scale(1.08); } 66% { transform: translate(-18px,22px) scale(0.94); } } @keyframes orbDrift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-35px,18px); } } @keyframes orbDrift3 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(18px,-22px); } } @keyframes statusPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } } @keyframes evHeroPulse { 0%,100% { opacity: .60; } 50% { opacity: 1; } } .ev-hero-pulse { background: radial-gradient(circle, rgba(142,68,173,.28) 0%, transparent 70%) !important; animation: evHeroPulse 3.8s ease-in-out infinite; } @keyframes gradientShift { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes rpGlow { 0%,100% { box-shadow: 0 0 0 4px rgba(245,200,66,0.08), 0 0 14px rgba(245,200,66,0.25); } 50% { box-shadow: 0 0 0 6px rgba(245,200,66,0.15), 0 0 24px rgba(245,200,66,0.45); } } /* ================================================ SCROLL REVEAL SYSTEM ================================================ */ [data-reveal] { opacity: 0; transition: opacity 0.65s ease, transform 0.65s ease; } [data-reveal="up"] { transform: translateY(36px); } [data-reveal="left"] { transform: translateX(-36px); } [data-reveal="right"] { transform: translateX(36px); } [data-reveal="scale"] { transform: scale(0.9); } [data-reveal="fade"] { transform: none; } [data-reveal].is-revealed { opacity: 1; transform: none; } .poles-grid .pole-card[data-reveal] { transition-delay: var(--stagger, 0ms); } .gains-grid .gain-card[data-reveal] { transition-delay: var(--stagger, 0ms); } /* ================================================ NAVBAR — ÉTATS AVANCÉS ================================================ */ .navbar { transition: transform 0.32s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .navbar.scrolled { border-bottom-color: rgba(245,200,66,0.12); box-shadow: 0 4px 30px rgba(0,0,0,0.45); } .navbar.nav-up { transform: translateY(-100%); } /* Hamburger → croix animée */ .hamburger span { transition: transform 0.25s ease, opacity 0.25s ease; } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ================================================ HERO — ORBES & TYPED LINE ================================================ */ .hero-orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(70px); z-index: 0; } .hero-orb-1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(245,200,66,0.09) 0%, transparent 70%); top: -120px; right: 8%; animation: orbDrift1 14s ease-in-out infinite; } .hero-orb-2 { width: 320px; height: 320px; background: radial-gradient(circle, rgba(200,100,30,0.07) 0%, transparent 70%); bottom: -40px; right: 28%; animation: orbDrift2 17s ease-in-out infinite; } .hero-orb-3 { width: 180px; height: 180px; background: radial-gradient(circle, rgba(60,180,100,0.05) 0%, transparent 70%); top: 35%; right: 4%; animation: orbDrift3 20s ease-in-out infinite; } /* Gradient animé sur "Grand" */ .hero h1 em { background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; animation: gradientShift 3.5s linear infinite; } /* Typewriter line */ .hero-typed-line { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 1.5rem; font-size: 0.92rem; color: var(--texte-muted); } .hero-typed-prefix { color: var(--or); font-weight: 600; letter-spacing: 0.5px; flex-shrink: 0; } .hero-typewriter { color: var(--texte); font-weight: 700; min-width: 7ch; letter-spacing: 0.5px; } .hero-cursor { color: var(--or); font-weight: 300; animation: cursorBlink 0.88s step-end infinite; } /* 4ème stat */ .stat-sep { width: 1px; height: 32px; background: var(--bord-2); flex-shrink: 0; } /* Bouton avec glow pulsant */ .btn-glow { animation: glowPulse 3s ease-in-out infinite; } /* ================================================ MARQUEE BAND ================================================ */ .marquee-band { background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); overflow: hidden; padding: 0.85rem 0; user-select: none; } .marquee-track { display: flex; gap: 2.8rem; animation: marqueeFlow 26s linear infinite; width: max-content; } .marquee-track span { font-size: 0.7rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--texte-dim); white-space: nowrap; font-weight: 500; transition: color var(--transition); } .marquee-track span:hover { color: var(--or); } /* ================================================ VISION SECTION ================================================ */ .vision-section { padding: 6rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); } .vision-title { margin-bottom: 2.5rem; max-width: 660px; line-height: 1.18; } .vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 4rem; } .vision-quote { grid-column: 1 / -1; border-left: 2px solid var(--or); padding: 1.1rem 2rem; background: var(--or-clair); border-radius: 0 var(--radius) var(--radius) 0; margin-top: 0.5rem; } .vision-quote blockquote { font-style: italic; color: var(--texte-muted); font-size: 1rem; line-height: 1.75; } .vision-quote cite { display: block; margin-top: 0.5rem; font-size: 0.8rem; font-style: normal; color: var(--or); } /* ================================================ POLE CARD — VARIANTE TECH & HOVER AMÉLIORÉ ================================================ */ .pole-card { position: relative; overflow: hidden; } .pole-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(245,200,66,0.4), transparent); opacity: 0; transition: opacity var(--transition); } .pole-card:hover::before { opacity: 1; } .pole-card:hover { border-color: rgba(245,200,66,0.22); box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(245,200,66,0.1); transform: translateY(-5px); } .pole-card-tech { border-color: rgba(0,140,255,0.18); background: linear-gradient(145deg, var(--fond-4), rgba(0,60,130,0.08)); } .pole-card-tech::before { background: linear-gradient(to right, transparent, rgba(0,150,255,0.4), transparent); } .pole-card-tech:hover { border-color: rgba(0,140,255,0.45); box-shadow: 0 10px 40px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,100,255,0.1), 0 0 30px rgba(0,100,255,0.08); } .pole-badge-tech { background: rgba(0,140,255,0.1); color: #5cbfff; border-color: rgba(0,140,255,0.2); } .pole-logo-wrap-tech { background: rgba(0,20,60,0.6); border-color: rgba(0,100,200,0.2); } .pole-link-tech { color: #5cbfff; } .pole-link-tech:hover { color: #90d4ff; } /* ================================================ APP SECTION — ÉLÉMENTS AVANCÉS ================================================ */ .app-scanline { position: absolute; left: 14px; right: 14px; height: 2px; background: linear-gradient(to right, transparent, rgba(245,200,66,0.35), transparent); top: 14px; animation: scanline 4s ease-in-out infinite; pointer-events: none; z-index: 10; border-radius: 1px; } .asp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--texte-dim); margin-left: auto; flex-shrink: 0; } .asp-dot-on { background: #4dca6e; box-shadow: 0 0 6px rgba(77,202,110,0.7); animation: statusPulse 2.2s ease-in-out infinite; } .app-screen-status { display: flex; align-items: center; gap: 0.4rem; font-size: 0.58rem; color: #4dca6e; margin-top: 0.4rem; letter-spacing: 0.5px; } .app-status-dot { width: 5px; height: 5px; border-radius: 50%; background: #4dca6e; flex-shrink: 0; animation: statusPulse 2.2s ease-in-out infinite; } /* Floating cards autour du téléphone */ .app-float { position: absolute; background: rgba(22,22,22,0.92); border: 1px solid var(--bord-2); border-radius: var(--radius); padding: 0.5rem 0.85rem; font-size: 0.63rem; color: var(--texte-muted); line-height: 1.5; backdrop-filter: blur(10px); box-shadow: 0 6px 24px rgba(0,0,0,0.4); pointer-events: none; white-space: nowrap; } .app-float strong { color: var(--texte); display: block; font-size: 0.78rem; } .app-float-1 { top: 14%; left: -85px; animation: floatAlt 4.2s ease-in-out infinite; } .app-float-2 { bottom: 22%; left: -80px; animation: floatAlt 5s ease-in-out infinite 1.6s; } .app-float-3 { top: 42%; right: -80px; animation: floatAlt 4.6s ease-in-out infinite 0.9s; } /* ================================================ ROADMAP DIGITALE ================================================ */ .roadmap-section { padding: 6rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); } .roadmap-section h2 em { color: var(--or); font-style: normal; } .roadmap-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; position: relative; } .roadmap-line { position: absolute; top: 11px; left: calc(100% / 6 + 12px); right: calc(100% / 6 + 12px); height: 1px; background: linear-gradient(to right, var(--or), rgba(245,200,66,0.3), rgba(245,200,66,0.08)); z-index: 0; } .roadmap-phase { display: flex; flex-direction: column; gap: 1.2rem; } .roadmap-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--bord-2); background: var(--fond); position: relative; z-index: 1; flex-shrink: 0; } .rp-active { border-color: var(--or); background: var(--or-clair); animation: rpGlow 2.5s ease-in-out infinite; } .rp-active::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--or); } .rp-soon { border-color: rgba(245,200,66,0.35); background: rgba(245,200,66,0.04); } .rp-future{ border-color: var(--bord); } .roadmap-badge { display: inline-block; font-size: 0.66rem; letter-spacing: 2px; text-transform: uppercase; padding: 0.22rem 0.7rem; border-radius: 3px; font-weight: 600; align-self: flex-start; } .rp-badge-active { background: var(--or-clair); color: var(--or); border: 1px solid var(--or-bord); } .rp-badge-soon { background: rgba(245,200,66,0.07); color: rgba(245,200,66,0.65); border: 1px solid rgba(245,200,66,0.14); } .rp-badge-future { background: rgba(255,255,255,0.02); color: var(--texte-dim); border: 1px solid var(--bord); } .roadmap-num-label { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-dim); } .roadmap-content h4 { font-size: 1.08rem; color: var(--texte); margin: 0.15rem 0 0.4rem; } .roadmap-content ul { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; } .roadmap-content ul li { font-size: 0.82rem; color: var(--texte-muted); padding-left: 1rem; position: relative; line-height: 1.5; } .roadmap-content ul li::before { content: '—'; position: absolute; left: 0; color: var(--texte-dim); font-size: 0.65rem; top: 3px; } /* ================================================ GAINS — cta gradients ================================================ */ .cta-section h2 em, .roadmap-section h2 em { background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; animation: gradientShift 3.5s linear infinite; } /* ================================================ RESPONSIVE (Mobile) ================================================ */ @media (max-width: 900px) { .nav-links, .navbar .btn-gold { display: none; } .hamburger { display: flex; } .participation-grid { grid-template-columns: 1fr; gap: 3rem; } .gains-grid { grid-template-columns: 1fr 1fr; } .pole-detail-inner { grid-template-columns: 1fr; } .pole-detail-inner.reverse { direction: ltr; } .footer-inner { grid-template-columns: 1fr 1fr; } .app-section-inner { grid-template-columns: 1fr; gap: 3rem; } .app-visual { order: -1; } .app-float { display: none; } .vision-grid { grid-template-columns: 1fr; gap: 1.5rem; } .roadmap-track { grid-template-columns: 1fr; gap: 3rem; } .roadmap-line { display: none; } } @media (max-width: 600px) { .container { padding: 0 1.2rem; } .gains-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .hero-stats { gap: 1rem; } .stat-sep { display: none; } .hero-typed-line { flex-wrap: wrap; } .marquee-track { animation-duration: 18s; } .contrat-box { padding: 1.5rem; } } /* ================================================ HERO SPLIT — Deux récits, une vision ================================================ */ .hero-split { position: relative; min-height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: var(--fond); } .hs-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hs-bg-left { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: radial-gradient(ellipse at 15% 50%, rgba(245,200,66,0.06) 0%, transparent 60%); } .hs-bg-right { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; background: radial-gradient(ellipse at 85% 40%, rgba(245,200,66,0.09) 0%, transparent 55%); } /* Particules */ .hs-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .hs-p { position: absolute; border-radius: 50%; background: var(--or); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-fill-mode: both; } .pa { animation-name: pfA; } .pb { animation-name: pfB; } .pc { animation-name: pfC; } .pd { animation-name: pfD; } @keyframes pfA { 0%,100% { opacity: 0; transform: translate(0,0); } 25%,75% { opacity: 0.5; } 50% { opacity: 0.5; transform: translate(-12px,-40px); } } @keyframes pfB { 0%,100% { opacity: 0; transform: translate(0,0); } 25%,75% { opacity: 0.35; } 50% { opacity: 0.35; transform: translate(18px,-32px); } } @keyframes pfC { 0%,100% { opacity: 0; transform: translate(0,0); } 25%,75% { opacity: 0.6; } 50% { opacity: 0.6; transform: translate(22px,-8px); } } @keyframes pfD { 0%,100% { opacity: 0; transform: scale(0.8); } 50% { opacity: 0.45; transform: scale(1.4) translate(-5px,-18px); } } /* Layout intérieur */ .hs-inner { flex: 1; display: flex; align-items: stretch; position: relative; z-index: 1; min-height: calc(100vh - 80px); } .hs-panel { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 5rem 4.5rem 4rem; } .hs-left { border-right: 1px solid var(--bord); } .hs-right { align-items: center; text-align: center; } /* Séparateur central */ .hs-sep { display: flex; flex-direction: column; align-items: center; width: 0; position: relative; z-index: 2; flex-shrink: 0; overflow: visible; } .hs-sep-line { flex: 1; width: 1px; background: linear-gradient(to bottom, transparent, rgba(245,200,66,0.4), transparent); } .hs-sep-badge { width: 52px; height: 52px; border-radius: 50%; background: var(--fond-3); border: 1px solid var(--or-bord); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 1.15rem; font-weight: 800; color: var(--or); flex-shrink: 0; animation: rpGlow 3s ease-in-out infinite; } /* Contenu panneau gauche */ .hs-eyebrow { display: flex; align-items: center; gap: 0.6rem; color: var(--or); font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 2rem; font-weight: 500; } .hs-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); animation: statusPulse 2s ease-in-out infinite; flex-shrink: 0; } .hs-heading { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.8rem; color: var(--texte); } .hs-em { background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; animation: gradientShift 3.5s linear infinite; } .hs-desc { font-size: 0.97rem; color: var(--texte-muted); line-height: 1.85; margin-bottom: 2.2rem; max-width: 480px; } .hs-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .hs-traits { display: flex; flex-wrap: wrap; gap: 0.55rem; } .hs-trait { background: var(--fond-3); border: 1px solid var(--bord); color: var(--texte-muted); font-size: 0.74rem; padding: 0.28rem 0.85rem; border-radius: 20px; transition: border-color var(--transition), color var(--transition); } .hs-trait:hover { border-color: var(--or-bord); color: var(--or); } /* Contenu panneau droit */ .hs-empire-logo { position: relative; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; } .hs-logo-glow { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(245,200,66,0.18) 0%, transparent 70%); animation: glowPulse 3s ease-in-out infinite; pointer-events: none; } .hs-logo-img { height: 120px; width: auto; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 0 24px rgba(245,200,66,0.3)); } .hs-empire-title { font-family: 'Syne', sans-serif; font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 800; color: var(--texte); margin-bottom: 0.4rem; letter-spacing: 2px; } .hs-empire-tagline { font-size: 0.76rem; color: var(--texte-dim); letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 2.2rem; } .hs-poles-strip { display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2.5rem; } .hs-pole-mini { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .hpm-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: var(--fond-3); border: 1px solid var(--bord); padding: 5px; transition: border-color var(--transition), transform var(--transition); } .hs-pole-mini:hover .hpm-logo { border-color: var(--or-bord); transform: translateY(-4px); } .hs-pole-mini span { font-size: 0.6rem; color: var(--texte-dim); letter-spacing: 1px; text-transform: uppercase; } .hs-empire-btns { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } .btn-ghost-dark { display: inline-block; background: transparent; color: var(--texte-muted); border: 1px solid var(--bord); padding: 0.65rem 1.5rem; border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.3px; cursor: pointer; transition: all var(--transition); } .btn-ghost-dark:hover { color: var(--texte); border-color: var(--bord-2); } .hs-live-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(77,202,110,0.08); border: 1px solid rgba(77,202,110,0.2); color: #4dca6e; font-size: 0.7rem; padding: 0.35rem 1rem; border-radius: 20px; letter-spacing: 1px; } .hs-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #4dca6e; animation: statusPulse 2s ease-in-out infinite; flex-shrink: 0; } /* Barre de stats */ .hs-statsbar { background: var(--fond-2); border-top: 1px solid var(--bord); position: relative; z-index: 2; } .hs-statsbar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(245,200,66,0.35), transparent); } .hs-stats { display: flex; align-items: center; justify-content: center; gap: 3.5rem; padding: 1.6rem 0; flex-wrap: wrap; } .hs-stat { text-align: center; } .hs-stat-num { font-family: 'Syne', sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--or); line-height: 1; margin-bottom: 0.25rem; display: block; } .hs-stat-label { font-size: 0.68rem; color: var(--texte-dim); text-transform: uppercase; letter-spacing: 2px; } .hs-stat-sep { width: 1px; height: 28px; background: var(--bord-2); flex-shrink: 0; } /* ================================================ MANIFESTE — L'Esprit Gbonhi ================================================ */ .manifeste-section { padding: 7rem 0; background: var(--fond-2); position: relative; overflow: hidden; border-top: 1px solid var(--bord); } .manifeste-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 5% 50%, rgba(245,200,66,0.04) 0%, transparent 50%), radial-gradient(ellipse at 95% 15%, rgba(200,100,30,0.05) 0%, transparent 50%); pointer-events: none; } .manifeste-header { max-width: 800px; margin-bottom: 4rem; } .manifeste-headline { font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: 1.5rem; line-height: 1.15; } .manifeste-headline em { color: var(--or); font-style: normal; } .manifeste-lead { font-size: 1.02rem; line-height: 1.9; max-width: 680px; color: var(--texte-muted); } /* Grille bâtisseurs */ .dreamers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-bottom: 5rem; } .dreamer-card { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 2rem 1.5rem; position: relative; overflow: hidden; transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition); transition-delay: var(--stagger, 0ms); } .dreamer-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(to right, transparent, rgba(245,200,66,0.55), transparent); opacity: 0; transition: opacity var(--transition); } .dreamer-card:hover { border-color: rgba(245,200,66,0.28); transform: translateY(-7px); box-shadow: 0 22px 55px rgba(0,0,0,0.4), 0 0 0 1px rgba(245,200,66,0.07); } .dreamer-card:hover::before { opacity: 1; } .dreamer-card-social { border-color: rgba(77,202,110,0.15); } .dreamer-card-social::before { background: linear-gradient(to right, transparent, rgba(77,202,110,0.45), transparent); } .dreamer-card-social:hover { border-color: rgba(77,202,110,0.32); } .dreamer-num { position: absolute; top: 1rem; right: 1.2rem; font-family: 'Syne', sans-serif; font-size: 2.8rem; font-weight: 800; color: rgba(245,200,66,0.06); line-height: 1; } .dreamer-icon { font-size: 2rem; margin-bottom: 1rem; display: block; } .dreamer-card h4 { color: var(--texte); font-size: 1rem; margin-bottom: 0.6rem; } .dreamer-card p { font-size: 0.83rem; line-height: 1.7; margin-bottom: 1rem; } .dreamer-prompt { font-size: 0.78rem; color: var(--or); font-style: italic; border-left: 2px solid var(--or-bord); padding-left: 0.75rem; line-height: 1.6; } .dreamer-card-social .dreamer-prompt { color: #4dca6e; border-left-color: rgba(77,202,110,0.3); } /* Porte sociale */ .social-door { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; padding: 3.5rem; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); } .sd-left h3 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); margin: 1rem 0; line-height: 1.2; } .sd-left h3 em { color: var(--or); font-style: normal; } .sd-left p { font-size: 0.92rem; line-height: 1.85; margin-bottom: 0.8rem; } .manifeste-blockquote { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 2rem 2rem 1.5rem; position: relative; } .mbq-mark { font-family: 'Syne', sans-serif; font-size: 5rem; font-weight: 800; color: var(--or-bord); line-height: 0.8; margin-bottom: -1rem; display: block; } .manifeste-blockquote p { font-style: italic; font-size: 0.95rem; color: var(--texte-muted); line-height: 1.8; margin-bottom: 1rem; } .manifeste-blockquote cite { font-style: normal; font-size: 0.8rem; color: var(--or); display: block; } .manifeste-blockquote cite small { color: var(--texte-dim); font-size: 0.72rem; display: block; margin-top: 0.2rem; } .sd-stats-mini { display: flex; gap: 1.5rem; align-items: center; padding: 1.5rem 0 0; border-top: 1px solid var(--bord); margin-top: 1.5rem; } .sdm-item { text-align: center; flex: 1; } .sdm-num { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--or); display: block; line-height: 1; margin-bottom: 0.2rem; } .sdm-label { font-size: 0.65rem; color: var(--texte-dim); text-transform: uppercase; letter-spacing: 1.5px; } .sdm-sep { width: 1px; height: 30px; background: var(--bord-2); flex-shrink: 0; } /* Marquee inversé */ .marquee-reverse .marquee-track { animation-direction: reverse; } /* ================================================ RED CARPET — L'Univers Gbonhi ================================================ */ .redcarpet-section { padding: 7rem 0; background: #050505; border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); position: relative; overflow: hidden; } .rc-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 110%, rgba(245,200,66,0.08) 0%, transparent 45%), radial-gradient(ellipse at 50% -10%, rgba(245,200,66,0.04) 0%, transparent 40%); pointer-events: none; } .rc-deco-g { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: 'Syne', sans-serif; font-size: 70vw; font-weight: 800; color: rgba(245,200,66,0.018); line-height: 1; pointer-events: none; user-select: none; } .rc-header { text-align: center; margin-bottom: 4rem; position: relative; z-index: 1; } .rc-tag { justify-content: center; letter-spacing: 4px; margin-bottom: 1.5rem; font-size: 0.72rem; } .rc-tag::before { display: none; } .rc-headline { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.15; margin-bottom: 1.2rem; } .rc-headline em { background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; animation: gradientShift 3.5s linear infinite; } .rc-subline { max-width: 520px; margin: 0 auto; font-size: 1rem; line-height: 1.75; } /* Showcase cinématique des pôles */ .poles-showcase { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--bord); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; position: relative; z-index: 1; margin-bottom: 3rem; } .psc-card { background: var(--fond-4); padding: 2.5rem 1.5rem; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .psc-card:hover { background: #111111; transform: translateY(-5px); z-index: 2; box-shadow: 0 24px 60px rgba(0,0,0,0.6); } .psc-glow { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(245,200,66,0.18) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } .psc-glow-amber { background: radial-gradient(circle, rgba(255,160,50,0.2) 0%, transparent 70%); } .psc-glow-teal { background: radial-gradient(circle, rgba(0,200,180,0.15) 0%, transparent 70%); } .psc-glow-blue { background: radial-gradient(circle, rgba(0,140,255,0.18) 0%, transparent 70%); } .psc-glow-green { background: radial-gradient(circle, rgba(60,200,80,0.14) 0%, transparent 70%); } .psc-card:hover .psc-glow { opacity: 1; } .psc-logo-wrap { width: 80px; height: 80px; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; padding: 10px; margin-bottom: 1.2rem; transition: border-color var(--transition); position: relative; z-index: 1; } .psc-logo-tech { background: rgba(0,20,60,0.5); border-color: rgba(0,100,200,0.2); } .psc-card:hover .psc-logo-wrap { border-color: var(--or-bord); } .psc-tech:hover .psc-logo-wrap { border-color: rgba(0,140,255,0.45); } .psc-agri:hover .psc-logo-wrap { border-color: rgba(60,200,80,0.35); } .psc-logo { width: 100%; height: 100%; object-fit: contain; } .psc-domain-tag { font-size: 0.58rem; letter-spacing: 2px; text-transform: uppercase; color: var(--or); background: var(--or-clair); border: 1px solid var(--or-bord); padding: 0.2rem 0.6rem; border-radius: 3px; margin-bottom: 0.75rem; position: relative; z-index: 1; } .psc-domain-blue { color: #5cbfff; background: rgba(0,140,255,0.08); border-color: rgba(0,140,255,0.2); } .psc-domain-green { color: #4dca6e; background: rgba(77,202,110,0.08); border-color: rgba(77,202,110,0.2); } .psc-name { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--texte); margin-bottom: 0.6rem; position: relative; z-index: 1; } .psc-desc { font-size: 0.78rem; color: var(--texte-muted); line-height: 1.65; margin-bottom: 1.2rem; flex: 1; position: relative; z-index: 1; } .psc-link { font-size: 0.75rem; color: var(--or); font-weight: 600; letter-spacing: 0.5px; opacity: 0; transform: translateY(6px); transition: opacity var(--transition), transform var(--transition); position: relative; z-index: 1; } .psc-link-blue { color: #5cbfff; } .psc-link-green { color: #4dca6e; } .psc-card:hover .psc-link { opacity: 1; transform: translateY(0); } .psc-num { position: absolute; bottom: 1rem; right: 1.2rem; font-family: 'Syne', sans-serif; font-size: 3.5rem; font-weight: 800; color: rgba(245,200,66,0.05); line-height: 1; pointer-events: none; } .psc-num-blue { color: rgba(0,140,255,0.06); } .rc-footer-cta { text-align: center; position: relative; z-index: 1; } /* ================================================ GALERIE D'ACTIVITÉS — Slideshow CSS pur ================================================ */ .activities-section { padding: 6rem 0 0; background: var(--fond-3); border-top: 1px solid var(--bord); } .act-header { margin-bottom: 3rem; } .act-header h2 em { color: var(--or); font-style: normal; } .act-header p { font-size: 0.95rem; } .gallery-container { position: relative; height: 62vh; min-height: 400px; overflow: hidden; margin-top: 2rem; } .gallery-slider { position: absolute; inset: 0; } .gslide { position: absolute; inset: 0; opacity: 0; animation: galleryReveal 30s linear infinite; display: flex; align-items: flex-end; } /* Fonds cinématiques de chaque slide */ .gslide-1 { background: linear-gradient(145deg, #140520 0%, #090010 45%, #1e0a00 100%); animation-delay: 0s; } .gslide-1::before { content: 'EVENT'; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800; color: rgba(245,200,66,0.04); line-height: 1; pointer-events: none; } .gslide-2 { background: linear-gradient(145deg, #1e0a00 0%, #0d0500 45%, #221000 100%); animation-delay: 5s; } .gslide-2::before { content: 'FOOD'; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800; color: rgba(255,140,0,0.04); line-height: 1; pointer-events: none; } .gslide-3 { background: linear-gradient(145deg, #001520 0%, #000b14 45%, #001c1a 100%); animation-delay: 10s; } .gslide-3::before { content: 'STYLE'; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800; color: rgba(0,200,180,0.04); line-height: 1; pointer-events: none; } .gslide-4 { background: linear-gradient(145deg, #00041a 0%, #000210 45%, #001030 100%); animation-delay: 15s; } .gslide-4::before { content: 'TECH'; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800; color: rgba(0,140,255,0.05); line-height: 1; pointer-events: none; } .gslide-5 { background: linear-gradient(145deg, #001a00 0%, #000d00 45%, #002200 100%); animation-delay: 20s; } .gslide-5::before { content: 'AGRI'; position: absolute; right: 3%; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: 20vw; font-weight: 800; color: rgba(60,200,80,0.04); line-height: 1; pointer-events: none; } .gslide-6 { background: linear-gradient(145deg, #0d0d0d 0%, #080808 45%, #111111 100%); animation-delay: 25s; } .gslide-6::before { content: 'GBONHI'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-family: 'Syne', sans-serif; font-size: 14vw; font-weight: 800; color: rgba(245,200,66,0.04); line-height: 1; pointer-events: none; white-space: nowrap; } /* Photo réelle optionnelle — couvre le fond dégradé */ .gslide-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* Voile dégradé latéral — reste lisible même avec une photo */ .gslide::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.15) 100%), linear-gradient(to right, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); pointer-events: none; z-index: 1; } .gslide-overlay { position: relative; z-index: 2; padding: 2.5rem 3rem 3.5rem; max-width: 600px; } .gslide-pole { display: inline-block; background: var(--or-clair); color: var(--or); border: 1px solid var(--or-bord); padding: 0.25rem 0.85rem; border-radius: 3px; font-size: 0.67rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 1rem; font-weight: 600; } .gslide-title { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 5.5vw, 4.5rem); font-weight: 800; color: var(--texte); line-height: 1.08; margin-bottom: 0.75rem; } .gslide-desc { font-size: 0.95rem; color: rgba(245,240,232,0.7); line-height: 1.7; max-width: 380px; } /* Indicateurs */ .gallery-indicators { position: absolute; bottom: 1.8rem; right: 2rem; display: flex; gap: 0.4rem; z-index: 10; } .gi { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.2); width: 24px; animation: giActive 30s linear infinite; transition: none; } .gi-1 { animation-delay: 0s; } .gi-2 { animation-delay: 5s; } .gi-3 { animation-delay: 10s; } .gi-4 { animation-delay: 15s; } .gi-5 { animation-delay: 20s; } .gi-6 { animation-delay: 25s; } @keyframes galleryReveal { 0% { opacity: 0; } 3% { opacity: 1; } 16.66% { opacity: 1; } 19.66% { opacity: 0; } 100% { opacity: 0; } } @keyframes giActive { 0% { background: var(--or); width: 34px; } 16.66% { background: var(--or); width: 34px; } 16.67% { background: rgba(255,255,255,0.2); width: 24px; } 100% { background: rgba(255,255,255,0.2); width: 24px; } } /* ================================================ ÉVÉNEMENTS À VENIR ================================================ */ .events-preview-section { padding: 6rem 0; background: var(--fond); border-top: 1px solid var(--bord); } .ep-header { margin-bottom: 3rem; } .ep-title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .ep-title-row h2 em { color: var(--or); font-style: normal; } .ep-see-all { flex-shrink: 0; margin-bottom: 0.5rem; } .ep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .ep-card { background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; position: relative; transition: border-color var(--transition), transform var(--transition); } .ep-card:hover { border-color: var(--or-bord); transform: translateY(-5px); } .ep-card-badge { position: absolute; top: 1rem; left: 1rem; background: var(--or); color: #0a0a0a; font-size: 0.62rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase; z-index: 2; } .ep-visual { height: 160px; position: relative; } .ep-card-featured .ep-visual { height: 200px; } .ep-visual-1 { background: linear-gradient(135deg, #140520 0%, #1e0a00 100%); } .ep-visual-1::after { content: '✦'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 4rem; color: rgba(245,200,66,0.14); } .ep-visual-2 { background: linear-gradient(135deg, #1e0a00 0%, #221000 100%); } .ep-visual-2::after { content: '◆'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.5rem; color: rgba(255,140,0,0.14); } .ep-visual-3 { background: linear-gradient(135deg, #00041a 0%, #001030 100%); } .ep-visual-3::after { content: '◉'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 3.5rem; color: rgba(0,140,255,0.18); } .ep-info { padding: 1.5rem; } .ep-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .ep-pole-tag { background: var(--or-clair); color: var(--or); border: 1px solid var(--or-bord); font-size: 0.6rem; padding: 0.2rem 0.6rem; border-radius: 3px; letter-spacing: 1px; text-transform: uppercase; font-weight: 600; } .ep-pole-food { background: rgba(255,140,0,0.1); color: #ffab40; border-color: rgba(255,140,0,0.25); } .ep-pole-tech { background: rgba(0,140,255,0.08); color: #5cbfff; border-color: rgba(0,140,255,0.22); } .ep-date { font-size: 0.7rem; color: var(--texte-dim); letter-spacing: 1px; } .ep-name { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--texte); margin-bottom: 0.5rem; line-height: 1.3; } .ep-desc { font-size: 0.82rem; color: var(--texte-muted); line-height: 1.65; margin-bottom: 1rem; } .ep-link { font-size: 0.8rem; color: var(--or); font-weight: 600; transition: opacity var(--transition); } .ep-link:hover { opacity: 0.7; } /* ================================================ CTA FINAL — Épique ================================================ */ .cta-final { padding: 8rem 0; position: relative; overflow: hidden; text-align: center; background: #050505; border-top: 1px solid var(--bord); } .cta-final-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% -5%, rgba(245,200,66,0.13) 0%, transparent 48%), radial-gradient(ellipse at 15% 110%, rgba(200,100,30,0.08) 0%, transparent 48%), radial-gradient(ellipse at 85% 110%, rgba(245,200,66,0.06) 0%, transparent 42%); pointer-events: none; } .cta-final::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(245,200,66,0.55), transparent); } .cta-final-particles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .cfp { position: absolute; border-radius: 50%; background: var(--or); animation-timing-function: ease-in-out; animation-iteration-count: infinite; } .cfp1 { width:3px;height:3px;left:10%;top:25%; animation-name:pfA; animation-duration:8s;animation-delay:0s; } .cfp2 { width:2px;height:2px;left:85%;top:20%; animation-name:pfB; animation-duration:10s;animation-delay:1s; } .cfp3 { width:4px;height:4px;left:15%;top:70%; animation-name:pfC; animation-duration:9s;animation-delay:2s; } .cfp4 { width:2px;height:2px;left:75%;top:75%; animation-name:pfD; animation-duration:11s;animation-delay:0.5s; } .cfp5 { width:3px;height:3px;left:50%;top:15%; animation-name:pfA; animation-duration:7s;animation-delay:3s; } .cta-final-inner { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .cta-final-badge { display: inline-block; background: var(--or-clair); color: var(--or); border: 1px solid var(--or-bord); padding: 0.4rem 1.5rem; border-radius: 3px; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; font-weight: 600; margin-bottom: 2rem; } .cta-final-title { font-size: clamp(2.8rem, 5.5vw, 5.5rem); line-height: 1.08; margin-bottom: 1.5rem; } .cta-final-title em { background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; animation: gradientShift 3.5s linear infinite; } .cta-final-desc { font-size: 1.05rem; color: var(--texte-muted); line-height: 1.8; max-width: 540px; margin: 0 auto 3rem; } .cta-final-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 2rem; } .btn-ghost-light { display: inline-block; background: transparent; color: var(--texte-muted); border: 1px solid var(--bord-2); padding: 0.7rem 1.8rem; border-radius: var(--radius); font-size: 0.88rem; font-weight: 500; cursor: pointer; transition: all var(--transition); } .btn-ghost-light:hover { color: var(--texte); background: rgba(255,255,255,0.03); } .cta-final-note { font-size: 0.85rem; color: var(--texte-dim); } .cta-note-link { color: var(--or); font-weight: 500; transition: opacity var(--transition); } .cta-note-link:hover { opacity: 0.75; } /* ================================================ STAGGER — Nouveaux éléments de grille ================================================ */ .dreamers-grid .dreamer-card[data-reveal] { transition-delay: var(--stagger, 0ms); } /* ================================================ RESPONSIVE — Nouveaux composants ================================================ */ @media (max-width: 1200px) { .dreamers-grid { grid-template-columns: repeat(2, 1fr); } .poles-showcase { grid-template-columns: repeat(3, 1fr); } .hs-panel { padding: 4rem 3rem; } } @media (max-width: 900px) { .hs-inner { flex-direction: column; min-height: auto; } .hs-panel { padding: 4rem 2rem 2.5rem; } .hs-left { border-right: none; border-bottom: 1px solid var(--bord); } .hs-right { align-items: flex-start; text-align: left; } .hs-sep { display: none; } .hs-poles-strip { justify-content: flex-start; } .hs-empire-btns { justify-content: flex-start; } .dreamers-grid { grid-template-columns: 1fr 1fr; } .social-door { grid-template-columns: 1fr; gap: 2.5rem; } .poles-showcase { grid-template-columns: repeat(2, 1fr); } .ep-grid { grid-template-columns: 1fr; } .ep-title-row { flex-direction: column; align-items: flex-start; } .gallery-container { height: 55vh; } .gslide-title { font-size: clamp(1.6rem, 6vw, 2.5rem); } .gslide-overlay { padding: 2rem 1.5rem; } .hs-stats { gap: 2rem; } } @media (max-width: 600px) { .hs-panel { padding: 3rem 1.2rem 2rem; } .hs-heading { font-size: clamp(1.8rem, 7vw, 2.6rem); } .hs-stats { gap: 1.2rem; } .hs-stat-sep { display: none; } .dreamers-grid { grid-template-columns: 1fr; } .social-door { padding: 2rem 1.5rem; } .sd-stats-mini { gap: 1rem; } .poles-showcase { grid-template-columns: repeat(2, 1fr); } .psc-card { padding: 1.8rem 1rem; } .gallery-container { height: 55vw; min-height: 280px; } .cta-final { padding: 5rem 0; } .cta-final-btns { flex-direction: column; align-items: center; } .cta-final-btns .btn, .cta-final-btns .btn-ghost-light { width: 100%; max-width: 300px; text-align: center; } } /* ================================================ ALLIANCE DES BÂTISSEURS — Horizontal scroll ================================================ */ .alliance-section { padding: 5rem 0 0; background: var(--fond); border-top: 1px solid var(--bord); overflow: hidden; } .alliance-head { margin-bottom: 2.5rem; } .alliance-card-badge { display: inline-flex; align-items: center; gap: 0.6rem; background: linear-gradient(135deg, rgba(245,200,66,0.12), rgba(245,200,66,0.04)); border: 1px solid var(--or-bord); border-radius: 999px; padding: 0.45rem 1.2rem 0.45rem 0.8rem; margin-bottom: 1.5rem; } .acb-icon { font-size: 1rem; line-height: 1; } .acb-text { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--or); } .alliance-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; } .alliance-head-row h2 { font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); color: var(--texte); line-height: 1.15; margin-bottom: 0.6rem; } .alliance-head-row h2 em { color: var(--or); font-style: normal; } .alliance-head-row p { font-size: 0.88rem; color: var(--texte-muted); line-height: 1.7; max-width: 480px; } .alliance-nav { display: flex; gap: 0.5rem; flex-shrink: 0; } .alliance-nav-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--fond-2); border: 1px solid var(--bord); color: var(--texte-muted); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s, border-color 0.2s, color 0.2s; } .alliance-nav-btn:hover { background: var(--or-bord); border-color: var(--or); color: var(--or); } /* Scrolling track */ .alliance-scroll-wrapper { position: relative; } .alliance-track { display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 0 2rem 2.5rem; /* start cards aligned with container left edge */ padding-left: max(2rem, calc((100vw - 1200px) / 2 + 2rem)); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .alliance-track::-webkit-scrollbar { display: none; } /* Individual card */ .acard { flex-shrink: 0; width: 280px; border-radius: var(--radius-lg); background: var(--fond-2); border: 1px solid var(--bord); scroll-snap-align: start; overflow: hidden; transition: border-color 0.3s, transform 0.3s; } .acard:hover { border-color: var(--or-bord); transform: translateY(-4px); } .acard-visual { height: 140px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Image optionnelle — couvre le fond dégradé quand présente */ .acard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; } /* Overlay sombre pour lisibilité du texte sur image */ .acard-visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.25) 60%, rgba(0,0,0,0.1) 100%); z-index: 1; pointer-events: none; } .acard-visual-deco { position: absolute; top: 0.5rem; left: 0.9rem; font-family: 'Syne', sans-serif; font-weight: 800; font-size: 3.5rem; color: rgba(255,255,255,0.18); line-height: 1; z-index: 2; } .acard-visual-icon { font-size: 2.8rem; z-index: 2; position: relative; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); } /* Visual backgrounds per card */ .av-fondation { background: linear-gradient(135deg, #0d1f38, #1a3a5c); } .av-equipe { background: linear-gradient(135deg, #1a1a2e, #2d2d4e); } .av-event-mod { background: linear-gradient(135deg, #1f0d10, #4a1020); } .av-office { background: linear-gradient(135deg, #0d200d, #1a401a); } .av-partenaire { background: linear-gradient(135deg, #20180a, #3d300f); } .av-gala { background: linear-gradient(135deg, #1f1200, #3d2800); } .av-app { background: linear-gradient(135deg, #0d0d22, #1a1a44); } .av-food { background: linear-gradient(135deg, #1a0d0d, #3d1515); } .av-style { background: linear-gradient(135deg, #1a0d1a, #3d1f3d); } .av-agri { background: linear-gradient(135deg, #0d1a0d, #1f3d1f); } .acard-info { padding: 1.1rem 1.1rem 1.3rem; } .acard-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; } /* Status badges */ .acard-status { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; } .acard-status.done { background: rgba(34, 197, 94, 0.12); color: #4ade80; border: 1px solid rgba(74, 222, 128, 0.2); } .acard-status.inprog { background: rgba(245, 200, 66, 0.12); color: var(--or); border: 1px solid var(--or-bord); } .acard-status.upcoming { background: rgba(148, 163, 184, 0.08); color: var(--texte-dim); border: 1px solid var(--bord); } .acard-pole-tag { font-size: 0.62rem; color: var(--texte-dim); letter-spacing: 0.5px; } .acard-name { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--texte); line-height: 1.25; margin-bottom: 0.45rem; } .acard-desc { font-size: 0.78rem; color: var(--texte-muted); line-height: 1.65; } /* Responsive */ @media (max-width: 600px) { .alliance-head-row { flex-direction: column; align-items: flex-start; gap: 1rem; } .alliance-nav { align-self: flex-start; } .acard { width: 240px; } .acard-visual { height: 110px; } } /* ================================================ COULEURS PAR PÔLE — Système identitaire Chaque pôle a sa couleur signature + glow ================================================ */ :root { --pole-event: #9b5de5; --pole-event-glow: rgba(155, 93, 229, 0.18); --pole-event-soft: rgba(155, 93, 229, 0.08); --pole-food: #f77f00; --pole-food-glow: rgba(247, 127, 0, 0.18); --pole-food-soft: rgba(247, 127, 0, 0.08); --pole-style: #e91e8c; --pole-style-glow: rgba(233, 30, 140, 0.18); --pole-style-soft: rgba(233, 30, 140, 0.08); --pole-tech: #0dcaf0; --pole-tech-glow: rgba(13, 202, 240, 0.18); --pole-tech-soft: rgba(13, 202, 240, 0.08); --pole-agri: #22c55e; --pole-agri-glow: rgba(34, 197, 94, 0.18); --pole-agri-soft: rgba(34, 197, 94, 0.08); --pole-invest: #afa9ec; --pole-invest-glow: rgba(175, 169, 236, 0.18); --pole-invest-soft: rgba(175, 169, 236, 0.08); } /* ================================================ NAVBAR MEGAMENU — Navigation Professionnelle ================================================ */ /* Wrapper dropdown dans nav-links */ .nav-dropdown { position: relative; } .nav-drop-trigger { display: flex; align-items: center; gap: 0.3rem; color: rgba(237, 232, 223, .75); font-size: 0.85rem; letter-spacing: 0.5px; cursor: pointer; transition: color var(--transition); } .nav-drop-trigger:hover, .nav-dropdown.open .nav-drop-trigger { color: #ede8df; } .nav-drop-trigger .drop-chevron { width: 12px; height: 12px; transition: transform 0.2s ease; flex-shrink: 0; opacity: 0.6; } .nav-dropdown.open .drop-chevron { transform: rotate(180deg); } /* Dropdown simple (Le Groupe) */ .nav-drop-menu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 210px; max-height: min(75vh, 520px); overflow-y: auto; background: var(--fond-3); border: 1px solid var(--bord-2); border-radius: var(--radius-lg); padding: 0.6rem; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 1100; box-shadow: 0 16px 40px rgba(0,0,0,0.5); } .nav-dropdown:hover .nav-drop-menu, .nav-dropdown.open .nav-drop-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .nav-drop-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; border-radius: var(--radius); color: var(--texte-muted); font-size: 0.83rem; transition: background 0.15s, color 0.15s; white-space: nowrap; } .nav-drop-menu a:hover { background: rgba(255,255,255,0.05); color: var(--texte); } .nav-drop-menu a .drop-icon { font-size: 0.9rem; opacity: 0.7; } .nav-drop-sep { height: 1px; background: var(--bord); margin: 0.4rem 0; } /* Le bouton "Se déconnecter" reste atteignable sans devoir parcourir tous les liens de rôles au-dessus (admin/organisateur peuvent en avoir une dizaine) — épinglé en bas de la liste déroulante, qui défile derrière lui. */ .nav-drop-sticky-bottom { position: sticky; bottom: -0.6rem; margin: 0.4rem -0.6rem -0.6rem; padding: 0.6rem; background: var(--fond-3); box-shadow: 0 -8px 12px -4px rgba(0,0,0,0.4); } /* Megamenu (Les Pôles) — 5 cartes */ .nav-megamenu { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(-6px); width: 620px; background: var(--fond-3); border: 1px solid var(--bord-2); border-radius: var(--radius-lg); padding: 1rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; opacity: 0; visibility: hidden; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; z-index: 1100; box-shadow: 0 16px 48px rgba(0,0,0,0.55); } .nav-dropdown:hover .nav-megamenu, .nav-dropdown.open .nav-megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Carte de pôle dans le megamenu */ .mega-pole-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0.85rem 0.5rem; border-radius: var(--radius); border: 1px solid var(--bord); transition: border-color 0.2s, background 0.2s; color: var(--texte-muted); gap: 0.4rem; } .mega-pole-card:hover { background: rgba(255,255,255,0.04); border-color: var(--pc, var(--or)); color: var(--texte); } .mega-pole-dot { width: 28px; height: 28px; border-radius: 50%; background: var(--pc-soft, var(--or-clair)); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; margin-bottom: 0.1rem; border: 1px solid var(--pc-glow, var(--or-bord)); } .mega-pole-name { font-family: 'Syne', sans-serif; font-size: 0.72rem; font-weight: 700; color: var(--texte); line-height: 1.2; } .mega-pole-tag { font-size: 0.62rem; color: var(--texte-dim); line-height: 1.3; } /* Bouton "Tous les pôles" en bas du megamenu */ .nav-megamenu-footer { grid-column: 1 / -1; border-top: 1px solid var(--bord); margin-top: 0.3rem; padding-top: 0.65rem; display: flex; justify-content: center; } .nav-megamenu-footer a { font-size: 0.75rem; color: var(--or); display: flex; align-items: center; gap: 0.4rem; } .nav-megamenu-footer a:hover { text-decoration: underline; } /* ---- Pôles strip — toujours visible dans la navbar ---- */ .nav-poles-strip { display: flex; align-items: center; gap: 0; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,.14); border-radius: 2rem; padding: 0.16rem 0.4rem 0.16rem 0; transition: border-color 0.22s, background 0.22s; } .nav-poles-group:hover .nav-poles-strip { border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); } .nav-poles-group.open .nav-poles-strip { border-color: #f0c040; } .nav-poles-header { font-size: 0.68rem !important; font-weight: 700; font-family: 'Syne', sans-serif; letter-spacing: 1.4px !important; text-transform: uppercase; color: rgba(237, 232, 223, .55) !important; padding: 0.28rem 0.55rem 0.28rem 0.7rem; border-right: 1px solid rgba(255,255,255,.08); margin-right: 0.15rem; white-space: nowrap; text-decoration: none !important; transition: color 0.2s; } .nav-poles-group:hover .nav-poles-header, .nav-poles-group.open .nav-poles-header { color: #ede8df !important; } .nav-poles-header .drop-chevron { opacity: 0.45; width: 10px; height: 10px; } .nav-pole-pill { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.48rem; border-radius: 2rem; font-size: 0.7rem; font-weight: 600; color: rgba(237, 232, 223, .55); transition: color 0.18s, background 0.18s; white-space: nowrap; text-decoration: none !important; letter-spacing: 0.15px; } .nav-pole-pill:hover { color: var(--pc); background: rgba(255,255,255,0.07); } .nav-pole-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); flex-shrink: 0; transition: box-shadow 0.2s, transform 0.2s; } .nav-pole-pill:hover .pill-dot { box-shadow: 0 0 8px var(--pc); transform: scale(1.3); } /* * La navbar desktop n'avait jusqu'ici aucun palier entre le plein affichage * et le hamburger mobile (900px) : la bande des 6 pôles en ligne pouvait * déjà pousser "S'inscrire" hors champ dès des largeurs d'ordinateur portable * courantes (1366px). On masque les puces de pôle avant ce point de rupture, * en gardant le déclencheur "PÔLES ▾" (le mega-menu complet reste accessible * au survol/clic). Placé APRÈS la définition de base de .nav-pole-pill pour * gagner la cascade à spécificité égale. */ @media (max-width: 1480px) { .nav-pole-pill { display: none; } .nav-poles-header { border-right: none; margin-right: 0; } } /* ================================================ LANDING PAGES — Structure commune par pôle ================================================ */ /* HERO PÔLE */ .pole-hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; background: var(--fond); } .pole-hero-bg { position: absolute; inset: 0; pointer-events: none; background-image: var(--hero-img, none); background-size: cover; background-position: center 30%; } .pole-hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,8,16,0.92) 0%, rgba(10,8,16,0.62) 50%, rgba(10,8,16,0.22) 100%), radial-gradient(ellipse at 20% 50%, var(--pc-glow, var(--or-clair)) 0%, transparent 55%), radial-gradient(ellipse at 80% 30%, var(--pc-soft, transparent) 0%, transparent 50%); } .pole-hero-deco-g { position: absolute; right: -60px; top: 50%; transform: translateY(-50%); font-family: 'Syne', sans-serif; font-size: clamp(28vw, 40vw, 50vw); font-weight: 800; color: var(--pc-soft, rgba(255,255,255,0.015)); opacity: 0.35; line-height: 1; pointer-events: none; user-select: none; letter-spacing: -0.05em; } .pole-hero-content { position: relative; z-index: 2; width: 100%; padding: 8rem 0 6rem; } /* * .pole-label / .pole-h1 / .pole-tagline / .pole-sub vivent toujours dans * .pole-hero, dont le fond photo est fixé sombre en permanence (cf. * .pole-hero-bg::after ci-dessus) quel que soit le thème du site — leur * texte reste donc en clair fixe plutôt que de suivre --texte/--or, qui eux * s'adaptent au thème pour le reste du site. --pc n'est pas concerné : les * couleurs de pôle restent identiques dans les deux thèmes. */ .pole-label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--pc, #f0c040); margin-bottom: 1.2rem; font-weight: 600; } .pole-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc, #f0c040); } .pole-h1 { font-size: clamp(2.4rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #ede8df; margin-bottom: 1.2rem; } .pole-h1 em { color: var(--pc, #f0c040); font-style: normal; } .pole-tagline { font-size: clamp(1.1rem, 2vw, 1.4rem); color: rgba(237, 232, 223, .78); max-width: 540px; margin-bottom: 0.8rem; line-height: 1.5; } .pole-sub { font-size: 0.95rem; color: rgba(237, 232, 223, .6); max-width: 480px; margin-bottom: 2.4rem; line-height: 1.75; } .pole-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-pole { background: var(--pc, var(--or)); color: #0a0a0a; font-weight: 700; padding: 0.85rem 2rem; border-radius: var(--radius); font-size: 0.9rem; transition: opacity 0.2s, transform 0.2s; display: inline-block; } .btn-pole:hover { opacity: 0.88; transform: translateY(-2px); } /* Badge de statut (coin bas gauche du hero) */ .pole-status { position: absolute; bottom: 2.5rem; left: 0; right: 0; z-index: 2; } .pole-status-inner { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.73rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600; padding: 0.4rem 1rem; border-radius: 999px; border: 1px solid; } .pole-status-inner.live { color: #4ade80; border-color: rgba(74, 222, 128, 0.3); background: rgba(34, 197, 94, 0.08); } .pole-status-inner.building { color: #f0c040; border-color: rgba(240, 192, 64, .3); background: rgba(240, 192, 64, .1); } .pole-status-inner.project { color: rgba(237, 232, 223, .55); border-color: rgba(255, 255, 255, .14); background: rgba(255,255,255,0.03); } .pole-status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: statusPulse 2s infinite; } /* SECTION IDENTITÉ DU PÔLE */ .pole-identity { padding: 7rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); } .pole-identity-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .pole-identity-text h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1.2rem; line-height: 1.2; } .pole-identity-text h2 em { color: var(--pc, var(--or)); font-style: normal; } .pole-identity-text p { font-size: 1.02rem; line-height: 1.85; margin-bottom: 1.5rem; } .pole-identity-visual { display: flex; flex-direction: column; gap: 1rem; } .pole-stat-box { display: flex; gap: 1.2rem; align-items: center; padding: 1.2rem 1.5rem; background: var(--fond-3); border-radius: var(--radius-lg); border: 1px solid var(--bord); transition: border-color 0.2s; } .pole-stat-box:hover { border-color: var(--pc-glow, var(--or-bord)); } .pole-stat-icon { font-size: 1.6rem; flex-shrink: 0; } .pole-stat-val { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 800; color: var(--pc, var(--or)); line-height: 1; } .pole-stat-label { font-size: 0.8rem; color: var(--texte-muted); margin-top: 0.15rem; } /* SECTION SERVICES */ .pole-services { padding: 7rem 0; } .pole-services-header { margin-bottom: 3.5rem; } .pole-services-header h2 { font-size: clamp(2rem, 4vw, 3rem); margin-top: 0.5rem; } .pole-services-header h2 em { color: var(--pc, var(--or)); font-style: normal; } .pole-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } @media (min-width: 900px) { .pole-services-grid { grid-template-columns: repeat(4, 1fr); } } .ps-card { padding: 1.8rem 1.5rem; background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); transition: border-color 0.2s, background 0.2s, transform 0.2s; } .ps-card:hover { border-color: var(--pc-glow, var(--or-bord)); background: var(--fond-3); transform: translateY(-3px); } .ps-icon { font-size: 1.8rem; margin-bottom: 1rem; display: block; } .ps-card h3 { font-size: 1.0rem; margin-bottom: 0.6rem; color: var(--texte); } .ps-card p { font-size: 0.83rem; line-height: 1.7; color: var(--texte-muted); } /* SECTION COMING SOON (pôles en construction) */ .pole-coming { padding: 7rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); text-align: center; } .pole-coming-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--or); border: 1px solid var(--or-bord); border-radius: 999px; padding: 0.4rem 1.1rem; margin-bottom: 1.8rem; background: var(--or-clair); font-weight: 600; } .pole-coming h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: 1rem; max-width: 620px; margin-left: auto; margin-right: auto; line-height: 1.25; } .pole-coming h2 em { color: var(--pc, var(--or)); font-style: normal; } .pole-coming > .container > p { font-size: 1rem; max-width: 520px; margin: 0 auto 2.5rem; line-height: 1.8; color: var(--texte-muted); } .pole-coming-steps { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-top: 3rem; } .pcs-step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 1.6rem; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); min-width: 150px; } .pcs-num { font-family: 'Syne', sans-serif; font-size: 1.6rem; font-weight: 800; color: var(--pc, var(--or)); } .pcs-label { font-size: 0.78rem; color: var(--texte-muted); text-align: center; } /* SECTION CTA FINALE */ .pole-cta-section { padding: 6rem 0; text-align: center; position: relative; overflow: hidden; } .pole-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at center, var(--pc-soft, var(--or-clair)) 0%, transparent 65%); pointer-events: none; } .pole-cta-section h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 1rem; position: relative; z-index: 1; } .pole-cta-section h2 em { color: var(--pc, var(--or)); font-style: normal; } .pole-cta-section p { font-size: 1rem; max-width: 480px; margin: 0 auto 2rem; position: relative; z-index: 1; } .pole-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* Breadcrumb pôle */ .pole-breadcrumb { padding: 0.9rem 0; border-bottom: 1px solid var(--bord); background: var(--fond-2); } .pole-bc-inner { display: flex; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--texte-dim); } .pole-bc-inner a { color: var(--texte-dim); transition: color var(--transition); } .pole-bc-inner a:hover { color: var(--texte); } .pole-bc-sep { opacity: 0.4; } .pole-bc-current { color: var(--pc, var(--or)); font-weight: 600; } /* Responsive landing pages */ @media (max-width: 768px) { .pole-h1 { font-size: clamp(2rem, 8vw, 2.8rem); } .pole-identity-inner { grid-template-columns: 1fr; gap: 2.5rem; } .pole-hero-deco-g { display: none; } .pole-actions { flex-direction: column; } .pole-actions .btn { width: 100%; text-align: center; } .pole-coming-steps { flex-direction: column; align-items: center; } } /* ================================================ MOBILE MENU — Mise à jour pour les dropdowns ================================================ */ .mobile-menu-section { font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--texte-dim); padding: 0.3rem 0; margin-top: 0.5rem; } .mobile-menu-poles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin: 0.5rem 0; } .mm-pole-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.8rem; background: var(--fond-4); border: 1px solid var(--bord); border-radius: var(--radius); color: var(--texte-muted); font-size: 0.8rem; font-weight: 500; transition: border-color 0.2s, color 0.2s; } .mm-pole-card:hover { color: var(--texte); border-color: var(--pc, var(--or)); } .mm-pole-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pc, var(--or)); flex-shrink: 0; } /* ================================================ MEGAMENU — Responsive (tablet/mobile) Sur petits écrans, le megamenu est désactivé, on utilise le mobile-menu à la place. ================================================ */ @media (max-width: 900px) { .nav-dropdown .nav-drop-menu, .nav-dropdown .nav-megamenu { display: none !important; } } /* ================================================================ GBONHI EVENT — VITRINE INSTITUTIONNELLE Styles pour la landing page /event (pole-event.blade.php) ================================================================ */ /* Types d'événements — grille 3x2 */ .ev-types-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; } @media (max-width: 768px) { .ev-types-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ev-types-grid { grid-template-columns: 1fr; } } .ev-type-card { position: relative; padding: 2.5rem 2rem; background: var(--fond-2); border-right: 1px solid var(--bord); border-bottom: 1px solid var(--bord); transition: background 0.25s; overflow: hidden; } .ev-type-card:nth-child(3n) { border-right: none; } .ev-type-card:nth-last-child(-n+3) { border-bottom: none; } .ev-type-card:hover { background: var(--fond-3); box-shadow: 0 0 28px rgba(142,68,173,.18); } .ev-type-card:hover .ev-type-glow { opacity: 1; } .ev-type-glow { position: absolute; inset: 0; background: var(--type-color, var(--or-clair)); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .ev-type-icon { display: block; width: 2rem; height: 2rem; margin-bottom: 1.1rem; position: relative; z-index: 1; color: #D4AF37; } .ev-type-icon svg { display: block; width: 100%; height: 100%; } .ev-type-name { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--texte); margin-bottom: 0.4rem; position: relative; z-index: 1; } .ev-type-desc { font-size: 0.8rem; color: var(--texte-dim); line-height: 1.6; position: relative; z-index: 1; } .ev-type-arrow { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1rem; color: var(--texte-dim); opacity: 0; transform: translateX(-6px); transition: opacity 0.2s, transform 0.2s; z-index: 1; } .ev-type-card:hover .ev-type-arrow { opacity: 1; transform: translateX(0); } /* Piliers de différenciation */ .ev-pillars-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; } @media (max-width: 900px) { .ev-pillars-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 500px) { .ev-pillars-grid { grid-template-columns: 1fr; } } .ev-pillar { padding: 2rem 1.6rem; background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); transition: border-color 0.2s, transform 0.2s; } .ev-pillar:hover { border-color: var(--or-bord); transform: translateY(-3px); } .ev-pillar-num { font-family: 'Syne', sans-serif; font-size: 2.5rem; font-weight: 800; color: var(--or-bord); line-height: 1; margin-bottom: 0.8rem; } .ev-pillar-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--texte); margin-bottom: 0.5rem; } .ev-pillar-desc { font-size: 0.82rem; color: var(--texte-muted); line-height: 1.7; } /* Process steps */ .ev-process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; } @media (max-width: 700px) { .ev-process-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } } .ev-process-line { position: absolute; top: 28px; left: calc(12.5% + 16px); right: calc(12.5% + 16px); height: 1px; background: var(--bord-2); z-index: 0; } @media (max-width: 700px) { .ev-process-line { display: none; } } .ev-step { text-align: center; padding: 0 1rem; position: relative; z-index: 1; } .ev-step-num { width: 56px; height: 56px; border-radius: 50%; background: var(--fond-3); border: 2px solid var(--or-bord); display: flex; align-items: center; justify-content: center; font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 800; color: var(--or); margin: 0 auto 1rem; transition: background 0.2s, border-color 0.2s; } .ev-step:hover .ev-step-num { background: var(--or-clair); border-color: var(--or); } .ev-step-title { font-family: 'Syne', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--texte); margin-bottom: 0.4rem; } .ev-step-desc { font-size: 0.78rem; color: var(--texte-muted); line-height: 1.6; } /* Tech advantage section */ .ev-tech-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 700px) { .ev-tech-grid { grid-template-columns: repeat(4, 1fr); } } .ev-tech-item { display: flex; gap: 0.8rem; align-items: flex-start; padding: 1.2rem; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); transition: border-color 0.2s; } .ev-tech-item:hover { border-color: var(--pole-event); box-shadow: 0 0 18px rgba(142,68,173,.14); } .ev-tech-icon { width: 1.5rem; height: 1.5rem; flex-shrink: 0; color: #D4AF37; } .ev-tech-icon svg { display: block; width: 100%; height: 100%; } .ev-tech-label { font-size: 0.82rem; font-weight: 600; color: var(--texte); line-height: 1.4; } .ev-tech-sub { font-size: 0.72rem; color: var(--texte-dim); margin-top: 0.2rem; } /* Organisateur CTA section */ .ev-org-box { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; background: var(--fond-2); border: 1px solid var(--bord-2); border-radius: var(--radius-lg); padding: 2.5rem 2rem; align-items: center; } @media (max-width: 680px) { .ev-org-box { grid-template-columns: 1fr; text-align: center; } } /* ================================================================ POLE EVENT — TABS Agency / Drops ================================================================ */ .ev-tabs-nav { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--bord); margin-bottom: 2.5rem; } .ev-tab { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.85rem 1.6rem; background: transparent; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; text-align: left; transition: border-color 0.2s; } .ev-tab-label { font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--texte-muted); transition: color 0.2s; } .ev-tab-sub { font-size: 0.7rem; color: var(--texte-dim); } .ev-tab:hover .ev-tab-label { color: var(--texte); } .ev-tab-active .ev-tab-label { color: var(--pole-event) !important; } .ev-tab-active { border-bottom-color: var(--pole-event); } /* Drops grid */ .ev-drops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } @media (max-width: 800px) { .ev-drops-grid { grid-template-columns: 1fr; } } .ev-drop-card { border-radius: var(--radius-lg); padding: 2rem 1.8rem; border: 1px solid var(--bord); background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 0.55rem; transition: border-color 0.25s; } .ev-drop-past { border-color: rgba(155,93,229,0.3); } .ev-drop-next { border-color: rgba(245,200,66,0.3); background: rgba(245,200,66,0.025); } .ev-drop-mystery { border-style: dashed; border-color: var(--bord-2); } .ev-drop-edition { font-size: 0.65rem; letter-spacing: 3px; text-transform: uppercase; color: var(--texte-dim); font-weight: 600; } .ev-drop-name { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; color: var(--texte); line-height: 1; letter-spacing: -0.02em; } .ev-drop-next .ev-drop-name { color: var(--or); } .ev-drop-mystery .ev-drop-name { color: var(--texte-dim); } .ev-drop-desc { font-size: 0.85rem; color: var(--texte-muted); line-height: 1.65; flex: 1; margin-top: 0.4rem; } .ev-drop-status { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.5px; border-radius: 99px; padding: 0.3rem 0.75rem; margin-top: 0.5rem; width: fit-content; } .ev-drop-status-sold { background: rgba(155,93,229,0.12); color: rgba(155,93,229,0.85); } .ev-drop-status-coming { background: rgba(245,200,66,0.12); color: #f5c842; } .ev-drop-status-locked { background: rgba(255,255,255,0.05); color: var(--texte-dim); } /* ================================================================ POLE EVENT — MUR DE LA FERVEUR ================================================================ */ .ev-ferveur-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 240px 240px; gap: 0.75rem; } @media (max-width: 900px) { .ev-ferveur-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: 200px 200px 200px; } .ev-ferveur-tall { grid-row: span 1; } .ev-ferveur-wide { grid-column: span 2; } } @media (max-width: 540px) { .ev-ferveur-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, 180px); } .ev-ferveur-wide { grid-column: span 1; } } .ev-ferveur-cell { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--fond-3); border: 1px solid var(--bord); } .ev-ferveur-tall { grid-row: span 2; } .ev-ferveur-wide { grid-column: span 2; } .ev-ferveur-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,0.72) 0%, transparent 55%); z-index: 1; pointer-events: none; } .ev-ferveur-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--fond-3) 0%, var(--fond-4, #161616) 100%); } .ev-ferveur-letter { font-family: 'Syne', sans-serif; font-size: 8rem; font-weight: 800; color: rgba(155,93,229,0.1); line-height: 1; user-select: none; } .ev-ferveur-caption { position: absolute; bottom: 0.85rem; left: 1rem; z-index: 2; font-size: 0.7rem; color: rgba(255,255,255,0.5); letter-spacing: 1px; } /* ================================================================ ÉVÉNEMENTS — CATALOGUE (events/index.blade.php) ================================================================ */ /* Mini hero du catalogue */ .evcat-hero { padding: 5rem 0 3.5rem; text-align: center; border-bottom: 1px solid var(--bord); background: var(--fond-2); } .evcat-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); } .evcat-hero h1 em { color: var(--pole-event); font-style: normal; } .evcat-hero p { max-width: 480px; margin: 0.8rem auto 0; } /* Filter tabs */ .evcat-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1.5rem 0; border-bottom: 1px solid var(--bord); } .evcat-filter-btn { padding: 0.45rem 1.1rem; border-radius: 999px; border: 1px solid var(--bord-2); font-size: 0.8rem; color: var(--texte-muted); background: transparent; cursor: pointer; transition: all 0.18s; font-family: 'DM Sans', sans-serif; } .evcat-filter-btn:hover, .evcat-filter-btn.active { background: var(--pole-event); border-color: var(--pole-event); color: #0a0a0a; font-weight: 600; } /* Cards catalogue */ .evcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; padding: 2.5rem 0; } .evcat-card { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s, transform 0.25s; display: block; color: inherit; } .evcat-card:hover { border-color: rgba(142,68,173,.7); transform: translateY(-4px); box-shadow: 0 0 32px rgba(142,68,173,.28), 0 8px 28px rgba(0,0,0,.35); } .evcat-card-img { position: relative; height: 210px; overflow: hidden; background: var(--fond-3); } .evcat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .evcat-card:hover .evcat-card-img img { transform: scale(1.05); } .evcat-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background: radial-gradient(ellipse at center, var(--pole-event-glow) 0%, transparent 70%); } .evcat-card-type-badge { position: absolute; top: 0.8rem; left: 0.8rem; /* Fond toujours sombre (photo dessous) : texte fixé clair, pas var(--texte). */ background: rgba(10,10,10,0.8); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.65rem; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #ede8df; backdrop-filter: blur(6px); } .evcat-card-body { padding: 1.4rem; } .evcat-card-date { font-size: 0.72rem; color: var(--pole-event); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 0.5rem; font-weight: 600; } .evcat-card-title { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--texte); margin-bottom: 0.5rem; line-height: 1.3; } .evcat-card-loc { font-size: 0.78rem; color: var(--texte-muted); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 1rem; } .evcat-card-prices { display: flex; flex-wrap: wrap; gap: 0.4rem; padding-top: 0.8rem; border-top: 1px solid var(--bord); } .evcat-cat-pill { font-size: 0.7rem; padding: 0.2rem 0.6rem; border-radius: 999px; border: 1px solid var(--bord-2); color: var(--texte-muted); white-space: nowrap; } /* Empty state */ .evcat-empty { text-align: center; padding: 6rem 2rem; color: var(--texte-muted); } .evcat-empty-icon { font-size: 4rem; margin-bottom: 1.2rem; display: block; } .evcat-empty h3 { font-size: 1.3rem; color: var(--texte); margin-bottom: 0.5rem; } /* ================================================================ ÉVÉNEMENT DÉTAIL (events/show.blade.php) ================================================================ */ /* Hero affiche */ .ev-show-hero { position: relative; height: clamp(420px, 60vh, 680px); overflow: hidden; background: var(--fond-3); } .ev-show-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; } .ev-show-hero-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.15) 30%, rgba(10,10,10,0.7) 70%, rgba(10,10,10,0.97) 100% ); } .ev-show-hero-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2.5rem; z-index: 2; } .ev-show-hero-type { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--pole-event); font-weight: 600; margin-bottom: 0.8rem; } .ev-show-title { font-family: 'Syne', sans-serif; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 1rem; text-shadow: 0 2px 20px rgba(0,0,0,0.4); } .ev-show-hero-meta { display: flex; flex-wrap: wrap; gap: 1.2rem; } .ev-show-hero-meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: rgba(255,255,255,0.75); } .ev-show-hero-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 6rem; background: radial-gradient(ellipse at center, var(--pole-event-glow) 0%, var(--fond-3) 70%); } /* Layout 2 colonnes */ .ev-show-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2.5rem; align-items: start; padding: 3rem 0 5rem; } @media (max-width: 960px) { .ev-show-layout { grid-template-columns: 1fr; } } /* Contenu gauche */ .ev-show-main {} .ev-show-section { padding: 1.8rem 0; border-bottom: 1px solid var(--bord); } .ev-show-section:last-child { border-bottom: none; } .ev-show-section-title { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--texte); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .ev-show-section-title::before { content: ''; width: 3px; height: 1em; background: var(--pole-event); border-radius: 2px; flex-shrink: 0; } .ev-show-desc { font-size: 0.95rem; line-height: 1.9; color: var(--texte-muted); } .ev-show-program { display: flex; flex-direction: column; gap: 0.6rem; } .ev-program-line { display: flex; gap: 0.8rem; align-items: baseline; } .ev-program-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pole-event); flex-shrink: 0; margin-top: 0.45em; } .ev-program-text { font-size: 0.9rem; color: var(--texte-muted); } /* Colonne droite — Booking card */ .ev-show-sidebar {} .ev-booking-card { position: sticky; top: 80px; background: var(--fond-2); border: 1px solid var(--bord-2); border-radius: var(--radius-lg); overflow: hidden; } .ev-booking-header { padding: 1.4rem 1.6rem; border-bottom: 1px solid var(--bord); display: flex; justify-content: space-between; align-items: center; } .ev-booking-from { font-size: 0.7rem; color: var(--texte-dim); text-transform: uppercase; letter-spacing: 1px; } .ev-booking-price { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--texte); } .ev-booking-price span { font-size: 0.75rem; font-family: 'DM Sans', sans-serif; color: var(--texte-dim); font-weight: 400; } .ev-booking-body { padding: 1.4rem 1.6rem; } .ev-booking-date { display: flex; gap: 0.5rem; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid var(--bord); margin-bottom: 1.2rem; font-size: 0.85rem; color: var(--texte-muted); } /* Category radio options */ .ev-cat-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border: 1.5px solid var(--bord); border-radius: var(--radius); cursor: pointer; transition: border-color 0.18s, background 0.18s; margin-bottom: 0.5rem; } .ev-cat-option.selected { border-color: var(--pole-event); background: var(--pole-event-soft); } .ev-cat-option.disabled { opacity: 0.4; cursor: not-allowed; } .ev-cat-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--bord-2); flex-shrink: 0; transition: border-color 0.18s; position: relative; } .ev-cat-option.selected .ev-cat-radio { border-color: var(--pole-event); } .ev-cat-option.selected .ev-cat-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--pole-event); } .ev-cat-info { flex: 1; } .ev-cat-name { font-size: 0.88rem; font-weight: 600; color: var(--texte); } .ev-cat-sub { font-size: 0.72rem; color: var(--texte-dim); margin-top: 0.1rem; } .ev-cat-price { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--texte); } .ev-cat-avail { font-size: 0.65rem; color: var(--texte-dim); text-align: right; margin-top: 0.15rem; } .ev-cat-avail.low { color: #f59e0b; } .ev-cat-avail.sold { color: #ef4444; } /* Quantité */ .ev-qty-row { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; border-top: 1px solid var(--bord); margin-top: 0.5rem; } .ev-qty-label { font-size: 0.85rem; color: var(--texte-muted); } .ev-qty-ctrl { display: flex; align-items: center; gap: 0.8rem; } .ev-qty-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--bord-2); background: var(--fond-3); color: var(--texte); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s; line-height: 1; } .ev-qty-btn:hover { border-color: var(--or); color: var(--or); } .ev-qty-val { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 1.1rem; min-width: 24px; text-align: center; } /* Total */ .ev-total-row { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 0; border-top: 1px solid var(--bord); } .ev-total-label { font-size: 0.88rem; color: var(--texte-muted); } .ev-total-amount { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--or); } /* Boutons de paiement */ .ev-pay-cinetpay { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.95rem; background: var(--pole-event); color: #fff; border: none; border-radius: var(--radius); font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.2s; margin-top: 0.8rem; } .ev-pay-cinetpay:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); } .ev-pay-cinetpay:disabled { opacity: 0.45; cursor: not-allowed; } .ev-pay-whatsapp { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.95rem; background: #25d366; color: #fff; border: none; border-radius: var(--radius); font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.2s; margin-top: 0.8rem; text-decoration: none; } .ev-pay-whatsapp:hover { opacity: 0.9; transform: translateY(-1px); color: #fff; } .ev-pay-divider { display: flex; align-items: center; gap: 0.8rem; margin: 0.6rem 0; font-size: 0.72rem; color: var(--texte-dim); } .ev-pay-divider::before, .ev-pay-divider::after { content: ''; flex: 1; height: 1px; background: var(--bord); } /* Auth gate */ .ev-auth-gate { text-align: center; padding: 1.5rem 0; } .ev-auth-gate p { font-size: 0.88rem; margin-bottom: 1rem; } /* Infos pratiques (bas de la booking card) */ .ev-booking-footer { padding: 1rem 1.6rem; background: var(--fond-3); border-top: 1px solid var(--bord); font-size: 0.73rem; color: var(--texte-dim); display: flex; flex-direction: column; gap: 0.4rem; } .ev-booking-footer-item { display: flex; align-items: center; gap: 0.5rem; } /* Countdown timer */ .ev-countdown { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; } .ev-cd-block { text-align: center; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius); padding: 0.5rem 0.7rem; min-width: 52px; } .ev-cd-num { font-family: 'Syne', sans-serif; font-size: 1.4rem; font-weight: 800; color: var(--texte); line-height: 1; } .ev-cd-label { font-size: 0.6rem; color: var(--texte-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 0.2rem; } .ev-cd-sep { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 800; color: var(--texte-dim); padding-bottom: 0.5rem; } /* ================================================================ ADMIN ORGANISATEUR — Création d'événement ================================================================ */ .ev-admin-layout { max-width: 960px; margin: 0 auto; padding: 3rem 2rem; } .ev-admin-title { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; margin-bottom: 0.4rem; } .ev-admin-title em { color: var(--pole-event); font-style: normal; } .ev-admin-sub { color: var(--texte-muted); font-size: 0.92rem; margin-bottom: 2.5rem; } .ev-form-section { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 2rem; margin-bottom: 1.5rem; } .ev-form-section-title { font-family: 'Syne', sans-serif; font-size: 0.95rem; font-weight: 700; color: var(--texte); margin-bottom: 1.4rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--bord); display: flex; align-items: center; gap: 0.5rem; } .ev-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } @media (max-width: 600px) { .ev-form-grid-2 { grid-template-columns: 1fr; } } .ev-form-group { display: flex; flex-direction: column; gap: 0.4rem; } .ev-form-label { font-size: 0.8rem; font-weight: 600; color: var(--texte-muted); letter-spacing: 0.3px; } .ev-form-label span { color: #ef4444; } .ev-form-input, .ev-form-select, .ev-form-textarea { background: var(--fond-3); border: 1px solid var(--bord-2); border-radius: var(--radius); padding: 0.7rem 0.9rem; color: var(--texte); font-family: 'DM Sans', sans-serif; font-size: 0.9rem; transition: border-color 0.18s; width: 100%; } .ev-form-input:focus, .ev-form-select:focus, .ev-form-textarea:focus { outline: none; border-color: var(--pole-event); } .ev-form-textarea { resize: vertical; min-height: 100px; } .ev-form-select option { background: var(--fond-3); } .ev-form-hint { font-size: 0.72rem; color: var(--texte-dim); margin-top: 0.15rem; } .ev-form-input[type="file"] { padding: 0.5rem; } /* Catégorie de tickets dans le formulaire */ .ev-cat-form-block { border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 1.2rem; background: var(--fond-3); position: relative; } .ev-cat-form-block + .ev-cat-form-block { margin-top: 0.8rem; } .ev-cat-remove-btn { position: absolute; top: 0.8rem; right: 0.8rem; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2); color: #ef4444; border-radius: var(--radius); padding: 0.2rem 0.6rem; font-size: 0.72rem; cursor: pointer; transition: background 0.15s; } .ev-cat-remove-btn:hover { background: rgba(239,68,68,0.2); } /* Bouton ajouter catégorie */ .ev-add-cat-btn { display: flex; align-items: center; gap: 0.5rem; border: 1px dashed var(--bord-2); background: transparent; color: var(--texte-dim); border-radius: var(--radius); padding: 0.7rem 1rem; font-size: 0.85rem; cursor: pointer; width: 100%; transition: border-color 0.18s, color 0.18s; font-family: 'DM Sans', sans-serif; margin-top: 0.8rem; } .ev-add-cat-btn:hover { border-color: var(--pole-event); color: var(--pole-event); } /* Submit bar */ .ev-form-submit-bar { display: flex; gap: 1rem; justify-content: flex-end; align-items: center; padding: 1.5rem 2rem; background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); position: sticky; bottom: 1.5rem; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } @media (max-width: 600px) { .ev-show-hero { height: clamp(300px, 50vw, 420px); } .ev-show-hero-content { padding: 1.5rem; } .ev-show-title { font-size: clamp(1.4rem, 6vw, 2rem); } .ev-show-layout { padding: 2rem 0; } .ev-booking-card { position: static; } } /* ==================================================== HOMEPAGE — Refonte experte (hx-*) Structure : Hero · Pôles · Événements · Vision · Participer · CTA ==================================================== */ /* --- Keyframes propres à la homepage --- */ @keyframes goldShine { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } @keyframes hxDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.7); } } @keyframes hxScene { 0% { opacity: 0; } 4% { opacity: 1; } 16% { opacity: 1; } 20%, 100% { opacity: 0; } } /* Slides atmosphériques — diaporama CSS sans JS */ .hx-scene { position: absolute; inset: 0; opacity: 0; animation: hxScene 25s linear infinite; } .hx-scene:nth-child(1) { animation-delay: 0s; } .hx-scene:nth-child(2) { animation-delay: 5s; } .hx-scene:nth-child(3) { animation-delay: 10s; } .hx-scene:nth-child(4) { animation-delay: 15s; } .hx-scene:nth-child(5) { animation-delay: 20s; } /* Event — nuit sélective, halos violets et or */ .hx-scene--event { background-image: radial-gradient(ellipse 80% 65% at 28% 65%, rgba(155,93,229,.38) 0%, transparent 100%), radial-gradient(ellipse 55% 45% at 78% 22%, rgba(240,192,64,.20) 0%, transparent 100%), linear-gradient(to bottom, rgba(8,6,12,.78) 0%, rgba(8,6,12,.36) 50%, rgba(8,6,12,.72) 100%), url('/images/event-hero-banner.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Food — chaleur culinaire ambre-or */ .hx-scene--food { background-image: radial-gradient(ellipse 75% 65% at 48% 72%, rgba(220,120,40,.36) 0%, transparent 100%), radial-gradient(ellipse 50% 40% at 80% 22%, rgba(240,175,55,.20) 0%, transparent 100%), linear-gradient(to bottom, rgba(10,5,0,.78) 0%, rgba(10,5,0,.36) 50%, rgba(10,5,0,.72) 100%), url('/images/food-hero-banner.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Mode — satin magenta, haute couture */ .hx-scene--style { background-image: radial-gradient(ellipse 65% 60% at 62% 52%, rgba(220,80,140,.34) 0%, transparent 100%), radial-gradient(ellipse 50% 40% at 22% 22%, rgba(180,50,100,.20) 0%, transparent 100%), linear-gradient(to bottom, rgba(10,4,7,.78) 0%, rgba(10,4,7,.36) 50%, rgba(10,4,7,.72) 100%), url('/images/mode-hero-banner.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Tech — interface électrique cyan-indigo */ .hx-scene--tech { background-image: radial-gradient(ellipse 70% 60% at 50% 42%, rgba(0,210,230,.32) 0%, transparent 100%), radial-gradient(ellipse 50% 40% at 18% 78%, rgba(40,80,255,.20) 0%, transparent 100%), linear-gradient(to bottom, rgba(2,8,12,.78) 0%, rgba(2,8,12,.36) 50%, rgba(2,8,12,.72) 100%), url('/images/tech-hero-banner.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Agri — émeraude du matin, cacao et serres */ .hx-scene--agri { background-image: radial-gradient(ellipse 70% 65% at 50% 68%, rgba(0,180,100,.34) 0%, transparent 100%), radial-gradient(ellipse 50% 40% at 78% 18%, rgba(100,220,80,.18) 0%, transparent 100%), linear-gradient(to bottom, rgba(2,10,5,.78) 0%, rgba(2,10,5,.36) 50%, rgba(2,10,5,.72) 100%), url('/images/agri-hero-banner.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* ---- 01. HERO ---- */ .hx-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 8rem 1.5rem 5rem; text-align: center; } /* Fond : double lueur + grille */ .hx-hero-bg { position: absolute; inset: 0; pointer-events: none; } .hx-bg-glow-tl { position: absolute; top: -20%; left: -10%; width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse, rgba(212,175,55,.09) 0%, transparent 65%); } .hx-bg-glow-br { position: absolute; bottom: -20%; right: -10%; width: 60%; height: 60%; border-radius: 50%; background: radial-gradient(ellipse, rgba(155,93,229,.06) 0%, transparent 65%); } .hx-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px); background-size: 56px 56px; } /* Eyebrow */ .hx-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-dim); margin-bottom: 2rem; position: relative; z-index: 1; } .hx-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--or); flex-shrink: 0; animation: hxDotPulse 2.2s ease-in-out infinite; } /* Corps du hero */ .hx-hero-body { position: relative; z-index: 1; max-width: 860px; } /* Headline principale */ .hx-headline { font-family: 'Syne', sans-serif; font-size: clamp(2.4rem, 5.5vw, 3.8rem); font-weight: 800; line-height: 1.08; letter-spacing: -.025em; color: var(--texte); margin: 0 0 1.4rem; } /* Mot doré animé */ .hx-gold { font-style: normal; background: linear-gradient(120deg, #c9973a 0%, #f5e17a 35%, #d4af37 55%, #f5e17a 75%, #c9973a 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: goldShine 5s linear infinite; } /* Sous-titre hero */ .hx-sub { font-size: .85rem; color: var(--texte-dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2.5rem; } /* CTAs hero */ .hx-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* Strip des 5 pôles en bas du hero */ .hx-poles-bar { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; border-top: 1px solid var(--bord); overflow-x: auto; scrollbar-width: none; } .hx-poles-bar::-webkit-scrollbar { display: none; } .hx-pchip { display: flex; align-items: center; gap: .45rem; padding: .95rem 1.4rem; font-size: .75rem; font-weight: 600; color: var(--texte-dim); text-decoration: none; border-right: 1px solid var(--bord); transition: color .2s, background .2s; white-space: nowrap; letter-spacing: .02em; } .hx-pchip:last-child { border-right: none; } .hx-pchip:hover { color: var(--pc); background: rgba(255,255,255,.025); } .hx-pchip-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); flex-shrink: 0; box-shadow: 0 0 7px var(--pc); } /* ---- 02. LABELS DE SECTION ---- */ .hx-section-label { display: inline-flex; align-items: center; gap: .4rem; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--or); margin-bottom: .6rem; } .hx-section-label::before { content: ''; display: block; width: 18px; height: 2px; background: var(--or); border-radius: 2px; } .hx-section-h2 { font-family: 'Syne', sans-serif; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 800; margin: 0; } .hx-section-h2 em { font-style: normal; color: var(--or); } /* ---- 02. PÔLES ---- */ .hx-poles-section { padding: 6rem 0 5rem; border-top: 1px solid var(--bord); } /* 5 colonnes égales soudées */ .hx-poles-grid { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; margin-top: 2.5rem; background: var(--bord); gap: 1px; } .hx-pole-card { background: var(--fond-2); padding: 2rem 1.4rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; text-decoration: none; transition: background .22s, transform .22s, box-shadow .22s; position: relative; overflow: hidden; } .hx-pole-card:hover { background: var(--fond-2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.4); } /* Couche atmosphérique par pôle */ .hx-pole-card::before { content: ''; position: absolute; inset: 0; opacity: .55; transition: opacity .35s ease; pointer-events: none; z-index: 0; } .hx-pole-card:hover::before { opacity: 1; } /* Contenu au-dessus de la couche atmosphérique */ .hx-pole-card > * { position: relative; z-index: 1; } /* Photo + auras par pôle : gradients colorés → voile sombre → photo */ .hx-pole-card--event::before { background-image: radial-gradient(ellipse 90% 75% at 30% 72%, rgba(155,93,229,.58) 0%, transparent 72%), radial-gradient(ellipse 60% 55% at 82% 18%, rgba(240,192,64,.32) 0%, transparent 62%), linear-gradient(to bottom, rgba(8,6,12,.84) 0%, rgba(8,6,12,.44) 45%, rgba(8,6,12,.74) 100%), url('/images/event-card.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } .hx-pole-card--food::before { background-image: radial-gradient(ellipse 85% 75% at 45% 78%, rgba(220,120,40,.58) 0%, transparent 72%), radial-gradient(ellipse 55% 45% at 82% 16%, rgba(240,175,55,.30) 0%, transparent 62%), linear-gradient(to bottom, rgba(10,5,0,.84) 0%, rgba(10,5,0,.44) 45%, rgba(10,5,0,.74) 100%), url('/images/food-card.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } .hx-pole-card--style::before { background-image: radial-gradient(ellipse 75% 70% at 65% 58%, rgba(220,80,140,.52) 0%, transparent 72%), radial-gradient(ellipse 55% 45% at 18% 18%, rgba(180,50,100,.30) 0%, transparent 62%), linear-gradient(to bottom, rgba(10,4,7,.84) 0%, rgba(10,4,7,.44) 45%, rgba(10,4,7,.74) 100%), url('/images/mode-card.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } .hx-pole-card--tech::before { background-image: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(0,210,230,.42) 0%, transparent 72%), radial-gradient(ellipse 55% 45% at 15% 82%, rgba(40,80,255,.28) 0%, transparent 62%), linear-gradient(to bottom, rgba(2,8,12,.84) 0%, rgba(2,8,12,.44) 45%, rgba(2,8,12,.74) 100%), url('/images/tech-card.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } .hx-pole-card--agri::before { background-image: radial-gradient(ellipse 80% 75% at 50% 72%, rgba(0,180,100,.52) 0%, transparent 72%), radial-gradient(ellipse 55% 45% at 80% 18%, rgba(100,220,80,.28) 0%, transparent 62%), linear-gradient(to bottom, rgba(2,10,5,.84) 0%, rgba(2,10,5,.44) 45%, rgba(2,10,5,.74) 100%), url('/images/agri-card.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; } /* Slogan sous le nom du pôle */ .hx-pc-tagline { font-size: .68rem; font-style: italic; color: var(--or); opacity: .75; letter-spacing: .02em; margin-top: -.2rem; } /* Barre colorée en haut de chaque carte */ .hx-pc-accent { width: 2.2rem; height: 3px; background: var(--pc); border-radius: 2px; margin-bottom: .3rem; transition: width .22s; } .hx-pole-card:hover .hx-pc-accent { width: 100%; } .hx-pc-domain { font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--pc); font-weight: 700; } .hx-pc-name { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--texte); line-height: 1.2; } .hx-pc-desc { font-size: .78rem; color: var(--texte-muted); line-height: 1.55; flex: 1; } .hx-pc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: .4rem; } .hx-pc-status { font-size: .65rem; font-weight: 600; letter-spacing: .03em; } .hx-pc-status.live { color: #4ade80; } .hx-pc-status.building { color: var(--or); } .hx-pc-status.project { color: var(--texte-dim); } .hx-pc-arrow { font-size: .85rem; color: var(--pc); opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; } .hx-pole-card:hover .hx-pc-arrow { opacity: 1; transform: translateX(0); } @media (max-width: 900px) { .hx-poles-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .hx-poles-grid { grid-template-columns: 1fr; } } /* ---- 03. ÉVÉNEMENTS ---- */ .hx-events-section { padding: 5rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); } .hx-events-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; flex-wrap: wrap; gap: 1rem; } /* Grille événements : 1 grande carte + 2 petites */ .hx-events-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1.2rem; align-items: start; } /* Carte événement */ .hx-ev-card { display: flex; flex-direction: column; background: var(--fond-1); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; transition: border-color .2s, transform .2s; } .hx-ev-card:hover { border-color: var(--pole-event); transform: translateY(-3px); } /* Image / placeholder */ .hx-ev-img { position: relative; overflow: hidden; background: var(--fond-3); } .hx-ev-featured .hx-ev-img { height: 240px; } .hx-ev-card:not(.hx-ev-featured) .hx-ev-img { height: 160px; } .hx-ev-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s; } .hx-ev-card:hover .hx-ev-img img { transform: scale(1.04); } .hx-ev-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3.5rem; background: linear-gradient(135deg, var(--fond-3) 0%, var(--fond-4) 100%); } /* Badges sur l'image */ .hx-ev-badge { position: absolute; top: .75rem; left: .75rem; background: var(--or); color: #0a0a0a; font-size: .62rem; font-weight: 700; letter-spacing: .05em; padding: .22rem .65rem; border-radius: 999px; } .hx-ev-type { position: absolute; top: .75rem; right: .75rem; background: rgba(10,10,10,.75); backdrop-filter: blur(6px); color: var(--pole-event); font-size: .62rem; font-weight: 700; letter-spacing: .05em; padding: .22rem .65rem; border-radius: 999px; border: 1px solid rgba(155,93,229,.2); } /* Corps de la carte */ .hx-ev-body { padding: 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; } .hx-ev-date { font-size: .72rem; color: var(--texte-dim); } .hx-ev-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--texte); line-height: 1.3; } .hx-ev-loc { font-size: .75rem; color: var(--texte-muted); flex: 1; } .hx-ev-price { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--texte-muted); padding-top: .8rem; margin-top: .4rem; border-top: 1px solid var(--bord); } .hx-ev-price strong { color: var(--pole-event); } .hx-ev-cta { color: var(--pole-event); font-weight: 600; font-size: .75rem; } /* État vide */ .hx-events-empty { text-align: center; padding: 4.5rem 2rem; border: 1px dashed var(--bord-2); border-radius: var(--radius-lg); } .hx-ev-coming-icon { font-size: 3.5rem; margin-bottom: 1rem; } .hx-ev-coming-title { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--texte); margin-bottom: .5rem; } .hx-ev-coming-sub { font-size: .88rem; color: var(--texte-muted); max-width: 420px; margin: 0 auto; } @media (max-width: 820px) { .hx-events-grid { grid-template-columns: 1fr; } .hx-ev-featured .hx-ev-img { height: 200px; } .hx-ev-card:not(.hx-ev-featured) .hx-ev-img { height: 140px; } } /* ---- 04. VISION ---- */ .hx-vision-section { padding: 7rem 0; border-top: 1px solid var(--bord); } .hx-vision-inner { max-width: 720px; margin: 0 auto; text-align: center; } .hx-vision-text { font-family: 'Syne', sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; line-height: 1.55; color: var(--texte); margin: 1.5rem 0 2.5rem; } .hx-vision-text em { font-style: normal; color: var(--or); } .hx-vision-quote { background: var(--fond-2); border: 1px solid var(--bord); border-left: 3px solid var(--or); border-radius: var(--radius); padding: 1.6rem 2rem; text-align: left; margin-bottom: 2.5rem; } .hx-vision-quote p { font-size: .95rem; color: var(--texte); font-style: italic; line-height: 1.65; margin-bottom: .8rem; } .hx-vision-quote cite { font-size: .78rem; color: var(--texte-muted); font-style: normal; } /* ---- 05. PARTICIPER ---- */ .hx-join-section { padding: 6rem 0; background: var(--fond-2); border-top: 1px solid var(--bord); border-bottom: 1px solid var(--bord); } .hx-join-layout { display: grid; grid-template-columns: 1fr 2fr; gap: 5rem; align-items: start; } .hx-join-h2 { font-family: 'Syne', sans-serif; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 800; line-height: 1.2; margin: .5rem 0 1rem; } .hx-join-h2 em { font-style: normal; color: var(--or); } .hx-join-body { font-size: .88rem; color: var(--texte-muted); line-height: 1.7; } /* 3 cartes participation */ .hx-join-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .hx-join-card { background: var(--fond-1); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 1.6rem 1.4rem; transition: border-color .2s, transform .2s; } .hx-join-card:hover { border-color: var(--or-bord); transform: translateY(-2px); } .hx-jc-num { font-family: 'Syne', sans-serif; font-size: .65rem; font-weight: 800; letter-spacing: .1em; color: var(--or); margin-bottom: .7rem; } .hx-jc-icon { font-size: 1.8rem; margin-bottom: .7rem; display: block; } .hx-jc-title { font-family: 'Syne', sans-serif; font-size: .92rem; font-weight: 700; color: var(--texte); margin-bottom: .5rem; } .hx-jc-desc { font-size: .78rem; color: var(--texte-muted); line-height: 1.55; } @media (max-width: 860px) { .hx-join-layout { grid-template-columns: 1fr; gap: 2.5rem; } .hx-join-cards { grid-template-columns: 1fr; } } /* ---- 06. CTA FINAL ---- */ .hx-cta-section { padding: 8rem 0; text-align: center; position: relative; overflow: hidden; } .hx-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 50% 50%, rgba(212,175,55,.065) 0%, transparent 70%), radial-gradient(ellipse 40% 35% at 20% 80%, rgba(155,93,229,.04) 0%, transparent 60%); pointer-events: none; } .hx-cta-inner { position: relative; z-index: 1; } .hx-cta-overline { display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--or); margin-bottom: 1.5rem; } .hx-cta-headline { font-family: 'Syne', sans-serif; font-size: clamp(1.8rem, 3.5vw, 3rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.2rem; } .hx-cta-sub { font-size: .95rem; color: var(--texte-muted); max-width: 400px; margin: 0 auto 2.5rem; line-height: 1.65; } .hx-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ---- Mobile hero ---- */ @media (max-width: 600px) { .hx-hero { padding: 7rem 1.2rem 4rem; } .hx-headline { font-size: clamp(1.9rem, 8vw, 2.8rem); } .hx-cta-headline { font-size: clamp(1.6rem, 6vw, 2.4rem); } .hx-pchip { padding: .8rem 1rem; font-size: .7rem; } .hx-vision-section { padding: 4rem 0; } .hx-join-section { padding: 4rem 0; } .hx-cta-section { padding: 5rem 0; } } /* ───────────────────────────────────────────── Gbonhi Tech — Sous-navigation secondaire ───────────────────────────────────────────── */ .gbonhi-tech-subnav-bar { background: var(--fond-2); border-bottom: 1px solid var(--bord); position: sticky; top: 0; z-index: 99; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .gbonhi-tech-subnav-inner { display: flex; justify-content: space-between; align-items: stretch; height: 50px; } .gbonhi-tech-subnav-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-family: 'Syne', sans-serif; color: var(--pole-tech); font-size: 0.9rem; flex-shrink: 0; } .gbonhi-tech-subnav-dot { width: 7px; height: 7px; background: var(--pole-tech); border-radius: 50%; box-shadow: 0 0 8px var(--pole-tech-glow); flex-shrink: 0; } .gbonhi-tech-subnav-links { display: flex; align-items: stretch; gap: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .gbonhi-tech-subnav-links::-webkit-scrollbar { display: none; } .gbonhi-tech-subnav-link { display: flex; align-items: center; padding: 0 0.85rem; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; color: var(--texte-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.2s, border-color 0.2s; white-space: nowrap; } .gbonhi-tech-subnav-link:hover { color: var(--texte); } .gbonhi-tech-subnav-link.is-active { color: var(--texte); font-weight: 500; border-bottom-color: var(--pole-tech); } @media (max-width: 640px) { .gbonhi-tech-subnav-brand { display: none; } .gbonhi-tech-subnav-links { gap: 0; } .gbonhi-tech-subnav-link { padding: 0 0.6rem; font-size: 0.78rem; } } /* ================================================ HOME HX — Nouvelle page d'accueil (hx-*) ================================================ */ /* ---- HERO ---- */ .hx-hero { position: relative; min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 7rem 2rem 0; } .hx-hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .hx-bg-glow-tl { position: absolute; top: -120px; left: -80px; width: 600px; height: 600px; background: radial-gradient(ellipse at center, rgba(245,200,66,.07) 0%, transparent 65%); } .hx-bg-glow-br { position: absolute; bottom: -100px; right: -60px; width: 500px; height: 500px; background: radial-gradient(ellipse at center, rgba(155,93,229,.06) 0%, transparent 65%); } .hx-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at 50% 40%, black 20%, transparent 75%); } .hx-hero-body { position: relative; z-index: 1; text-align: center; max-width: 820px; width: 100%; } .hx-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.75rem; letter-spacing: 2.5px; text-transform: uppercase; color: var(--texte-muted); margin-bottom: 2rem; } .hx-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #f0c040; flex-shrink: 0; } .hx-gold { background: linear-gradient(135deg, #f5c842, #e09820, #f5e042, #f5c842); background-size: 220% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-style: normal; animation: gradientShift 3.5s linear infinite; } .hx-sub { font-size: 0.95rem; color: var(--texte-dim); letter-spacing: 1px; margin-bottom: 2.5rem; } .hx-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 4rem; } /* Strip pôles en bas du hero */ .hx-poles-bar { position: relative; z-index: 1; width: 100%; max-width: 900px; display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; padding: 1.4rem 2rem; border-top: 1px solid var(--bord); margin-top: auto; } .hx-pchip { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.45rem 1rem; border-radius: 100px; border: 1px solid color-mix(in srgb, var(--pc) 25%, transparent); background: color-mix(in srgb, var(--pc) 7%, transparent); color: var(--pc); font-size: 0.8rem; font-weight: 500; transition: background 0.2s, border-color 0.2s, transform 0.2s; } .hx-pchip:hover { background: color-mix(in srgb, var(--pc) 15%, transparent); border-color: color-mix(in srgb, var(--pc) 45%, transparent); transform: translateY(-2px); } .hx-pchip-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pc); flex-shrink: 0; } /* * Le hero a toujours une photo sombre en fond (cf. .hx-scene--*, dégradés * noirs fixes derrière les images) quel que soit le thème choisi par le * visiteur — contrairement au reste du site, son texte ne doit donc PAS * suivre --texte/--texte-muted/--or (qui s'adaptent au thème clair/sombre), * sous peine de devenir illisible en thème clair. On fixe ici des valeurs * claires constantes pour cette seule section. */ .hx-headline { color: #ede8df; } .hx-eyebrow { color: rgba(237, 232, 223, .75); } .hx-sub { color: rgba(237, 232, 223, .6); } .hx-poles-bar { border-top-color: rgba(255, 255, 255, .08); } .hx-hero .btn-gold { background: #f0c040; } .hx-hero .btn-outline { color: #ede8df; border-color: rgba(255, 255, 255, .22); } .hx-hero .btn-outline:hover { color: #f0c040; border-color: rgba(240, 192, 64, .45); } /* ---- SECTION LABELS PARTAGÉS ---- */ .hx-section-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--or); margin-bottom: 0.75rem; } .hx-section-h2 { font-family: 'Syne', sans-serif; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; color: var(--texte); line-height: 1.2; margin-bottom: 2.5rem; } .hx-section-h2 em { color: var(--or); font-style: normal; } /* ---- SECTION PÔLES ---- */ .hx-poles-section { padding: 5rem 0 6rem; background: var(--fond-2); } .hx-poles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; } .hx-pole-card { display: flex; flex-direction: column; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); padding: 1.5rem; text-decoration: none; color: var(--texte); position: relative; overflow: hidden; transition: border-color 0.25s, transform 0.25s, background 0.25s; } .hx-pole-card:hover { border-color: color-mix(in srgb, var(--pc) 40%, transparent); background: color-mix(in srgb, var(--pc-soft) 60%, var(--fond-3)); transform: translateY(-3px); } .hx-pc-accent { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--pc); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .hx-pc-domain { font-size: 0.72rem; letter-spacing: 2px; text-transform: uppercase; color: var(--pc); margin-bottom: 0.5rem; margin-top: 0.4rem; } .hx-pc-name { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 700; /* Fixe (pas var(--texte)) : la carte a toujours une photo teintée sombre en fond (cf. .hx-pole-card--*::before), qui s'assombrit encore plus au survol — un texte qui suit le thème clair deviendrait illisible. */ color: #ede8df; margin-bottom: 0.75rem; } .hx-pc-desc { font-size: 0.87rem; color: rgba(237, 232, 223, .68); line-height: 1.7; flex: 1; margin-bottom: 1.2rem; } .hx-pc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.75rem; border-top: 1px solid rgba(255, 255, 255, .1); } .hx-pc-status { font-size: 0.75rem; font-weight: 500; } .hx-pc-status.live { color: #22c55e; } .hx-pc-status.building { color: var(--or); } .hx-pc-status.project { color: rgba(237, 232, 223, .5); } .hx-pc-arrow { color: var(--pc); font-size: 1rem; transition: transform 0.2s; } .hx-pole-card:hover .hx-pc-arrow { transform: translateX(4px); } /* ---- SECTION ÉVÉNEMENTS ---- */ .hx-events-section { padding: 5rem 0 6rem; background: var(--fond); } .hx-events-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; } .hx-events-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.2rem; } .hx-ev-card { display: flex; flex-direction: column; background: var(--fond-3); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--texte); transition: border-color 0.2s, transform 0.2s; } .hx-ev-card:hover { border-color: rgba(245,200,66,0.25); transform: translateY(-3px); } .hx-ev-featured { grid-column: span 2; } .hx-ev-img { position: relative; height: 200px; background: var(--fond-4); overflow: hidden; } .hx-ev-featured .hx-ev-img { height: 260px; } .hx-ev-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; } .hx-ev-card:hover .hx-ev-img img { transform: scale(1.04); } .hx-ev-placeholder { display: flex; align-items: center; justify-content: center; font-size: 3rem; height: 100%; background: linear-gradient(135deg, var(--fond-4), var(--fond-3)); } .hx-ev-badge { position: absolute; top: 0.75rem; left: 0.75rem; /* Ruban "Événement phare" — toujours or vif, peu importe le thème : c'est un repère visuel fort, pas du texte à contraster avec une page. */ background: #f0c040; color: #0a0a0a; font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.65rem; border-radius: 4px; letter-spacing: 0.5px; } .hx-ev-type { position: absolute; top: 0.75rem; right: 0.75rem; /* Fond toujours sombre (photo dessous) : texte fixé clair, pas var(--texte). */ background: rgba(0,0,0,0.55); color: #ede8df; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: 4px; backdrop-filter: blur(4px); } .hx-ev-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1; } .hx-ev-date { font-size: 0.78rem; color: var(--texte-dim); } .hx-ev-title { font-family: 'Syne', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--texte); line-height: 1.3; } .hx-ev-loc { font-size: 0.8rem; color: var(--texte-muted); } .hx-ev-price { display: flex; align-items: center; justify-content: space-between; font-size: 0.82rem; color: var(--texte-muted); margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--bord); } .hx-ev-price strong { color: var(--or); } .hx-ev-cta { color: var(--or); font-weight: 600; font-size: 0.82rem; } .hx-events-empty { text-align: center; padding: 4rem 2rem; border: 1px dashed var(--bord-2); border-radius: var(--radius-lg); } .hx-ev-coming-icon { font-size: 3rem; margin-bottom: 1rem; } .hx-ev-coming-title { font-family: 'Syne', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--texte); margin-bottom: 0.5rem; } .hx-ev-coming-sub { font-size: 0.9rem; color: var(--texte-muted); } /* ---- SECTION VISION ---- */ .hx-vision-section { padding: 6rem 0; background: var(--fond-2); } .hx-vision-inner { max-width: 720px; margin: 0 auto; text-align: center; } .hx-vision-text { font-size: 1.1rem; color: var(--texte-muted); line-height: 1.9; margin-bottom: 2.5rem; } .hx-vision-text em { color: var(--texte); font-style: italic; } .hx-vision-quote { border-left: 3px solid var(--or); text-align: left; padding: 1.2rem 1.8rem; background: var(--fond-3); border-radius: 0 var(--radius) var(--radius) 0; margin-bottom: 2.5rem; } .hx-vision-quote p { font-size: 0.97rem; color: var(--texte); line-height: 1.8; margin-bottom: 0.6rem; font-style: italic; } .hx-vision-quote cite { font-size: 0.78rem; color: var(--texte-dim); letter-spacing: 0.5px; } /* ---- SECTION CTA FINAL ---- */ .hx-cta-section { position: relative; padding: 7rem 2rem; text-align: center; overflow: hidden; } .hx-cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(245,200,66,.08) 0%, transparent 60%), var(--fond-3); z-index: 0; } .hx-cta-inner { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; } .hx-cta-overline { font-size: 0.72rem; letter-spacing: 3px; text-transform: uppercase; color: var(--or); margin-bottom: 1.2rem; } .hx-cta-headline { font-family: 'Syne', sans-serif; font-size: clamp(2rem, 4.5vw, 4rem); font-weight: 800; line-height: 1.1; color: var(--texte); margin-bottom: 1.2rem; } .hx-cta-sub { font-size: 1rem; color: var(--texte-muted); line-height: 1.75; margin-bottom: 2.5rem; } .hx-cta-btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ================================================ CONCIERGE DIGITAL — Section d'intention (hx-ci-*) Panneau glassmorphism · grille 3×2 · glow hover ================================================ */ /* ── Wrapper de section ──────────────────────────────────────────── */ .hx-concierge { padding: 5rem 0 4.5rem; position: relative; overflow: hidden; } /* Aura ambiante en fond — violet Event + or discrets */ .hx-concierge::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 50% 40%, rgba(155,93,229,.04) 0%, transparent 70%), radial-gradient(ellipse 40% 35% at 18% 85%, rgba(212,175,55,.028) 0%, transparent 60%); pointer-events: none; } /* ── Panneau glassmorphism ───────────────────────────────────────── */ .hx-concierge-panel { position: relative; background: rgba(255,255,255,.022); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); border: 1px solid rgba(255,255,255,.062); border-radius: 24px; padding: 3.5rem 3.5rem 3rem; box-shadow: 0 8px 40px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04); } /* ── En-tête centré ─────────────────────────────────────────────── */ .hx-concierge-header { text-align: center; margin-bottom: 2.8rem; } .hx-concierge-eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--or); margin-bottom: .9rem; } .hx-concierge-eyebrow::before, .hx-concierge-eyebrow::after { content: ''; display: block; width: 24px; height: 2px; background: var(--or); border-radius: 2px; } .hx-concierge-title { font-family: 'Syne', sans-serif; font-size: clamp(1.2rem, 1.9vw, 1.72rem); font-weight: 700; line-height: 1.35; color: var(--texte); max-width: 640px; margin: 0 auto; } .hx-concierge-title em { font-style: normal; color: var(--or); } /* ── Grille 3 × 2 ───────────────────────────────────────────────── */ .hx-concierge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; } /* ── Bouton d'intention ──────────────────────────────────────────── */ .hx-ci-btn { display: flex; flex-direction: column; gap: .85rem; padding: 1.5rem 1.5rem 1.3rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.065); border-radius: 14px; text-decoration: none; color: var(--texte); cursor: pointer; position: relative; overflow: hidden; /* Transition globale 300ms */ transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, transform .3s ease, color .3s ease; } /* Reflet haut — glassmorphism interne */ .hx-ci-btn::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); pointer-events: none; } /* ── Hover : assombrissement + glow couleur pôle ──────────────── */ .hx-ci-btn:hover { background: rgba(255,255,255,.062); border-color: rgba(var(--glow-rgb), .38); box-shadow: 0 0 34px rgba(var(--glow-rgb), .16), 0 6px 28px rgba(0,0,0,.28); transform: translateY(-3px); color: var(--texte); } /* ── Icone colorée par pôle ─────────────────────────────────────── */ .hx-ci-icon { width: 2.6rem; height: 2.6rem; border-radius: 10px; background: rgba(var(--glow-rgb), .1); border: 1px solid rgba(var(--glow-rgb), .2); display: flex; align-items: center; justify-content: center; color: var(--glow); flex-shrink: 0; transition: background .3s, box-shadow .3s; } .hx-ci-icon svg { display: block; width: 1.1rem; height: 1.1rem; } .hx-ci-btn:hover .hx-ci-icon { background: rgba(var(--glow-rgb), .18); box-shadow: 0 0 16px rgba(var(--glow-rgb), .24); } /* ── Texte ──────────────────────────────────────────────────────── */ .hx-ci-body { flex: 1; display: flex; flex-direction: column; gap: .45rem; } .hx-ci-text { font-size: .9rem; line-height: 1.5; color: var(--texte-muted); transition: color .3s; } .hx-ci-btn:hover .hx-ci-text { color: var(--texte); } /* ── Libellé de destination + flèche ──────────────────────────── */ .hx-ci-arrow { font-size: .75rem; font-weight: 600; letter-spacing: .03em; color: rgba(var(--glow-rgb), .5); margin-top: auto; padding-top: .25rem; display: inline-block; transition: color .3s, transform .3s; } .hx-ci-btn:hover .hx-ci-arrow { color: var(--glow); transform: translateX(5px); } /* ── Responsive ─────────────────────────────────────────────────── */ @media (max-width: 900px) { .hx-concierge-panel { padding: 2.5rem 2rem 2rem; } .hx-concierge-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .hx-concierge { padding: 3.5rem 0 3rem; } .hx-concierge-panel { padding: 2rem 1.25rem 1.75rem; border-radius: 16px; } .hx-concierge-title { font-size: 1.15rem; } .hx-concierge-grid { grid-template-columns: 1fr; gap: .7rem; } } /* ---- RESPONSIVE ---- */ @media (max-width: 768px) { .hx-hero { padding-top: 5rem; min-height: 85vh; } .hx-headline { font-size: clamp(1.9rem, 8vw, 2.8rem); } .hx-poles-bar { gap: 0.4rem; padding: 1rem; } .hx-pchip { font-size: 0.75rem; padding: 0.35rem 0.75rem; } .hx-poles-grid { grid-template-columns: 1fr 1fr; } .hx-ev-featured { grid-column: span 1; } .hx-events-header { flex-direction: column; } } @media (max-width: 480px) { .hx-poles-grid { grid-template-columns: 1fr; } .hx-events-grid { grid-template-columns: 1fr; } .hx-ctas { flex-direction: column; align-items: center; } .hx-cta-btns { flex-direction: column; align-items: center; } } /* ================================================================ GRAYALI — VITRINE DE PLATS (grayali/*.blade.php) ================================================================ */ .grcat-hero { padding: 4rem 0 2.5rem; text-align: center; border-bottom: 1px solid var(--bord); background: var(--fond-2); } .grcat-hero h1 { font-size: clamp(2.2rem, 4.5vw, 3.2rem); } .grcat-hero h1 em { color: var(--pole-food); font-style: normal; } .grcat-hero p { max-width: 480px; margin: 0.8rem auto 0; } .grcat-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; padding: 1.5rem 0; border-bottom: 1px solid var(--bord); } .grcat-filter-btn { padding: 0.45rem 1.1rem; border-radius: 999px; border: 1px solid var(--bord-2); font-size: 0.8rem; color: var(--texte-muted); background: transparent; cursor: pointer; transition: all 0.18s; font-family: 'DM Sans', sans-serif; text-decoration: none; display: inline-flex; } .grcat-filter-btn:hover, .grcat-filter-btn.active { background: var(--pole-food); border-color: var(--pole-food); color: #0a0a0a; font-weight: 600; } .grcat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.3rem; padding: 2.5rem 0; } .grcat-card { background: var(--fond-2); border: 1px solid var(--bord); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s, transform 0.25s; display: block; color: inherit; position: relative; } .grcat-card:hover { border-color: var(--pole-food); transform: translateY(-4px); box-shadow: 0 8px 28px rgba(0,0,0,.35); } .grcat-card-img { position: relative; height: 160px; overflow: hidden; background: var(--fond-3); } .grcat-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .grcat-card:hover .grcat-card-img img { transform: scale(1.05); } .grcat-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, var(--pole-food-glow) 0%, transparent 70%); } .grcat-card-kcal { position: absolute; top: 0.7rem; right: 0.7rem; /* Fond toujours sombre (photo du plat dessous) : texte fixé clair, pas var(--texte). */ background: rgba(10,10,10,0.8); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 0.2rem 0.6rem; font-size: 0.65rem; font-weight: 600; color: #ede8df; backdrop-filter: blur(6px); } .grcat-card-body { padding: 1.1rem; } .grcat-card-cat { font-size: 0.68rem; color: var(--pole-food); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 0.4rem; font-weight: 600; } .grcat-card-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: var(--texte); margin-bottom: 0.6rem; line-height: 1.3; } .grcat-card-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.8rem; } .grcat-tag-pill { font-size: 0.65rem; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--bord-2); color: var(--texte-muted); white-space: nowrap; } .grcat-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 0.8rem; border-top: 1px solid var(--bord); } .grcat-card-price { font-family: 'Syne', sans-serif; font-weight: 800; color: var(--or); font-size: 1rem; } .grcat-add-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--pole-food); color: #0a0a0a; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.18s; } .grcat-add-btn:hover { opacity: 0.85; } .grcat-ia-banner { background: linear-gradient(135deg, var(--pole-food-soft), transparent); border: 1px solid var(--pole-food-glow); border-radius: var(--radius-lg); padding: 1.2rem 1.5rem; margin: 2rem 0 0; display: flex; align-items: center; gap: 1rem; } .grcat-ia-banner-icon { width: 40px; height: 40px; border-radius: 50%; background: var(--pole-food-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .grcat-empty { text-align: center; padding: 6rem 2rem; color: var(--texte-muted); } .grcat-empty h3 { font-size: 1.3rem; color: var(--texte); margin-bottom: 0.5rem; } /* ═══════════════════════════════════════════════════════════════════════ COMMUNAUTÉ (WEB) ═══════════════════════════════════════════════════════════════════════ */ .com-hero { text-align: center; padding: 3rem 1rem 2rem; } .com-hero-title { font-family: 'Syne', sans-serif; font-weight: 800; font-size: 2rem; color: var(--texte); margin-bottom: .5rem; } .com-hero-sub { color: var(--texte-muted); font-size: .95rem; max-width: 560px; margin: 0 auto; } .com-tabs-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 0 0 1.5rem; } .com-tabs { display: flex; gap: .5rem; flex-wrap: wrap; } .com-tab { padding: .45rem 1rem; border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--texte-muted); background: var(--fond-2); border: 1px solid var(--bord-2); text-decoration: none; transition: var(--transition); } .com-tab:hover { color: var(--texte); border-color: var(--bord); } .com-tab.active { color: #0a0a0a; background: var(--or); border-color: var(--or); } .com-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; } .com-card { background: var(--fond-2); border: 1px solid var(--bord-2); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; } .com-card-header { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem .8rem; } .com-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--fond-3); border: 1px solid var(--bord-2); } .com-avatar-fallback { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: var(--or-clair); color: var(--or); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .95rem; font-family: 'Syne', sans-serif; } .com-card-author { font-weight: 700; color: var(--texte); font-size: .9rem; text-decoration: none; } .com-card-author:hover { color: var(--or); } .com-card-time { color: var(--texte-dim); font-size: .74rem; } .com-card-flux { margin-left: auto; font-size: .68rem; letter-spacing: 1px; text-transform: uppercase; color: var(--texte-dim); } .com-card-media { width: 100%; aspect-ratio: 4/3; background: var(--fond-3); overflow: hidden; } .com-card-media img, .com-card-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .com-card-body { padding: 1rem 1.1rem; color: var(--texte-muted); font-size: .88rem; line-height: 1.6; flex: 1; } .com-card-body a { color: var(--or); } .com-card-produit { margin: 0 1.1rem 1rem; padding: .6rem .8rem; border-radius: var(--radius); background: var(--fond-3); border: 1px solid var(--bord); display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .8rem; text-decoration: none; color: var(--texte); } .com-card-produit:hover { border-color: var(--or-bord); } .com-card-produit-verifie { color: #4ade80; font-size: .7rem; font-weight: 700; white-space: nowrap; } .com-card-footer { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.1rem; border-top: 1px solid var(--bord); } .com-like-btn, .com-comment-link, .com-share-count { display: inline-flex; align-items: center; gap: .4rem; background: none; border: none; cursor: pointer; color: var(--texte-muted); font-size: .82rem; font-weight: 600; text-decoration: none; padding: 0; font-family: 'DM Sans', sans-serif; } .com-like-btn:hover, .com-comment-link:hover { color: var(--texte); } .com-like-icon-filled { display: none; } .com-like-btn.is-liked .com-like-icon-filled { display: inline-flex; } .com-like-btn.is-liked .com-like-icon-outline { display: none; } .com-like-btn.is-liked { color: #ef4444; } .com-empty { text-align: center; padding: 5rem 2rem; color: var(--texte-muted); } .com-empty h3 { font-size: 1.2rem; color: var(--texte); margin-bottom: .5rem; font-family: 'Syne', sans-serif; } /* ── Détail d'un post ── */ .com-detail-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; align-items: start; } @media (max-width: 900px) { .com-detail-layout { grid-template-columns: 1fr; } } .com-detail-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--fond-2); border: 1px solid var(--bord-2); } .com-detail-media img, .com-detail-media video { width: 100%; max-height: 640px; object-fit: contain; background: #000; display: block; } .com-profile-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .com-profile-header .com-avatar, .com-profile-header .com-avatar-fallback { width: 56px; height: 56px; font-size: 1.3rem; } .com-follow-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: var(--radius); font-weight: 700; font-size: .82rem; cursor: pointer; border: 1px solid var(--or); background: var(--or); color: #0a0a0a; text-decoration: none; } .com-follow-btn.is-following { background: transparent; color: var(--texte); border-color: var(--bord-2); } .com-comment { padding: .9rem 0; border-bottom: 1px solid var(--bord); } .com-comment:last-child { border-bottom: none; } .com-comment-reply { margin-left: 2.7rem; margin-top: .7rem; padding-top: .7rem; border-top: 1px dashed var(--bord); } .com-comment-content { color: var(--texte-muted); font-size: .87rem; line-height: 1.6; margin: .2rem 0 .4rem; } .com-report-form { display: none; margin-top: .6rem; padding: .8rem; background: var(--fond-3); border-radius: var(--radius); border: 1px solid var(--bord); } .com-report-form.is-open { display: block; } .com-stat { color: var(--texte-muted); font-size: .84rem; } .com-stat strong { color: var(--texte); }