/* ╔══════════════════════════════════════════════════════════════════╗
   ║  HORIZONS FIVE — APP MOBILE v2.0 — Planning intégré           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

:root {
  --hf-green:#57FF82; --hf-blue:#77DEFF; --hf-gold:#DDA617;
  --hf-pink:#FF7BB3; --hf-yellow:#FFF495; --hf-cyan:#00E5FF; --hf-purple:#9B7FFF;
  --hf-bg:#080810; --hf-bg2:#05050d; --hf-bg-card:#0e0e1a; --hf-bg-elevated:#12121f;
  --hf-border:rgba(255,255,255,.06); --hf-border-glow:rgba(119,222,255,.15);
  --hf-text:#eee; --hf-text-muted:rgba(255,255,255,.5); --hf-text-dim:rgba(255,255,255,.3);
  --hf-radius:14px; --hf-radius-sm:8px; --hf-radius-lg:20px;
  --hf-font:'Poppins','Segoe UI',system-ui,sans-serif;
  --hf-font-display:'Montserrat','Poppins',sans-serif;
  --hf-font-ui:'Outfit','Segoe UI',system-ui,sans-serif;
  --hf-gradient-h:linear-gradient(90deg,#FF7BB3,#FFF495,#57FF82,#77DEFF,#9B7FFF,#FF7BB3);
  --hf-rainbow:linear-gradient(90deg,#FF7BB3,#FFC857,#FFF495,#57FF82,#77DEFF,#9B7FFF,#FF7BB3);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;font-family:var(--hf-font);background:var(--hf-bg);color:var(--hf-text);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;user-select:none}

/* ═══ ÉCRANS ═══ */
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s cubic-bezier(.4,0,.2,1);transform:translateY(30px);z-index:1}
.screen.active{opacity:1;pointer-events:auto;transform:translateY(0);z-index:10}
.screen.exit{opacity:0;transform:translateY(-30px);pointer-events:none}
canvas{position:absolute;inset:0;z-index:0}

/* ═══ SPLASH ═══ */
.splash-ring-wrap{position:relative;width:200px;height:200px;margin-bottom:28px;z-index:1}
.splash-ring{position:absolute;inset:0;border-radius:50%;border:4px solid transparent;border-top-color:var(--hf-green);border-right-color:var(--hf-blue);border-bottom-color:var(--hf-pink);border-left-color:var(--hf-yellow);animation:ringRotate 2.5s linear infinite;filter:drop-shadow(0 0 18px rgba(87,255,130,.25))}
.splash-ring::before{content:'';position:absolute;inset:10px;border-radius:50%;border:3px solid transparent;border-top-color:var(--hf-gold);border-right-color:var(--hf-pink);border-bottom-color:var(--hf-green);border-left-color:var(--hf-blue);animation:ringRotate 1.8s linear infinite reverse}
.splash-ring::after{content:'';position:absolute;inset:22px;border-radius:50%;border:2px solid transparent;border-top-color:var(--hf-yellow);border-right-color:var(--hf-green);border-bottom-color:var(--hf-blue);border-left-color:var(--hf-gold);animation:ringRotate 3.2s linear infinite}
.splash-ring-glow{position:absolute;inset:-20px;border-radius:50%;background:conic-gradient(from 0deg,rgba(87,255,130,.08),rgba(119,222,255,.08),rgba(221,166,23,.08),rgba(255,123,179,.08),rgba(255,244,149,.08),rgba(87,255,130,.08));animation:ringRotate 6s linear infinite;filter:blur(30px)}
.splash-logo-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;animation:logoPulse 2.5s ease-in-out infinite}
.splash-logo{width:90px;height:90px;border-radius:50%;filter:drop-shadow(0 0 20px rgba(0,229,255,.35))}
.splash-title{font-family:var(--hf-font-display);font-size:32px;font-weight:900;letter-spacing:4px;background:var(--hf-gradient-h);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradRainbow 8s linear infinite;z-index:1;margin-top:12px}
.splash-subtitle{font-size:13px;font-weight:400;color:var(--hf-text-muted);letter-spacing:1.5px;z-index:1;margin-top:6px}
.hf-eq{display:flex;align-items:flex-end;gap:4px;height:32px;z-index:1}
.hf-eq-bar{width:5px;border-radius:3px;background:var(--c);animation:eqBounce .6s ease-in-out infinite alternate;animation-delay:var(--d);transform-origin:bottom}
.splash-eq{margin-top:36px}
.splash-loading,.loader-text{font-size:12px;color:var(--hf-text-dim);letter-spacing:2px;font-weight:500;z-index:1;margin-top:10px}
.dots::after{content:'';animation:loadDots 1.5s steps(4,end) infinite}

