@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Lato:wght@300;400;700&display=swap');

:root {
  --beige: #F7F3EE;
  --beige-dark: #EDE7DC;
  --beige-deep: #D9CFC2;
  --sage: #7A9E7E;
  --sage-light: #9DB8A0;
  --sage-dark: #4A7050;
  --sage-pale: #EBF2EC;
  --gold: #B8956A;
  --gold-light: #D4B48A;
  --gold-pale: #F5EDE0;
  --text-dark: #2A2A2A;
  --text-medium: #555555;
  --text-light: #888888;
  --white: #FFFFFF;
  --shadow: 0 4px 24px rgba(74,112,80,0.10);
  --shadow-strong: 0 8px 40px rgba(74,112,80,0.18);
  --radius: 12px;
  --radius-sm: 6px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:'Lato',sans-serif;background:var(--beige);color:var(--text-dark);min-height:100vh;overflow-x:hidden}

/* SPLASH */
#splash{position:fixed;inset:0;background:linear-gradient(160deg,#2d4a30 0%,#4A7050 50%,#7A9E7E 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity 0.8s ease}
.sp-icon{width:90px;height:90px;animation:float 3s ease-in-out infinite;margin-bottom:20px;mix-blend-mode:screen;filter:brightness(1.2) contrast(1.1)}
#splash h1{font-family:'Playfair Display',serif;font-size:28px;color:#fff;font-weight:400;letter-spacing:3px;text-align:center}
#splash p{color:rgba(255,255,255,0.75);font-size:11px;letter-spacing:4px;margin-top:8px;text-transform:uppercase}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* RGPD */
#rgpd-banner{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:2px solid var(--sage);padding:18px;z-index:1000;box-shadow:0 -4px 20px rgba(0,0,0,0.08);display:none}
#rgpd-banner p{font-size:13px;color:var(--text-medium);margin-bottom:12px;line-height:1.6}
.rgpd-btns{display:flex;gap:10px}
.rgpd-btns button{flex:1;padding:10px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-family:'Lato',sans-serif;font-size:14px}
.btn-accept{background:var(--sage);color:#fff}
.btn-decline{background:var(--beige-dark);color:var(--text-medium)}

/* AUTH */
#auth-screen{position:fixed;inset:0;background:var(--beige);flex-direction:column;align-items:center;justify-content:center;padding:30px;z-index:500;display:none}
.auth-logo{width:70px;height:70px;margin-bottom:12px;opacity:0.85;mix-blend-mode:multiply}
.auth-title{font-family:'Playfair Display',serif;font-size:26px;color:var(--sage-dark);font-weight:400;margin-bottom:4px;letter-spacing:1px}
.auth-sub{font-size:11px;color:var(--gold);letter-spacing:3px;text-transform:uppercase;margin-bottom:28px}
.auth-tabs{display:flex;border:1.5px solid var(--sage);border-radius:var(--radius-sm);overflow:hidden;margin-bottom:22px}
.auth-tab{flex:1;padding:10px;text-align:center;cursor:pointer;font-size:14px;background:transparent;border:none;font-family:'Lato',sans-serif;color:var(--sage);transition:all 0.2s;letter-spacing:0.5px}
.auth-tab.active{background:var(--sage);color:#fff}
.auth-form{width:100%;max-width:340px}
.auth-form input{width:100%;padding:13px 15px;border:1px solid var(--beige-deep);border-radius:var(--radius-sm);font-family:'Lato',sans-serif;font-size:14px;background:#fff;color:var(--text-dark);margin-bottom:11px;outline:none;transition:border-color 0.2s}
.auth-form input:focus{border-color:var(--sage)}
.btn-primary{width:100%;padding:14px;background:var(--sage);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'Lato',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background 0.2s;margin-bottom:11px;letter-spacing:1px;text-transform:uppercase}
.btn-primary:hover{background:var(--sage-dark)}
.btn-guest{width:100%;padding:11px;background:transparent;color:var(--sage);border:1px solid var(--sage);border-radius:var(--radius-sm);font-family:'Lato',sans-serif;font-size:13px;cursor:pointer;letter-spacing:0.5px}
.auth-error{color:#c0392b;font-size:13px;text-align:center;margin-bottom:10px;min-height:18px}
.auth-hint{font-size:11px;color:var(--text-light);text-align:center;line-height:1.5;margin-top:8px}

/* APP */
#app{display:none;flex-direction:column;min-height:100vh;padding-bottom:72px}

/* HEADER */
.app-header{background:linear-gradient(135deg,#2d4a30,var(--sage-dark),var(--sage));padding:12px 18px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
.header-left{display:flex;align-items:center;gap:10px}
.header-logo-img{width:32px;height:32px;mix-blend-mode:screen;filter:brightness(1.3);opacity:0.95}
.header-title{font-family:'Playfair Display',serif;color:#fff;font-size:18px;font-weight:400;letter-spacing:1px;line-height:1.1}
.header-title span{display:block;font-size:10px;letter-spacing:3px;font-family:'Lato',sans-serif;opacity:0.75;text-transform:uppercase;font-weight:300}
.user-badge{background:rgba(255,255,255,0.18);color:#fff;padding:4px 10px;border-radius:20px;font-size:11px;letter-spacing:0.5px}
.btn-logout{background:transparent;border:1px solid rgba(255,255,255,0.35);color:#fff;padding:5px 11px;border-radius:20px;font-size:11px;cursor:pointer;font-family:'Lato',sans-serif}

/* TABS */
.tab-content{display:none;padding:20px;animation:fadeIn 0.3s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}

/* BOTTOM NAV */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--beige-deep);display:flex;z-index:100;box-shadow:0 -2px 16px rgba(0,0,0,0.06)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:9px 4px;cursor:pointer;border:none;background:transparent;transition:all 0.2s}
.nav-icon{font-size:19px;margin-bottom:2px}
.nav-label{font-size:9px;color:var(--text-light);font-family:'Lato',sans-serif;letter-spacing:0.5px}
.nav-item.active .nav-label{color:var(--sage);font-weight:700}
.nav-item.active .nav-icon{transform:scale(1.12)}

/* TYPOGRAPHY */
.section-title{font-family:'Playfair Display',serif;font-size:24px;color:var(--sage-dark);font-weight:400;margin-bottom:4px;letter-spacing:0.5px}
.section-sub{font-size:11px;color:var(--gold);margin-bottom:18px;letter-spacing:2px;text-transform:uppercase}
.card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}

/* DIVIDER inspired by site */
.divider{width:60px;height:1px;background:var(--gold);margin:8px auto 16px;opacity:0.6}

/* PROGRAMME */
.month-header{background:linear-gradient(135deg,#2d4a30,var(--sage));border-radius:var(--radius);padding:20px;margin-bottom:18px;color:#fff;text-align:center}
.month-header h2{font-family:'Playfair Display',serif;font-size:24px;font-weight:400;letter-spacing:1px}
.month-header p{font-size:10px;opacity:0.75;letter-spacing:3px;text-transform:uppercase;margin-top:5px}
.event-card{background:#fff;border-radius:var(--radius);padding:15px;margin-bottom:11px;box-shadow:var(--shadow);border-left:3px solid var(--sage)}
.event-card.lune{border-left-color:#9B7FB6}
.event-card.fete{border-left-color:var(--gold)}
.event-date{font-size:10px;color:var(--sage);font-weight:700;letter-spacing:2px;margin-bottom:5px;text-transform:uppercase}
.event-card.lune .event-date{color:#9B7FB6}
.event-card.fete .event-date{color:var(--gold)}
.event-title{font-family:'Playfair Display',serif;font-size:16px;color:var(--text-dark);margin-bottom:5px;font-weight:500}
.event-desc{font-size:13px;color:var(--text-medium);line-height:1.65}
.event-desc.collapsed{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.event-more{font-size:11px;color:var(--sage);cursor:pointer;margin-top:5px;display:inline-block;letter-spacing:0.5px}
.event-price{display:inline-block;background:var(--gold-pale);color:var(--gold);padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;margin-top:7px;letter-spacing:0.5px}
.upload-zone{background:var(--beige-dark);border:1.5px dashed var(--beige-deep);border-radius:var(--radius);padding:18px;text-align:center;margin-bottom:16px;cursor:pointer;transition:all 0.2s}
.upload-zone:hover{border-color:var(--sage);background:var(--sage-pale)}
.upload-zone p{font-size:13px;color:var(--text-medium)}

/* VIDÉOS */
.locked-msg{text-align:center;padding:36px 18px}
.locked-msg .lock{font-size:44px;margin-bottom:14px}
.locked-msg h3{font-family:'Playfair Display',serif;font-size:20px;color:var(--sage-dark);margin-bottom:7px}
.locked-msg p{font-size:14px;color:var(--text-medium);line-height:1.65;margin-bottom:18px}
.video-card{background:#fff;border-radius:var(--radius);overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow)}
.video-thumb{position:relative;padding-top:56.25%;background:var(--sage-pale)}
.video-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:none}
.video-info{padding:13px}
.video-title{font-family:'Playfair Display',serif;font-size:16px;color:var(--text-dark);margin-bottom:3px}
.video-desc{font-size:13px;color:var(--text-medium)}
.drive-card{background:#fff;border-radius:var(--radius);padding:15px;margin-bottom:11px;box-shadow:var(--shadow);display:flex;align-items:center;gap:13px;cursor:pointer;transition:transform 0.2s}
.drive-card:active{transform:scale(0.98)}
.drive-card-icon{font-size:32px;flex-shrink:0}
.drive-card-info h4{font-size:14px;color:var(--text-dark);margin-bottom:3px;font-family:'Playfair Display',serif}
.drive-card-info p{font-size:12px;color:var(--text-light)}

/* RDV */
.rdv-wrap{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.rdv-wrap iframe{width:100%;height:580px;border:none}

/* MÉDITATION */
.setup-card{background:#fff;border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow)}
.setup-title{font-family:'Playfair Display',serif;font-size:18px;color:var(--sage-dark);margin-bottom:14px;font-weight:500}
.setup-row{margin-bottom:15px}
.setup-label{font-size:11px;color:var(--text-medium);margin-bottom:7px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.dur-btns,.breath-btns{display:flex;gap:7px;flex-wrap:wrap}
.dur-btn,.breath-btn{padding:7px 14px;border-radius:20px;border:1px solid var(--beige-deep);background:transparent;font-family:'Lato',sans-serif;font-size:12px;color:var(--text-medium);cursor:pointer;transition:all 0.2s}
.dur-btn.active,.breath-btn.active{background:var(--sage);border-color:var(--sage);color:#fff}
.type-btns{display:flex;flex-direction:column;gap:7px}
.type-btn{padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--beige-deep);background:transparent;font-family:'Lato',sans-serif;font-size:13px;color:var(--text-medium);cursor:pointer;transition:all 0.2s;text-align:left}
.type-btn.active{background:var(--sage-pale);border-color:var(--sage);color:var(--sage-dark)}
.btn-start-med{width:100%;padding:15px;background:linear-gradient(135deg,#2d4a30,var(--sage));color:#fff;border:none;border-radius:var(--radius);font-family:'Playfair Display',serif;font-size:18px;cursor:pointer;box-shadow:var(--shadow);transition:all 0.3s;letter-spacing:2px}
.btn-start-med:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong)}

/* TIMER */
#med-timer{display:none;text-align:center;padding:16px}
.timer-phase{font-size:11px;color:var(--sage);letter-spacing:3px;text-transform:uppercase;margin-bottom:14px;font-weight:700}
.timer-wrap{position:relative;width:220px;height:220px;margin:0 auto 18px}
.timer-svg{width:100%;height:100%;transform:rotate(-90deg)}
.t-bg{fill:none;stroke:var(--beige-dark);stroke-width:6}
.t-prog{fill:none;stroke:var(--sage);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.breath-anim{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,var(--sage-light),var(--sage-dark));opacity:0.8}
.timer-num{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Playfair Display',serif;font-size:36px;color:#fff;font-weight:400}
.timer-instr{font-family:'Playfair Display',serif;font-size:16px;color:var(--text-medium);font-style:italic;margin-bottom:18px;min-height:26px;padding:0 10px;line-height:1.5}
.timer-btns{display:flex;gap:10px;justify-content:center}
.t-btn{padding:9px 22px;border-radius:20px;border:none;font-family:'Lato',sans-serif;font-size:12px;cursor:pointer;transition:all 0.2s;letter-spacing:0.5px;text-transform:uppercase}
.t-pause{background:var(--beige-dark);color:var(--text-dark)}
.t-stop{background:#fde8e8;color:#c0392b}

/* MÉDITATION LIBRARY */
.med-lib-card{background:#fff;border-radius:var(--radius);padding:14px;margin-bottom:10px;box-shadow:var(--shadow);display:flex;align-items:center;gap:12px;cursor:pointer;transition:all 0.2s;border-left:3px solid var(--sage)}
.med-lib-card:hover{transform:translateX(3px);box-shadow:var(--shadow-strong)}
.med-lib-card.shared{border-left-color:var(--gold)}
.med-lib-info h4{font-family:'Playfair Display',serif;font-size:15px;color:var(--text-dark);margin-bottom:3px}
.med-lib-info p{font-size:11px;color:var(--text-light);letter-spacing:0.5px}
.med-lib-actions{margin-left:auto;display:flex;gap:6px}
.btn-lib{padding:5px 10px;border-radius:20px;border:none;font-size:11px;cursor:pointer;font-family:'Lato',sans-serif}
.btn-lib-play{background:var(--sage);color:#fff}
.btn-lib-share{background:var(--gold-pale);color:var(--gold)}
.btn-lib-del{background:#fde8e8;color:#c0392b}

/* TCHAT */
.chat-wrap{display:flex;flex-direction:column;height:calc(100vh - 195px)}
.chat-msgs{flex:1;overflow-y:auto;padding:8px 0}
.chat-msg{display:flex;margin-bottom:12px;gap:9px}
.chat-msg.sent{flex-direction:row-reverse}
.msg-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;background:var(--sage-pale)}
.chat-msg.sent .msg-av{background:var(--sage)}
.msg-bub{max-width:75%;padding:9px 13px;border-radius:14px}
.chat-msg:not(.sent) .msg-bub{background:#fff;color:var(--text-dark);border-bottom-left-radius:4px;box-shadow:var(--shadow)}
.chat-msg.sent .msg-bub{background:var(--sage);color:#fff;border-bottom-right-radius:4px}
.msg-txt{font-size:13px;line-height:1.55}
.msg-time{font-size:10px;opacity:0.55;margin-top:3px}
.chat-in-area{background:#fff;border-top:1px solid var(--beige-deep);padding:11px;display:flex;gap:9px;align-items:center}
.chat-in{flex:1;padding:9px 13px;border:1px solid var(--beige-deep);border-radius:20px;font-family:'Lato',sans-serif;font-size:13px;outline:none;background:var(--beige)}
.chat-in:focus{border-color:var(--sage)}
.chat-send{width:36px;height:36px;border-radius:50%;background:var(--sage);border:none;color:#fff;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-mic{width:36px;height:36px;border-radius:50%;background:var(--beige-dark);border:none;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-mic.rec{background:#ff4444;animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.6}}
.guest-notice{background:var(--sage-pale);border:1px solid var(--sage);border-radius:var(--radius);padding:15px;text-align:center;margin-bottom:14px}
.guest-notice p{font-size:13px;color:var(--sage-dark);line-height:1.55}

/* PROFIL */
.profil-hero{background:linear-gradient(135deg,#2d4a30,var(--sage));border-radius:var(--radius);padding:28px 22px;text-align:center;box-shadow:var(--shadow);margin-bottom:14px}
.profil-av{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-size:26px;color:#fff;margin:0 auto 10px;border:2px solid rgba(255,255,255,0.4)}
.profil-name{font-family:'Playfair Display',serif;font-size:20px;color:#fff;margin-bottom:3px;font-weight:400}
.profil-email{font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:14px}
.profil-badge{display:inline-block;background:rgba(255,255,255,0.2);color:#fff;padding:4px 13px;border-radius:20px;font-size:11px;letter-spacing:1px}
.rgpd-card{background:#fff;border-radius:var(--radius);padding:15px;margin-bottom:11px;box-shadow:var(--shadow)}
.rgpd-card h4{font-size:13px;color:var(--text-dark);margin-bottom:7px;font-weight:700;letter-spacing:0.5px}
.rgpd-card p{font-size:13px;color:var(--text-medium);line-height:1.55;margin-bottom:9px}
.btn-danger{padding:9px 18px;background:#fdf0f0;color:#c0392b;border:1px solid #e8c0c0;border-radius:var(--radius-sm);font-family:'Lato',sans-serif;font-size:12px;cursor:pointer;letter-spacing:0.5px}
.mentions{background:var(--beige-dark);border-radius:var(--radius);padding:15px}
.mentions h4{font-size:12px;color:var(--text-dark);margin-bottom:7px;letter-spacing:1px;text-transform:uppercase}
.mentions p{font-size:12px;color:var(--text-medium);line-height:1.7}

/* ADMIN */
.admin-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.admin-card h3{font-family:'Playfair Display',serif;font-size:18px;color:var(--sage-dark);margin-bottom:13px;font-weight:500}
.admin-card input,.admin-card textarea,.admin-card select{width:100%;padding:10px 13px;border:1px solid var(--beige-deep);border-radius:var(--radius-sm);font-family:'Lato',sans-serif;font-size:13px;margin-bottom:9px;background:var(--beige);outline:none}
.admin-card input:focus,.admin-card textarea:focus{border-color:var(--sage)}
.admin-card textarea{min-height:90px;resize:vertical}
.btn-adm{padding:9px 18px;background:var(--sage);color:#fff;border:none;border-radius:var(--radius-sm);font-family:'Lato',sans-serif;font-size:12px;cursor:pointer;margin-right:7px;margin-bottom:7px;letter-spacing:0.5px;text-transform:uppercase}
.client-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--beige-dark)}
.client-row:last-child{border-bottom:none}
.c-info{font-size:14px;color:var(--text-dark)}
.c-email{font-size:11px;color:var(--text-light)}

/* TOAST */
.toast{position:fixed;top:72px;left:50%;transform:translateX(-50%);background:var(--sage-dark);color:#fff;padding:9px 18px;border-radius:20px;font-size:12px;z-index:9999;opacity:0;transition:opacity 0.3s;pointer-events:none;white-space:nowrap;letter-spacing:0.5px}
.toast.show{opacity:1}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.3);border-top-color:#fff;border-radius:50%;animation:spin 0.8s linear infinite;vertical-align:middle;margin-right:6px}
@keyframes spin{to{transform:rotate(360deg)}}