/* Base (proche du site d'origine) */ :root{ --bg-gradient: linear-gradient(160deg, #ffe4ee 0%, #fff9f4 40%, #fbe4ff 100%); --card-bg: #ffffffee; --accent: #ff6b9c; --accent-soft: #ffe3f0; --accent-strong: #ff4b88; --text-main: #2d1b24; --text-soft: #7a4f67; --radius-lg: 22px; --shadow-soft: 0 12px 30px #e89ab430; --border-soft: #f2c9d7; --cycle-period: #fb7185; --cycle-fertile: #fdba74; --cycle-ovulation: #f97316; --cycle-next: #ffe4f1; } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html, body{max-width:100%;overflow-x:hidden} body{ margin:0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif; background: var(--bg-gradient); color: var(--text-main); } body.theme-rose{ --bg-gradient: linear-gradient(160deg, #ffe4ee 0%, #fff9f4 40%, #fbe4ff 100%); --card-bg:#ffffffee; --accent:#ff6b9c; --accent-soft:#ffe3f0; --accent-strong:#ff4b88; --text-main:#2d1b24; --text-soft:#7a4f67; --border-soft:#f2c9d7; --shadow-soft:0 12px 30px #e89ab430; --cycle-period:#fb7185; --cycle-fertile:#fdba74; --cycle-ovulation:#f97316; --cycle-next:#ffe4f1; } body.theme-lavande{ --bg-gradient: linear-gradient(150deg, #f3e8ff 0%, #fdf2ff 45%, #e0f2fe 100%); --card-bg:#ffffffee; --accent:#a855f7; --accent-soft:#f3e8ff; --accent-strong:#7e22ce; --text-main:#312e81; --text-soft:#6b21a8; --border-soft:#ddd6fe; --shadow-soft:0 12px 30px #c4b5fd55; --cycle-period:#a78bfa; --cycle-fertile:#60a5fa; --cycle-ovulation:#2563eb; --cycle-next:#ede9fe; } body.theme-pivoine{ --bg-gradient: linear-gradient(155deg, #ffe4ee 0%, #fff2f7 35%, #ffe1f0 100%); --card-bg:#ffffffee; --accent:#ff4b88; --accent-soft:#ffe1f0; --accent-strong:#db2777; --text-main:#2d1b24; --text-soft:#7a4f67; --border-soft:#f7b8d0; --shadow-soft:0 12px 30px #ff4b8840; --cycle-period:#fb7185; --cycle-fertile:#fda4af; --cycle-ovulation:#db2777; --cycle-next:#ffe4f1; } body.theme-satin{ --bg-gradient: linear-gradient(160deg, #fff9f4 0%, #fff1f7 40%, #f3f4ff 100%); --card-bg:#ffffffee; --accent:#ff7aa2; --accent-soft:#fff1f7; --accent-strong:#ff4b88; --text-main:#2d1b24; --text-soft:#7a4f67; --border-soft:#f1c6d6; --shadow-soft:0 12px 30px #e89ab430; --cycle-period:#fb7185; --cycle-fertile:#fdba74; --cycle-ovulation:#f97316; --cycle-next:#fff1f7; } .app{ min-height:100vh; display:flex; flex-direction:column; padding:16px; padding-bottom:128px; max-width: 1120px; margin:0 auto; position:relative; } .blur-when-modal{filter:blur(0);transition:filter .2s ease-out} .blurred{filter: blur(4px)} .app-header{padding:4px 4px 10px;display:flex;flex-direction:column;gap:4px} .app-header-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .app-header-buttons{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .app-title{font-size:22px;font-weight:700;letter-spacing:.03em;display:inline-flex;align-items:center;gap:6px} .app-title span.logo{ width:30px;height:30px;border-radius:999px; background: radial-gradient(circle at 30% 20%, #ffeef7, #ff8fb3); display:flex;align-items:center;justify-content:center; font-size:18px;color:white;box-shadow:0 6px 18px #ff6b9c55; } body.theme-lavande .app-title span.logo{background: radial-gradient(circle at 30% 20%, #f5f3ff, #a855f7);box-shadow:0 6px 18px #a855f766} body.theme-pivoine .app-title span.logo{background: radial-gradient(circle at 30% 20%, #fff1f7, #ff4b88);box-shadow:0 6px 18px #ff4b8866} body.theme-satin .app-title span.logo{background: radial-gradient(circle at 30% 20%, #fff9fb, #ff7aa2);box-shadow:0 6px 18px #ff7aa266} .profile-btn{ border-radius:999px;border:none; padding:6px 10px;font-size:12px; display:inline-flex;align-items:center;gap:6px; background:#ffffffaa;color:var(--text-soft); box-shadow:0 4px 12px #e3b3c540;cursor:pointer; user-select:none; } .profile-btn span.icon{font-size:16px;display:inline-flex;align-items:center;line-height:1} .profile-btn span.icon svg{width:16px;height:16px;display:block} .profile-btn.discreet{ background:#2f3b4f;color:#f9f3ff; box-shadow:0 4px 14px #2f3b4f66;font-size:11px; } .app-subtitle{font-size:13px;color:var(--text-soft)} .app-greeting{font-size:13px;color:var(--text-main);font-weight:500} .app-main{display:flex;flex-direction:column;gap:12px;flex:1} .card{ background:var(--card-bg); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft); padding:14px 14px 16px; } .card-lite{ background: #ffffffc8; border-radius: 16px; padding: 10px 12px; box-shadow: 0 10px 24px #e89ab420; } body.theme-lavande .card-lite{background:#ffffffdd} body.theme-pivoine .card-lite{background:#ffffffdd} body.theme-satin .card-lite{background:#ffffffdd} .today-header{display:flex;justify-content:space-between;align-items:center;gap:8px} .today-title{font-weight:600;font-size:15px} .today-date{font-size:12px;color:var(--text-soft)} .cycle-chip{ margin-top:6px;font-size:12px;padding:4px 9px;border-radius:999px; display:inline-flex;align-items:center;gap:6px; background:#ffeef7;color:var(--text-soft); } .cycle-chip strong{color:var(--accent-strong)} .quick-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .chip{ padding:7px 11px;border-radius:999px;background:var(--accent-soft); font-size:13px;display:inline-flex;align-items:center;gap:6px; color:var(--text-soft);border:none;cursor:pointer; } .chip span.emoji{font-size:15px} .chip.tiny{padding:5px 9px;font-size:12px} .content-title{font-weight:600;margin-top:4px;margin-bottom:6px;font-size:15px} .content-text{font-size:14px;line-height:1.45;color:var(--text-soft)} .content-card .content-title{font-size:16px} .content-card .content-text{font-size:14px} .mini-calendar{ margin-top:10px;border-radius:16px;background:#fff6fb; padding:10px 12px;font-size:12px;color:var(--text-soft); } body.theme-lavande .mini-calendar{background:#f7f3ff} body.theme-pivoine .mini-calendar{background:#fff2f7} body.theme-satin .mini-calendar{background:#fff4f8} .mini-cal-header{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:4px} .mini-cal-header strong{font-size:13px;color:var(--text-main)} .mini-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:4px} .mini-cal-day{ text-align:center;font-size:11px;padding:3px 0;border-radius:8px;min-height:18px; position:relative; } .mini-cal-day[data-iso]{ cursor:pointer; transition: box-shadow .12s ease, transform .12s ease, filter .12s ease; -webkit-tap-highlight-color: transparent; } /* [MB_PATCH:CALENDAR_HOVER_TAP v1] */ .mini-cal-day[data-iso]:hover{ box-shadow:0 8px 18px rgba(0,0,0,.14); transform: translateY(-1px); filter: brightness(1.04); } .mini-cal-day[data-iso]:active{ box-shadow:0 10px 22px rgba(0,0,0,.18); transform: translateY(0); filter: brightness(1.02); } .mini-cal-day.header{font-weight:600;opacity:.7} .mini-cal-day.empty{opacity:0} .mini-cal-day.today{border:1px solid var(--accent-soft)} .mini-cal-day.phase-period{background: var(--cycle-period); color:#fff; font-weight:700} .mini-cal-day.phase-fertile{background: var(--cycle-fertile); color:#3b1b2a; font-weight:700} .mini-cal-day.phase-ovu{background: var(--cycle-ovulation); color:#fff; font-weight:800} .mini-cal-day.phase-next{background: var(--cycle-next); color: var(--text-main); font-weight:700; border:1px dashed var(--accent-strong)} .mini-cal-day.has-appt::after{ content:"•"; position:absolute; right:4px; top:1px; font-size:14px; color: var(--accent-strong); } .mini-cal-footer{margin-top:6px;font-size:11px} .mini-cal-legend{margin-top:6px;font-size:10px;opacity:.85;display:flex;flex-wrap:wrap;gap:6px} .legend-dot{display:inline-flex;align-items:center;gap:4px} .legend-dot span{width:10px;height:10px;border-radius:50%;display:inline-block} /* [MB_PATCH:CYCLE_COUNTDOWN_BUBBLE v2 — Crystal 3D Glassmorphism] */ @keyframes bubbleFloat { 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-6px) scale(1.015);} } @keyframes bubblePulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,107,156,.32), 0 20px 50px rgba(255,107,156,.22), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 6px rgba(255,107,156,.15);} 60%{box-shadow:0 0 0 12px rgba(255,107,156,.06), 0 24px 60px rgba(255,107,156,.32), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -2px 6px rgba(255,107,156,.15);} } @keyframes shimmer { 0%{background-position:200% center;} 100%{background-position:-200% center;} } @keyframes latePulse { 0%,100%{box-shadow:0 0 0 0 rgba(251,113,133,.4), 0 20px 50px rgba(251,113,133,.3);} 60%{box-shadow:0 0 0 14px rgba(251,113,133,.08), 0 24px 60px rgba(251,113,133,.4);} } .cycle-countdown{display:flex;justify-content:center;align-items:center;margin:10px 0 6px} .cycle-bubble{ width: clamp(130px, 30vw, 162px); height: clamp(130px, 30vw, 162px); border-radius: 999px; display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center; position:relative; padding: 12px; background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.96) 0%, transparent 52%), radial-gradient(circle at 70% 78%, rgba(255,107,156,.18) 0%, transparent 48%), linear-gradient(145deg, rgba(255,255,255,.88) 0%, var(--accent-soft) 40%, rgba(255,180,210,.72) 75%, var(--accent) 100%); border: 1.5px solid rgba(255,255,255,.82); box-shadow: 0 20px 50px rgba(255,107,156,.22), 0 4px 12px rgba(255,107,156,.12), inset 0 2px 0 rgba(255,255,255,.92), inset 0 -2px 6px rgba(255,107,156,.12); animation: bubbleFloat 4s ease-in-out infinite, bubblePulse 4s ease-in-out infinite; overflow:hidden; cursor:default; transition: transform .2s ease; } .cycle-bubble::before{ content:""; position:absolute; top:6%; left:14%; width:28%; height:18%; border-radius:999px; background: rgba(255,255,255,.70); filter:blur(4px); transform:rotate(-30deg); pointer-events:none; } .cycle-bubble::after{ content:""; position:absolute; bottom:8%; right:10%; width:14%; height:10%; border-radius:999px; background: rgba(255,255,255,.38); filter:blur(3px); pointer-events:none; } .cycle-bubble:hover{transform:translateY(-4px) scale(1.04);} .cycle-bubble.is-late{ background: radial-gradient(circle at 28% 22%, rgba(255,255,255,.88) 0%, transparent 45%), linear-gradient(145deg, rgba(255,200,210,.9) 0%, rgba(251,113,133,.6) 45%, var(--cycle-period) 100%); animation: bubbleFloat 4s ease-in-out infinite, latePulse 2.8s ease-in-out infinite; border-color: rgba(255,200,215,.7); } .cycle-bubble-title{ font-size:11px;color:var(--text-soft);font-weight:800; letter-spacing:.5px;text-transform:uppercase; position:relative;z-index:1; text-shadow:0 1px 2px rgba(255,255,255,.8); } .cycle-bubble-value{ font-size:40px;line-height:1;font-weight:900;color:var(--text-main);margin-top:5px; position:relative;z-index:1; text-shadow:0 2px 8px rgba(255,107,156,.18), 0 1px 0 rgba(255,255,255,.6); background: linear-gradient(135deg, var(--text-main) 0%, var(--accent-strong) 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation: shimmer 3s linear infinite; } .cycle-bubble.is-late .cycle-bubble-value{ background:linear-gradient(135deg,#fff 0%, #ffe0ea 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:none; animation:none; } .cycle-bubble-sub{ font-size:11px;color:var(--text-soft);margin-top:5px; position:relative;z-index:1; font-weight:600; text-shadow:0 1px 2px rgba(255,255,255,.8); } .cycle-bubble.is-late .cycle-bubble-title,.cycle-bubble.is-late .cycle-bubble-sub{color:rgba(255,255,255,.95);text-shadow:0 1px 4px rgba(200,0,60,.25);} .legend-dot{display:inline-flex;align-items:center;gap:4px} .legend-dot i{width:9px;height:9px;border-radius:99px;display:inline-block} .legend-dot .p{background:var(--cycle-period)} .legend-dot .f{background:var(--cycle-fertile)} .legend-dot .o{background:var(--cycle-ovulation)} .legend-dot .n{background:var(--cycle-next);border:1px dashed var(--accent-strong)} .reminder-banner{ margin-top:10px;border-radius:14px;background:#fff2e8;padding:8px 10px; font-size:12px;color:#a25234;display:none; } .reminder-banner.visible{display:block} .reminder-title{font-weight:600;margin-bottom:2px;font-size:12px} .bottom-nav{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(env(safe-area-inset-bottom, 0px) + 10px); padding:10px 12px; background:rgba(255,255,255,.82); backdrop-filter: blur(14px); border:1px solid rgba(255,105,180,.18); border-radius:999px; box-shadow:0 18px 50px rgba(0,0,0,.14); display:inline-flex; gap:10px; justify-content:center; align-items:center; z-index:80; max-width:calc(100vw - 36px); overflow:auto; -webkit-overflow-scrolling: touch; } .nav-btn{ flex:0 0 auto;border-radius:999px;border:none;padding:9px 10px;font-size:12px; display:flex;align-items:center;justify-content:center;gap:5px; background:transparent;color:var(--text-soft);cursor:pointer; } .nav-btn span.icon{font-size:16px} .nav-btn.active{background:#ffe4f1;color:var(--text-main);font-weight:600} .nav-btn.sos{ flex:1.4;background:var(--accent);color:#fff;font-weight:700;font-size:13px; box-shadow:0 10px 25px #ff4b6a66; } .drawer-backdrop{ position:fixed;inset:0;background:#00000040;opacity:0;pointer-events:none; transition:opacity .22s ease-out;z-index:25; } .drawer-backdrop.visible{opacity:1;pointer-events:auto} .drawer{ position:fixed;right:0;top:0;bottom:0;width:290px;max-width:86%; background:#fffdfd;box-shadow:-10px 0 30px #b36b8740; border-top-left-radius:24px;border-bottom-left-radius:24px; transform:translateX(100%);transition:transform .22s ease-out;z-index:30; padding:18px 14px 24px;display:flex;flex-direction:column; } .drawer.open{transform:translateX(0)} .drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px} .drawer-title{font-size:14px;font-weight:600;color:var(--text-soft)} .drawer-close{border:none;background:transparent;font-size:20px;cursor:pointer;color:var(--text-soft)} .modules-list{margin-top:8px;display:flex;flex-direction:column;gap:4px;overflow-y:auto} /* Les listes internes (compatibilité bundle) ne doivent jamais être visibles */ .modules-hidden{display:none !important} /* Catalogue Mes suivis (1 seule liste, statuts visibles, pas d'actions) */ #modulesCatalogList{max-height: 48vh; overflow:auto; padding-right:4px} #modulesCatalogList .module-actions{gap:6px} #modulesCatalogList .module-action-btn{display:none !important} /* ==== Modules split (Disponibles / Actifs) ==== */ /* UX: "Mes suivis" doit rester un bandeau unique aligné (comme avant). On évite donc la mise en page en 2 colonnes (qui crée un panneau "Actifs" collé à droite). Les sections Disponibles et Actifs restent visibles mais empilées verticalement. */ .modules-split{display:grid;grid-template-columns:1fr;gap:12px} .modules-col{background:rgba(255,255,255,.62);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:10px 10px 8px} .modules-col-title{font-weight:800;font-size:13px;letter-spacing:.2px} .modules-col-sub{margin-top:2px;font-size:12px;opacity:.85} .modules-search{margin-top:8px} .modules-search .field-input.small{height:36px} .module-btn{position:relative} .module-actions{display:flex;align-items:center;gap:6px} .module-action-btn{border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.7);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer} .module-action-btn.primary{background:rgba(255,255,255,.95);font-weight:700} .module-action-btn.danger{background:rgba(255,235,235,.9);border-color:rgba(220,38,38,.25)} .module-btn{ width:100%;padding:7px 10px;border-radius:14px;border:none;background:transparent; font-size:13px;color:var(--text-soft);display:flex;justify-content:space-between;align-items:center; gap:6px;cursor:pointer; } .module-main{display:flex;align-items:center;gap:6px} .module-emoji{ width:22px;height:22px;border-radius:999px;background:#fff3f7; display:flex;align-items:center;justify-content:center;font-size:14px; } .module-label{font-size:13px} .module-tag{font-size:10px;padding:2px 6px;border-radius:999px;background:#f7e9ff;color:#7b4aa5} .module-btn.active{background:#ffe4f1;color:var(--text-main);font-weight:600} .module-caption{font-size:11px;color:var(--text-soft);margin-top:6px;opacity:.9} /* Forms */ .form-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px} .field-group{display:flex;flex-direction:column;gap:3px;flex:1;min-width:140px} .field-label{font-size:12px;color:var(--text-soft)} .field-input,.field-select,.field-textarea{ padding:7px 9px;border-radius:12px;border:1px solid var(--border-soft); font-size:13px;outline:none;font-family:inherit;background:#fffefd;color:var(--text-main); } .field-textarea{resize:vertical;min-height:60px} .field-inline-note{font-size:11px;color:var(--text-soft);opacity:.85} .field-error{font-size:11px;color:#b91c57;min-height:14px} .field-input.invalid,.field-select.invalid,.field-textarea.invalid{ border-color:#fb7185;background:#fff1f2; } .btn-small{ border-radius:999px;border:none;padding:7px 10px;font-size:12px;font-weight:600; display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:4px;cursor:pointer; } .btn-primary{background:var(--accent);color:#fff;box-shadow:0 6px 16px #ff4b6a55} .btn-ghost{background:#ffe4f1;color:var(--text-main)} .btn-link{border:none;background:transparent;color:var(--accent-strong);text-decoration:underline;cursor:pointer;padding:0;font:inherit} .summary-block{margin-top:10px;padding:8px 10px;border-radius:12px;background:#fff6fb;font-size:12px;color:var(--text-soft)} .summary-title{font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px} .summary-title .title-icon{display:inline-flex;align-items:center;justify-content:center} .summary-title .title-icon svg{width:16px;height:16px;fill:#2563eb} .title-icon{display:inline-flex;align-items:center;justify-content:center;} .title-icon svg{width:16px;height:16px;fill:#2563eb;} .modal-backdrop{ position:fixed;inset:0;background:#00000066;display:none;align-items:center;justify-content:center;z-index:40; } .modal-backdrop.visible{display:flex} .modal{ width:100%;max-width:420px;margin:0 18px;background:#fffdfd;border-radius:22px; box-shadow:0 18px 40px #b36b8740;padding:18px 18px 16px;animation:popIn .22s ease-out; } .modal.modal-wide{max-width:560px;max-height:82vh;overflow:auto;width:min(92vw,560px)} .modal-header{font-size:16px;font-weight:600;margin-bottom:6px} .modal-text{font-size:13px;color:var(--text-soft);margin-bottom:10px} .modal-footer{margin-top:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap} .modal-small{font-size:11px;color:var(--text-soft);margin-top:4px} @keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}} .theme-preview{ height:36px;border-radius:14px;margin-top:6px; background: var(--bg-gradient); border: 1px solid var(--border-soft); } /* Switches */ .switches-list{display:flex;flex-direction:column;gap:8px;margin-top:6px} .switch-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:14px;background:#fff7fb;border:1px solid #f7d5e4} .switch-row .switch-label{font-size:12px;color:var(--text-main);display:flex;gap:8px;align-items:center} .switch{ position:relative;width:52px;height:28px;border-radius:999px;background:#ef4444;cursor:pointer;flex:0 0 auto; box-shadow: inset 0 0 0 1px #00000010; } .switch[data-on="true"]{background:#22c55e} .switch::after{ content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:999px;background:#fff; transition:transform .15s ease-out; box-shadow:0 6px 16px #00000018; } .switch[data-on="true"]::after{transform:translateX(24px)} .switch-hint{font-size:10px;color:var(--text-soft)} /* Discreet */ .discreet-overlay{position:fixed;inset:0;background:#f5f7fb;z-index:60;display:none;flex-direction:column;padding:18px 16px} .discreet-overlay.visible{display:flex} .discreet-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px} .discreet-title{font-size:18px;font-weight:600;color:#1f2933} .discreet-subtitle{font-size:12px;color:#6b7480} .discreet-card{background:#fff;border-radius:18px;box-shadow:0 8px 20px #00000012;padding:12px 12px 10px;margin-top:8px;flex:1;display:flex;flex-direction:column} .discreet-list{margin-top:6px;padding-left:0;list-style:none;font-size:13px;color:#374151} .discreet-item{display:flex;align-items:center;gap:6px;padding:4px 0;border-bottom:1px dashed #e5e7eb} .discreet-item:last-child{border-bottom:none} .discreet-checkbox{width:14px;height:14px;border-radius:4px;border:1px solid #cbd5e1;background:#f9fafb} .discreet-footer{margin-top:12px;display:flex;justify-content:flex-end} .discreet-exit{border-radius:999px;border:none;padding:7px 12px;font-size:11px;background:#111827;color:#f9fafb;cursor:pointer} /* Player */ .player{ position:fixed; left:16px; bottom:92px; width: 560px; max-width: calc(100vw - 32px); height: 700px; max-height: calc(100vh - 140px); border-radius: 22px; background: #fffdfd; box-shadow: 0 18px 42px #b36b8740; z-index: 55; display:flex; flex-direction:column; overflow:hidden; border: 1px solid #f2c9d7; } .player.hidden{display:none} .player-header{ padding:10px 12px; display:flex;justify-content:space-between;align-items:center; background: linear-gradient(90deg, #fff1f7, #ffffff); border-bottom:1px solid #f2c9d7; cursor: grab; } /* Mode TV : contraste visuel (bleu doux) tout en gardant la palette du site */ .player.mode-tv{ border-color:#c7d2fe; box-shadow: 0 18px 42px #3b82f633; } .player.mode-tv .player-header{ background: linear-gradient(90deg, #eff6ff, #ffffff); border-bottom-color:#c7d2fe; } .player.mode-tv .player-tabs{background:#eff6ff;border-bottom-color:#c7d2fe} .player.mode-tv .player-tab.active{background:#dbeafe;color:#0f172a} .player.mode-tv .station-logo{background:#eff6ff;border-color:#c7d2fe} .player.mode-tv .fav-btn{background:#dbeafe} .player.mode-tv .fav-btn.on{background:#3b82f6} .player.mode-tv .tv-video-wrap{border-color:#c7d2fe; box-shadow: 0 12px 26px #3b82f633} .player.mode-tv .tv-params, .player.mode-tv .tv-settings, .player.mode-tv .audio-viz, .player.mode-tv .eq-wrap{border-color:#c7d2fe; background:#eff6ff} .tv-video-wrap.buffering{position:relative} .tv-video-wrap.buffering::after{ content:"Buffering…"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: linear-gradient(180deg, #00000066, #00000033); color:#fff; font-weight:800; letter-spacing:.02em; } .player-title{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--text-main);font-size:13px} .player-badge{width:26px;height:26px;border-radius:999px;background: radial-gradient(circle at 30% 20%, #ffeef7, var(--accent));display:flex;align-items:center;justify-content:center;color:#fff} .player-actions{display:flex;gap:6px} .player-icon{ width:30px;height:28px;border-radius:10px;border:none;background:#fff;cursor:pointer; box-shadow:0 8px 18px #00000010;color:var(--text-soft);font-weight:800; } .player-icon.danger{color:#b91c57} .player-body{flex:1;display:flex;flex-direction:column;min-height:0} .player-tabs{display:flex;gap:6px;padding:10px 12px;background:#fff6fb;border-bottom:1px solid #f2c9d7} .player-tab{ flex:1;border:none;border-radius:999px;padding:8px 10px;cursor:pointer;background:transparent;color:var(--text-soft);font-weight:700;font-size:12px; } .player-tab.active{background:#ffe4f1;color:var(--text-main)} .player-pane{ padding:12px; /* Sur petits écrans, certains blocs (EQ, paramètres TV, etc.) dépassent. On rend donc le panneau scrollable au niveau du lecteur. */ overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; min-height:0; display:flex; flex-direction:column; gap:10px; padding-bottom:18px; } .player-pane.hidden{display:none} .player-now{display:flex;align-items:center;gap:10px} .station-logo{ width:42px;height:42px;border-radius:14px;background:#ffeef7;object-fit:cover;border:1px solid #f2c9d7; } .station-meta{flex:1;min-width:0} .station-name{font-weight:800;color:var(--text-main);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .station-sub{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fav-btn{ border:none;border-radius:999px;width:38px;height:30px;cursor:pointer; background:#ffe4f1;color:var(--text-main);font-weight:900; } .fav-btn.on{background:var(--accent);color:#fff} .audio-viz{ width:100%;margin-top:10px;border-radius:16px;background:#fff6fb;border:1px solid #f2c9d7; } .player-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px} .vol-inline{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-soft)} .vol-inline input{width:120px} .eq-wrap{margin-top:10px;border-radius:16px;background:#fff6fb;border:1px solid #f2c9d7;padding:10px} .eq-row{display:flex;align-items:center;gap:8px} .eq-label{font-size:12px;color:var(--text-soft);width:52px} .eq-row input[type="range"]{flex:1} .eq-val{font-size:12px;color:var(--text-soft);width:58px;text-align:right} .eq-presets{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .player-search{margin-top:0;display:flex;flex-direction:column;min-height:0;gap:6px} .search-row{display:flex;gap:8px;align-items:center;margin-top:8px} .field-select.small{padding:7px 9px;border-radius:12px;font-size:12px} .results-list{ margin-top:8px; display:flex; flex-direction:column; gap:6px; /* Un seul scroll : le panneau (.player-pane). */ overflow:visible; max-height:none; flex:none; padding-right:0; } .result-item{ display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:16px; background:#fff; border: 1px solid #f2c9d7; box-shadow:0 10px 22px #e89ab420; cursor:pointer; } .result-item:hover{transform: translateY(-1px)} .result-item .meta{flex:1;min-width:0} .result-item .title{font-weight:800;font-size:12px;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .result-item .sub{font-size:11px;color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .result-item .tag{font-size:10px;padding:2px 8px;border-radius:999px;background:#f7e9ff;color:#7b4aa5} .result-item .star{font-weight:900} .m3u-btn{ position:relative;display:inline-flex;align-items:center;justify-content:center; padding:7px 12px;border-radius:999px;background:#ffe4f1;color:var(--text-main); font-size:12px;font-weight:700;cursor:pointer;border:1px solid #f2c9d7; } .m3u-btn input{position:absolute;inset:0;opacity:0;cursor:pointer} .tv-video-wrap{margin-top:10px;border-radius:16px;overflow:hidden;border:1px solid #f2c9d7;background:#000} .tv-video{width:100%;height:220px;object-fit:contain;background:#000} .tv-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px} .tv-params{margin-top:10px;border-radius:16px;background:#fff6fb;border:1px solid #f2c9d7;padding:10px} .player-resize-handle{ position:absolute;right:10px;bottom:10px;width:18px;height:18px;border-radius:6px; background:#ffe4f1;border:1px solid #f2c9d7;cursor:nwse-resize; } .player.full{ /* Full = always anchored to the viewport (not affected by prior drag offsets) */ left:16px !important; right:16px !important; top:12px !important; bottom:92px !important; width:auto !important; height:auto !important; max-height:none !important; } .player.min{height: 62px !important} .player.min .player-body{display:none} .player.min .player-resize-handle{display:none} /* Toast */ .toast{ position:fixed; left:50%; transform:translateX(-50%); bottom: 86px; background: #111827; color:#f9fafb; padding:10px 12px; border-radius: 999px; font-size:12px; opacity:0; pointer-events:none; transition: opacity .18s ease-out, transform .18s ease-out; z-index: 70; } .toast.show{opacity:1; transform:translateX(-50%) translateY(-6px)} /* Footer */ .site-footer{position:fixed; right:18px; bottom:calc(env(safe-area-inset-bottom, 0px) + 18px); z-index:79; margin:0; padding:0; pointer-events:none;} .site-footer .footer-inner{margin:0; padding:0; display:flex; justify-content:flex-end; opacity:.88;} .site-footer .footer-credit{ pointer-events:auto; font-size:12px; color:var(--text-soft); display:flex; gap:4px; align-items:center; background:rgba(255,255,255,.75); border:1px solid rgba(255,105,180,.18); border-radius:999px; padding:8px 12px; box-shadow:0 18px 50px rgba(0,0,0,.10); } .site-footer .footer-label{opacity:.85;} .site-footer .footer-brand{font-weight:800;letter-spacing:.02em;color:var(--text-main);} .site-footer .footer-logo{position:relative; width:28px; height:28px; display:inline-block; flex:0 0 auto; margin-left:-2px;} .site-footer .footer-logo-img{width:28px; height:28px; display:block; border-radius:10px;} .site-footer .footer-logo-c{ position:absolute; left:50%; top:50%; transform:translate(-50%,-54%); font-weight:900; font-size:12px; line-height:1; color:var(--accent-strong); text-shadow:0 2px 8px rgba(0,0,0,.18); } /* Desktop layout */ @media (min-width: 860px){ .app{padding:20px 24px 24px; padding-bottom:128px} .app-main{flex-direction:row; align-items:flex-start; gap:18px} .left-card{flex:0 0 310px} .content-card{flex:1 1 auto} .right-card{ position:static; transform:none; border-radius:var(--radius-lg); width:320px; max-width:320px; background:var(--card-bg); padding:14px 14px 16px; border:1px solid #f2c9d7; box-shadow:var(--shadow-soft); } .drawer-backdrop{display:none} .drawer-close{display:none} } /* Mes suivis : catalogue unique (activation gérée dans Profil) */ .modules-hidden{display:none !important} #modulesCatalogList{margin-top:10px;display:flex;flex-direction:column;gap:6px;overflow:auto;max-height:52vh;padding-right:4px} #modulesCatalogList .module-btn{border:1px solid rgba(0,0,0,.06);background:rgba(255,255,255,.55)} #modulesCatalogList .module-btn.active{outline:2px solid rgba(255,75,106,.25);background:rgba(255,255,255,.85)} #modulesCatalogList .module-actions{display:flex;align-items:center;gap:8px} #modulesCatalogList .module-action-btn{display:none !important} /* Mobile & Tablet */ @media (max-width: 720px){ .player{ left:8px; right:8px; width:auto; bottom: 86px; height: 680px; max-height: calc(100vh - 130px); } .player.full{ left:8px !important; right:8px !important; top:12px !important; bottom:86px !important; height:auto !important; max-height:none !important; } /* Small screens: the TV logo on the left can be visually noisy */ #paneTV #tvLogo{display:none !important;} .player-resize-handle{display:none} .audio-viz{height:72px} .tv-video{height: 200px} .player-icon{width:32px} } /* Scrollbars (discrets) */ .player-pane::-webkit-scrollbar{width:8px} .player-pane::-webkit-scrollbar-thumb{background:#0000001a;border-radius:999px} .player-pane::-webkit-scrollbar-track{background:transparent} .tv-settings{margin-top:10px;border-radius:16px;background:#fff6fb;border:1px solid #f2c9d7;padding:10px 10px} .tv-settings .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:6px} .tv-settings .row .field-group{flex:1;min-width:140px} .tv-settings .hint{font-size:11px;color:var(--text-soft);opacity:.9} @media (max-width:480px){.player{left:10px;right:10px;width:auto;bottom:86px;height:620px;max-height:calc(100vh - 140px)}.audio-viz{height:70px}} /* ==== PATCH TV VIEWPORT + DETACH WINDOW (V6) ==== */ :root{ --tv-ratio: 16 / 9; } /* Le viewport TV prend une vraie place et suit le ratio */ .tv-viewport, #tvViewport, [data-tv-viewport]{ width: 100%; aspect-ratio: var(--tv-ratio); height: auto !important; border-radius: 18px; overflow: hidden; background: #111; } /* La vidéo remplit le viewport (contain par défaut) */ .tv-viewport video, #tvViewport video, #tvVideo{ width: 100% !important; height: 100% !important; display: block; object-fit: contain; background: #111; } /* Quand le lecteur est agrandi/maximisé, le viewport devient beaucoup plus grand */ .player-modal.is-max .tv-viewport, .player-modal.is-max #tvViewport, .player-modal.is-max [data-tv-viewport]{ max-height: min(70vh, 720px); } /* Le panneau TV devient scrollable de façon fiable */ #tvPanel, .player-panel--tv{ overflow: auto; overscroll-behavior: contain; } /* Fenêtre TV détachable (autonome) */ .tv-window{ position: fixed; z-index: 99999; left: 48px; top: 48px; width: min(980px, calc(100vw - 32px)); height: min(620px, calc(100vh - 32px)); background: rgba(255,255,255,.92); border: 1px solid rgba(0,0,0,.08); border-radius: 22px; box-shadow: 0 18px 60px rgba(0,0,0,.20); backdrop-filter: blur(8px); display: none; } .tv-window.is-open{ display: flex; flex-direction: column; } .tv-window__bar{ padding: 10px 12px; display:flex; align-items:center; justify-content: space-between; gap: 10px; cursor: default; user-select:none; } .tv-window__drag{display:flex;flex-direction:column;gap:2px;cursor:move;min-width:140px} .tv-window__hint{font-size:10px;color:#334155;opacity:.75} .tv-window__title{ font-weight: 700; } .tv-window__controls{ display:flex; align-items:center; gap: 8px; } .tv-window__controls select, .tv-window__controls button{ border-radius: 999px; border: 1px solid rgba(0,0,0,.12); background: rgba(255,255,255,.85); padding: 7px 10px; font-size: 12px; font-weight: 700; cursor: pointer; } .tv-window__controls button:hover{background:#eff6ff;border-color:#c7d2fe} .tv-window__body{ padding: 10px 12px 12px; flex: 1; overflow: hidden; display:flex; } .tv-window__body .tv-viewport{ width: 100%; height: 100%; max-height: 100%; aspect-ratio: var(--tv-ratio); } /* poignée resize */ .tv-window__resize{ position:absolute; right: 10px; bottom: 10px; width: 18px; height: 18px; cursor: nwse-resize; opacity: .55; } /* ---- PATCH: TV viewport must grow with the player (the video, not only the window) ---- */ /* Base rules in V6 used a fixed height on .tv-video. These overrides enforce a true responsive viewport. */ #tvVideoWrap{ width: 100%; aspect-ratio: var(--tv-ratio); height: auto; min-height: 380px; max-height: none; } #premiumPlayer.full #tvVideoWrap{ min-height: 560px; max-height: none; } #tvVideo{ width: 100% !important; height: 100% !important; object-fit: contain; } /* Keep controls visible while allowing the TV panel to scroll */ #paneTV{ overflow: auto; overscroll-behavior: contain; } /* ==== TV CATALOGUE : Pays → Catégories → Chaînes (V6) ==== */ .tv-catalog-wrap{display:flex;flex-direction:column;gap:10px;min-height:0} .tv-breadcrumb{ /* Non-sticky: avoids a "bandeau" effect while scrolling the country/channel lists */ position:relative; top:auto; z-index:2; display:flex; align-items:center; gap:8px; padding:10px 10px; border-radius:16px; background: linear-gradient(90deg, #eff6ff, #ffffff); border:1px solid #c7d2fe; } .tv-breadcrumb .crumb-btn{ border:none; background:transparent; cursor:pointer; font-weight:800; font-size:12px; color:#0f172a; padding:6px 10px; border-radius:999px; } .tv-breadcrumb .crumb-btn:hover{background:#dbeafe} .tv-breadcrumb .crumb-sep{opacity:.6} .tv-breadcrumb .crumb-label{font-weight:800;font-size:12px;color:#0f172a} .tv-breadcrumb .crumb-sub{font-size:11px;color:#334155;opacity:.9} .tv-catalog-note{ font-size:11px; color: var(--text-soft); padding:0 2px; } .tv-country-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; } .tv-country-card{ border:none; cursor:pointer; text-align:left; padding:12px 12px; border-radius:18px; background:#ffffff; border:1px solid #c7d2fe; box-shadow:0 12px 26px #3b82f61f; transition: transform .12s ease-out; } .tv-country-card:hover{transform: translateY(-1px)} .tv-country-card.flash{outline:2px solid #38bdf8; transform: translateY(-2px)} .tv-country-flag{font-size:18px;margin-right:6px} .tv-country-name{font-weight:900;color:#0f172a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tv-country-code{font-size:10px;color:#334155;opacity:.75;margin-top:2px} .tv-category-bar{ display:flex; gap:8px; flex-wrap:wrap; padding:10px; border-radius:16px; background:#eff6ff; border:1px solid #c7d2fe; } .tv-cat-chip{ border:none; cursor:pointer; padding:7px 10px; border-radius:999px; background:#ffffff; border:1px solid #c7d2fe; font-size:11px; font-weight:800; color:#0f172a; } .tv-cat-chip.active{background:#3b82f6;color:#fff;border-color:#3b82f6} .tv-cat-chip .count{opacity:.75;font-weight:900;margin-left:6px} .tv-channel-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap:10px; } .tv-channel-card{ display:flex; gap:10px; align-items:center; padding:10px 10px; border-radius:18px; background:#ffffff; border:1px solid #c7d2fe; box-shadow:0 12px 26px #3b82f61a; cursor:pointer; transition: transform .12s ease-out; } .tv-channel-card:hover{transform: translateY(-1px)} .tv-channel-logo{ width:38px; height:38px; border-radius:14px; object-fit:cover; background:#eff6ff; border:1px solid #c7d2fe; } .tv-channel-meta{flex:1;min-width:0} .tv-channel-title{font-weight:900;font-size:12px;color:#0f172a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tv-channel-sub{display:flex;gap:6px;align-items:center;margin-top:3px} .tv-badge{ font-size:10px; padding:2px 8px; border-radius:999px; background:#dbeafe; color:#0f172a; border:1px solid #c7d2fe; max-width: 120px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tv-star{ border:none; width:38px; height:30px; border-radius:999px; cursor:pointer; background:#dbeafe; font-weight:900; } .tv-star.on{background:#3b82f6;color:#fff} .tv-empty{ padding:12px; border-radius:16px; background:#eff6ff; border:1px dashed #c7d2fe; color:#0f172a; font-size:12px; } /* ==== CATALOGUE TV (Pays → Catégories → Chaînes) ==== */ .tv-catalog{ display:flex; flex-direction:column; gap:10px; } .tv-breadcrumb{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 12px; border-radius:16px; background: #eff6ff; border: 1px solid #c7d2fe; } .tv-breadcrumb .crumb-btn{ border:none; background:transparent; font-weight:800; cursor:pointer; color:#0f172a; padding:0; } .tv-breadcrumb .crumb-sep{opacity:.55} .tv-toolbar-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .tv-pill{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid #c7d2fe; background:#ffffff; font-size:12px; font-weight:800; cursor:pointer; } .tv-pill.active{ background:#dbeafe; } .tv-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; } @media (min-width: 780px){ .tv-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tv-card{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-radius:18px; background:#ffffff; border:1px solid #c7d2fe; box-shadow:0 10px 24px #3b82f61a; cursor:pointer; min-height:64px; } .tv-card:hover{ transform: translateY(-1px); } .tv-card .tv-flag{font-size:20px; width:26px; text-align:center;} .tv-card .tv-meta{flex:1; min-width:0;} .tv-card .tv-title{font-weight:900; font-size:12px; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tv-card .tv-sub{font-size:11px; color:#475569; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tv-channel-grid{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:10px; } @media (min-width: 860px){ .tv-channel-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } .tv-channel-card{ display:flex; flex-direction:column; gap:8px; padding:10px 12px; border-radius:18px; background:#ffffff; border:1px solid #c7d2fe; box-shadow:0 10px 24px #3b82f61a; cursor:pointer; } .tv-channel-top{display:flex; align-items:center; gap:10px;} .tv-channel-logo{ width:40px; height:40px; border-radius:14px; border:1px solid #c7d2fe; background:#eff6ff; object-fit:cover; } .tv-channel-name{font-weight:900; font-size:12px; color:#0f172a; line-height:1.1;} .tv-channel-badges{display:flex; gap:6px; flex-wrap:wrap;} .tv-badge{ font-size:10px; padding:2px 8px; border-radius:999px; background:#eff6ff; border:1px solid #c7d2fe; color:#1e293b; font-weight:800; } .tv-channel-actions{display:flex; justify-content:space-between; align-items:center; gap:8px;} .tv-star{ border:none; border-radius:999px; width:36px; height:30px; cursor:pointer; background:#dbeafe; color:#0f172a; font-weight:900; } .tv-star.on{background:#3b82f6;color:#fff} .tv-empty{ padding:12px; border-radius:16px; border:1px dashed #c7d2fe; background:#eff6ff; color:#1e293b; font-size:12px; } /* === Cosmetic refresh (Radio vs TV) === */ .player{ background: rgba(255, 253, 253, .92); backdrop-filter: blur(10px); } .player-header{ position: relative; } .player-header::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background: linear-gradient(90deg, transparent, rgba(236,72,153,.35), transparent); opacity:.9; } .player.mode-tv .player-header::after{ background: linear-gradient(90deg, transparent, rgba(59,130,246,.35), transparent); } .player-icon{transition: transform .12s ease-out, box-shadow .12s ease-out;} .player-icon:hover{transform: translateY(-1px); box-shadow:0 12px 24px #00000012;} .player-tab{transition: background .12s ease-out, color .12s ease-out;} .player-tab:hover{background: rgba(236,72,153,.08);} .player.mode-tv .player-tab:hover{background: rgba(59,130,246,.08);} .search-row .btn-primary{ box-shadow:0 12px 26px #00000014; } /* ==== Patch UI : Mot de passe (profil) ==== */ .password-block{ margin-top:14px; padding:10px 12px; border-radius:16px; background: var(--accent-soft); border:1px solid var(--border-soft); } .password-block .field-label{ font-weight:800; color: var(--accent-strong); } .input-with-icon{position:relative;} .input-with-icon .field-input{padding-right:44px;} .eye-toggle{ position:absolute; right:8px; top:50%; transform:translateY(-50%); border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.85); border-radius:12px; width:34px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color: var(--text-main); } .eye-toggle:active{transform:translateY(-50%) scale(.98);} .password-block__head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;} .password-block__title{font-size:13px;font-weight:900;color:var(--text-main);} .password-block__subtitle{font-size:11px;color:var(--text-soft);opacity:.9;} .password-label{font-weight:800 !important;color:var(--accent-strong) !important;} /* ==== Cycle / règles (enrichi) ==== */ .cycle-wrap{display:flex;flex-direction:column;gap:12px;} .cycle-top{display:flex;flex-direction:column;gap:10px;} .cycle-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;} @media (max-width: 900px){ .cycle-kpis{grid-template-columns:1fr;} } .kpi{background:rgba(255,255,255,.85);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:12px 12px;} .kpi-label{font-size:12px;font-weight:800;color:var(--text-soft);} .kpi-value{font-size:18px;font-weight:900;color:var(--text-main);margin-top:3px;} .kpi-sub{font-size:12px;font-weight:800;color:var(--text-soft);margin-left:6px;opacity:.9;} .cycle-disclaimer{background:rgba(255,255,255,.7);border:1px dashed rgba(0,0,0,.15);border-radius:16px;padding:10px 12px;font-size:12px;line-height:1.35;color:var(--text-main);} .cycle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} @media (max-width: 980px){ .cycle-grid{grid-template-columns:1fr;} } .cycle-col{display:flex;flex-direction:column;gap:12px;} .cycle-card{background:rgba(255,255,255,.92);border:1px solid rgba(0,0,0,.06);border-radius:18px;padding:12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.06);} .cycle-card-title{font-weight:900;color:var(--text-main);margin-bottom:10px;font-size:14px;} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;} @media (max-width: 520px){ .form-grid{grid-template-columns:1fr;} } .field{display:flex;flex-direction:column;gap:6px;} .field>span{font-size:12px;font-weight:900;color:var(--text-soft);} .field input, .field select, .field textarea{ border-radius:14px;border:1px solid rgba(0,0,0,.08); padding:10px 12px;background:rgba(255,255,255,.9);color:var(--text-main); } .field textarea{resize:vertical;min-height:54px;} .range-row{display:flex;align-items:center;gap:10px;} .range-row input[type="range"]{flex:1;} .range-val{min-width:24px;text-align:right;font-weight:900;color:var(--text-main);opacity:.9;} .cycle-charts{display:grid;grid-template-columns:1fr;gap:10px;} .chart-card{border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:10px;background:rgba(255,255,255,.75);} .chart-card canvas{width:100%;height:170px;display:block;} .chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;font-size:12px;font-weight:900;color:var(--text-soft);} .chart-head select{border-radius:12px;border:1px solid rgba(0,0,0,.08);padding:8px 10px;background:rgba(255,255,255,.92);} .mini-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;} .mini-kpi{background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.05);border-radius:14px;padding:10px;} .mini-kpi-label{font-size:11px;font-weight:900;color:var(--text-soft);} .mini-kpi-value{font-size:16px;font-weight:900;color:var(--text-main);margin-top:2px;} .hist-block{margin-top:10px;} .hist-title{font-size:12px;font-weight:900;color:var(--text-soft);margin-bottom:8px;} .hist-item{display:flex;align-items:flex-start;gap:10px;padding:10px;border:1px solid rgba(0,0,0,.06);border-radius:14px;background:rgba(255,255,255,.78);margin-bottom:8px;} .hist-main{flex:1;} .hist-sub{font-size:12px;color:var(--text-soft);margin-top:4px;opacity:.95;} .cycle-info{border:1px solid rgba(0,0,0,.06);border-radius:18px;background:rgba(255,255,255,.85);padding:10px 12px;} .cycle-info>summary{cursor:pointer;font-weight:900;color:var(--text-main);font-size:13px;} .cycle-info-body{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:10px;} @media (max-width: 860px){ .cycle-info-body{grid-template-columns:1fr;} } .info-card{border:1px solid rgba(0,0,0,.06);border-radius:16px;background:rgba(255,255,255,.75);padding:10px 12px;} .info-title{font-weight:900;color:var(--text-main);margin-bottom:6px;font-size:13px;} .info-card ul{margin:0;padding-left:18px;color:var(--text-main);font-size:12px;line-height:1.4;} /* ==== Left Active Modules (bandeau gauche) ==== */ .active-modules-list{margin-top:8px;display:flex;flex-wrap:wrap;gap:8px} .active-mod-chip{ border:1px solid rgba(0,0,0,.08); background:rgba(255,255,255,.75); border-radius:999px; padding:7px 10px; font-size:12px; color:var(--text-main); display:inline-flex;align-items:center;gap:6px; cursor:pointer; box-shadow:0 10px 20px rgba(255,75,106,.10); } .active-mod-chip:hover{transform:translateY(-1px)} .active-mod-chip .emoji{font-size:14px} /* ==== Export médecin (par module) ==== */ .doctor-export-bar{ display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end; margin:0 0 10px 0; } .doctor-export-bar .hint{margin-right:auto;font-size:12px;opacity:.85;color:var(--text-soft)} /* Alignement : 3 bandeaux (gauche / centre / Mes suivis) */ @media (min-width: 860px){ .right-card{align-self:flex-start;} } /* === Mes suivis (widgets) === */ #drawer .drawer-body{ flex:1; overflow:auto; padding-top:8px; display:flex; flex-direction:column; } #drawer .card-lite{ border:1px solid rgba(242,201,215,.85); } #drawer #horoscopeText, #drawer #moodDayText{ white-space:pre-line; } /* ==== V7 PATCH: Dock bas à gauche + Footer à droite (espacé) ==== */ .bottom-dock{ position:fixed; left:18px; bottom:18px; display:flex; align-items:center; gap:18px; /* espace entre la nav et le footer */ z-index:80; max-width:calc(100vw - 36px); pointer-events:none; /* on réactive sur les enfants */ } .bottom-dock .bottom-nav, .bottom-dock .site-footer{ pointer-events:auto; } .bottom-dock .bottom-nav{ position:static; margin:0; padding:10px 12px; background:rgba(255,255,255,.82); backdrop-filter: blur(14px); border:1px solid rgba(255,105,180,.18); border-radius:999px; box-shadow:0 18px 50px rgba(0,0,0,.14); display:inline-flex; gap:10px; justify-content:center; align-items:center; overflow:auto; -webkit-overflow-scrolling: touch; } .bottom-dock .site-footer{ position:static; transform:none; left:auto; right:auto; bottom:auto; margin:0; padding:0; background:transparent; } .bottom-dock .site-footer .footer-inner{ padding:0; margin:0; display:flex; justify-content:center; } .bottom-dock .site-footer .copyright{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px; background:rgba(255,255,255,.78); backdrop-filter: blur(12px); border:1px solid rgba(255,105,180,.14); box-shadow:0 16px 45px rgba(0,0,0,.12); color:var(--text-soft); font-size:12px; } /* C entouré + cœur (style simple, pas 3D) */ .bottom-dock .site-footer .brand{ font-weight:800; letter-spacing:.6px; } .bottom-dock .site-footer .brand-c{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin-left:2px; border-radius:999px; border:2px solid rgba(255,105,180,.55); color:var(--text); font-weight:900; line-height:1; } .bottom-dock .site-footer .brand-heart{ position:absolute; top:-7px; right:-6px; font-size:12px; transform:rotate(-10deg); color:rgba(255,105,180,.95); } /* Mobile: dock en colonne pour ne pas chevaucher */ @media (max-width: 520px){ .bottom-dock{ flex-direction:column; align-items:flex-start; gap:10px; bottom:12px; } .bottom-dock .bottom-nav{ max-width:calc(100vw - 36px); } } /* ===== Layout patch: dock sous le calendrier (sans chevauchement) ===== */ #leftCard .bottom-dock{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100%; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: flex-start; pointer-events: auto !important; } #leftCard .bottom-nav{ position: static !important; left: auto !important; right: auto !important; bottom: auto !important; transform: none !important; width: fit-content; max-width: 100%; justify-content: flex-start; } #leftCard .site-footer{ margin-top: 0 !important; padding-top: 0 !important; } @media (max-width: 520px){ .app{padding-bottom:170px;} .site-footer{right:12px; bottom:calc(env(safe-area-inset-bottom, 0px) + 12px);} .site-footer .footer-credit{padding:7px 10px; font-size:11px;} } /* Nav: bouton Jeux plus visible */ .nav-btn.games{ background: rgba(255,105,180,.14); color: var(--text-main); font-weight:700; } .nav-btn.games.active{ background:#ffe4f1; color:var(--text-main); } /* Defensive: keep bottom UI fixed (mobile regressions) IMPORTANT (V11): ne pas forcer le centrage. Le dock est géré par media queries. */ #bottomNav{position:fixed !important;} .site-footer{position:fixed !important;} /* Mobile: reserve space for bottom dock (nav + footer) */ @media (max-width: 520px){ .app{ padding-bottom: 190px; } } /* ========================================================= V11 PATCH (SMA + TAB) - Supprime l'overflow horizontal ("cadre" à droite) - Place la nav en bas à gauche (comme demandé) - Place le footer en bas à droite ========================================================= */ /* SMA + TAB : dock permanent bas gauche / bas droite NOTE: la tablette en paysage peut dépasser 860px (ex: 1024px). On élargit donc le breakpoint pour couvrir SMA + TAB sans impacter les grands écrans. */ @media (max-width: 1100px){ #bottomNav{ left: max(12px, env(safe-area-inset-left, 0px)) !important; right: auto !important; transform: none !important; } .site-footer{ right: max(12px, env(safe-area-inset-right, 0px)) !important; left: auto !important; } } /* Tablettes larges (ex: 12-13") : même logique si écran tactile */ @media (pointer: coarse) and (max-width: 1400px){ #bottomNav{ left: max(12px, env(safe-area-inset-left, 0px)) !important; right: auto !important; transform: none !important; } .site-footer{ right: max(12px, env(safe-area-inset-right, 0px)) !important; left: auto !important; } } /* Off-canvas : éviter toute "fuite" visible sur certains navigateurs (arrondis/transform) */ @media (max-width: 860px){ .drawer{transform:translateX(110%)} .drawer.open{transform:translateX(0)} } /* NOTE (V11): le docking de la nav dans "Bienvenue" a été supprimé. La nav reste en dock fixe (bas gauche) et le footer bas droite. */ /* Mobile: réserve en bas pour éviter le chevauchement (dock/nav/footer) */ @media (max-width: 520px){ .app{ padding-bottom: 190px; } } /* ========================================================= V14 PATCH (SMA + TAB) - Docking bottom at first render - On touch devices, force bottom anchors (nav left, footer right) - Fix: previous versions set position:fixed without bottom, so items stayed at flow position (looks "in the middle" on load). ========================================================= */ /* V15: le dock (B) et le footer (C) doivent être au même niveau à l'ouverture, y compris sur navigateur desktop. On supprime donc le "retour au flow" sur écrans fins (qui faisait remonter B/C). */ /* V15: dock global (tous devices) - B (nav) bas gauche - C (footer) bas droite - même ligne (même bottom) */ :root{ --mbf-dock-pad: 18px; --mbf-dock-pad-sm: 12px; } #bottomNav{ position: fixed !important; left: max(var(--mbf-dock-pad), env(safe-area-inset-left, 0px)) !important; right: auto !important; top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mbf-dock-pad)) !important; transform: none !important; z-index: 9999 !important; } .site-footer{ position: fixed !important; right: max(var(--mbf-dock-pad), env(safe-area-inset-right, 0px)) !important; left: auto !important; top: auto !important; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mbf-dock-pad)) !important; z-index: 9999 !important; } /* SMA: plus compact */ @media (max-width: 520px){ #bottomNav{ left: max(var(--mbf-dock-pad-sm), env(safe-area-inset-left, 0px)) !important; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mbf-dock-pad-sm)) !important; } .site-footer{ right: max(var(--mbf-dock-pad-sm), env(safe-area-inset-right, 0px)) !important; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--mbf-dock-pad-sm)) !important; } } /* Reserve space for bottom UI so it never overlaps content */ .app{ padding-bottom: 210px !important; } body{ overflow-x: hidden !important; } /* ===================================================================== PATCH V13 — Dock dans les bandeaux (Desktop) Objectif : - B (nav) : sous le bandeau gauche (dans la colonne gauche), fixe via sticky - C (INFODC) : sous le bandeau droit (dans la colonne droite), fixe via sticky IMPORTANT : - Déplacer le HTML du