/* ═══ LOGIN ═══ */
.login-container{position:relative;z-index:1;width:100%;max-width:380px;padding:0 24px;display:flex;flex-direction:column;align-items:center}
.login-logo{width:64px;height:64px;border-radius:50%;filter:drop-shadow(0 0 14px rgba(0,229,255,.3));margin-bottom:20px}
.login-title{font-family:var(--hf-font-display);font-size:24px;font-weight:800;background:var(--hf-gradient-h);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradRainbow 8s linear infinite}
.login-sub{font-size:13px;color:var(--hf-text-muted);margin-top:4px;margin-bottom:24px}
.members-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%}
.member-btn{position:relative;display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--hf-bg-card);border:1.5px solid var(--hf-border);border-radius:var(--hf-radius);color:var(--hf-text);font-family:var(--hf-font-ui);font-size:14px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);overflow:hidden;-webkit-tap-highlight-color:transparent}
.member-btn::before{content:'';position:absolute;inset:0;border-radius:var(--hf-radius);opacity:0;background:radial-gradient(circle at 50% 50%,var(--member-color),transparent 70%);transition:opacity .3s}
.member-btn:active::before{opacity:.15}
.member-btn:active{transform:scale(.96);border-color:var(--member-color);box-shadow:0 0 20px color-mix(in srgb,var(--member-color) 25%,transparent)}
.member-dot{width:12px;height:12px;border-radius:50%;background:var(--member-color);flex-shrink:0;box-shadow:0 0 8px color-mix(in srgb,var(--member-color) 40%,transparent)}
.member-name{position:relative;z-index:1}
.members-grid .member-btn:last-child:nth-child(odd){grid-column:1/-1;max-width:50%;justify-self:center}

