/*
* home.css — Vitrine publique EVENEPASS (accueil).
*
* Design auto-contenu (ne depend pas du bundle Bootstrap/Owl/Mixitup BARREN),
* charte EVENEPASS : navy #1c1830, vert #35a936, texte #545454. Reprend l'esprit
* de l'ancienne vitrine (carousel de tete, cartes d'evenements, sections aerees)
* en plus soigne et complet. Chargee apres FontAwesome.
*
* Theme clair / sombre : toutes les surfaces s'appuient sur des variables CSS
* neutres (--evp-page, --evp-surface, --evp-heading…). Le passage en sombre se
* fait via l'attribut html[data-theme="dark"] (bascule persistee cote client).
* Les constantes de marque (navy, vert) et les zones deja sombres (hero, footer)
* restent identiques dans les deux themes.
*/
:root {
/* Constantes de marque (identiques dans les deux themes) */
--evp-navy: #1c1830;
--evp-navy-2: #2a2442;
--evp-green: #35a936;
--evp-green-dark: #2d8f2e;
--evp-green-bg: rgba(53, 169, 54, 0.10);
/* Surfaces & texte — THEME CLAIR (valeurs par defaut) */
--evp-page: #ffffff;
--evp-surface: #ffffff;
--evp-surface-2: #f6f7fb;
--evp-heading: #1c1830;
--evp-text: #545454;
--evp-muted: #8a86a0;
--evp-line: #e7e7ef;
--evp-nav-bg: rgba(255, 255, 255, 0.92);
--evp-shadow: 0 10px 30px rgba(28, 24, 48, 0.08);
--evp-shadow-lg: 0 20px 45px rgba(28, 24, 48, 0.14);
}
/* ===== THEME SOMBRE ================================================ */
html[data-theme="dark"] {
--evp-page: #14111f;
--evp-surface: #1f1b30;
--evp-surface-2: #191527;
--evp-heading: #f2f1f7;
--evp-text: #c4c0d6;
--evp-muted: #948fac;
--evp-line: #2e2942;
--evp-nav-bg: rgba(20, 17, 31, 0.92);
--evp-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
--evp-shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.5);
--evp-green-bg: rgba(53, 169, 54, 0.16);
}
* { box-sizing: border-box; }
/* La couleur de fond de page est portee par ; reste TRANSPARENT
pour laisser voir la couche d'icones animees (.evp-bg-anim, position fixe en
z-index negatif) placee derriere tout le contenu. */
html { background: var(--evp-page); transition: background 0.25s ease; }
body.evp-site {
margin: 0;
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
color: var(--evp-text);
background: transparent;
line-height: 1.6;
transition: color 0.25s ease;
position: relative;
z-index: 0;
}
.evp-site a { text-decoration: none; }
/* ===== Arriere-plan anime GLOBAL (icones d'evenements flottantes) ========
Couche FIXE derriere tout le contenu (z-index negatif). Icones tres peu
opaques (reglee en inline) : navy en clair, blanches en sombre, touches
vertes. Mecanique reprise de MIKROTUNNEL : CSS pur, aucun JS. */
.evp-bg-anim {
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
overflow: hidden;
}
.evp-bg-anim i {
position: absolute;
color: var(--evp-navy);
line-height: 1;
animation: evp-floaty ease-in-out infinite;
will-change: transform;
}
.evp-bg-anim i.evp-ic-green { color: var(--evp-green); }
html[data-theme="dark"] .evp-bg-anim i { color: #ffffff; }
html[data-theme="dark"] .evp-bg-anim i.evp-ic-green { color: #35a936; }
@keyframes evp-floaty {
0%, 100% { transform: translateY(0) translateX(0) rotate(0); }
50% { transform: translateY(-22px) translateX(11px) rotate(6deg); }
}
/* Accessibilite / performances : aucune animation si l'utilisateur la refuse. */
@media (prefers-reduced-motion: reduce) {
.evp-bg-anim i { animation: none; }
}
/* Conteneur unique partage par la navbar, le carousel/hero, le bandeau stats,
la liste d'evenements et TOUTES les sections : garantit une largeur coherente
sur toute la page. 1320 px = largeur du .container de l'ancien evenepass
(Bootstrap xxl), un cran plus large que precedemment (1200) pour ne plus
rogner le carousel ni le texte du hero. */
.evp-container { max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.evp-section { padding: 78px 0; position: relative; }
/* Sections transparentes : le fond anime global reste visible DERRIERE tout le
contenu (hero, sections, listing). Les cartes gardent leur fond opaque. */
.evp-section-alt { background: transparent; }
.evp-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--evp-green-dark);
background: var(--evp-green-bg);
border-radius: 30px;
padding: 6px 14px;
}
html[data-theme="dark"] .evp-eyebrow { color: #7ed67f; }
.evp-section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.evp-section-head h2 { font-size: 2rem; font-weight: 800; color: var(--evp-heading); margin: 14px 0 8px; }
.evp-section-head p { color: var(--evp-muted); margin: 0; font-size: 1.02rem; }
/* ===== Navbar ====================================================== */
.evp-nav {
position: sticky;
top: 0;
z-index: 1000;
background: var(--evp-nav-bg);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--evp-line);
}
.evp-nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 74px;
gap: 24px;
}
/* Logo : mecanique reprise EXACTEMENT de l'ancien evenepass — deux ![]()
permutes. En clair on affiche logo.svg ; en sombre on masque la version
claire et on affiche logo-dark.svg (variante dediee au fond sombre). Les deux
sources sont des visuels haute definition distincts => logo NET dans les deux
modes, sans filtre ni pixelisation. (Ancien : .night-mode #logo ; ici on
branche la meme logique sur notre html[data-theme="dark"].) */
.evp-nav-logo img { height: 46px; width: auto; display: block; }
.evp-nav-logo .logo-inverse { display: none; }
html[data-theme="dark"] .evp-nav-logo img { display: none; }
html[data-theme="dark"] .evp-nav-logo .logo-inverse { display: block; }
.evp-nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.evp-nav-links a {
color: var(--evp-heading);
font-weight: 500;
font-size: 0.95rem;
position: relative;
padding: 6px 0;
transition: color .15s ease;
}
.evp-nav-links a:hover, .evp-nav-links a.active { color: var(--evp-green-dark); }
html[data-theme="dark"] .evp-nav-links a:hover,
html[data-theme="dark"] .evp-nav-links a.active { color: #7ed67f; }
.evp-nav-links a.active::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--evp-green);
border-radius: 2px;
}
.evp-nav-actions { display: flex; align-items: center; gap: 14px; }
.evp-lang { display: inline-flex; gap: 4px; font-size: 0.82rem; font-weight: 700; }
.evp-lang a { color: var(--evp-muted); padding: 0 3px; }
.evp-lang a.active { color: var(--evp-green-dark); }
.evp-lang span { color: var(--evp-line); }
/* Bouton bascule clair / sombre */
.evp-theme-toggle {
width: 40px; height: 40px;
border-radius: 50%;
border: 1.5px solid var(--evp-line);
background: var(--evp-surface);
color: var(--evp-heading);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: border-color .15s ease, color .15s ease, background .15s ease;
flex: 0 0 auto;
}
.evp-theme-toggle:hover { border-color: var(--evp-green); color: var(--evp-green-dark); }
.evp-theme-toggle .fa-sun { display: none; }
html[data-theme="dark"] .evp-theme-toggle .fa-moon { display: none; }
html[data-theme="dark"] .evp-theme-toggle .fa-sun { display: inline-block; color: #f4c430; }
.evp-btn {
display: inline-flex;
align-items: center;
gap: 8px;
border-radius: 9px;
font-weight: 700;
font-size: 0.92rem;
padding: 11px 20px;
cursor: pointer;
border: 1.5px solid transparent;
transition: background .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
}
.evp-btn:active { transform: scale(.98); }
.evp-btn-primary { background: var(--evp-green); color: #fff; }
.evp-btn-primary:hover { background: var(--evp-green-dark); }
.evp-btn-ghost { background: transparent; color: var(--evp-heading); border-color: var(--evp-line); }
.evp-btn-ghost:hover { border-color: var(--evp-green); color: var(--evp-green-dark); }
.evp-btn-light { background: #fff; color: var(--evp-navy); }
.evp-btn-light:hover { background: #f0f0f5; }
.evp-btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.evp-btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.evp-burger { display: none; background: none; border: 0; font-size: 1.4rem; color: var(--evp-heading); cursor: pointer; }
/* ===== Menu utilisateur (compte connecte) ========================= */
.evp-user-menu { position: relative; }
.evp-user-toggle {
display: inline-flex;
align-items: center;
gap: 8px;
background: transparent;
border: 1.5px solid var(--evp-line);
border-radius: 30px;
padding: 4px 10px 4px 4px;
cursor: pointer;
transition: border-color .15s ease;
}
.evp-user-toggle:hover { border-color: var(--evp-green); }
.evp-user-avatar {
width: 34px; height: 34px;
border-radius: 50%;
background: var(--evp-green);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: .82rem;
flex: 0 0 auto;
box-shadow: 0 0 0 2px rgba(53,169,54,.25);
}
.evp-user-caret { font-size: .72rem; color: var(--evp-muted); transition: transform .2s ease; }
.evp-user-menu.is-open .evp-user-caret { transform: rotate(180deg); }
.evp-user-drop {
position: absolute;
top: calc(100% + 12px);
right: 0;
width: 258px;
background: var(--evp-surface);
border: 1px solid var(--evp-line);
border-radius: 14px;
box-shadow: var(--evp-shadow-lg);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity .16s ease, transform .16s ease, visibility .16s;
overflow: hidden;
z-index: 1100;
}
.evp-user-menu.is-open .evp-user-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.evp-user-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 16px 14px;
border-bottom: 1px solid var(--evp-line);
}
.evp-user-avatar-lg { width: 44px; height: 44px; font-size: 1rem; }
.evp-user-id { min-width: 0; }
.evp-user-id strong { display: block; color: var(--evp-heading); font-size: .95rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.evp-user-id span { font-size: .8rem; color: var(--evp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.evp-user-links { padding: 8px; }
.evp-user-links a {
display: flex;
align-items: center;
gap: 11px;
padding: 10px 12px;
border-radius: 9px;
color: var(--evp-heading);
font-size: .92rem;
font-weight: 500;
transition: background .14s ease, color .14s ease;
}
.evp-user-links a i { width: 18px; text-align: center; color: var(--evp-muted); }
.evp-user-links a:hover { background: var(--evp-green-bg); color: var(--evp-green-dark); }
.evp-user-links a:hover i { color: var(--evp-green-dark); }
.evp-user-links .evp-user-logout { color: #c0392b; }
.evp-user-links .evp-user-logout i { color: #c0392b; }
.evp-user-links .evp-user-logout:hover { background: #fdecec; color: #c0392b; }
/* Entree « Devenir organisateur » du menu deroulant (B3.4c) : un