/* ═══ PIN ═══ */
.back-btn{position:absolute;top:16px;left:16px;background:none;border:none;color:var(--hf-text-muted);cursor:pointer;padding:8px;transition:color .2s,transform .2s;z-index:5}
.back-btn:active{transform:scale(.9);color:var(--hf-text)}
.pin-avatar{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;font-family:var(--hf-font-display);margin-bottom:16px;border:3px solid var(--member-color,var(--hf-blue));box-shadow:0 0 24px color-mix(in srgb,var(--member-color,var(--hf-blue)) 30%,transparent);background:color-mix(in srgb,var(--member-color,var(--hf-blue)) 12%,var(--hf-bg-card));color:var(--member-color,var(--hf-blue))}
.pin-dots{display:flex;gap:16px;margin:20px 0 8px}
.pin-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}
.pin-dot.filled{background:var(--member-color,var(--hf-blue));border-color:var(--member-color,var(--hf-blue));box-shadow:0 0 10px color-mix(in srgb,var(--member-color,var(--hf-blue)) 50%,transparent);transform:scale(1.15)}
.pin-dot.error{border-color:#FF4757;background:#FF4757;animation:pinShake .4s ease}
.pin-error{font-size:12px;color:#FF4757;font-weight:600;height:18px;margin-bottom:8px}
.pin-keypad{display:grid;grid-template-columns:repeat(3,72px);gap:14px;margin-top:12px}
.key-btn{width:72px;height:72px;border-radius:50%;border:1.5px solid var(--hf-border);background:var(--hf-bg-elevated);color:var(--hf-text);font-family:var(--hf-font-ui);font-size:26px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s cubic-bezier(.4,0,.2,1);-webkit-tap-highlight-color:transparent}
.key-btn:active{transform:scale(.92);background:rgba(255,255,255,.08);border-color:var(--member-color,var(--hf-blue));box-shadow:0 0 16px color-mix(in srgb,var(--member-color,var(--hf-blue)) 20%,transparent)}
.key-btn.empty{visibility:hidden}
.key-btn.del{color:var(--hf-text-muted);font-size:16px}
.key-btn.del:active{color:#FF4757}

/* ═══ APP HEADER ═══ */
.app-header{position:relative;z-index:2;width:100%;display:flex;align-items:center;gap:12px;padding:12px 18px;padding-top:max(12px,env(safe-area-inset-top,12px));background:var(--hf-bg2);border-bottom:2px solid transparent;background-clip:padding-box}
.app-header::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--hf-gradient-h);background-size:300% auto;animation:gradRainbow 20s linear infinite}
.app-header-logo{width:36px;height:36px;border-radius:50%;filter:drop-shadow(0 0 8px rgba(0,229,255,.25))}
.app-header-info{flex:1}
.app-header-title{font-family:var(--hf-font-display);font-size:15px;font-weight:800;background:var(--hf-gradient-h);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradRainbow 8s linear infinite;display:block}
.app-header-user{font-size:11px;color:var(--hf-text-muted);font-weight:500}
.logout-btn{background:none;border:none;color:var(--hf-text-muted);cursor:pointer;padding:8px;transition:color .2s}
.logout-btn:active{color:#FF4757}

/* ═══ APP CONTENT ═══ */
.app-content{flex:1;z-index:1;width:100%;overflow-y:auto;padding-bottom:calc(70px + var(--safe-bottom))}
.module{display:none;padding:0 16px 16px}
.module.active{display:block;animation:fadeSlideUp .3s ease}

/* ═══ NAVBAR ═══ */
.app-navbar{position:fixed;bottom:0;left:0;right:0;z-index:100;display:flex;background:var(--hf-bg2);border-top:1px solid var(--hf-border);padding-bottom:var(--safe-bottom)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 8px;cursor:pointer;transition:all .2s}
.nav-icon{font-size:20px}
.nav-label{font-size:10px;font-weight:600;color:var(--hf-text-dim);font-family:var(--hf-font-ui);letter-spacing:.3px}
.nav-item.active .nav-label{background:var(--hf-gradient-h);background-size:300% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradRainbow 8s linear infinite;font-weight:700}
.nav-item.hidden{display:none}

/* ═══ PLANNING ═══ */
.planning-toolbar{padding:12px 16px 8px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:5;background:var(--hf-bg)}
.hf-select{background:var(--hf-bg-elevated);color:var(--hf-text);border:1px solid var(--hf-border);border-radius:var(--hf-radius-sm);padding:8px 12px;font-family:var(--hf-font-ui);font-size:13px;font-weight:600;outline:none;appearance:none;cursor:pointer;min-width:80px}
.month-scroller{display:flex;gap:6px;overflow-x:auto;flex:1;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:4px 0}
.month-scroller::-webkit-scrollbar{display:none}
.month-pill{padding:6px 14px;border-radius:50px;font-size:12px;font-weight:600;font-family:var(--hf-font-ui);white-space:nowrap;cursor:pointer;border:1px solid var(--hf-border);background:transparent;color:var(--hf-text-muted);transition:all .2s;flex-shrink:0}
.month-pill.active{background:var(--hf-gradient-h);background-size:300% auto;animation:gradRainbow 8s linear infinite;color:#080810;border-color:transparent;font-weight:700}
.month-pill.has-events{border-color:rgba(87,255,130,.3)}
.planning-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 0;gap:14px}
.planning-loader.hidden{display:none}

/* Events list */
.events-list{padding:0 0 8px}
.event-card{background:var(--hf-bg-card);border:1px solid var(--hf-border);border-radius:var(--hf-radius);padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:all .2s;position:relative;overflow:hidden}
.event-card:active{transform:scale(.98);border-color:var(--hf-border-glow)}
.event-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:4px 0 0 4px}
.event-card.st-valide::before{background:#0a53a8}
.event-card.st-encours::before{background:var(--hf-gold)}
.event-card.st-libre::before{background:#9B7FFF}
.event-card.st-annule::before{background:#FF4757}
.event-card.st-repetition::before{background:#753800}
.event-date{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.event-day{font-size:11px;font-weight:700;color:var(--hf-text-muted);text-transform:uppercase;letter-spacing:.5px}
.event-date-num{font-size:13px;font-weight:700;color:var(--hf-text)}
.event-name{font-size:15px;font-weight:700;color:var(--hf-text);margin-bottom:6px}
.event-statut{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.3px}
.event-statut.s-valide{background:rgba(10,83,168,.2);color:#5ba8f5}
.event-statut.s-encours{background:rgba(221,166,23,.15);color:var(--hf-gold)}
.event-statut.s-libre{background:rgba(155,127,255,.15);color:var(--hf-purple)}
.event-statut.s-annule{background:rgba(255,71,87,.15);color:#FF4757}
.event-statut.s-repetition{background:rgba(117,56,0,.2);color:#c67a30}
.event-presences{display:flex;gap:4px;flex-wrap:wrap;margin-top:8px}
.presence-chip{padding:3px 8px;border-radius:12px;font-size:10px;font-weight:600;font-family:var(--hf-font-ui)}
.presence-chip.me{border:1.5px solid var(--hf-green);box-shadow:0 0 8px rgba(87,255,130,.15)}
.my-status{font-size:11px;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:6px}
.my-status-dot{width:8px;height:8px;border-radius:50%}

/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:200;display:flex;align-items:flex-end;justify-content:center}
.modal-card{background:var(--hf-bg-card);border-radius:var(--hf-radius-lg) var(--hf-radius-lg) 0 0;width:100%;max-width:500px;max-height:85vh;overflow-y:auto;animation:modalSlideUp .3s ease;padding:20px;padding-bottom:calc(20px + var(--safe-bottom))}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:none;color:var(--hf-text-muted);font-size:24px;cursor:pointer;padding:4px;z-index:1}
.modal-header{margin-bottom:16px}
.modal-event-name{font-family:var(--hf-font-display);font-size:20px;font-weight:800;color:var(--hf-text);margin-bottom:4px}
.modal-event-date{font-size:13px;color:var(--hf-text-muted)}
.modal-section{margin-bottom:16px}
.modal-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--hf-text-muted);margin-bottom:8px}
.modal-presence-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--hf-bg-elevated);border-radius:var(--hf-radius-sm);margin-bottom:6px}
.modal-member-name{font-size:14px;font-weight:600}
.modal-presence-select{background:var(--hf-bg-card);color:var(--hf-text);border:1px solid var(--hf-border);border-radius:var(--hf-radius-sm);padding:6px 10px;font-family:var(--hf-font-ui);font-size:12px;font-weight:600;outline:none;cursor:pointer;min-width:120px}
.modal-presence-select.updating{opacity:.5;pointer-events:none}
.modal-presence-badge{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:700}
.toast{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--hf-green);color:#080810;padding:10px 20px;border-radius:50px;font-size:13px;font-weight:700;font-family:var(--hf-font-ui);z-index:300;transition:transform .3s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 20px rgba(87,255,130,.3)}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.error{background:#FF4757;color:#fff}

/* ═══ PLACEHOLDERS ═══ */
.placeholder-card{text-align:center;padding:60px 24px;color:var(--hf-text-muted)}
.placeholder-icon{font-size:48px;margin-bottom:16px}
.placeholder-card h3{font-family:var(--hf-font-display);font-size:18px;font-weight:800;color:var(--hf-text);margin-bottom:6px}
.placeholder-card p{font-size:13px}

.empty-state{text-align:center;padding:60px 20px;color:var(--hf-text-muted)}
.empty-icon{font-size:40px;margin-bottom:10px;opacity:.5}
.empty-text{font-size:14px;font-weight:500}

/* ═══ ANIMATIONS ═══ */
@keyframes ringRotate{to{transform:rotate(360deg)}}
@keyframes logoPulse{0%,100%{transform:translate(-50%,-50%) scale(1);filter:drop-shadow(0 0 20px rgba(0,229,255,.35))}50%{transform:translate(-50%,-50%) scale(1.06);filter:drop-shadow(0 0 30px rgba(87,255,130,.45))}}
@keyframes eqBounce{0%{height:6px}100%{height:28px}}
@keyframes gradRainbow{0%{background-position:0% center}100%{background-position:300% center}}
@keyframes loadDots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
@keyframes pinShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ═══ RESPONSIVE ═══ */
@media(max-height:680px){.splash-ring-wrap{width:150px;height:150px}.splash-logo{width:65px;height:65px}.splash-title{font-size:26px}.pin-keypad{gap:10px}.key-btn{width:62px;height:62px;font-size:22px}}
@media(max-width:360px){.members-grid{gap:8px}.member-btn{padding:10px 12px;font-size:13px}.pin-keypad{gap:10px}.key-btn{width:60px;height:60px;font-size:22px}}