:root{ --or:#FF6B2B;--orp:#FFF2EC;--ord:#E04E10; --ink:#111;--mid:#555;--lite:#737373; --bg:#F9F8F6;--wh:#fff;--bdr:#E8E3DC; --green:#22C069;--amber:#F59E0B;--r:20px; --sh:0 8px 32px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.04); --glass:rgba(247,245,242,.88); } *{margin:0;padding:0;box-sizing:border-box;} /* A11y : focus visible au clavier (Tab) garde un anneau orange ; au mouse, pas d'outline disgracieux. Les règles outline:none ailleurs ne sapent plus le focus clavier grâce à :focus-visible plus spécifique. */ :focus{outline:none;} button:focus-visible,a:focus-visible,[role="button"]:focus-visible,[tabindex]:not([tabindex="-1"]):focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--or);outline-offset:2px;border-radius:4px;} /* tabindex="-1" = focusable seulement en programmatique (helper a11y pour VoiceOver). Pas de ring visuel — l'utilisateur ne peut pas y arriver via Tab. */ [tabindex="-1"]:focus{outline:none !important;} /* Supprimer le délai 300ms iOS sur tous les éléments tappables */ a,button,input,select,textarea,label, [onclick],[role="button"],.pill,.bni,.card,.rrow,.fol-row,.msg-row, .pb,.btnr,.btnadd,.lbtn,.lguest,.mcl,.ptab,.ntog,.crn-chip, .niv-fchip,.mat-item,.ob-btn,.ob-skip,.picker-opt{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; } html{max-width:100vw;width:100%;overflow-x:clip;background-color:var(--bg);overscroll-behavior:none; /* Désactiver la sélection/copie texte partout dans l'app */ -webkit-user-select:none;user-select:none; -webkit-touch-callout:none; /* désactive le menu long-pression sur iOS */ } body{font-family:'Plus Jakarta Sans',sans-serif;background:var(--wh);color:var(--ink); max-width:100vw;width:100%;overflow-x:clip; overscroll-behavior-x:none; overscroll-behavior-y:auto; -webkit-overflow-scrolling:touch; } /* Autoriser la sélection/saisie dans l'éditeur de fiche (prof uniquement) */ #espAnnEditor,#espAnnEditor *{ -webkit-user-select:text !important;user-select:text !important; -webkit-touch-callout:default !important; } /* Autoriser copier-coller dans la zone de saisie messagerie */ #msgInput{ -webkit-user-select:text !important;user-select:text !important; -webkit-touch-callout:default !important; } /* Safe area iOS — s'assurer que rien ne touche le notch ni le home indicator */ :root{ --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); } /* === DARK MODE — via classe .dk sur === */ /* ══ DARK MODE — palette grise unifiée ══ --bg : fond des pages (plus sombre) --wh : fond des cards/surfaces (plus clair) body en dark → var(--bg) pour que les cards ressortent */ html.dk{ --ink:#E5E5EA;--mid:#AEAEB2;--lite:#8E8E93; --bg:#111111;--wh:#1C1C1E;--bdr:#2C2C2E; --orp:#25180A;--sh:0 6px 28px rgba(0,0,0,.65); color-scheme:dark; } /* CRITIQUE : body hérite var(--wh) en light → forcer var(--bg) en dark sinon cards = fond = invisibles */ html.dk body{background:var(--bg)!important;} /* Nav / topbar — même fond que la page */ html.dk .mob-header{background:var(--bg);} html.dk .mob-search{background:var(--bg);} html.dk .mob-search input{background:var(--bg);color:var(--ink);} /* Inputs */ html.dk .locbar input{background:transparent !important;color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important;color-scheme:light dark;} html.dk input:not(.ss-pill-input):not(.search-input-premium):not(.cr-input-plain),html.dk textarea,html.dk select{ color-scheme:dark;background:var(--bg);color:var(--ink); -webkit-text-fill-color:var(--ink); } html.dk .search-input-premium,html.dk .cr-input-plain{background:transparent!important;color:var(--ink);-webkit-text-fill-color:var(--ink);} html.dk input[type=date],html.dk input[type=time]{color-scheme:dark;color:var(--ink);} html.dk input::placeholder,html.dk textarea::placeholder{color:var(--lite) !important;opacity:0.7;} html.dk .fi3::placeholder,html.dk .fi2::placeholder{color:var(--lite) !important;opacity:0.7;} html.dk .pref-row input,html.dk .pref-row select,html.dk .pref-row textarea{ background:transparent!important;outline:none!important; -webkit-appearance:none;border:none!important;box-shadow:none!important; } /* Pills */ html.dk .pill{background:var(--wh);border-color:rgba(255,255,255,.12);color:var(--mid);} html.dk .pill.on{background:var(--or);color:#fff;border-color:var(--or);} /* Bouton géoloc */ html.dk #locGeoBtn{background:var(--orp);} /* Cards / surfaces — fond var(--wh) sur fond var(--bg) → visibles */ html.dk .card,html.dk .rrow,html.dk .fol-row{background:var(--wh);border:1px solid rgba(255,255,255,.1);} html.dk .ctop,html.dk .fav-cours-card-top{filter:saturate(.7) brightness(.75);} html.dk .cbody{background:var(--wh);} html.dk .ctitle{color:var(--ink) !important;} html.dk .mi{color:var(--mid) !important;} html.dk .ltag{color:var(--mid) !important;} html.dk .pm{color:var(--or) !important;} /* Modals et bottom sheets */ html.dk .modal,html.dk .bd>div{background:var(--wh);} html.dk #bdR .mhd{color:var(--ink) !important;} html.dk #bdR .mhd div[style*="font-size:17px"]{color:var(--ink) !important;} html.dk #popupPaid>div,html.dk #popupFailed>div,html.dk #tutoCard{background:var(--wh);color:var(--ink);} /* pref-group */ html.dk .pref-group{background:var(--wh);} /* Icônes pref — teintures sombres cohérentes */ html.dk .pref-icon[style*="#EFF6FF"], html.dk .pref-icon[style*="#F5F3FF"], html.dk .pref-icon[style*="var(--orp)"]{background:#25202A!important;} html.dk .pref-icon[style*="#FFF7ED"]{background:#281D10!important;} html.dk .pref-icon[style*="#F0FDF4"]{background:#182418!important;} html.dk .pref-icon[style*="#FEF2F2"]{background:#281818!important;} /* Badges / pills colorés dans les divs inline */ html.dk div[style*="background:#F0FDF4"]{background:#182418!important;color:#4ADE80!important;} html.dk div[style*="background:#FEF3C7"]{background:#28220E!important;color:#FCD34D!important;} html.dk div[style*="background:#FEF2F2"], html.dk div[style*="background:#FEE2E2"], html.dk div[style*="background:#FFF0F0"]{background:#281818!important;color:#F87171!important;} html.dk div[style*="background:#EFF6FF"], html.dk div[style*="background:#F0F9FF"], html.dk div[style*="background:#F8FAFC"]{background:#181828!important;color:#93C5FD!important;} html.dk div[style*="background:#F5F3FF"]{background:#25202A!important;color:#C4B5FD!important;} html.dk div[style*="background:#FFF4EE"]{background:#281D10!important;color:#FB923C!important;} html.dk div[style*="background:var(--orp)"]{background:var(--orp)!important;} /* Onglets profil */ html.dk #pgAcc .ptab{background:var(--wh);color:var(--mid);} html.dk #pgAcc .ptab.on{color:var(--or);border-bottom-color:var(--or);} /* Login */ html.dk .lbox{box-shadow:0 20px 60px rgba(0,0,0,.8);background:var(--wh);} html.dk .lbody{background:var(--wh);} html.dk .ltabs{background:var(--bg);} html.dk .ltab{color:var(--mid);} html.dk .ltab.on{background:var(--wh);color:var(--ink);} html.dk .lfield input,html.dk .lfield select{ background:var(--bg) !important;color:var(--ink) !important; -webkit-text-fill-color:var(--ink) !important;border-color:var(--bdr) !important; } html.dk .lfield input::placeholder{color:var(--mid) !important;opacity:0.6;} html.dk .lfield label{color:var(--mid);} html.dk .lguest{background:var(--wh);color:var(--mid);border-color:var(--bdr);} html.dk .ropt{background:var(--wh);color:var(--mid);border-color:var(--bdr);} html.dk .ropt.on{background:var(--orp);color:var(--or);border-color:var(--or);} html.dk #profFields select{background:var(--bg) !important;color:var(--ink) !important;} /* Locbar */ html.dk .locbar{background:var(--wh);border-color:var(--bdr);} /* Bande vérif */ html.dk #verifBand{background:#28200A !important;border-color:#3E3010 !important;} html.dk #verifBandTitle{color:#FCD34D !important;} html.dk #verifBandSub{color:#A07830 !important;} /* Toggle switch */ html.dk .ntog{background:var(--bdr);} html.dk .ntog.on{background:var(--or);} html.dk .ntog::after{background:#fff;} /* ══ LOGIN / REGISTER / PROFILE COMPLETION ══ */ #login{position:fixed;inset:0;background:var(--bg);z-index:999;overflow:hidden;} .lscreen-wrap{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;} .lscreen-inner{width:100%;max-width:420px;padding:max(52px,env(safe-area-inset-top,52px)) 24px max(32px,env(safe-area-inset-bottom,32px));animation:lsFadeIn .28s ease both;box-sizing:border-box;} .lscreen-login-inner{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;padding-top:max(60px,env(safe-area-inset-top,60px));} @keyframes lsFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* login header — text only, no logo mark */ .lscreen-logo-text{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin-bottom:6px;} .lscreen-title{font-size:26px;font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0 0 6px;} .lscreen-sub{font-size:14px;color:var(--mid);margin:0 0 24px;line-height:1.5;} /* sep */ .lsep{text-align:center;font-size:12px;color:var(--lite);margin:14px 0;position:relative;} .lsep::before,.lsep::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--bdr);} .lsep::before{left:0;}.lsep::after{right:0;} .lswitch{text-align:center;font-size:14px;color:var(--mid);margin-top:18px;} .lswitch span{color:var(--or);font-weight:700;cursor:pointer;} /* fields */ .lfield{margin-bottom:14px;} .lfield label{font-size:12px;font-weight:700;color:var(--mid);display:block;margin-bottom:5px;letter-spacing:.01em;} .lfield input,.lfield select,.lfield textarea{width:100%;border:none;border-radius:12px;padding:12px 14px;font-family:inherit;font-size:16px;outline:none;transition:box-shadow .18s;background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .lfield input:focus,.lfield select:focus,.lfield textarea:focus{box-shadow:0 0 0 3px rgba(255,107,43,.2),0 3px 12px rgba(0,0,0,.1);} .lfield input::placeholder{color:#BBBBBB;opacity:1;} input::placeholder,textarea::placeholder{color:#BBBBBB;opacity:1;} /* primary button */ .lbtn{width:100%;background:linear-gradient(148deg,#FF7D42,#FF4500);color:#fff;border:none;border-radius:50px;padding:15px;font-family:inherit;font-weight:700;font-size:15.5px;cursor:pointer;margin-top:8px;transition:all .22s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 18px rgba(255,69,0,.28);letter-spacing:-.01em;} .lbtn:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(255,69,0,.38);} .lbtn:active{transform:scale(.97);} .lbtn:disabled{background:linear-gradient(148deg,#CCC,#BBB);box-shadow:none;cursor:not-allowed;transform:none;} .lguest{width:100%;background:var(--bg);color:var(--mid);border:1.5px solid var(--bdr);border-radius:50px;padding:12px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;letter-spacing:-.01em;margin-top:8px;} .lguest:hover{border-color:var(--or);color:var(--or);background:var(--orp);} /* oauth */ .loauth-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;border:1.5px solid var(--bdr);border-radius:50px;padding:12px 16px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;background:var(--wh);color:var(--ink);transition:all .2s;margin-top:8px;} .loauth-btn:hover{border-color:var(--or);background:var(--orp);} .loauth-apple{background:#000;color:#fff;border-color:#000;} .loauth-apple:hover{background:#1a1a1a;border-color:#1a1a1a;} html:not(.cap-ios) .cap-ios-only{display:none!important;} /* password strength */ .pw-strength{display:flex;gap:4px;margin-top:8px;height:4px;} .pw-strength-bar{flex:1;border-radius:4px;background:var(--bdr);transition:background .25s;} .pw-strength-label{font-size:11px;font-weight:600;margin-top:4px;display:block;min-height:16px;} /* register back button (top of single-screen register) */ .lreg-back-solo{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--bdr);background:var(--wh);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);margin-bottom:4px;} /* "Je suis..." separator row */ .lreg-role-sep{display:flex;align-items:center;gap:10px;margin:18px 0 14px;} .lreg-role-sep::before,.lreg-role-sep::after{content:'';flex:1;height:1px;background:var(--bdr);} .lreg-role-sep span{font-size:12px;font-weight:700;color:var(--mid);white-space:nowrap;} /* role cards — 2 columns with SVG illustration */ .lrole-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px;} .lrole-card{border:none;border-radius:20px;padding:18px 10px 14px;text-align:center;cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);position:relative;background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .lrole-card.on{box-shadow:0 0 0 2px var(--or),0 6px 24px rgba(255,107,43,.2);background:rgba(255,107,43,.04);transform:translateY(-2px);} .lrole-card-svg{display:flex;justify-content:center;margin-bottom:10px;opacity:.85;} .lrole-card.on .lrole-card-svg{opacity:1;} .lrole-label{font-size:14px;font-weight:800;color:var(--ink);margin-bottom:2px;} .lrole-desc{font-size:11px;color:var(--mid);} .lrole-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:var(--or);display:none;align-items:center;justify-content:center;} .lrole-card.on .lrole-check{display:flex;} .rp-topbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;gap:10px;padding:max(14px,env(safe-area-inset-top,14px)) 20px 12px;background:var(--bg);width:100%;box-sizing:border-box;} .rp-back{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--bdr);background:var(--wh);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink);flex-shrink:0;transition:background .18s,border-color .18s;} .rp-back:active{background:var(--bg2);border-color:var(--mid);} html.dk .rp-back{background:var(--wh);border-color:var(--bdr);} .rp-bar-wrap{flex:1;max-width:220px;height:4px;background:var(--bg2);border-radius:50px;overflow:hidden;margin:0 auto;} .rp-bar{height:100%;background:linear-gradient(90deg,#FF9D66,#FF4500);border-radius:50px;transition:width .4s cubic-bezier(.22,.61,.36,1);} .rp-step{font-size:11px;font-weight:700;color:var(--lite);flex-shrink:0;width:34px;text-align:right;} .rp-dob-label{font-size:11px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:.06em;} .rp-dob-input{font-size:22px;text-align:center;font-weight:700;padding:12px 8px;} .rp-mat-search{width:100%;padding:12px 16px;border-radius:12px;border:1.5px solid var(--bdr);background:var(--wh);font-size:15px;box-sizing:border-box;outline:none;transition:border-color .2s;} .rp-mat-search:focus{border-color:#FF6B2B;} .rp-mat-grid{display:flex;flex-wrap:wrap;gap:8px;} #rpNivGrid{display:flex;flex-wrap:wrap;gap:8px;} .rp-mat-pill{animation:rpPillIn .22s ease both;} .rp-mat-pill.on{transform:scale(1.04);} @keyframes rpPillIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}} .rp-mat-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 8px;border-radius:16px;border:2px solid var(--bdr);background:var(--wh);color:var(--ink);cursor:pointer;transition:transform .12s,border-color .2s,background .2s;user-select:none;-webkit-tap-highlight-color:transparent;text-align:center;min-height:86px;} .rp-mat-card:active{transform:scale(.96);} .rp-mat-emo{font-size:26px;line-height:1;} .rp-mat-lbl{font-size:12.5px;font-weight:600;line-height:1.2;color:inherit;} .rp-niv-card{display:flex;align-items:center;justify-content:center;padding:16px;border-radius:14px;border:2px solid var(--bdr);background:var(--wh);color:var(--ink);font-size:15px;font-weight:600;cursor:pointer;transition:transform .12s,border-color .2s,background .2s,color .2s;user-select:none;-webkit-tap-highlight-color:transparent;text-align:center;} .rp-niv-card:active{transform:scale(.98);} .rp-niv-card.on{border-color:#FF6B2B;background:linear-gradient(135deg,#FFF4EC,#FFE4D1);color:#FF6B2B;} html.dk .rp-niv-card.on{background:linear-gradient(135deg,#3D1F0F,#5F3A1E);} @keyframes rpPulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}} .rp-pulse{animation:rpPulse .45s cubic-bezier(.34,1.56,.64,1) both;} @keyframes rpSuccessIn{0%{transform:scale(0);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes rpSuccessCheck{0%{stroke-dashoffset:60}100%{stroke-dashoffset:0}} .rp-success{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:20;animation:rpSuccessIn .35s ease both;} .rp-success-circle{width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,#FF9D66,#FF4500);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px rgba(255,69,0,.4);} .rp-success-circle svg{width:52px;height:52px;} .rp-success-circle path{stroke-dasharray:60;stroke-dashoffset:60;animation:rpSuccessCheck .45s .2s ease forwards;} .rp-mat-more{display:block;width:100%;padding:12px;border-radius:12px;border:1.5px dashed var(--bdr);background:transparent;color:var(--mid);font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s;-webkit-tap-highlight-color:transparent;} .rp-mat-more:active{border-color:#FF6B2B;color:#FF6B2B;} .rp-mat-add{grid-column:1/-1;padding:14px 16px;border-radius:14px;border:1.5px dashed #FF6B2B;background:rgba(255,107,43,.06);color:#FF6B2B;font-size:14px;font-weight:600;cursor:pointer;text-align:center;display:flex;align-items:center;justify-content:center;gap:8px;-webkit-tap-highlight-color:transparent;} .rp-mat-add span{font-size:18px;line-height:1;} .rp-mat-add strong{font-weight:700;} .rp-mat-chip{padding:8px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--bdr);background:var(--wh);color:var(--ink);transition:all .2s;user-select:none;white-space:nowrap;} .rp-mat-chip.on{border-color:currentColor;color:#fff;} html.dk .rp-mat-search{background:var(--wh);border-color:var(--bdr);color:var(--ink);} .lbtn-skip{display:block;width:100%;text-align:center;padding:12px;background:none;border:none;color:var(--mid);font-size:14px;font-weight:600;cursor:pointer;} .lbtn-skip:active{color:var(--ink);} .rp-center{width:100%;max-width:420px;margin:0 auto;padding:calc(env(safe-area-inset-top,14px) + 72px) 24px 48px;box-sizing:border-box;} .rp-slide{width:100%;box-sizing:border-box;} .rp-slide{animation:rpSlideIn .22s ease both;} @keyframes rpSlideIn{from{opacity:0}to{opacity:1}} html.dk #rolePicker{background:var(--bg);} html.dk .rp-topbar{background:var(--bg);} /* grid */ .rg{columns:2;column-gap:10px;}.rg .card{break-inside:avoid;display:block;width:100%;margin-bottom:10px;} .ropt{border:none;border-radius:12px;padding:12px;text-align:center;cursor:pointer;font-size:13px;font-weight:600;color:var(--mid);transition:all .22s cubic-bezier(.34,1.56,.64,1);background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .ropt.on{background:linear-gradient(135deg,#FF7D42,#FF4500);color:#fff;box-shadow:0 4px 14px rgba(255,69,0,.28);} /* dark mode */ html.dk .lscreen-logo-text{color:var(--ink);} html.dk .lfield input,html.dk .lfield select,html.dk .lfield textarea{background:var(--bg)!important;color:var(--ink)!important;box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 1.5px rgba(255,255,255,.18)!important;} html.dk .lrole-card,html.dk .ropt:not(.on),html.dk .so:not(.on),html.dk .fi2,html.dk .fi3,html.dk .crn-chip:not(.on),html.dk .filter-chip-btn,html.dk .contenu-card,html.dk .esp-input{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} html.dk .lfield input::placeholder{color:var(--mid)!important;opacity:.6;} html.dk .lfield label{color:var(--mid);} html.dk #rPw{border-color:rgba(255,255,255,.2)!important;background:var(--bg)!important;} html.dk .lguest,html.dk .lreg-back-solo{background:var(--wh);border-color:var(--bdr);} html.dk .loauth-btn:not(.loauth-apple){background:var(--wh);border-color:var(--bdr);color:var(--ink);} html.dk .lrole-card{background:var(--wh);border-color:var(--bdr);} html.dk .lrole-card.on{background:var(--orp);border-color:var(--or);} /* legacy compat stubs */ .lbox,.lhero,.lbody,.ltabs,.ltab,.lf{} #app{display:none;height:100dvh;overflow-y:auto;overflow-x:hidden;position:relative;-webkit-overflow-scrolling:touch;scroll-behavior:auto;overscroll-behavior-y:auto;background:var(--wh);} /* === TOPBAR DESKTOP — masquée, remplacée par mob-header sur tous les écrans === */ .topbar{display:none;} .tlogo{width:30px;height:30px;background:var(--or);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .ttitle{font-size:14px;font-weight:700;white-space:nowrap;flex-shrink:0;} .sw{flex:1;min-width:0;position:relative;} .sw input{width:100%;background:var(--bg);border:1.5px solid transparent;border-radius:50px;padding:8px 12px 8px 34px;font-family:inherit;font-size:16px;outline:none;transition:border .18s;} .sw input:focus{border-color:var(--or);background:var(--wh);} .sw input::placeholder{color:var(--lite);} .si{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--lite);} .si svg{width:14px;height:14px;display:block;} .topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0;} .btnadd{background:var(--or);color:#fff;border:none;border-radius:50px;padding:8px 12px;font-family:inherit;font-weight:600;font-size:12px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:background .18s;white-space:nowrap;flex-shrink:0;} .btnadd:hover{background:var(--ord);} .btnadd svg{width:13px;height:13px;} .tav-btn{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#FF8C55,var(--ord));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;border:2px solid transparent;transition:all .18s;flex-shrink:0;overflow:hidden;} .tav-btn:hover{border-color:var(--or);} /* === MOBILE HEADER iOS large title === */ .mob-header{ display:block; padding:14px 20px 10px; padding-top:max(20px,env(safe-area-inset-top,0px)); background:#fff; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid transparent; position:-webkit-sticky; position:sticky;top:0;z-index:50; isolation:isolate; flex-shrink:0; transition:border-color .2s,box-shadow .2s; -webkit-transform:translateZ(0); transform:translateZ(0); } .mob-header.scrolled{ border-bottom-color:var(--bdr); box-shadow:0 1px 16px rgba(0,0,0,.07); } /* La search bar est dans le header — on lui donne les bons paddings horizontaux */ #mobSearch { padding-left: 0; padding-right: 0; } #mobSearch .search-bar-premium { margin: 0; } .mob-title{ font-size:18px;font-weight:500;color:var(--ink);line-height:1.3; display:block; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; } .mob-header-inner{display:flex;align-items:flex-start;justify-content:space-between;} .mob-sub{font-size:12px;color:var(--lite);margin-top:3px;font-weight:400;} .mob-actions{display:flex;align-items:center;gap:10px;} #btnProposerMob{display:none !important;} .mob-search{display:block;padding:8px 20px 12px;background:var(--wh);border-bottom:1px solid var(--bdr);position:-webkit-sticky;position:sticky;top:0;z-index:49;-webkit-transform:translateZ(0);transform:translateZ(0);} .mob-search input{width:100%;background:var(--bg);border:none;border-radius:12px;padding:10px 12px 10px 36px;font-family:inherit;font-size:16px;outline:none;} .mob-search .si{top:50%;left:31px;} .pg{display:none;min-height:calc(100vh - 112px);background:var(--wh);}.pg.on{display:block;animation:pgIn .15s ease;} html.dk #app,html.dk .pg{background:var(--bg);} @keyframes pgIn{from{opacity:0}to{opacity:1}} @keyframes pgOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-18px)}} @keyframes bniSpring{0%{transform:scale(1)}30%{transform:scale(1.28)}60%{transform:scale(.92)}100%{transform:scale(1)}} @keyframes checkDraw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}} @keyframes priceFlip{0%{transform:translateY(0);opacity:1}40%{transform:translateY(-8px);opacity:0}60%{transform:translateY(8px);opacity:0}100%{transform:translateY(0);opacity:1}} @keyframes emptyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}} @keyframes lineGrow{0%,100%{opacity:.3}50%{opacity:1}} /* Sur mobile : pages prennent toute la hauteur sous le mob-header */ @media(max-width:640px){ .pg{min-height:calc(100dvh - 70px);} } .cnt{padding:20px 16px;max-width:1200px;overflow:visible;} .ptr-indicator{position:absolute;top:-50px;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:center;transition:opacity .2s;} .ptr-spinner{display:block;} @keyframes spin{to{transform:rotate(360deg)}} .ptr-spinner.spinning{animation:spin .8s linear infinite;} .locbar{ background:#ffffff;border-radius:20px;border:none; padding:14px 16px;display:none;align-items:center;gap:10px; margin-bottom:12px;overflow:hidden; box-shadow:0 3px 14px rgba(0,0,0,.11),0 0 0 0.5px rgba(0,0,0,.06); } html.dk .locbar{background:#1C1C1E;box-shadow:0 3px 16px rgba(0,0,0,.55),0 0 0 0.5px rgba(255,255,255,.07);} .locbar.open{display:flex;} .locbar>svg{width:18px;height:18px;color:var(--or);flex-shrink:0;} .locbar input{ flex:1;border:none;outline:none;font-family:inherit;font-size:16px;font-weight:400; min-width:0;background:transparent; color:#222;-webkit-text-fill-color:#222; } .locbar input::placeholder{color:#aaa;-webkit-text-fill-color:#aaa;opacity:1;} html.dk .locbar input{color:#fff;-webkit-text-fill-color:#fff;} html.dk .locbar input::placeholder{color:#636366;-webkit-text-fill-color:#636366;} /* Geo button inside locbar — matches ss-geo-btn */ #locGeoBtn{ flex-shrink:0;background:rgba(255,107,43,.1);color:var(--or); border:none;border-radius:50px;padding:7px 12px; font-family:inherit;font-weight:600;font-size:12px; display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap; } #locGeoBtn.active{background:var(--or);color:#fff;} #geoDistBtn{flex-shrink:0;background:var(--or);color:#fff;border:none;border-radius:50px;padding:7px 12px;font-family:inherit;font-weight:700;font-size:12px;cursor:pointer;white-space:nowrap;} #locClearBtn{flex-shrink:0;background:none;border:none;cursor:pointer;color:var(--lite);padding:2px;line-height:0;} .rsel{display:flex;gap:6px;} .ro{padding:5px 11px;border-radius:50px;font-size:12px;font-weight:600;border:1.5px solid var(--bdr);cursor:pointer;transition:all .18s;color:var(--mid);} .ro.on,.ro:hover{border-color:var(--or);color:var(--or);background:var(--orp);} .pills{display:flex;gap:8px;margin-bottom:14px;overflow-x:scroll;overflow-y:visible;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-top:4px;padding-bottom:4px;} .pills::-webkit-scrollbar{display:none;} .pill{padding:8px 14px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);border:1.5px solid var(--bdr);background:var(--wh);color:var(--mid);display:inline-flex;align-items:center;gap:5px;box-shadow:0 1px 3px rgba(0,0,0,.05);} .niv-fchip{padding:14px 16px;font-size:15px;font-weight:500;cursor:pointer;border:none;border-bottom:1px solid var(--bdr);background:var(--wh);color:var(--ink);transition:all .15s;display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left;gap:8px;} .niv-fchip:last-child{border-bottom:none;} .niv-fchip::after{content:'';width:22px;height:22px;border-radius:50%;border:2px solid var(--bdr);flex-shrink:0;transition:all .15s;} .niv-fchip.on{color:var(--or);font-weight:600;} .niv-fchip.on::after{background:var(--or);border-color:var(--or);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:12px;background-repeat:no-repeat;background-position:center;} .niv-fchip:active{background:var(--bg);} .pill.on{background:linear-gradient(135deg,#FF7D42,#FF4500);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(255,69,0,.28);} .pill:active{transform:scale(.92);transition:transform .08s cubic-bezier(.34,1.56,.64,1);} .mat-dropdown{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--wh);border:1px solid var(--bdr);border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,.12);z-index:300;overflow:hidden;display:none;max-height:240px;overflow-y:auto;} .mat-item{padding:12px 16px;cursor:pointer;font-size:14px;font-weight:500;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bdr);transition:background .12s;} .mat-item:last-child{border-bottom:none;} .mat-item:active{background:var(--bg);} .mat-item.selected{color:var(--or);font-weight:700;} .mat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .pill:not(.on):hover{border-color:var(--or);color:var(--or);transform:translateY(-1px);} .crn-chip{padding:7px 14px;border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;border:none;background:var(--wh);color:var(--mid);transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .crn-chip.on{background:linear-gradient(135deg,#FF7D42,#FF4500);color:#fff;box-shadow:0 4px 14px rgba(255,69,0,.28);} .crn-chip:active{transform:scale(.95);} .grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:0;padding:0 6px 36px;} /* SKELETON LOADING */ /* ── Avatar halo gradient (page Mon profil) ─────────────────────────────── */ .avatar-halo-wrap::before{ content:"";position:absolute;inset:-9px;border-radius:50%; background:conic-gradient(from 0deg,#FF6B2B,#FF8C55,#FFB088,#FF4500,#E04E10,#FF6B2B); filter:blur(6px);opacity:.85;z-index:0; animation:avatarHaloSpin 8s linear infinite; } @keyframes avatarHaloSpin{to{transform:rotate(360deg);}} /* ── Login page : blobs gradient flottants (background) ─────────────────── */ .login-blobs{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;} .login-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform;} .login-blob-1{width:320px;height:320px;background:radial-gradient(circle,#FF8C55,#FF6B2B);top:-80px;left:-80px;animation:blobFloat1 18s ease-in-out infinite;} .login-blob-2{width:260px;height:260px;background:radial-gradient(circle,#FFB088,#FF4500);bottom:-60px;right:-60px;animation:blobFloat2 22s ease-in-out infinite;} .login-blob-3{width:200px;height:200px;background:radial-gradient(circle,#FFD4B0,#FF8C55);top:45%;left:55%;animation:blobFloat3 26s ease-in-out infinite;opacity:.35;} @keyframes blobFloat1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,60px) scale(1.15);}} @keyframes blobFloat2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,-40px) scale(1.2);}} @keyframes blobFloat3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,40px) scale(.85);}} #login > :not(.login-blobs){position:relative;z-index:1;} /* ── Badge pulsant (ripple orange) ──────────────────────────────────────── */ .pulse-dot{position:relative;} .pulse-dot::after{ content:"";position:absolute;inset:0;border-radius:50%; background:currentColor;opacity:.5; animation:pulseDotRipple 1.8s ease-out infinite; } @keyframes pulseDotRipple{ 0% {transform:scale(1);opacity:.55;} 80% {transform:scale(2.2);opacity:0;} 100%{transform:scale(2.2);opacity:0;} } /* Indicateur main levée visio : dot orange pulsant en haut-droite de tile. Scale + box-shadow ring qui s'évanouit. Plus discret qu'une grosse SVG main. */ @keyframes _vHandPulse{ 0%,100%{box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 0 rgba(255,107,43,.7),0 2px 8px rgba(255,107,43,.6);} 50% {box-shadow:0 0 0 2px rgba(255,255,255,.95),0 0 0 8px rgba(255,107,43,0),0 2px 8px rgba(255,107,43,.6);} } /* ── Icônes espace prof ─────────────────────────────── */ /* ── Search input : gradient border animé au focus ──────────────────────── */ .sw{position:relative;transition:all .2s;} .sw::before{ content:"";position:absolute;inset:-2px;border-radius:inherit; background:conic-gradient(from 0deg,#FF6B2B,#FF8C55,#FFB088,#FF4500,#E04E10,#FF6B2B); opacity:0;transition:opacity .25s;z-index:-1; animation:searchGradSpin 4s linear infinite; } .sw:focus-within::before{opacity:1;} @keyframes searchGradSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){ .avatar-halo-wrap::before,.login-blob,.pulse-dot::after,.esp2-ico,.sw::before{animation:none !important;} } /* ── Espace prof : hero gradient animé (style Linear/Arc) ───────────────── */ .esp-hero{position:relative;border-radius:22px;overflow:hidden;margin:4px 0 14px;box-shadow:0 6px 22px rgba(255,107,43,.18);} .esp-hero-bg{position:absolute;inset:-30%;background:conic-gradient(from 0deg at 50% 50%,#FF6B2B,#FF8C55,#FFB088,#FF4500,#E04E10,#FF6B2B);filter:blur(28px) saturate(1.1);animation:espHeroSpin 14s linear infinite;} .esp-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,107,43,.6) 0%,rgba(224,78,16,.55) 100%);} .esp-hero-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:18px 18px;} @keyframes espHeroSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion: reduce){ .esp-hero-bg{ animation:none; } } /* ── Bandeau vérification identité : mini-hero animé (même DA qu'esp-hero) ── */ .verif-hero{position:relative;border-radius:14px;overflow:hidden;margin-bottom:10px;box-shadow:0 3px 12px rgba(255,107,43,.22);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .18s cubic-bezier(.32,1.4,.64,1),box-shadow .18s;} .verif-hero:active{transform:scale(.98);box-shadow:0 1px 6px rgba(255,107,43,.25);} .verif-hero-bg{position:absolute;inset:-40%;background:conic-gradient(from 0deg at 50% 50%,#FF6B2B,#FF8C55,#FFB088,#FF4500,#E04E10,#FF6B2B);filter:blur(20px) saturate(1.1);animation:espHeroSpin 14s linear infinite;} .verif-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(130deg,rgba(255,107,43,.55) 0%,rgba(224,78,16,.5) 100%);} .verif-hero-content{position:relative;z-index:2;display:flex;align-items:center;gap:12px;padding:12px 14px;color:#fff;} .verif-hero-content .verif-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.35);} .verif-hero-content .verif-t{font-size:13px;font-weight:700;color:#fff;} .verif-hero-content .verif-s{font-size:11px;color:rgba(255,255,255,.88);margin-top:1px;} @media (prefers-reduced-motion: reduce){ .verif-hero-bg{ animation:none; } } /* ── Bandeau "Cours bientôt" : mini-hero animé ──────────────────────────── */ .remind-hero{position:relative;border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;color:#fff;box-shadow:0 3px 12px rgba(255,107,43,.22);-webkit-tap-highlight-color:transparent;} .remind-hero-bg{position:absolute;inset:-40%;background:conic-gradient(from 0deg at 50% 50%,#FF6B2B,#FF8C55,#FFB088,#FF4500,#E04E10,#FF6B2B);filter:blur(18px) saturate(1.1);animation:espHeroSpin 14s linear infinite;} .remind-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,107,43,.6),rgba(224,78,16,.55));} .remind-hero-content{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:10px 14px;} @media (prefers-reduced-motion: reduce){ .remind-hero-bg{ animation:none; } } /* ── Bandeau "LIVE" : cours en cours (prioritaire, rouge pulsant) ──────── */ .live-hero{position:relative;border-radius:12px;overflow:hidden;margin-bottom:10px;cursor:pointer;color:#fff;background:linear-gradient(135deg,#DC2626,#991B1B);box-shadow:0 4px 16px rgba(220,38,38,.35);-webkit-tap-highlight-color:transparent;animation:livePulseBg 2.4s ease-in-out infinite;} .live-hero-content{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:10px 14px;} .live-pulse-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;animation:livePulseDot 1.2s ease-in-out infinite;box-shadow:0 0 0 0 rgba(255,255,255,.7);} .live-label{font-size:11px;font-weight:900;letter-spacing:.08em;flex-shrink:0;} @keyframes livePulseBg{0%,100%{box-shadow:0 4px 16px rgba(220,38,38,.35);}50%{box-shadow:0 4px 24px rgba(220,38,38,.6);}} @keyframes livePulseDot{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7);}70%{box-shadow:0 0 0 8px rgba(255,255,255,0);}100%{box-shadow:0 0 0 0 rgba(255,255,255,0);}} @media (prefers-reduced-motion: reduce){ .live-hero{animation:none;} .live-pulse-dot{animation:none;} } /* ── Empty states : centrage viewport sur mobile, comportement naturel ailleurs. Mobile (<=767px) : position fixed plein écran (vue iOS classique). Desktop : centrage flex naturel SANS padding artificiel (qui décalait les empty states injectés dans des sidebars ou modals — ex: Messages dans #listM). Les empty states "page entière" (Favoris, Feed, Explorer) reçoivent un min-height ciblé pour que leur centrage flex s'étale sur une hauteur cohérente entre les 3 pages → harmonie visuelle desktop. Les empty states injectés dans des conteneurs étroits (sidebar Messages, sheets) gardent leur comportement naturel. */ .empty-center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;box-sizing:border-box;} @media (min-width: 768px){ /* Favoris + Feed : pages quasi-vides en haut → on étire l'empty state sur 65vh pour le centrer dans le viewport. */ #favEmptyAll, #feedEmpty{min-height:65vh;} /* Explorer : il y a déjà 400-500px de contenu au-dessus (searchbar, banner IBAN, chips matières). On ne force PAS une hauteur min sinon l'empty state s'étire SOUS ce contenu et descend trop bas. À la place, juste un padding aéré pour le décoller des chips. */ #nocard{padding-top:clamp(40px,8vh,100px);padding-bottom:clamp(40px,8vh,100px);} } @media (max-width: 767px){ .empty-center{position:fixed;top:56px;left:0;right:0;bottom:70px;z-index:5;pointer-events:none;} .empty-center > *{pointer-events:auto;} } /* Shimmer atténué 2026-05-21 : gradient gris très doux + animation lente (2.8s au lieu de 1.6s) + faible contraste pour ne pas piquer les yeux pendant les re-renders fréquents. Logique de chargement inchangée. */ .skeleton{background:linear-gradient(100deg,var(--bdr) 35%,#ececef 50%,var(--bdr) 65%);background-size:200% 100%;animation:shimmer 2.8s ease-in-out infinite;border-radius:10px;} html.dk .skeleton{background:linear-gradient(100deg,#2a2a2c 35%,#34343a 50%,#2a2a2c 65%);background-size:200% 100%;} @keyframes shimmer{0%{background-position:150% 0}100%{background-position:-150% 0}} /* Zoom pill + mini-map button position adaptative (2026-05-26 Nacera) : par défaut en bas (sous/à côté de la toolbar). La classe ._brdPillAboveToolbar est ajoutée dynamiquement par JS quand la toolbar centrée déborde sur les pills → on les remonte au-dessus. */ ._brdBottomPill { bottom: max(env(safe-area-inset-bottom, 8px), 12px); transition: bottom .2s ease; } ._brdBottomPill._brdPillAboveToolbar { bottom: calc(env(safe-area-inset-bottom, 0px) + 76px); } /* Le menu zoom dropdown suit la même logique : au-dessus de sa pill. */ #_brdZoomMenu { bottom: calc(max(env(safe-area-inset-bottom, 8px), 12px) + 40px); } #_brdZoomMenu._brdPillAboveToolbar { bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); } /* Hint "Double-touchez pour éditer" sur la PIP preview : fade in léger, visible ~2.5s puis fade out. Pattern iOS coach-mark : on signale le geste à l'ouverture, puis on dégage l'écran. */ @keyframes _brdPipHintFade{ 0%{opacity:0;transform:translateX(-50%) translateY(6px)} 12%,72%{opacity:1;transform:translateX(-50%) translateY(0)} 100%{opacity:0;transform:translateX(-50%) translateY(0);pointer-events:none} } #_brdPagePreviewBody:active #_brdPagePreviewImg{transform:scale(.985);transition:transform .12s ease} /* Override du focus-visible global (var(--or) outline orange) sur le body PIP : l'outline était clippé par overflow:hidden de la PIP et apparaissait comme une ligne orange juste sous le header (signalé Nacera 2026-05-25). On retire l'outline ; le swap reste accessible clavier via Enter/Space (handler dédié). */ #_brdPagePreviewBody:focus,#_brdPagePreviewBody:focus-visible{outline:none;box-shadow:none} /* Poignées de resize PIP en mode floating (Mac-style edge drag). Sur snap left/right la taille est figée à 50vw, donc handles invisibles. */ #_brdPagePreview ._brdPipResize{display:none} #_brdPagePreview[data-snap="floating"] ._brdPipResize{display:block;position:absolute;z-index:5;background:transparent;touch-action:none;-webkit-tap-highlight-color:transparent} #_brdPagePreview[data-snap="floating"] ._brdPipResize.s{left:14px;right:14px;bottom:0;height:7px;cursor:ns-resize} #_brdPagePreview[data-snap="floating"] ._brdPipResize.e{top:48px;right:0;bottom:14px;width:7px;cursor:ew-resize} #_brdPagePreview[data-snap="floating"] ._brdPipResize.w{top:48px;left:0;bottom:14px;width:7px;cursor:ew-resize} #_brdPagePreview[data-snap="floating"] ._brdPipResize.se{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize} #_brdPagePreview[data-snap="floating"] ._brdPipResize.sw{left:0;bottom:0;width:16px;height:16px;cursor:nesw-resize} /* Réduction d'animation : respecter prefers-reduced-motion → skeleton statique */ @media (prefers-reduced-motion: reduce){ .skeleton{animation:none;} } .skel-card{background:var(--wh);border-radius:16px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .skel-top{height:90px;margin-bottom:0;} .skel-body{padding:14px;} .skel-line{height:12px;margin-bottom:8px;} .skel-line.w80{width:80%;} .skel-line.w60{width:60%;} .skel-line.w40{width:40%;} .card{background:var(--wh);border-radius:20px;border:none;overflow:hidden;cursor:pointer;transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);animation:fu .35s ease both;position:relative;} /* Ribbon "Recommandé" sur la 1ère card du grid explorer */ #grid .card:first-child::after{ content:"★ Recommandé"; position:absolute;top:12px;left:-36px; padding:4px 42px;font-size:10px;font-weight:800;letter-spacing:.08em;color:#fff; background:linear-gradient(90deg,#FF6B2B,#FF4500,#FF8C55,#FF6B2B); background-size:300% 100%; transform:rotate(-40deg); box-shadow:0 3px 10px rgba(255,69,0,.35); animation:ribbonShimmer 3s linear infinite; z-index:2; pointer-events:none; text-shadow:0 1px 2px rgba(0,0,0,.2); } @keyframes ribbonShimmer{0%{background-position:0% 50%;}100%{background-position:300% 50%;}} @media (prefers-reduced-motion: reduce){#grid .card:first-child::after{animation:none;}} /* Stagger d'apparition des cartes — évite l'explosion simultanée de N animations */ .card:nth-child(1){animation-delay:0ms} .card:nth-child(2){animation-delay:40ms} .card:nth-child(3){animation-delay:80ms} .card:nth-child(4){animation-delay:120ms} .card:nth-child(5){animation-delay:160ms} .card:nth-child(6){animation-delay:200ms} .card:nth-child(n+7){animation-delay:240ms} .card:active{transform:scale(.97);transition:transform .1s;} .btnr:active,.pb:active,.lbtn:active,.btnadd:active,.lguest:active{transform:scale(.96);transition:transform .08s;} .btnr,.pb,.lbtn,.btnadd,.lguest{-webkit-tap-highlight-color:transparent;} .bni:active{opacity:.6;transform:scale(.9);} .card-prive{background:linear-gradient(to bottom,#FFFBF5,var(--wh));box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 1.5px #E8D9C4;} @media(hover:hover)and(pointer:fine){.card:hover{transform:translateY(-5px) scale(1.006);box-shadow:0 2px 6px rgba(0,0,0,.05),0 16px 48px rgba(0,0,0,.11);}} @keyframes fu{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}} /* Bordure orange "active speaker" sur la tile visio. Pseudo-element ::after pour garantir : (1) suit border-radius via 'inherit', (2) jamais clipée par un parent overflow:hidden, (3) jamais masquée par le contenu vidéo (z-index:5 + pointer-events:none). */ [id^="_vt-"]._vt-speaking::after{ content:"";position:absolute;inset:1px; border:3px solid #FF6B2B;border-radius:15px; pointer-events:none;z-index:5;box-sizing:border-box; } @keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}} .ctop{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;position:relative;} .chip{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:50px;background:rgba(0,0,0,.22);color:#fff !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.25);} .pbub{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.9);box-shadow:0 2px 12px rgba(0,0,0,.2);cursor:pointer;transition:transform .18s;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;position:relative;overflow:hidden;} .pbub:hover{transform:scale(1.1);} .cbody{padding:13px 15px 15px;} .ctitle{font-size:14.5px;font-weight:700;line-height:1.35;margin-bottom:8px;letter-spacing:-.015em;} .cmeta{display:flex;gap:10px;margin-bottom:8px;} .mi{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink);font-weight:500;} .mi svg{width:12px;height:12px;color:var(--or);} .ltag{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ink);font-weight:500;margin-bottom:10px;} .ltag svg{width:11px;height:11px;color:var(--or);} .cf{display:flex;align-items:center;justify-content:space-between;gap:8px;} .pm{font-size:20px;font-weight:800;color:var(--or);letter-spacing:-.04em;} .pm span{font-size:11px;font-weight:400;color:var(--lite);} .ps{font-size:11px;color:var(--lite);} .sw2{flex:1;} .st{font-size:11px;color:var(--lite);margin-bottom:3px;display:flex;justify-content:space-between;} .bar{height:4px;background:var(--bg);border-radius:99px;overflow:hidden;} .bf{height:100%;border-radius:99px;} .btnr{background:var(--orp);color:var(--or);border:none;border-radius:50px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:pointer;transition:all .18s;white-space:nowrap;letter-spacing:-.01em;} .btnr:hover{background:var(--or);color:#fff;transform:translateY(-1px);} .btnfull{background:#EBEBEB;color:var(--lite);border:none;border-radius:50px;padding:8px 14px;font-family:inherit;font-weight:600;font-size:12.5px;cursor:not-allowed;white-space:nowrap;} .btnres{background:var(--green);color:#fff;border:none;border-radius:50px;padding:8px 14px;font-family:inherit;font-weight:700;font-size:12.5px;cursor:default;white-space:nowrap;} .acc-page{padding:0;} .acc-hero{background:linear-gradient(145deg,var(--or),#C03A08);padding:36px 20px;color:#fff;position:relative;overflow:hidden;} .acc-hero::after{content:'';position:absolute;right:-40px;top:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.07);} .acc-hero::before{content:'';position:absolute;left:-30px;bottom:-30px;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.05);} .acc-back{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.18);border:none;color:#fff;border-radius:50px;padding:7px 14px;font-family:inherit;font-weight:600;font-size:13px;cursor:pointer;z-index:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} .acc-av{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.22);border:4px solid rgba(255,255,255,.55);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;margin-bottom:12px;position:relative;z-index:1;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.2);} .acc-name{font-size:21px;font-weight:800;position:relative;z-index:1;letter-spacing:-.03em;} .acc-email{font-size:12.5px;opacity:.82;margin-top:2px;position:relative;z-index:1;} .acc-chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;position:relative;z-index:1;} .acc-chip{background:rgba(255,255,255,.2);border-radius:50px;padding:5px 12px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:5px;} .acc-tabs{background:var(--wh);border-bottom:1px solid var(--bdr);display:flex;position:sticky;top:56px;z-index:40;} .atab{display:none;} .ptab{flex:1;min-width:70px;padding:12px 8px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;color:var(--lite);border:none;border-bottom:2px solid transparent;background:transparent;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:4px;white-space:nowrap;transition:all .2s;position:relative;} .ptab.on{color:var(--or);border-bottom-color:var(--or);} .ptab:active{opacity:.7;} .ptab svg{transition:transform .2s;} .ptab.on svg{transform:scale(1.1);} .acc-body{padding:0 20px;max-width:800px;padding-bottom:120px;} .asec{display:none;}.asec.on{display:block;padding-top:4px;animation:fu .22s ease;} #asecEsp.on{display:flex;flex-direction:column;} .sec-title{font-size:11px;font-weight:700;color:var(--lite);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px;} .rrow{background:var(--wh);border-radius:20px;border:none;padding:15px 16px;margin:0 0 10px 0;display:flex;align-items:center;gap:12px;cursor:pointer;transition:transform .22s cubic-bezier(.22,.61,.36,1),box-shadow .22s;width:100%;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .rrow:hover{transform:translateY(-2px);box-shadow:0 4px 24px rgba(0,0,0,.1);} /* sections spacing */ .acc-section-content{padding:0 2px;} .rdot{width:44px;height:44px;border-radius:14px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:18px;} .ri{flex:1;} .rt{font-size:14px;font-weight:700;margin-bottom:2px;letter-spacing:-.01em;} .rm{font-size:12px;color:var(--mid);} .rbadge{padding:4px 11px;border-radius:50px;font-size:11.5px;font-weight:700;white-space:nowrap;flex-shrink:0;} .bup{background:var(--orp);color:var(--or);} .bdone{background:var(--bg);color:var(--lite);border:1px solid var(--bdr);} .bempty{text-align:center;padding:40px 20px;color:var(--lite);} .bempty p{font-size:13.5px;line-height:1.7;} .bempty a{color:var(--or);font-weight:700;cursor:pointer;} .frow{background:var(--wh);border-radius:20px;border:none;padding:14px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .fol-row{display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer;transition:background .15s;-webkit-tap-highlight-color:transparent;} .fol-row:active{background:var(--bg);} .fav{width:44px;height:44px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.12);} .fi{flex:1;} .fn{font-size:14px;font-weight:700;letter-spacing:-.01em;} .fr{font-size:12px;color:var(--mid);margin-top:2px;} .prof-card{background:var(--wh);border-radius:20px;border:none;padding:20px;margin-bottom:16px;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .prof-card h3{font-size:13.5px;font-weight:700;margin-bottom:14px;} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;} .fg{margin-bottom:12px;} .flbl{font-size:12px;font-weight:700;color:var(--mid);display:block;margin-bottom:5px;letter-spacing:.01em;} .fi2{width:100%;border:none;border-radius:12px;padding:11px 14px;font-family:inherit;font-size:16px;outline:none;transition:box-shadow .18s;background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .fi2:focus{box-shadow:0 0 0 3px rgba(255,107,43,.2),0 3px 12px rgba(0,0,0,.1);} .notif-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--bdr);} .notif-row:last-child{border-bottom:none;} .ntog{width:44px;height:26px;border-radius:50px;background:var(--bdr);cursor:pointer;position:relative;transition:background .22s;flex-shrink:0;} .ntog::after{content:'';position:absolute;width:20px;height:20px;border-radius:50%;background:#fff;top:3px;left:3px;transition:transform .22s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 5px rgba(0,0,0,.22);} .ntog.on{background:var(--green);} .ntog.on::after{transform:translateX(18px);} .logout-btn{width:100%;background:transparent;color:var(--mid);border:1.5px solid var(--bdr);border-radius:50px;padding:13px;font-family:inherit;font-weight:600;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .18s;margin-top:6px;} .logout-btn:hover{border-color:#EF4444;color:#EF4444;} .bd{position:fixed;inset:0;background:rgba(0,0,0,.48);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:560;display:none;align-items:center;justify-content:center;padding:max(16px,env(safe-area-inset-top,16px)) 16px max(16px,env(safe-area-inset-bottom,16px));} .bd.on{display:flex;animation:bi .18s ease;} @keyframes bi{from{opacity:0}to{opacity:1}} .modal{background:var(--wh);border-radius:28px;width:100%;max-width:460px;max-height:92vh;overflow-y:auto;animation:mi .28s cubic-bezier(.32,.72,0,1);box-shadow:0 24px 80px rgba(0,0,0,.16);} .modal.sm{max-width:380px;} @keyframes mi{from{opacity:0}to{opacity:1}} .mhd{padding:20px 20px 4px;display:flex;align-items:flex-start;justify-content:space-between;} .mbd{padding:20px 20px 24px;} .mcl{width:32px;height:32px;border-radius:50%;background:var(--bg);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--lite);-webkit-text-fill-color:var(--lite);transition:all .18s;-webkit-tap-highlight-color:transparent;} .mcl:hover{background:var(--orp);color:var(--or);-webkit-text-fill-color:var(--or);} .pb{display:flex;align-items:center;justify-content:center;gap:7px;padding:13px;border-radius:50px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);border:none;letter-spacing:-.01em;} .pb.pri{background:linear-gradient(148deg,#FF7D42,#FF4500);color:#fff;box-shadow:0 4px 16px rgba(255,69,0,.25);} .pb.pri:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,69,0,.35);} .pb.sec{background:var(--wh);color:var(--ink);border:none;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);}.pb.sec:hover{color:var(--or);box-shadow:0 0 0 2px var(--or),0 4px 14px rgba(255,107,43,.15);} html.dk .pb.sec{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .pb svg{width:16px;height:16px;} /* MESSAGING PAGE */ /* Liste conversations iOS style */ #msgMessages{flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:4px;} /* Desktop */ /* Mobile */ @media(max-width:768px){ } /* ═══════════════════════════════════════════ NAV BAR — refait de zéro, style natif ═══════════════════════════════════════════ */ .bnav { position: fixed; bottom: 0; left: 0; right: 0; background: rgba(255,255,255,0.97); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid rgba(0,0,0,0.1); box-shadow: 0 -2px 16px rgba(0,0,0,0.06); display: none; z-index: 100; flex-direction: row; align-items: flex-start; justify-content: space-around; overflow: visible; /* Espace au-dessus des icônes */ padding-top: 10px; /* Espace en dessous : home indicator + marge */ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); } /* ── FAB centre ── */ .bni-fab { gap: 3px; padding: 0; padding-bottom: 2px; overflow: visible; justify-content: flex-end; } .bni-fab .bni-add-circle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(145deg, #FF7D42, #FF4500); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: -24px; box-shadow: 0 8px 28px rgba(255,69,0,.55); transition: transform .2s cubic-bezier(.34,1.56,.64,1); position: relative; } .bni-fab .bni-add-circle::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 4px solid rgba(255,107,43,.6); animation: fabRing 1.8s cubic-bezier(.4,0,.6,1) infinite; pointer-events: none; } @keyframes fabRing { 0% { transform: scale(1); opacity: .7; } 40% { transform: scale(1.35); opacity: 0; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } .bni-fab-lbl { font-size: 11px; font-weight: 700; color: var(--or); line-height: 1; white-space: nowrap; } .bni-fab:active { opacity: 1; transform: none; } .bni-fab:active .bni-add-circle { transform: scale(.88); } .bni-fab:active .bni-add-circle::after { animation: none; opacity: 0; } html.dk .bni-fab .bni-add-circle { box-shadow: 0 8px 28px rgba(255,69,0,.6); } html.dk .bni-fab:active .bni-add-circle { box-shadow: 0 4px 14px rgba(255,69,0,.4); } .bnav.on { display: flex; } /* Pseudo-élément qui étend le fond jusqu'au bas absolu de l'écran (home indicator iOS) */ .bnav::after { content: ''; position: absolute; bottom: -80px; left: 0; right: 0; height: 80px; background: rgba(255,255,255,0.97); pointer-events: none; } html.dk .bnav::after { background: rgba(18,17,16,0.97); } /* Chaque item */ .bni { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 0 6px 8px; cursor: pointer; color: #9A9A9A; position: relative; -webkit-tap-highlight-color: transparent; user-select: none; border: none; background: none; outline: none; transition: color 0.14s; } /* Feedback tap immédiat */ .bni:active { opacity: 0.4; transition: opacity 0.05s; } .bni svg { width: 28px; height: 28px; flex-shrink: 0; stroke: currentColor; display: block; } .bni-lbl { font-size: 11px; font-weight: 500; line-height: 1; color: inherit; white-space: nowrap; } /* État actif */ .bni.on { color: #FF6B2B; } .bni.on .bni-lbl { font-weight: 700; } /* Feed — orange seulement actif */ #bniFeed { display: none; } #bniFeed.on { color: var(--or); } /* ico on/off */ .bni .bni-ico-off { display: block; } .bni .bni-ico-on { display: none; } .bni.on .bni-ico-off { display: none; } .bni.on .bni-ico-on { display: block; } /* Badge */ .bni-badge { position: absolute; top: 14px; right: calc(50% - 22px); background: #FF3B30; color: #fff; border-radius: 8px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; border: 2px solid rgba(255,255,255,0.97); } .bni-badge.on { display: flex; } .bni-sep { display: none; } /* Dot rouge "action requise" (collé en haut-droit du SVG icône Profil, sans contour) */ .acc-dot { position: absolute; top: 5px; right: calc(50% - 14px); width: 8px; height: 8px; background: #FF3B30; border-radius: 50%; display: none; } .acc-dot.on { display: block; } /* Quand on est sur la page Profil, masquer le dot (l'action est visible dans la page) */ #bniAcc.on .acc-dot { display: none; } .acc-card-dot { position: absolute; top: 14px; right: 14px; width: 12px; height: 12px; background: #FF3B30; border-radius: 50%; border: 2px solid var(--wh); display: none; box-shadow: 0 0 0 3px rgba(255,59,48,.15); } .acc-card-dot.on { display: block; } html.dk .acc-card-dot { border-color: var(--wh); } /* Dark mode */ html.dk .bnav { background: rgba(18,17,16,0.97); border-top-color: rgba(255,255,255,0.1); box-shadow: 0 -2px 16px rgba(0,0,0,0.3); } html.dk .bni { color: #6B6B6B; } html.dk .bni.on { color: #FF6B2B; } html.dk #bniFeed.on { color: #FF6B2B; } html.dk .bni-badge { border-color: rgba(18,17,16,0.97); } /* ── Pill flottante : iPad + Desktop ≥ 769px ── */ /* 2026-05-26 (Nacera) : ancien mode "pill centrée desktop" entre 769 et 1099 px supprimé entièrement — ça générait des positions incohérentes au bottom-left selon les configs. Désormais une seule règle : - <1100 → bnav fullwidth en bas (CSS mobile par défaut) - ≥1100 avec souris → sidebar gauche (body.sbd-on cache la bnav) - ≥1100 sans hover/pointer:fine → fallback bnav fullwidth (rare) Aucun mode pill / aucun positionnement JS. */ @media (hover: hover) and (pointer: fine) { .bni:hover:not(.on) { background: rgba(0,0,0,0.05); color: #555; } html.dk .bni:hover:not(.on) { background: rgba(255,255,255,0.07); } } /* ── FAVORITES PAGE ── */ #pgFav{padding-top:16px;padding-bottom:120px;} .fav-section-title{ font-size:18px;font-weight:700;color:var(--ink); letter-spacing:-.02em;padding:8px 20px 10px; } .fav-empty{ text-align:center;padding:40px 24px; } /* Carrousel horizontal */ .fav-carousel{ display:flex;gap:14px; overflow-x:auto;overflow-y:visible; -webkit-overflow-scrolling:touch;scrollbar-width:none; padding:10px 20px 28px; scroll-snap-type:x mandatory; scroll-padding-left:20px; } .fav-carousel::-webkit-scrollbar{display:none;} /* Card cours dans carrousel */ .fav-cours-card{ flex:0 0 220px;scroll-snap-align:start; background:var(--wh);border-radius:20px; overflow:hidden;cursor:pointer; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s; position:relative; } .fav-cours-card:active{transform:scale(.97);} .fav-cours-card:hover{transform:translateY(-4px);box-shadow:0 6px 28px rgba(0,0,0,.13);} .fav-cours-card-top{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:relative;} .fav-cours-card-body{padding:11px 14px 14px;} .fav-cours-card-title{font-size:13.5px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fav-cours-card-meta{font-size:11.5px;color:var(--lite);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fav-cours-card-price{font-size:18px;font-weight:800;color:var(--or);letter-spacing:-.04em;} .fav-cours-card-price span{font-size:11px;font-weight:400;color:var(--lite);} /* Placeholder inputs — gris clair pour distinguer du texte saisi */ #tuteurConfirmPrenom::placeholder{color:#C7C7CC;font-weight:400;-webkit-text-fill-color:#C7C7CC;} #enfantPrenomInput{-webkit-text-fill-color:var(--ink);} #enfantPrenomInput::placeholder{color:#C7C7CC;-webkit-text-fill-color:#C7C7CC;font-weight:400;opacity:1;} /* Card prof dans carrousel */ .fav-prof-card{ flex:0 0 160px;scroll-snap-align:start; background:var(--wh);border-radius:20px; overflow:hidden;cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.06),0 6px 24px rgba(0,0,0,.08); transition:transform .25s cubic-bezier(.22,.61,.36,1),box-shadow .25s; padding:20px 14px 16px; text-align:center; position:relative; } .fav-prof-card:active{transform:scale(.97);} .fav-prof-card:hover{transform:translateY(-4px);box-shadow:0 6px 28px rgba(0,0,0,.13);} .fav-prof-av{ width:56px;height:56px;border-radius:50%; margin:0 auto 10px; display:flex;align-items:center;justify-content:center; font-size:18px;font-weight:800;color:#fff; overflow:hidden; box-shadow:0 3px 14px rgba(0,0,0,.16); } .fav-prof-name{font-size:13px;font-weight:700;color:var(--ink);letter-spacing:-.02em;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fav-prof-role{font-size:11px;color:var(--lite);margin-bottom:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .fav-prof-btn{ background:var(--orp);color:var(--or); border:none;border-radius:50px; padding:6px 12px;font-family:inherit;font-weight:700;font-size:11.5px; cursor:pointer;transition:all .18s;width:100%; } .fav-prof-btn:hover{background:var(--or);color:#fff;} /* Remove-fav btn */ .fav-remove-btn{ position:absolute;top:8px;right:8px; width:26px;height:26px;border-radius:50%; background:rgba(0,0,0,.18);backdrop-filter:blur(8px); border:none;cursor:pointer; display:flex;align-items:center;justify-content:center; color:#fff;transition:background .15s; -webkit-tap-highlight-color:transparent; } .fav-remove-btn:hover{background:rgba(239,68,68,.8);} /* ── FAV COURS 2-COL masonry (Pinterest) ── */ .fav2-grid{display:flex;gap:10px;padding:0 16px 8px;align-items:flex-start;} .fav2-col{flex:1;display:flex;flex-direction:column;gap:10px;} .fav2-img{width:100%;border-radius:0;overflow:hidden;flex-shrink:0;position:relative;} .fav2-img::after{display:none;} .fav2-img-inner{width:100%;height:100%;} /* Swipe wrapper — clips animation and carries shadow/border */ .fav2-swipe-wrap{ position:relative;overflow:hidden;border-radius:18px; box-shadow:0 4px 18px rgba(255,107,43,.14),0 1px 4px rgba(0,0,0,.06),0 0 0 0.5px rgba(255,107,43,.16); border:none; } html.dk .fav2-swipe-wrap{box-shadow:inset 0 0 0 1px rgba(255,255,255,.13),0 4px 20px rgba(0,0,0,.5) !important;border-color:transparent !important;} /* Red trash revealed on swipe */ .fav2-swipe-action{ position:absolute;inset:0; background:linear-gradient(135deg,#FF3B30,#C0392B); display:flex;align-items:center;justify-content:flex-end; padding-right:22px;border-radius:18px; } .fav2-card{ position:relative;background:var(--wh);border-radius:18px;overflow:hidden;cursor:pointer; will-change:transform; transition:transform .18s cubic-bezier(.22,.61,.36,1); touch-action:pan-y; /* autorise scroll vertical, bloque navigation iOS sur glissement horizontal */ } .fav2-card:active,.fav2-card.tapped{transform:scale(.97);} html.dk .fav2-card{background:var(--wh);} .fav2-card .card-badge-mode-new{font-size:9px;padding:3px 7px;gap:3px;} .fav2-card .card-badge-mode-new svg{width:7px;height:7px;} /* floating subject pill + prof avatar at top (like explorer) */ .fav2-subj{ font-size:11px;font-weight:800;color:#fff; padding:4px 12px;border-radius:50px; letter-spacing:.04em;text-transform:uppercase; box-shadow:0 2px 10px rgba(0,0,0,.18); max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; display:inline-block; transform:rotate(-1deg); } .fav2-av-wrap{ position:absolute;top:7px;right:7px;z-index:2; width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:800;color:#fff; overflow:hidden;border:2.5px solid #fff; box-shadow:0 2px 8px rgba(0,0,0,.15); flex-shrink:0; } .fav2-body{padding:8px 9px 9px;} .fav2-body-flat{padding:11px 11px 11px;} .fav2-head{display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:nowrap;} .fav2-subj-inline{transform:none !important;position:static !important;box-shadow:none !important;font-size:10px;padding:3px 9px;flex-shrink:1;min-width:0;} .fav2-mode-inline{flex-shrink:0;} .fav2-av-inline{ margin-left:auto;width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:10px;font-weight:800;color:#fff; overflow:hidden;border:1.5px solid var(--wh); flex-shrink:0; } .fav2-title{font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:8px;letter-spacing:-.02em;} .fav2-date-big{ display:flex;align-items:center;gap:5px; font-size:12px;font-weight:600;color:var(--lite); margin-bottom:10px; letter-spacing:-.01em; } .fav2-date-big span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;} .fav2-date-big svg{color:#FF6B35;flex-shrink:0;opacity:.9;} .fav2-sched{ display:inline-flex;align-items:center;gap:5px; font-size:10.5px;font-weight:600;color:var(--ink); background:#FFF5F0;border:1.5px dashed #FF6B35; border-radius:7px;padding:4px 8px;margin-bottom:8px; max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } html.dk .fav2-sched{background:rgba(255,107,43,.08);border-color:rgba(255,107,43,.4);} .fav2-sep{border:none;border-top:1.5px dashed rgba(0,0,0,.1);margin:0 0 8px;} html.dk .fav2-sep{border-top-color:rgba(255,255,255,.1);} .fav2-foot{display:flex;align-items:center;justify-content:space-between;gap:4px;} .fav2-cta-row{display:flex;align-items:center;gap:8px;} .fav2-price{font-size:15px;font-weight:800;color:var(--or);letter-spacing:-.03em;flex-shrink:0;} .fav2-cta{ flex:1;min-width:0; font-size:12px;font-weight:800;color:#fff; background:linear-gradient(135deg,#FF8C55,#FF6B35); border:none;border-radius:10px;padding:9px 10px; cursor:pointer;letter-spacing:-.01em; box-shadow:0 2px 8px rgba(255,107,43,.25); -webkit-tap-highlight-color:transparent; transition:transform .15s,box-shadow .15s; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fav2-cta:active{transform:scale(.97);box-shadow:0 1px 4px rgba(255,107,43,.2);} .fav2-cta-consult{background:var(--ink);color:var(--wh);box-shadow:none;} .fav2-cta-done{background:rgba(0,177,79,.12);color:#00A550;box-shadow:none;cursor:default;} .fav2-cta-full{background:rgba(0,0,0,.08);color:var(--lite);box-shadow:none;cursor:default;} html.dk .fav2-cta-done{background:rgba(0,177,79,.2);color:#4FD07C;} html.dk .fav2-cta-full{background:rgba(255,255,255,.08);color:var(--lite);} .fav2-mode{font-size:9.5px;font-weight:700;border-radius:6px;padding:3px 7px;white-space:nowrap;} /* ── BADGES VÉRIFICATION (premium) ── */ .prof-badge{ display:inline-flex;align-items:center;gap:6px; border-radius:50px;padding:7px 13px 7px 9px; font-size:12px;font-weight:700;cursor:pointer; white-space:nowrap;transition:opacity .15s,transform .15s; border:none; box-shadow:0 1px 3px rgba(0,0,0,.08),0 3px 10px rgba(0,0,0,.08); -webkit-tap-highlight-color:transparent; } .prof-badge:active{opacity:.7;transform:scale(.96);} .prof-badge-vrf{background:#fff;color:#FF6B2B;} .prof-badge-dip{background:#fff;color:#4F46E5;} .prof-badge-cas{background:#fff;color:#10B981;} .prof-badge-fol{background:#fff;color:var(--or);} html.dk .prof-badge-vrf{background:#1C1C1E;color:#FB923C;} html.dk .prof-badge-dip{background:#1C1C1E;color:#818CF8;} html.dk .prof-badge-cas{background:#1C1C1E;color:#34D399;} html.dk .prof-badge-fol{background:#1C1C1E;color:var(--or);} html.dk .prof-badge{box-shadow:0 1px 3px rgba(0,0,0,.3),0 3px 10px rgba(0,0,0,.3);} /* ── ESPACE PROFESSEUR ── */ .esp-block{margin-top:24px;} .esp-block-label{font-size:11.5px;font-weight:800;color:var(--lite);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;} .esp-code-card{ background:linear-gradient(145deg,var(--or),#E04E10); border-radius:20px;padding:22px 20px 18px;text-align:center; box-shadow:0 6px 24px rgba(255,107,43,.32),0 2px 8px rgba(0,0,0,.1); } .esp-code-digits{ font-size:34px;font-weight:900;color:#fff;letter-spacing:.28em; font-variant-numeric:tabular-nums;margin-bottom:6px; text-shadow:0 2px 8px rgba(0,0,0,.18); } .esp-code-sub{font-size:12px;color:rgba(255,255,255,.75);margin-bottom:16px;font-weight:500;} .esp-code-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;} .esp-btn{ display:inline-flex;align-items:center;gap:6px; border:none;border-radius:10px;padding:8px 14px; font-size:12.5px;font-weight:700;cursor:pointer; font-family:inherit;transition:opacity .15s,transform .1s; white-space:nowrap; } .esp-btn:active{opacity:.8;transform:scale(.95);} .esp-btn-sec{background:rgba(255,255,255,.22);color:#fff;backdrop-filter:blur(4px);} .esp-btn-prim{background:#fff;color:var(--or);} .esp-count-badge{ background:var(--or);color:#fff; font-size:10px;font-weight:800;border-radius:50px; padding:2px 7px;display:inline-flex;align-items:center; } .esp-add-btn{ background:var(--bg);border:1.5px solid var(--bdr);border-radius:8px; padding:5px 10px;font-size:11.5px;font-weight:700;color:var(--ink); cursor:pointer;display:inline-flex;align-items:center;gap:5px; font-family:inherit; } .esp-input{ width:100%;background:var(--wh);border:none; border-radius:10px;padding:10px 12px;font-size:13px;color:var(--ink); font-family:inherit;box-sizing:border-box;outline:none; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); transition:box-shadow .18s; } .esp-input:focus{outline:none;box-shadow:0 0 0 3px rgba(255,107,43,.2),0 3px 12px rgba(0,0,0,.1);} .esp-textarea{resize:none;min-height:72px;line-height:1.5;} /* ── ESPACE ÉLÈVE v2 — panel + cards ── */ #mpfPanelEspace:not([hidden]){display:flex;flex-direction:column;gap:10px;padding:12px 16px 48px;} .esp2-card{ background:var(--wh);border-radius:20px; border:none; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);overflow:hidden; } html.dk .esp2-card{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} #bdBibliotheque.closing,#bdElveBibliotheque.closing{animation:mpfSlideOut .25s cubic-bezier(.55,0,1,.45) forwards;} /* Header cliquable d'une card tiroir */ .esp2-card-hd{ display:flex;align-items:center;gap:12px; padding:16px;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .15s; } .esp2-card-hd:active{opacity:.7;} .esp2-card-hd .esp2-arr{ margin-left:auto;flex-shrink:0;color:var(--lite); transition:transform .25s cubic-bezier(.4,0,.2,1); } .esp2-card.open .esp2-card-hd .esp2-arr{transform:rotate(90deg);} /* Corps de la card tiroir (collapsé par défaut) */ .esp2-card-body{ display:none;padding:0 16px 16px; } .esp2-card.open .esp2-card-body{display:block;} /* Boutons secondaires à l'intérieur des cards (fond blanc/dark) */ .esp-card-btn{ display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:1;min-width:0; background:var(--bg);color:var(--ink);border:1px solid var(--bdr); border-radius:10px;padding:9px 10px; font-size:12px;font-weight:700;cursor:pointer;font-family:inherit; white-space:nowrap;transition:opacity .15s; } .esp-card-btn:active{opacity:.7;} .esp-card-btn-prim{background:var(--or);color:#fff;border-color:transparent;} .esp2-ico{ width:44px;height:44px;border-radius:14px;flex-shrink:0; display:flex;align-items:center;justify-content:center;font-size:22px; } html.dk .esp2-ico{background:rgba(255,107,43,.14)!important;} html.dk .esp2-ico svg{stroke:var(--or)!important;} .esp2-title{font-size:15px;font-weight:700;color:var(--ink);} .esp2-sub{font-size:12px;color:var(--lite);margin-top:2px;} .esp2-btn-submit{ background:var(--or);color:#fff;border:none; border-radius:12px;padding:12px;font-size:14px;font-weight:700; cursor:pointer;font-family:inherit;width:100%;margin-top:8px; } .esp2-btn-submit:active{opacity:.8;} /* Masque les flèches natives sur l'input prix du stepper */ #stepPrix::-webkit-outer-spin-button, #stepPrix::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;} /* Boutons picker type/accès popup doc */ .add-doc-type-btn{ background:var(--bg);border:1.5px solid var(--bdr);border-radius:12px; padding:10px 8px;font-size:13px;font-weight:600;color:var(--mid); cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent; transition:all .15s; } .add-doc-type-btn:active{opacity:.7;} .add-doc-type-sel{ background:rgba(255,107,43,.06);border-color:var(--or);color:var(--or); } /* Popup plein écran publications */ #bdEspPubs{ position:fixed;inset:0;z-index:600;background:var(--wh); display:flex;flex-direction:column; animation:mi .3s cubic-bezier(.32,1,.6,1); } #bdEspPubs.closing{animation:mo .25s cubic-bezier(.55,0,1,.45) forwards;} .bdep-top{ display:flex;align-items:center;gap:10px; padding:max(52px,env(safe-area-inset-top,52px)) 16px 14px; background:var(--wh);border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0; } html.dk .bdep-top{border-color:rgba(255,255,255,.07);} .bdep-scroll{flex:1;overflow-y:auto;padding:16px 16px 40px;-webkit-overflow-scrolling:touch;background:var(--wh);} /* Feed cards (style réseau social) */ .feed-card{ background:var(--wh);border-radius:18px; border:none;margin-bottom:12px;overflow:hidden; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); } html.dk .feed-card{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .feed-card-head{ display:flex;align-items:center;gap:10px;padding:14px 14px 10px; } .feed-card-av{ width:36px;height:36px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:800;color:#fff;overflow:hidden; } .feed-card-nm{font-size:13px;font-weight:700;color:var(--ink);} .feed-card-date{font-size:11px;color:var(--lite);margin-top:1px;} .feed-card-body{ padding:0 14px 14px;font-size:14px;color:var(--mid); line-height:1.65;white-space:pre-wrap; } /* Contenus cours */ .contenu-card{ background:var(--wh);border-radius:16px;border:none; padding:14px 16px;margin-bottom:10px; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); } html.dk .contenu-card{border-color:rgba(255,255,255,.08);} .contenu-card-head{display:flex;align-items:center;gap:12px;margin-bottom:4px;} .contenu-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.3;} .contenu-tag{ display:inline-block;font-size:10.5px;font-weight:700; border-radius:6px;padding:2px 8px;margin-top:4px;letter-spacing:.02em; } .contenu-desc{font-size:13px;color:var(--mid);line-height:1.6;margin-top:8px;white-space:pre-wrap;} .contenu-link{ display:inline-flex;align-items:center;gap:6px; margin-top:10px;background:var(--or);color:#fff; border-radius:10px;padding:8px 14px;font-size:13px;font-weight:700; text-decoration:none; } /* ── MES PROFS liste verticale ── */ .mp2-grid{display:flex;flex-direction:column;padding:0 0 100px;} /* ── FICHE PROF UNIFIÉE ── */ #bdPrFull{ position:fixed;inset:0;z-index:500; background:#fff;overflow:hidden; display:flex;flex-direction:column; animation:mpfSlideIn .28s cubic-bezier(.32,1,.6,1); } @keyframes mpfSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}} @keyframes mpfSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}} #bdPrFull.closing{animation:mpfSlideOut .22s cubic-bezier(.55,0,1,.45) forwards;} /* Top bar */ #mpfTopBar{ flex-shrink:0;background:var(--wh); display:flex;align-items:center;gap:12px; padding:max(16px,env(safe-area-inset-top,16px)) 16px 12px; border-bottom:1px solid var(--bdr); } .mpf-back-btn{ background:var(--bg);border:none;border-radius:50%; width:34px;height:34px;display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--ink);flex-shrink:0;-webkit-tap-highlight-color:transparent; } .mpf-top-title{ font-size:15px;font-weight:700;color:var(--ink); flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .mpf-follow-topbtn{ background:none;border:1.5px solid var(--bdr);border-radius:50px; padding:6px 14px;font-family:inherit;font-size:12px;font-weight:700; cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:5px; transition:all .18s;flex-shrink:0;-webkit-tap-highlight-color:transparent; } /* Scrollable body */ #mpfScroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:40px;} /* HERO : avatar centré, name, role, badges */ .mpf-hero{ text-align:center;padding:28px 24px 24px; background:var(--wh);border-bottom:1px solid var(--bdr); } .mpf-hero-av{ width:90px;height:90px;border-radius:50%; margin:0 auto 14px; display:flex;align-items:center;justify-content:center; font-size:28px;font-weight:800;color:#fff;overflow:hidden; background:linear-gradient(135deg,#FF8C55,#E04E10); box-shadow:0 6px 22px rgba(0,0,0,.18); } .mpf-hero-nm{ font-size:22px;font-weight:800;color:var(--ink); letter-spacing:-.03em;line-height:1.2; } .mpf-hero-rl{ font-size:13px;color:var(--lite);margin-top:5px;font-weight:500; } .mpf-hero-badges{ display:flex;flex-wrap:wrap;gap:7px; justify-content:center;margin-top:12px; } /* Hero action buttons (Message + Suivre) */ .mpf-hero-actions{ display:flex;gap:10px;margin-top:18px;justify-content:center; } .mpf-action-btn{ display:flex;align-items:center;gap:7px; border-radius:50px;padding:10px 20px; font-family:inherit;font-size:14px;font-weight:700; cursor:pointer;transition:all .18s; -webkit-tap-highlight-color:transparent; min-width:110px;justify-content:center; } .mpf-action-sec{ background:var(--bg);border:1.5px solid var(--bdr);color:var(--ink); } .mpf-action-sec:active{opacity:.7;} .mpf-action-pri{ background:var(--or);border:1.5px solid var(--or);color:#fff; box-shadow:0 4px 12px rgba(255,107,43,.28); } .mpf-action-pri:active{opacity:.8;} .mpf-action-pri.following{ background:var(--bg);border-color:var(--bdr);color:var(--ink); box-shadow:none; } /* Stats : 4 colonnes séparées par bordures verticales */ #mpfStats{ display:flex;border-bottom:1px solid var(--bdr);background:var(--wh); } #mpfStats .mpf-stat{ flex:1;text-align:center;padding:14px 6px; border-right:1px solid var(--bdr); } #mpfStats .mpf-stat:last-child{border-right:none;} .mpf-stat-num{font-size:18px;font-weight:800;color:var(--ink);} .mpf-stat-lbl{font-size:10px;color:var(--lite);font-weight:500;margin-top:3px;text-transform:uppercase;letter-spacing:.03em;} /* Tabs : style underline épuré */ #mpfTabBar{ flex-shrink:0;display:flex;background:var(--wh); border-bottom:1px solid var(--bdr);padding:0 8px; position:sticky;top:0;z-index:2; } .mpf-tab{ flex:1;background:none;border:none;font-family:inherit; font-size:13px;font-weight:600; color:var(--lite);padding:13px 4px;cursor:pointer; border-bottom:2.5px solid transparent;margin-bottom:-1px; transition:color .15s,border-color .15s; -webkit-tap-highlight-color:transparent; } .mpf-tab.on{color:var(--or);border-bottom-color:var(--or);} /* Section label */ .mpf-sec-lbl{ font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.07em;color:var(--lite); padding:16px 16px 6px; } /* Item liste blanc */ .mpf-list-item{ display:flex;align-items:center;justify-content:space-between; background:var(--wh);border-radius:16px;padding:14px 16px; margin:0 16px 8px;cursor:pointer;transition:opacity .15s; } .mpf-list-item:active{opacity:.7;} .mpf-list-item-left{display:flex;align-items:center;gap:12px;flex:1;min-width:0;} .mpf-list-item-lbl{font-size:14px;font-weight:500;color:var(--ink);} .mpf-list-item-sub{font-size:12px;color:var(--lite);margin-top:2px;} .mpf-list-item-action{font-size:12.5px;color:var(--lite);flex-shrink:0;display:flex;align-items:center;gap:2px;white-space:nowrap;} /* Compat aliases */ .mpf-white-block{background:var(--wh);border-radius:16px;padding:14px 16px;margin:0 16px 8px;} .mpf-section-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--lite);padding:16px 16px 6px;} /* Code enrollment */ .mpf-code-input{ flex:1;border:1.5px solid var(--bdr);border-radius:12px;padding:10px 12px; font-family:inherit;font-size:14px;color:var(--ink);background:var(--bg); outline:none;letter-spacing:.1em;text-transform:uppercase; } .mpf-code-input:focus{border-color:var(--or);} .mpf-code-btn{ background:var(--or);color:#fff;border:none;border-radius:12px; padding:10px 16px;font-family:inherit;font-size:13px;font-weight:700; cursor:pointer;white-space:nowrap; } /* Cours dans panel Cours */ .mpf-cours-item{ display:flex;align-items:center;gap:12px;padding:12px; background:var(--wh);border-radius:14px;margin-bottom:8px;cursor:pointer; transition:opacity .15s; } .mpf-cours-item:active{opacity:.7;} /* Heart button — inline à droite du titre du cours */ .ctitle-row{ display:flex;align-items:flex-start;justify-content:space-between; gap:8px;margin-bottom:8px; } .ctitle-row .ctitle{flex:1;min-width:0;margin-bottom:0;} .card-heart-btn { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: rgba(255,107,43,.13); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #FF6B2B; transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s; -webkit-tap-highlight-color: transparent; } .card-heart-btn:active { transform: scale(.88); } .card-heart-btn.saved { background: rgba(255,107,43,.18); color: #FF6B2B; } .card-heart-btn.saved svg { fill: #FF6B2B; stroke: #FF6B2B; } @keyframes heartPop { 0%{transform:scale(1)} 40%{transform:scale(1.5)} 70%{transform:scale(.88)} 100%{transform:scale(1)} } .card-heart-btn.popping { animation: heartPop .38s cubic-bezier(.34,1.56,.64,1); } html.dk .card-heart-btn { background: rgba(255,107,43,.18); color: #FF8C55; } html.dk .card-heart-btn.saved { background: rgba(255,107,43,.22); color: #FF8C55; } html.dk .card-heart-btn.saved svg { fill: #FF8C55; stroke: #FF8C55; } /* Dark mode */ html.dk .fav-cours-card,html.dk .fav-prof-card{background:var(--wh);} html.dk .fav-cours-card-title,html.dk .fav-prof-name{color:var(--ink);} .pw-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);cursor:pointer;color:var(--lite);display:flex;align-items:center;transition:color .18s;} .pw-toggle:hover{color:var(--or);} .pw-toggle svg{width:18px;height:18px;} /* mobile nav — floating pill, no bottom bar */ .rban{background:var(--or);border-radius:20px;padding:18px 18px 16px;color:#fff;margin-bottom:18px;position:relative;overflow:hidden;} .rban::after{content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.08);z-index:0;pointer-events:none;} .rban::before{content:'';position:absolute;left:-40px;bottom:-40px;width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.05);z-index:0;pointer-events:none;} .rban>*{position:relative;z-index:1;} .rban .card-badge-subj{max-width:none;} .rban-title{font-size:19px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-.01em;margin-bottom:12px;text-shadow:0 1px 4px rgba(0,0,0,.2);} .rban-prof{display:flex;align-items:center;gap:10px;margin-bottom:12px;} .rban-avatar{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;overflow:hidden;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15);} .rban-prof-info{min-width:0;flex:1;} .rban-prof-nm{font-size:13px;font-weight:700;color:#fff;line-height:1.3;} .rban-prof-note{font-size:11.5px;color:rgba(255,255,255,.9);margin-top:2px;} .rban-when{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;padding:10px 14px;background:rgba(255,255,255,.2);border:1.5px solid rgba(255,255,255,.32);border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);} .rban-when-time{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1;text-shadow:0 2px 6px rgba(0,0,0,.18);} .rban-when-date{font-size:13px;font-weight:700;color:rgba(255,255,255,.95);text-transform:capitalize;} .rban-chips{display:flex;flex-wrap:wrap;gap:6px;} .rban-chips .rchip{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.25);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:20px;letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);} .rban-chips .rchip:empty{display:none;} .rban-chips .rchip svg{opacity:.85;} .rban-chips .card-badge-subj{font-size:10px;padding:4px 10px;} .rprice-hero{text-align:center;padding:18px 16px;margin-bottom:14px;background:linear-gradient(135deg,var(--orp) 0%,rgba(255,125,66,.06) 100%);border-radius:20px;border:1px solid rgba(255,107,43,.14);} .rprice-hero .rprice-big{font-size:34px;font-weight:900;color:var(--or);letter-spacing:-.03em;line-height:1;margin-bottom:6px;} .rprice-hero .rprice-sub{font-size:12.5px;color:var(--mid);font-weight:600;letter-spacing:-.005em;} .rprice-hero .rprice-sub s{opacity:.75;font-weight:700;} html.dk .rprice-hero{background:linear-gradient(135deg,rgba(255,107,43,.14) 0%,rgba(255,107,43,.04) 100%);border-color:rgba(255,107,43,.22);} .rcta-sticky{position:sticky;bottom:0;margin:16px -20px -24px;padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));background:var(--wh);border-top:1px solid rgba(0,0,0,.05);box-shadow:0 -8px 22px -10px rgba(0,0,0,.1);z-index:5;} .rcta-sticky::before{content:'';position:absolute;left:0;right:0;top:-20px;height:20px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--wh));pointer-events:none;} html.dk .rcta-sticky{background:var(--wh);border-top-color:rgba(255,255,255,.06);} html.dk .rcta-sticky::before{background:linear-gradient(to bottom,rgba(0,0,0,0),var(--wh));} .pb.danger{background:#FEF2F2;color:#EF4444;box-shadow:0 3px 12px rgba(239,68,68,.12),0 0 0 0.5px rgba(239,68,68,.18);} .pb.danger:hover{box-shadow:0 0 0 2px #EF4444,0 4px 14px rgba(239,68,68,.2);} html.dk .pb.danger{background:rgba(239,68,68,.12);box-shadow:0 2px 8px rgba(239,68,68,.16),0 0 0 0.5px rgba(239,68,68,.3);} .bdn{background:var(--bg);border-radius:12px;padding:12px;margin-bottom:12px;} .br{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;} .br:not(:last-child){border-bottom:1px solid var(--bdr);} .br .l{color:var(--mid);}.br .v{font-weight:600;} .br.tot .l{font-weight:700;color:var(--ink);}.br.tot .v{color:var(--or);font-size:16px;font-weight:800;} .ibox{background:var(--orp);border-radius:14px;padding:13px 15px;display:flex;gap:10px;margin-bottom:16px;font-size:13px;line-height:1.6;color:var(--mid);} .ibox>svg{width:16px;height:16px;color:var(--or);flex-shrink:0;margin-top:2px;} .phdr{padding:24px 18px 0;text-align:center;} .mpav{width:72px;height:72px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:800;color:#fff;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.18);} .pnm{font-size:18px;font-weight:800;margin-bottom:2px;letter-spacing:-.03em;} .prl{font-size:12.5px;color:var(--mid);margin-bottom:8px;} .pbdg{display:inline-flex;align-items:center;gap:5px;background:var(--orp);color:var(--or);border-radius:50px;padding:5px 13px;font-size:12px;font-weight:700;} .pstbl{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bdr);border-radius:16px;overflow:hidden;margin:14px 18px;} .pref-section{margin-bottom:8px;} .pref-header{font-size:11px;font-weight:700;color:var(--lite);text-transform:uppercase;letter-spacing:.07em;padding:20px 0 8px;} .pref-group{background:var(--wh);border-radius:20px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.09);border:1px solid rgba(0,0,0,.05);} .pref-row{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--bdr);min-height:54px;transition:background .15s;-webkit-tap-highlight-color:transparent;} .pref-row:last-child{border-bottom:none;} .pref-row:active{background:var(--bg);} .pref-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;} .pref-icon svg{width:16px;height:16px;} .pref-label{flex:1;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em;} .pstc{background:var(--wh);padding:12px;text-align:center;} .pstv{font-size:20px;font-weight:800;letter-spacing:-.03em;} .pstl{font-size:11px;color:var(--lite);margin-top:2px;font-weight:500;} .pbio{font-size:13.5px;color:var(--mid);line-height:1.7;padding:4px 18px 14px;} .ptags{display:flex;flex-wrap:wrap;gap:7px;padding:0 18px 18px;} .tag{background:var(--bg);border-radius:50px;padding:5px 12px;font-size:12px;font-weight:600;color:var(--mid);} .pacts{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 18px 20px;} .pcl2{padding:0 18px 20px;border-top:1px solid var(--bdr);} .pclh{font-size:11px;font-weight:700;color:var(--lite);letter-spacing:.07em;text-transform:uppercase;margin:14px 0 8px;} .pcrow{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--bdr);} .pcrow:last-child{border-bottom:none;} .fpico{width:52px;height:52px;border-radius:50%;background:var(--orp);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;} .fpico svg{width:24px;height:24px;color:var(--or);} .sg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;} .so{border:none;border-radius:12px;padding:10px;text-align:center;cursor:pointer;transition:all .22s cubic-bezier(.34,1.56,.64,1);font-size:12.5px;font-weight:600;color:var(--mid);background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .so:hover{background:rgba(255,107,43,.06);box-shadow:0 0 0 1.5px rgba(255,107,43,.3),0 3px 12px rgba(0,0,0,.08);} .so.on{background:linear-gradient(135deg,#FF7D42,#FF4500);color:#fff;box-shadow:0 4px 14px rgba(255,69,0,.28);} .fi3{width:100%;border:none;border-radius:12px;padding:11px 14px;font-family:inherit;font-size:16px;outline:none;transition:box-shadow .18s;background:var(--wh);box-sizing:border-box;-webkit-appearance:none;appearance:none;height:48px;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .fi3:focus{box-shadow:0 0 0 3px rgba(255,107,43,.2),0 3px 12px rgba(0,0,0,.1);} .fi3::placeholder,.fi2::placeholder{color:#BBBBBB !important;opacity:1;} textarea.fi3::placeholder{color:#BBBBBB !important;opacity:1;} .toast{position:fixed;top:max(16px,env(safe-area-inset-top,16px));left:50%;transform:translateX(-50%) translateY(-12px) scale(.96);min-width:220px;max-width:360px;width:max-content;background:rgba(18,15,12,.93);color:#F0EDE8;border-radius:50px;padding:13px 22px;display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;z-index:9999;opacity:0;pointer-events:none;transition:all .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 28px rgba(0,0,0,.25);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);white-space:nowrap;} .toast.on{opacity:1;transform:translateX(-50%) translateY(0) scale(1);} @media(max-width:640px){.toast{left:50%;right:auto;transform:translateX(-50%) translateY(-8px) scale(.96);} .toast.on{transform:translateX(-50%) translateY(0) scale(1);}} .tico{width:26px;height:26px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .tico svg{width:13px;height:13px;color:#fff;} .toast.error .tico{background:#EF4444;} .toast.error{box-shadow:0 6px 28px rgba(239,68,68,.35);} @keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}} @keyframes popIn{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}} @media(max-width:640px){.cnt{padding:12px 16px}.acc-body{padding:0 20px !important}.grid{grid-template-columns:1fr;column-gap:0;padding:0 6px 36px}.rsel{display:none}.fgrid{grid-template-columns:1fr}.atab{font-size:11px;padding:12px 4px}.btnadd-txt{display:none}.acc-tabs{top:0;}} /* ============================================================ ONBOARDING — style Apple iOS ============================================================ */ #onboarding{ position:fixed;inset:0;z-index:2000; background:#1A0A04; display:none; flex-direction:column; overflow:hidden; font-family:'Plus Jakarta Sans',sans-serif; } #onboarding.active{display:flex;} #onboarding.hidden{display:none;} /* Slides wrapper */ .ob-track{ display:flex;flex:1; transition:transform .55s cubic-bezier(.65,0,.35,1); will-change:transform; } .ob-slide{ min-width:100vw;width:100vw; display:flex;flex-direction:column; align-items:center;justify-content:center; padding:0 32px 40px; text-align:center; position:relative; } /* Illustration zone */ .ob-illo{ width:220px;height:220px; border-radius:40px; margin-bottom:40px; display:flex;align-items:center;justify-content:center; position:relative; flex-shrink:0; } .ob-illo svg{position:relative;z-index:1;} /* Slide 1 — gradient orange */ .ob-slide:nth-child(1) .ob-illo{ background:linear-gradient(145deg,var(--or),var(--ord)); box-shadow:0 32px 80px rgba(255,107,43,.45); } /* Slide 2 — gradient bleu */ .ob-slide:nth-child(2) .ob-illo{ background:linear-gradient(145deg,#FF8C55,var(--or)); box-shadow:0 32px 80px rgba(255,107,43,.35); } /* Slide 3 — gradient vert */ .ob-slide:nth-child(3) .ob-illo{ background:linear-gradient(145deg,var(--ord),#B03A08); box-shadow:0 32px 80px rgba(224,78,16,.4); } /* Slide 4 — gradient violet */ .ob-slide:nth-child(4) .ob-illo{ background:linear-gradient(145deg,var(--or),#C04010); box-shadow:0 32px 80px rgba(255,91,46,.45); } /* Floating shapes in illo */ .ob-shape{ position:absolute;border-radius:50%;opacity:.18; animation:obFloat 4s ease-in-out infinite; } .ob-shape:nth-child(1){width:90px;height:90px;background:#fff;top:-10px;right:-10px;animation-delay:0s;} .ob-shape:nth-child(2){width:50px;height:50px;background:#fff;bottom:10px;left:-5px;animation-delay:.8s;} @keyframes obFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} .ob-tag{ font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.45);margin-bottom:14px; } .ob-title{ font-size:28px;font-weight:800; color:#fff; line-height:1.2; margin-bottom:14px; letter-spacing:-.02em; } .ob-title span{color:var(--or);} .ob-desc{ font-size:15.5px;color:rgba(255,255,255,.6); line-height:1.65; max-width:320px; } /* Bottom controls */ .ob-footer{ padding:0 28px 48px; display:flex;flex-direction:column; align-items:center;gap:20px; flex-shrink:0; } .ob-dots{ display:flex;gap:6px;align-items:center; } .ob-dot{ width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.25); transition:all .35s cubic-bezier(.34,1.56,.64,1); } .ob-dot.on{ width:22px;border-radius:3px; background:var(--or); } .ob-btn{ width:100%;max-width:320px; background:var(--or);color:#fff; border:none;border-radius:16px; padding:17px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800;font-size:16px; cursor:pointer; transition:transform .18s,box-shadow .18s; letter-spacing:-.01em; box-shadow:0 8px 28px rgba(255,107,43,.45); } .ob-btn:active{transform:scale(.97);} .ob-skip{ font-size:13px;font-weight:600; color:rgba(255,255,255,.35); cursor:pointer; border:none;background:none; font-family:'Plus Jakarta Sans',sans-serif; padding:4px 8px; transition:color .18s; } .ob-skip:hover{color:rgba(255,255,255,.65);} /* Swipe hint animation on first slide */ .ob-swipe-hint{ position:absolute;bottom:16px; font-size:11px;color:rgba(255,255,255,.25); display:flex;align-items:center;gap:5px; animation:obFadeHint 2s 1.5s ease both; pointer-events:none; } @keyframes obFadeHint{0%{opacity:0;transform:translateY(6px)}30%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0}} /* Slide-in animation for content */ .ob-slide-content{ display:flex;flex-direction:column;align-items:center; animation:obIn .6s .1s cubic-bezier(.34,1.26,.64,1) both; } @keyframes obIn{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ TUTORIEL v3 ============================================================ */ #tutoRoot{display:none;} #tutoRoot.on{display:block !important;} @keyframes tutoFadeIn{from{opacity:0}to{opacity:1}} @keyframes cpSpin{to{transform:rotate(360deg)}} .cp-loader{display:inline-block;width:22px;height:22px;border:2.5px solid var(--orp);border-top-color:var(--or);border-radius:50%;animation:cpSpin .7s linear infinite;vertical-align:middle;margin-right:8px;flex-shrink:0;} @keyframes splashSpin{to{transform:rotate(360deg)}} @keyframes splashPulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,255,255,.3)}50%{transform:scale(1.06);box-shadow:0 0 0 12px rgba(255,255,255,0)}} @keyframes tutoCardIn{from{opacity:0;transform:scale(.92) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}} /* ============================================================ CoursPool — Design System Premium ============================================================ */ /* ── NAVIGATION BAR — kept for backdrop only, layout handled by main CSS ── */ /* No overrides here — main .bnav CSS block handles everything */ /* Active nav item — mobile uses tint, desktop uses pill (handled in main block) */ /* ── NAV — MOBILE padding only ── */ /* Mobile : padding pour la barre de nav pleine largeur */ @media (max-width: 768px) { #app .cnt { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } .acc-body { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } } /* iPad + Desktop : padding minimal (pill flottante ne coupe pas le contenu) */ @media (min-width: 769px) { #app .cnt { padding-bottom: 100px; } .acc-body { padding-bottom: 100px; } } /* ── NAV — CONVERSATION MODE (hidden, back button is in header) ── */ .bnav.conv-mode { display: none !important; } /* Bouton Profil : desktop seulement */ .bni-acc-desktop { display: none !important; } @media(min-width:769px){ .bni-acc-desktop { display: flex !important; } } /* Chevron retour dans bniMsg — caché par défaut, visible uniquement en msg-mode */ .bni-back { display: none !important; } /* Sécurité : forcer le masquage du bouton retour dynamique s'il existe encore en cache */ #bnavMsgBack { display: none !important; } /* ── NAV — MSG MODE desktop (≥769px) : pill réduite, bniMsg devient bouton retour ── */ @media(min-width:769px){ .bnav.msg-mode { left: 28px !important; transform: none !important; padding: 5px !important; gap: 0 !important; min-width: unset !important; } /* Cacher tous les items sauf bniMsg (qui devient le back button) */ .bnav.msg-mode .bni:not(#bniMsg), .bnav.msg-mode #bnavDragHandle { display: none !important; } /* bniMsg en msg-mode : montrer le chevron, cacher icône msg + label + badge */ .bnav.msg-mode #bniMsg .bni-msg-icon, .bnav.msg-mode #bniMsg .bni-msg-lbl, .bnav.msg-mode #bniMsg .bni-badge { display: none !important; } .bnav.msg-mode #bniMsg .bni-back { display: flex !important; } } /* Base font */ body, input, textarea, button, select { font-family: 'DM Sans', 'Plus Jakarta Sans', system-ui, sans-serif; } /* ── CARDS ── */ .card { border-radius: 22px; border: none; box-shadow: 0 3px 12px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.07); transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s; overflow: hidden; } @media(hover:hover)and(pointer:fine){.card:hover{transform:translateY(-6px) scale(1.008);box-shadow:0 2px 6px rgba(0,0,0,.04),0 20px 56px rgba(0,0,0,.12);}} .card:active { transform: translateY(-1px) scale(.995); transition-duration: .1s; } .ctop { height: 96px; } .ctitle { font-size: 15px; font-weight: 700; letter-spacing: -.025em; } .pm { font-size: 22px; font-weight: 800; letter-spacing: -.04em; } /* ── BUTTONS ── */ .pb.pri { background: linear-gradient(148deg, #FF7D42 0%, #FF4500 100%); box-shadow: 0 4px 18px rgba(255,69,0,.28), inset 0 1px 0 rgba(255,255,255,.18); border-radius: 50px; font-weight: 700; letter-spacing: -.02em; transition: all .22s cubic-bezier(.34,1.56,.64,1); } .pb.pri:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,69,0,.38), inset 0 1px 0 rgba(255,255,255,.18); } .pb.pri:active { transform: scale(.97); } .pb.sec { border-radius: 50px; transition: all .2s cubic-bezier(.34,1.56,.64,1); } .lbtn { background: linear-gradient(148deg,#FF7D42,#FF4500); border-radius: 50px; box-shadow: 0 4px 18px rgba(255,69,0,.28); } .lbtn:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,69,0,.38); } .btnr { border-radius: 50px; font-weight: 700; } /* ── FILTER PILLS ── */ .pill { border-radius: 50px; font-weight: 600; letter-spacing: -.01em; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 2px 8px rgba(0,0,0,.04); transition: all .25s cubic-bezier(.34,1.56,.64,1); } .pill.on { background: linear-gradient(135deg,#FF7D42,#FF4500); border-color: transparent; box-shadow: 0 4px 16px rgba(255,69,0,.28); transform: translateY(-1px); } .pill:hover:not(.on) { transform: translateY(-2px); } .pill:active { transform: scale(.95); } /* Pills bar — scroll without clipping */ #pillsBar { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } #pillsBar::-webkit-scrollbar { display: none; } /* Filter row — don't clip the pills shadow */ .cnt { overflow: visible; } .pills { overflow: visible; } /* bni-mes : identique à .bni — même padding, même alignement */ .bni-mes { flex: 1; display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px; padding: 0 6px 12px; cursor: pointer; color: #9A9A9A; position: relative; background: none; border: none; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; transition: color 0.14s; } .bni-mes:active { opacity: 0.4; transition: opacity 0.05s; } .bni-mes svg { width: 28px; height: 28px; stroke: currentColor; display: block; flex-shrink: 0; } .bni-mes .bni-lbl { font-size: 11px; font-weight: 500; line-height: 1; color: inherit; white-space: nowrap; } .bni-mes.on { color: #FF6B2B; } .bni-mes.on .bni-lbl { font-weight: 700; } .bni-mes.show { display: flex !important; } @media(min-width:769px){ .bni-mes { flex:none; padding:9px 16px; border-radius:40px; justify-content:center; gap:3px; } .bni-mes:active { opacity:1; } .bni-mes svg { width:22px; height:22px; } .bni-mes .bni-lbl { font-size:11px; } .bni-mes.on { background:linear-gradient(145deg,#FF7D42,#FF4500); color:#fff; box-shadow:0 4px 14px rgba(255,69,0,.38); } .bni-mes.on svg { stroke:#fff; } .bni-mes.on .bni-lbl { color:#fff; font-weight:600; } } /* ── TOAST ── */ .toast { left: 50%; right: auto; transform: translateX(-50%) translateY(-14px) scale(.95); max-width: min(340px, calc(100vw - 32px)); min-width: 200px; width: auto; border-radius: 20px; padding: 11px 20px; font-size: 14px; font-weight: 600; white-space: normal; word-break: break-word; background: rgba(12,10,8,.92); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); } .toast.on { transform: translateX(-50%) translateY(0) scale(1); } /* ── MODALS ── */ .modal { border-radius: 28px; } .lbox { border-radius: 28px; } /* ── PROFILE ROWS ── */ .pref-group { border-radius: 20px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.09); } .pref-row { min-height: 54px; } .pref-icon { width: 34px; height: 34px; border-radius: 9px; } .pref-label { font-size: 15.5px; font-weight: 500; } /* ── RROW (reservation rows) ── */ .rrow { border-radius: 20px; border: none; box-shadow: 0 3px 12px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.07); transition: transform .22s cubic-bezier(.22,.61,.36,1), box-shadow .22s; } .rrow:hover { transform: translateY(-2px); box-shadow: 0 4px 24px rgba(0,0,0,.1); } /* ── PROFILE HOME (6-card grid) ── */ .acc-card:hover { transform: translateY(-3px); box-shadow: 0 4px 24px rgba(0,0,0,.1); } .acc-card:active { transform: scale(.97); transition-duration: .1s; } #accStats > div { background: var(--wh); border-radius: 16px; padding: 14px 8px; text-align: center; box-shadow: 0 3px 12px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.07); } /* ── PROFILE — HOME vs DETAIL MODES ── */ #pgAcc.home-mode .acc-body { display: none; } #pgAcc.detail-mode #accHome { display: none; } #pgAcc.detail-mode .acc-body { display: block; } /* Fond blanc en mode détail (topbar mob-header blanche + contenu gris → unifier) */ #pgAcc.detail-mode > div:first-child { background: var(--wh); } html.dk #pgAcc.detail-mode > div:first-child { background: var(--wh); } /* Dark mode : uniformiser le fond de la page compte avec le body */ html.dk #pgAcc > div:first-child { background: var(--bg) !important; } /* Remove extra top gap in first section label */ #pgAcc.detail-mode .asec.on > div:first-child[style*="padding:20px"] { padding-top: 8px; } /* ── MOB-HEADER / MOB-SEARCH ── */ .mob-header { background: #fff; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } /* Search bar sticks just below the header when scrolling */ .mob-search { position: -webkit-sticky; position: sticky; top: 0; z-index: 49; -webkit-transform: translateZ(0); transform: translateZ(0); background: var(--wh); border-bottom: 1px solid var(--bdr); padding: 8px 20px 12px; backdrop-filter: blur(20px) saturate(1.8); -webkit-backdrop-filter: blur(20px) saturate(1.8); } /* ── STEP FORM ── */ .step-option { border-radius: 20px; transition: all .22s cubic-bezier(.34,1.56,.64,1); } .step-option.selected { box-shadow: 0 0 0 2px var(--or), 0 6px 24px rgba(255,107,43,.2); } /* ── MODE BADGES ── */ .mode-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 50px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; } .mode-badge.presentiel { background: rgba(0,177,79,.1); color: #007A38; border: 1px solid rgba(0,177,79,.2); } .mode-badge.visio { background: rgba(0,113,227,.1); color: #0055B3; border: 1px solid rgba(0,113,227,.2); } /* ── VISIO BUTTON ── */ .btn-visio { display: inline-flex; align-items: center; gap: 6px; background: var(--or); color: #fff; border: none; border-radius: 50px; padding: 9px 16px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: all .2s; text-decoration: none; } .btn-visio:hover { background: var(--ord); transform: translateY(-1px); } /* ── Emil Kowalski: visio buttons feel responsive to press ── */ /* Frequent actions (mic/cam): instant, minimal scale — no sluggish transition */ #bdVisio button { -webkit-tap-highlight-color: transparent; } #bdVisio button:active { opacity: .75; transform: scale(.88); transition: transform 55ms ease, opacity 55ms ease !important; } /* Board nav buttons: slightly gentler (less frequent) */ #_vBoardOuter button:active { opacity: .8; transform: scale(.90); transition: transform 60ms ease, opacity 60ms ease !important; } /* Sub-toolbar pill: tool buttons — immediate snap */ #_brdSub button:active { transform: scale(.86) !important; transition: transform 50ms ease !important; } /* ── FILTER CHIP BUTTONS ── */ .filter-chip-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 8px; background: var(--wh); border: none; border-radius: 16px; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--mid); cursor: pointer; transition: all .22s cubic-bezier(.34,1.56,.64,1); text-align: center; -webkit-tap-highlight-color: transparent; box-shadow: 0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); } .filter-chip-btn span { font-size: 20px; line-height: 1; } .filter-chip-btn:active { transform: scale(.93); background: rgba(255,107,43,.06); color: var(--or); } .filter-chip-btn.added { background: var(--orp); border-color: var(--or); color: var(--or); } /* ── CHAT COURSE CARD ── */ .chat-cours-card { background: var(--wh); border: none; border-radius: 16px; overflow: hidden; cursor: pointer; max-width: 260px; display: block; transition: transform .2s, box-shadow .2s; box-shadow: 0 4px 18px rgba(255,107,43,.15), 0 1px 4px rgba(0,0,0,.06), 0 0 0 0.5px rgba(255,107,43,.18); text-decoration: none; } .chat-cours-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(255,107,43,.22), 0 2px 8px rgba(0,0,0,.07); } .chat-cours-card-header { display: none; } /* removed accent strip */ .chat-cours-card-body { padding: 10px 14px 14px; } .chat-cours-card-title { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 8px; letter-spacing: -.025em; line-height: 1.3; } .chat-cours-card-meta { font-size: 11.5px; color: var(--lite); } /* Publications — bubble style */ .ann-pub-wrap { margin-bottom: 20px; } .ann-pub-wrap .forum-post-hd { margin-bottom: 6px; } .ann-pub-bubble { margin-left: 42px; background: var(--bg); border-radius: 4px 16px 16px 16px; padding: 12px 14px; font-size: 13.5px; color: var(--ink); line-height: 1.65; } html.dk .ann-pub-bubble { background: rgba(255,255,255,.06); } /* ── MES COURS — Calendrier ── */ #pgMes.on{display:flex;flex-direction:column;overflow:hidden;height:calc(100dvh - 70px);} .mes-cal-hd{ flex-shrink:0;background:var(--wh); border-bottom:1px solid var(--bdr); padding:max(48px,calc(env(safe-area-inset-top,0px) + 16px)) 20px 0; } html.dk .mes-cal-hd{background:#1C1C1E;border-color:rgba(255,255,255,.08);} .mes-cal-top{ display:flex;align-items:center;justify-content:space-between; margin-bottom:18px; } .mes-cal-title{ font-size:26px;font-weight:800;color:var(--ink);letter-spacing:-.5px; } .mes-cal-picker-btn{ position:relative;background:var(--bg);border:1.5px solid var(--bdr); border-radius:12px;width:42px;height:42px;flex-shrink:0; display:flex;align-items:center;justify-content:center; cursor:pointer;color:var(--ink); } .mes-cal-strip{ display:flex;align-items:center;padding-bottom:14px;gap:0; } .cal-nav-btn{ background:none;border:none;padding:6px 4px;cursor:pointer; color:var(--lite);flex-shrink:0;display:flex;align-items:center; } .cal-chips{flex:1;display:flex;gap:2px;touch-action:pan-y;} .cal-chip{ flex:1;min-width:0;background:none;border:none;cursor:pointer; display:flex;flex-direction:column;align-items:center;gap:4px; padding:4px 0;border-radius:16px; -webkit-tap-highlight-color:transparent; } .cal-chip-lbl{ font-size:10px;font-weight:600;color:var(--lite); text-transform:uppercase;letter-spacing:.04em; } .cal-chip-num{ position:relative; width:33px;height:33px;border-radius:50%; display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:700;color:var(--mid); transition:all .2s cubic-bezier(.32,1,.6,1); } .cal-chip.cal-today .cal-chip-num{color:var(--or);} .cal-chip.cal-sel .cal-chip-lbl{color:var(--or);} .cal-chip.cal-sel .cal-chip-num{ background:var(--or);color:#fff; box-shadow:0 3px 12px rgba(255,107,43,.38); } .cal-dot{ position:absolute;top:1px;right:1px; width:6px;height:6px;border-radius:50%; background:var(--or); box-shadow:0 0 4px rgba(255,107,43,.6); } .cal-chip.cal-sel .cal-dot{background:rgba(0,0,0,.22);box-shadow:none;} .mes-cal-scroll{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:16px 16px 120px; } .mes-cal-day-title{ font-size:11px;font-weight:800;color:var(--or); text-transform:uppercase;letter-spacing:.08em;margin:4px 0 12px; } .mes-cal-empty-ico{ width:72px;height:72px; background:var(--orp); border-radius:50%; display:flex;align-items:center;justify-content:center; margin:0 auto 20px; animation:emptyFloat 3s ease-in-out infinite; } /* ── ÉDITEUR RICH TEXT PUBLICATIONS ── */ #bdEspEditor{ position:fixed;inset:0;z-index:850; background:var(--wh); display:flex;flex-direction:column; } #bdEspEditor .esp-ed-top,#bdEspEditor .esp-ed-scroll{animation:espEdFadeUp .22s ease both;} #bdEspEditor .esp-ed-scroll{animation-delay:.04s;} @keyframes espEdFadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} html.dk #bdEspEditor{background:#111;} #bdEspEditor.closing{animation:mpfFadeOut .2s ease forwards;} @keyframes mpfFadeOut{from{opacity:1}to{opacity:0}} .esp-ed-top{ display:flex;align-items:center;gap:10px;flex-shrink:0; padding:max(52px,env(safe-area-inset-top,52px)) 16px 12px; border-bottom:1px solid rgba(0,0,0,.06); background:var(--wh); } html.dk .esp-ed-top{background:#111;border-color:rgba(255,255,255,.08);} .esp-ed-back{ background:none;border:none;cursor:pointer; color:var(--ink);padding:4px;display:flex;align-items:center; } .esp-ed-publish{ background:var(--or);color:#fff;border:none; border-radius:50px;padding:8px 18px;font-size:14px;font-weight:700; cursor:pointer;font-family:inherit; } .esp-ed-publish:active{opacity:.8;} .esp-ed-draft{ background:transparent;color:var(--ink); border:1px solid var(--bd);border-radius:50px; padding:7px 14px;font-size:13px;font-weight:600; cursor:pointer;font-family:inherit; } .esp-ed-draft:active{opacity:.7;} .dk .esp-ed-draft{color:var(--ink);border-color:rgba(255,255,255,.16);} .esp-ed-scroll{ flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:20px 20px 120px;background:transparent; } .esp-ed-content{ min-height:60px;outline:none;font-size:16px; line-height:1.7;color:var(--ink);caret-color:var(--or); word-break:break-word;background:transparent; } .esp-ed-content:empty:before{ content:attr(data-placeholder);color:var(--lite); pointer-events:none; } /* Formatage dans l'éditeur */ .esp-ed-content h1{font-size:26px;font-weight:800;line-height:1.2;margin:16px 0 8px;letter-spacing:-.5px;} .esp-ed-content h2{font-size:20px;font-weight:700;line-height:1.3;margin:14px 0 6px;} .esp-ed-content h3{font-size:16px;font-weight:700;line-height:1.4;margin:12px 0 4px;} .esp-ed-content p{margin:0 0 8px;} .esp-ed-content ul,.esp-ed-content ol{padding-left:20px;margin:8px 0;} .esp-ed-content li{margin-bottom:4px;} .esp-ed-content hr{border:none;border-top:2px solid var(--bdr);margin:16px 0;} .esp-ed-content table{width:100%;border-collapse:collapse;margin:10px 0;font-size:14px;} .esp-ed-content th,.esp-ed-content td{border:1px solid var(--bdr);padding:8px 10px;text-align:left;vertical-align:top;min-width:60px;} .esp-ed-content th{background:rgba(255,107,43,.07);font-weight:700;} .esp-ed-content table{overflow-x:auto;display:block;} /* Table dans les fiches affichées (biblio) */ .ann-body table,.ann-content table{width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px;display:block;overflow-x:auto;} .ann-body th,.ann-body td,.ann-content th,.ann-content td{border:1px solid var(--bdr);padding:7px 10px;text-align:left;vertical-align:top;} .ann-body th,.ann-content th{background:rgba(255,107,43,.07);font-weight:700;} /* Toolbar flottante */ .esp-kb-card{ position:fixed; left:10px;right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:860; background:var(--wh); border-radius:20px; box-shadow:0 4px 28px rgba(0,0,0,.13),0 1px 6px rgba(0,0,0,.07); padding:8px 10px; transition:bottom .2s cubic-bezier(.4,0,.2,1),border-radius .2s,left .2s,right .2s,box-shadow .2s; } html.dk .esp-kb-card{background:#1C1C1E;box-shadow:0 4px 28px rgba(0,0,0,.5);} /* Quand le clavier est ouvert : carte pleine largeur, collée au clavier */ .esp-kb-card.kb-open{ left:0;right:0; border-radius:20px 20px 0 0; box-shadow:0 -1px 0 var(--bdr); } html.dk .esp-kb-card.kb-open{box-shadow:0 -1px 0 rgba(255,255,255,.08);} .esp-kb-row{display:flex;align-items:center;gap:2px;overflow-x:auto;scrollbar-width:none;} .esp-kb-row::-webkit-scrollbar{display:none;} .esp-fmt-btn{ background:none;border:none;cursor:pointer; min-width:38px;height:38px;border-radius:10px; display:flex;align-items:center;justify-content:center; font-size:15px;font-family:inherit;color:var(--ink); flex-shrink:0;transition:background .12s; -webkit-tap-highlight-color:transparent; } .esp-fmt-btn:active{background:var(--bg);} .esp-fmt-btn.active{background:rgba(255,107,43,.1);color:var(--or);} .esp-fmt-h{font-size:11px;font-weight:800;letter-spacing:-.3px;} .esp-fmt-sep{width:1px;height:22px;background:var(--bdr);margin:0 4px;flex-shrink:0;} .esp-csw{width:26px;height:26px;min-width:26px;border-radius:50%;border:2px solid var(--bdr);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--mid);background:var(--bg);flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:transform .1s;} .esp-csw:active{transform:scale(.88);} .esp-csw-hl{border-color:transparent;} /* Boutons action par cours */ .esp-ca-btn{ display:flex;align-items:center;gap:12px;width:100%; background:var(--wh);border:none;cursor:pointer; padding:14px 16px;border-radius:16px; text-align:left;-webkit-tap-highlight-color:transparent; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); transition:all .2s cubic-bezier(.34,1.56,.64,1); } .esp-ca-btn:active{opacity:.85;transform:scale(.98);} html.dk .esp-ca-btn{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .esp-ca-ico{ width:40px;height:40px;border-radius:12px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } /* Ligne cours dans Mes cours */ .esp-mc-row{ display:flex;align-items:center;gap:10px; padding:10px 0;border-bottom:1px solid var(--bdr);cursor:pointer; -webkit-tap-highlight-color:transparent; } .esp-mc-row:last-child{border-bottom:none;} .esp-mc-row:active{opacity:.7;} .esp-mc-tag{ display:inline-block;font-size:10px;font-weight:700; padding:2px 7px;border-radius:50px; letter-spacing:.03em;text-transform:uppercase; } .esp-mc-tag.upcoming{background:rgba(255,107,43,.12);color:var(--or);} .esp-mc-tag.past{background:var(--bg);color:var(--lite);} .esp-mc-section{font-size:11px;font-weight:700;color:var(--lite);text-transform:uppercase;letter-spacing:.07em;padding:8px 0 4px;} /* Bouton nouvelle publication */ .esp-editor-new-btn{ width:100%;background:var(--bg);border:1.5px dashed var(--bdr); border-radius:14px;padding:12px; display:flex;align-items:center;justify-content:center;gap:8px; font-family:inherit;font-size:14px;font-weight:600;color:var(--or); cursor:pointer;transition:background .15s; } .esp-editor-new-btn:active{background:rgba(255,107,43,.06);} /* ── FORUM POSTS (Publications prof & vue élève) ── */ .forum-post{ background:var(--wh);border-radius:18px;padding:14px 16px; margin-bottom:12px; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); border:none; } html.dk .forum-post{background:#1C1C1E;box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .forum-post-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;} .forum-post-av{ width:34px;height:34px;border-radius:50%;flex-shrink:0; display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:800;color:#fff;overflow:hidden; } .forum-post-av img{width:100%;height:100%;object-fit:cover;} .forum-post-nm{font-size:13px;font-weight:700;color:var(--ink);} .forum-post-date{font-size:11px;color:var(--lite);margin-top:1px;} .forum-post-body{font-size:14px;color:var(--ink);line-height:1.65;} .forum-post-body h1{font-size:20px;font-weight:800;margin:0 0 6px;letter-spacing:-.3px;} .forum-post-body h2{font-size:16px;font-weight:700;margin:0 0 4px;} .forum-post-body h3{font-size:14px;font-weight:700;margin:0 0 4px;} .forum-post-body p{margin:0 0 6px;color:var(--mid);} .forum-post-body ul,.forum-post-body ol{padding-left:18px;margin:4px 0;color:var(--mid);} .forum-post-body hr{border:none;border-top:1.5px solid var(--bdr);margin:8px 0;} .forum-post-body strong{color:var(--ink);} .forum-post-ft{display:flex;align-items:center;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--bdr);} /* Feed (fil d'actualité) — layout style X/Twitter : edge-to-edge, divider fin, pas de card */ .feed-post{display:block;padding:14px 16px 10px;border-bottom:0.5px solid var(--bdr);background:transparent;-webkit-tap-highlight-color:transparent;} .feed-post:last-child{border-bottom:none;} .feed-post-head{display:flex;align-items:center;gap:10px;margin-bottom:6px;} .feed-post-av{width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;} .feed-post-meta{flex:1;min-width:0;display:flex;align-items:baseline;gap:5px;font-size:14px;cursor:pointer;overflow:hidden;} .feed-post-name{font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;flex-shrink:1;} .feed-post-sep{color:var(--lite);flex-shrink:0;} .feed-post-time{color:var(--lite);font-weight:500;flex-shrink:0;} .feed-post-action{color:var(--mid);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;} .feed-post-body{padding-left:50px;cursor:pointer;} .feed-post-title{font-size:15px;font-weight:700;color:var(--ink);line-height:1.35;margin-bottom:3px;} .feed-post-desc{margin:6px 0 8px;padding:10px 12px;background:var(--bg);border-radius:12px;font-size:13px;line-height:1.5;color:var(--mid);white-space:pre-wrap;word-break:break-word;} html.dk .feed-post-desc{background:rgba(255,255,255,.05);} .feed-post-desc .fpd-more{background:none;border:0;padding:0;margin-left:2px;font:inherit;font-weight:600;color:var(--or);cursor:pointer;white-space:nowrap;} .feed-post-desc .fpd-more:active{opacity:.6;} .feed-post-subline{font-size:13px;color:var(--mid);line-height:1.45;} .feed-post-countdown{color:var(--or);font-weight:600;} .feed-post-urgence{color:#EF4444;font-weight:700;} .feed-post-cta-wrap{margin-top:10px;} .feed-post-cta{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--or);border:1.5px solid var(--or);border-radius:50px;padding:7px 16px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s ease;} .feed-post-cta:active{background:rgba(255,107,43,.1);} .feed-post-cta-done{display:inline-flex;align-items:center;background:transparent;color:var(--or);border:1.5px solid var(--or);border-radius:50px;padding:7px 16px;font-size:13px;font-weight:700;opacity:.7;} .feed-extras{margin-top:10px;} .feed-extras-toggle{background:none;border:0;padding:4px 0;color:var(--or);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;} .feed-extras.is-collapsed .feed-extras-list{display:none;} .feed-extras-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;} .feed-extra-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--bg);border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent;} .feed-extra-row:active{opacity:.7;} html.dk .feed-extra-row{background:rgba(255,255,255,.05);} .feed-extra-info{flex:1;min-width:0;} .feed-extra-date{font-size:13px;color:var(--ink);font-weight:600;line-height:1.3;} .feed-extra-places{font-size:12px;color:var(--mid);margin-top:2px;} .feed-extra-cta{background:transparent;color:var(--or);border:1.5px solid var(--or);border-radius:50px;padding:6px 14px;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;} .feed-extra-cta:active{background:rgba(255,107,43,.1);} .feed-extra-done{color:var(--or);font-size:12px;font-weight:700;opacity:.7;flex-shrink:0;} .feed-post-poll-q{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:8px;line-height:1.4;} .feed-post-poll-opts{display:flex;flex-direction:column;gap:6px;} .feed-post-actions{display:flex;align-items:center;gap:20px;padding-left:50px;margin-top:8px;} .feed-post-like{background:none;border:none;padding:4px 6px 4px 0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;color:var(--mid);border-radius:8px;-webkit-tap-highlight-color:transparent;transition:color .15s ease;} .feed-post-like:active{background:rgba(239,68,68,.08);} .feed-post-like.on{color:#EF4444;} .feed-post-like .feed-like-count{font-size:13px;font-weight:500;line-height:1;} html.dk .feed-post{border-bottom-color:rgba(255,255,255,.08);} /* Pull-to-refresh */ .feed-ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;transition:height .25s cubic-bezier(.22,.61,.36,1);pointer-events:none;} .feed-ptr.pulling{transition:none;} .feed-ptr-spinner{width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(255,107,43,.2);border-top-color:var(--or);transform:rotate(0deg);} .feed-ptr.loading .feed-ptr-spinner{animation:ptrSpin .8s linear infinite;} .feed-ptr.armed .feed-ptr-spinner{border-top-color:var(--or);border-color:var(--or);} @keyframes ptrSpin{to{transform:rotate(360deg);}} /* Sticky pill for new posts */ .feed-new-pill{ position:sticky;top:8px;z-index:20;margin:0 auto 6px; display:flex;align-items:center;justify-content:center;gap:6px; width:fit-content;max-width:80%; background:var(--or);color:#fff; font-size:13px;font-weight:700;letter-spacing:-.01em; padding:8px 16px;border-radius:50px;cursor:pointer; box-shadow:0 6px 18px rgba(255,107,43,.35),0 1px 3px rgba(0,0,0,.08); animation:newPillIn .25s cubic-bezier(.22,.61,.36,1); -webkit-tap-highlight-color:transparent; } .feed-new-pill:active{transform:scale(.96);} @keyframes newPillIn{from{transform:translateY(-12px);opacity:0;}to{transform:translateY(0);opacity:1;}} /* Pill « X nouveaux messages » dans la conv groupe — flotte au-dessus de l'input bar quand l'user a scrollé en haut et que de nouveaux msgs arrivent. */ .msg-new-pill{ position:absolute;left:50%;bottom:88px;transform:translateX(-50%);z-index:25; display:flex;align-items:center;justify-content:center;gap:6px; width:fit-content;max-width:80%; background:var(--or);color:#fff; font-family:inherit;font-size:13px;font-weight:700;letter-spacing:-.01em; padding:8px 16px;border-radius:50px;cursor:pointer;border:none; box-shadow:0 6px 18px rgba(255,107,43,.35),0 1px 3px rgba(0,0,0,.08); animation:msgNewPillIn .25s cubic-bezier(.22,.61,.36,1); -webkit-tap-highlight-color:transparent; } .msg-new-pill:active{transform:translateX(-50%) scale(.96);} @keyframes msgNewPillIn{from{transform:translateX(-50%) translateY(12px);opacity:0;}to{transform:translateX(-50%) translateY(0);opacity:1;}} /* Red unread dot on Fil tab icon (bottom nav) */ .bnav-unread-dot{ position:absolute;top:4px;right:calc(50% - 16px); width:8px;height:8px;border-radius:50%; background:#EF4444;border:1.5px solid var(--wh); box-shadow:0 1px 3px rgba(239,68,68,.4); pointer-events:none; } /* ── Vue fiche élève plein écran style carnet ──────────────────────────── */ .cp-fiche-viewer{ position:fixed;inset:0;z-index:900; background:var(--wh);display:flex;flex-direction:column; animation:ficheSlideUp .28s cubic-bezier(.32,1,.6,1); } .cp-fiche-viewer.closing{animation:ficheSlideDown .2s ease forwards;} body.cp-fiche-open{overflow:hidden;} @keyframes ficheSlideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}} @keyframes ficheSlideDown{from{transform:translateY(0);opacity:1;}to{transform:translateY(24px);opacity:0;}} .cp-fiche-header{ background:#FFE598; background-image:linear-gradient(180deg,#FFE598 0%,#FFDC73 100%); padding:calc(12px + env(safe-area-inset-top,0px)) 20px 0; flex-shrink:0;color:#1A1A1A; position:relative; } .cp-fiche-header::before{ content:'';position:absolute;inset:0;pointer-events:none;opacity:.35; background-image:linear-gradient(rgba(255,255,255,.35) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.35) 1px,transparent 1px); background-size:24px 24px; } html.dk .cp-fiche-header{background:#8B7B2E;background-image:linear-gradient(180deg,#8B7B2E 0%,#6F6220 100%);color:#fff;} .cp-fiche-header-inner{display:flex;align-items:center;gap:8px;position:relative;z-index:1;} .cp-fiche-hbtn{ width:38px;height:38px;border-radius:50%;border:none;cursor:pointer; background:rgba(255,255,255,.55);color:#1A1A1A; display:flex;align-items:center;justify-content:center; -webkit-tap-highlight-color:transparent; transition:transform .12s ease,background .15s; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .cp-fiche-hbtn:active{transform:scale(.92);background:rgba(255,255,255,.75);} html.dk .cp-fiche-hbtn{background:rgba(255,255,255,.2);color:#fff;} .cp-fiche-title{ font-size:26px;font-weight:800;color:#1A1A1A;letter-spacing:-.035em; line-height:1.15;padding:18px 2px 16px;position:relative;z-index:1; word-wrap:break-word; } html.dk .cp-fiche-title{color:#fff;} .cp-fiche-tabs{ display:flex;gap:6px;padding:0 0 0;position:relative;z-index:1; } .cp-fiche-tab{ background:transparent;border:none;cursor:pointer; padding:12px 16px;border-radius:12px 12px 0 0; font-family:inherit;font-size:13px;font-weight:700;color:rgba(26,26,26,.65); letter-spacing:-.015em; -webkit-tap-highlight-color:transparent; transition:background .15s,color .15s; white-space:nowrap; } .cp-fiche-tab.on{background:var(--wh);color:var(--ink);box-shadow:0 -2px 6px rgba(0,0,0,.04);} html.dk .cp-fiche-tab{color:rgba(255,255,255,.75);} html.dk .cp-fiche-tab.on{background:#1C1C1E;color:#fff;} .cp-fiche-body{ flex:1;overflow-y:auto;background:var(--wh); -webkit-overflow-scrolling:touch; } .cp-fiche-pane{display:none;} .cp-fiche-pane.on{display:block;animation:ficheFade .2s ease;} @keyframes ficheFade{from{opacity:0;}to{opacity:1;}} .cp-fiche-content{ padding:22px 22px calc(40px + env(safe-area-inset-bottom,0px)); font-size:15px;line-height:1.65;color:var(--ink); letter-spacing:-.005em; } .cp-fiche-content h1,.cp-fiche-content h2{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.025em;margin:22px 0 12px;line-height:1.3;} .cp-fiche-content h3,.cp-fiche-content h4{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.015em;margin:18px 0 10px;line-height:1.35;text-transform:uppercase;} .cp-fiche-content p{margin:0 0 12px;} .cp-fiche-content ul,.cp-fiche-content ol{padding-left:22px;margin:0 0 14px;} .cp-fiche-content li{margin-bottom:6px;} .cp-fiche-content strong,.cp-fiche-content b{font-weight:700;color:var(--ink);background:linear-gradient(180deg,transparent 62%,rgba(253,219,117,.55) 62%);padding:0 1px;} html.dk .cp-fiche-content strong,html.dk .cp-fiche-content b{background:linear-gradient(180deg,transparent 62%,rgba(253,219,117,.28) 62%);} .cp-fiche-content img{max-width:100%;height:auto;border-radius:12px;margin:10px 0;} .cp-fiche-content a{color:var(--or);text-decoration:underline;} .cp-fiche-content table{width:100%;border-collapse:collapse;margin:12px 0;} .cp-fiche-content th,.cp-fiche-content td{border:1px solid var(--bdr);padding:8px 10px;font-size:14px;} /* Grille responsive des fiches (Pinterest-like 1/2/3 col) */ .biblio-fiche-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:10px;align-items:stretch;} @media (min-width:560px){.biblio-fiche-grid{grid-template-columns:repeat(2,1fr);gap:12px;}} @media (min-width:980px){.biblio-fiche-grid{grid-template-columns:repeat(3,1fr);gap:14px;}} .fiche-snippet{ font-size:12.5px;line-height:1.5;color:var(--mid); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical; overflow:hidden;text-overflow:ellipsis;margin:4px 0 10px; font-weight:500;letter-spacing:-.005em; } html.dk .fiche-snippet{color:rgba(255,255,255,.68);} .fiche-snippet-empty{font-style:italic;color:var(--lite);opacity:.75;} /* Fiche de cours dans la bibliothèque */ .fiche-item{ background:var(--wh);border-radius:18px;padding:14px 16px; margin-bottom:0;cursor:pointer;border:1px solid rgba(255,107,43,.18); -webkit-tap-highlight-color:rgba(255,107,43,.15); touch-action:manipulation; display:flex;flex-direction:column;min-height:180px; transition:transform .15s ease,box-shadow .15s ease; box-shadow:0 2px 10px rgba(0,0,0,.05); } .fiche-item:active{opacity:.85;transform:scale(.98);} .fiche-item > .fiche-item-foot{margin-top:auto;} html.dk .fiche-item{box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 0.5px rgba(255,255,255,.07);} .fiche-item-title{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.025em;line-height:1.3;margin-bottom:6px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .fiche-item-date{font-size:11px;color:var(--lite);margin-top:2px;} /* Segment bar Prochains/Passés */ .mes-seg-btn{ flex:1;background:none;border:none;cursor:pointer; padding:8px 12px;border-radius:9px; font-size:13px;font-weight:600;color:var(--lite);font-family:inherit; transition:background .15s,color .15s; -webkit-tap-highlight-color:transparent; } .mes-seg-btn.on{background:var(--wh);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.1);} html.dk .mes-seg-btn.on{background:#2C2C2E;box-shadow:none;} /* Champ titre dans l'éditeur fiche */ .esp-ed-title-inp{ width:100%;border:none;border-bottom:1.5px solid var(--bdr); background:none;font-family:inherit;font-size:20px;font-weight:800; color:var(--ink);padding:0 0 10px;margin-bottom:12px;outline:none; letter-spacing:-.03em; } .esp-ed-title-inp::placeholder{color:var(--bdr);} /* esp2-card-nav : pas de chevron rotatif */ .esp2-card-nav{cursor:pointer;} .esp2-card-nav:active{opacity:.8;} /* Boutons bibliothèque */ .esp-biblio-btn{ display:flex;align-items:center;justify-content:center;gap:7px; border:none;cursor:pointer;border-radius:14px; font-family:inherit;font-size:13px;font-weight:700; padding:11px 14px;width:100%;-webkit-tap-highlight-color:transparent; transition:opacity .15s; } .esp-biblio-btn:active{opacity:.8;} .esp-biblio-btn-sec{background:var(--bg);color:var(--ink);border:1.5px solid var(--bdr);} html.dk .esp-biblio-btn-sec{border-color:rgba(255,255,255,.1);} .esp-biblio-btn-prim{background:linear-gradient(135deg,#FF8C55,#FF4500);color:#fff;margin-top:8px;box-shadow:0 3px 12px rgba(255,107,43,.3);} /* Grille bibliothèque — style Pinterest 2 colonnes */ .biblio-grid{display:flex;flex-direction:column;gap:8px;} .biblio-card{ display:flex;align-items:center;gap:12px; background:var(--wh);border-radius:16px; padding:14px 16px; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); border:none;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease; } html.dk .biblio-card{background:#1C1C1E;box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .biblio-card:active{transform:scale(.98);opacity:.9;} .biblio-card-ico{ width:44px;height:44px;min-width:44px;border-radius:13px; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .biblio-card-body{flex:1;min-width:0;padding:0;} .biblio-card-title{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .biblio-access-badge{ display:inline-flex;align-items:center;gap:5px; font-size:10px;font-weight:700;padding:3px 9px;border-radius:50px;letter-spacing:.02em;text-transform:uppercase; } .biblio-access-badge.enrolled,.biblio-access-badge.followers{background:rgba(34,197,94,.12);color:#16A34A;} .biblio-access-badge.public{background:rgba(99,102,241,.1);color:#6366F1;} .biblio-access-badge.private{background:rgba(100,116,139,.1);color:#64748B;} .biblio-access-badge.password{background:rgba(59,130,246,.1);color:#2563EB;} .biblio-access-badge.share{background:rgba(255,107,43,.1);color:var(--or);} html.dk .biblio-access-badge.enrolled,html.dk .biblio-access-badge.followers{background:rgba(34,197,94,.18);} html.dk .biblio-access-badge.public{background:rgba(99,102,241,.18);} html.dk .biblio-access-badge.private{background:rgba(100,116,139,.18);} html.dk .biblio-access-badge.password{background:rgba(59,130,246,.18);} html.dk .biblio-access-badge.share{background:rgba(255,107,43,.18);} .biblio-card-actions{display:flex;gap:5px;flex-shrink:0;align-items:center;} .biblio-act-btn{ background:var(--bg);border:none;border-radius:10px; padding:6px 10px;font-size:11px;font-weight:700;color:var(--mid); cursor:pointer;font-family:inherit;-webkit-tap-highlight-color:transparent;white-space:nowrap; transition:all .15s ease; } .biblio-act-btn.active{background:var(--or);color:#fff;box-shadow:0 2px 8px rgba(255,107,43,.3);} .biblio-act-btn:active{opacity:.8;transform:scale(.95);} .esp-ann-date{font-size:11px;color:var(--lite);} /* ── MES COURS CARDS ── */ .mes-card { background: var(--wh); border-radius: 22px; border: none; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 18px rgba(0,0,0,.07); cursor: pointer; padding: 0; margin-bottom: 14px; transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s; } .mes-card:hover { transform: translateY(-3px); box-shadow: 0 4px 24px rgba(0,0,0,.11); } @media(min-width:700px){ .mes-cal-scroll{display:flex;flex-wrap:wrap;gap:14px;align-content:flex-start;justify-content:center;padding-top:12px;} .mes-cal-scroll .mes-card{width:min(480px,calc(50% - 7px));margin-bottom:0;flex-shrink:0;} } .mes-section-title { font-size: 11px; font-weight: 700; color: var(--lite); letter-spacing: .08em; text-transform: uppercase; margin: 20px 0 10px; } /* ── EMPTY STATE ── */ .bempty-icon { animation: emptyFloat 3s ease-in-out infinite; } /* ── PROFILE SAVE BUTTON ── */ #asecP button[onclick="saveProf()"], #asecP button[onclick="saveProfil()"] { background: linear-gradient(148deg,#FF7D42,#FF4500); border-radius: 50px; box-shadow: 0 4px 18px rgba(255,69,0,.28); } #asecP button[onclick="doLogout()"] { border-radius: 50px; border: 1.5px solid #FECACA; } /* ── DARK MODE CARD VISIBILITY ── border bien visible sur toutes les surfaces */ html.dk .card,html.dk .rrow,html.dk .pref-group,html.dk .msg-row, html.dk .cp-prof-card,html.dk .acc-card,html.dk .cp-stat-card,html.dk .cp-fol-list, html.dk .cr-card,html.dk .cr-mode-btn,html.dk .esp2-card, html.dk .fav-cours-card,html.dk .fav-prof-card,html.dk .prof-card, html.dk .chat-cours-card,html.dk .esp-msg-card{ box-shadow: 0 4px 20px rgba(0,0,0,.5) !important; border: 1px solid rgba(255,255,255,.35) !important; } html.dk .fol-row { border-bottom-color: rgba(255,255,255,.08) !important; } /* ── UNFOLLOW / UNENROLL — bouton web uniquement ── iOS WKWebView reporte pointer:coarse → bouton caché, swipe conservé */ .cp-unfollow-web{position:absolute;right:44px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,59,48,.1);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;padding:0;transition:background .15s;z-index:3;} .cp-unfollow-web:hover{background:rgba(255,59,48,.2);} .cp-unfollow-web svg{stroke:#FF3B30;} @media (hover: hover) and (pointer: fine){ .cp-prof-card:hover .cp-unfollow-web{display:flex;} } html.dk .mob-search { background: var(--bg); } html.dk .mob-header { background: var(--bg); } /* ── SÉPARATEURS DE DATE (messagerie style) ── */ .ann-day-sep{display:flex;align-items:center;gap:10px;margin:18px 0 12px;font-size:11px;font-weight:700;color:var(--lite);text-transform:uppercase;letter-spacing:.07em;} .ann-day-sep::before,.ann-day-sep::after{content:'';flex:1;height:1px;background:var(--bdr);} /* ── SONDAGES ── */ .poll-wrap{padding:4px 0 2px;} .poll-question{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:12px;line-height:1.45;} .poll-vote-btn{width:100%;text-align:left;padding:12px 16px;margin-bottom:6px;background:var(--wh);border:none;border-radius:12px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .poll-vote-btn:active{background:rgba(255,107,43,.06);box-shadow:0 0 0 2px var(--or),0 4px 14px rgba(255,107,43,.15);} html.dk .poll-vote-btn{background:var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .poll-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--or);background:rgba(255,107,43,.1);border-radius:8px;padding:3px 8px;flex-shrink:0;} /* ── SCROLLBAR ── */ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bdr); border-radius: 3px; } /* Step form touch-action fix */ #bdCrStep button, #bdCrStep [data-sa] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; cursor: pointer; } /* ── MSG EDIT/DELETE ── */ .msg-actions { display:none; position:absolute; top:-8px; background:var(--wh); border-radius:20px; box-shadow:0 2px 12px rgba(0,0,0,.12),0 0 0 1px rgba(0,0,0,.06); padding:4px; gap:2px; z-index:10; white-space:nowrap; } .msg-bubble-wrap:hover .msg-actions, .msg-bubble-wrap.touched .msg-actions { display:flex; } .msg-actions.right { right:0; } .msg-actions.left { left:0; } .msg-act-btn { background:none; border:none; cursor:pointer; padding:6px 10px; border-radius:14px; font-size:12px; font-weight:600; color:var(--mid); font-family:inherit; display:flex; align-items:center; gap:5px; transition:background .15s; } .msg-act-btn:hover { background:var(--bg); } .msg-act-btn.del { color:#EF4444; } .msg-edit-wrap { display:flex; gap:8px; margin-top:6px; align-items:center; } .msg-edit-input { flex:1; border:1.5px solid var(--or); border-radius:12px; padding:8px 12px; font-family:inherit; font-size:14px; background:var(--wh); color:var(--ink); outline:none; } /* ── FILTER BAR — redesign ── */ .filter-bar { display:flex; align-items:center; gap:8px; padding:10px 16px 6px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; white-space:nowrap; position:relative; } .filter-bar::-webkit-scrollbar { display:none; } .fchip { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:50px; border:1.5px solid var(--bdr); background:var(--wh); color:var(--mid); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .2s cubic-bezier(.34,1.56,.64,1); box-shadow:0 1px 3px rgba(0,0,0,.04); } .fchip.on { background:linear-gradient(135deg,#FF7D42,#FF4500); border-color:transparent; color:#fff; box-shadow:0 3px 12px rgba(255,69,0,.3); } .fchip svg { width:14px;height:14px;flex-shrink:0; } .fchip-level { background:var(--bg); border-color:var(--bdr); } .fchip-level.on { background:var(--ink); border-color:var(--ink); color:#fff; box-shadow:0 3px 12px rgba(0,0,0,.2); } .sort-chip { display:inline-flex;align-items:center;gap:5px; padding:7px 12px;border-radius:50px;border:1.5px solid var(--bdr); background:var(--bg);color:var(--mid);font-size:12px;font-weight:600; cursor:pointer;flex-shrink:0; } /* ── HOME — simplified ── */ .home-hero { padding:max(60px,env(safe-area-inset-top,60px)) 20px 16px; background:var(--wh); } .home-search { display:flex;align-items:center;gap:10px; background:var(--bg);border-radius:16px; padding:12px 16px;margin-bottom:0; border:1.5px solid transparent;transition:border-color .2s; } .home-search:focus-within { border-color:var(--or);background:var(--wh); box-shadow:0 0 0 3px rgba(255,107,43,.1); } .home-search input { flex:1;background:none;border:none;outline:none; font-family:inherit;font-size:15px;color:var(--ink); } /* ── CARD — mode badge ── */ .card-mode-badge { display:inline-flex;align-items:center;gap:3px; padding:2px 7px;border-radius:50px;font-size:9.5px;font-weight:700; letter-spacing:.03em;text-transform:uppercase;margin-left:4px; } .card-mode-badge.visio { background:rgba(0,113,227,.12);color:#0055B3; } .card-mode-badge.presentiel { background:rgba(0,177,79,.12);color:#007A38; } /* ── dark ── */ html.dk .msg-actions{background:var(--bg);} html.dk .home-search{background:var(--bg);} /* ── FILTER BAR — shadow fix ── */ .filter-bar { padding:6px 16px 18px !important; /* balanced: matches gap above chips */ overflow-y:visible !important; } /* Ensure parent doesn't clip */ #pgExp > .cnt { overflow:visible !important; } /* ── SEARCH BAR — premium ── */ .mob-search-wrap { padding:8px 16px 4px; background:var(--wh); } .search-bar { display:flex; align-items:center; gap:10px; background:var(--bg); border-radius:14px; padding:11px 16px; border:1.5px solid transparent; transition:all .2s; } .search-bar:focus-within { background:var(--wh); border-color:var(--or); box-shadow:0 0 0 3px rgba(255,107,43,.1); } .search-bar input { flex:1; background:none; border:none; outline:none; font-family:inherit; font-size:15px; color:var(--ink); } .search-bar input::placeholder { color:var(--lite); } /* ── SETTINGS PAGE (bottom sheet style) ── */ #bdSettings { position:fixed;inset:0;background:rgba(0,0,0,.5); backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px); z-index:600;display:none;align-items:flex-end;justify-content:center; } #bdSettings.on { display:flex; animation:bi .18s ease; } .settings-sheet { background:var(--bg);border-radius:28px 28px 0 0; width:100%;max-width:560px; max-height:92vh;overflow-y:auto; padding-bottom:max(36px,env(safe-area-inset-bottom,36px)); -webkit-overflow-scrolling:touch; box-shadow:0 -4px 40px rgba(0,0,0,.18); } .settings-header { display:flex;align-items:center;gap:14px; padding:20px 20px 4px; background:var(--bg); } .settings-handle { width:40px;height:4px;border-radius:4px; background:var(--bdr);margin:14px auto 0; } .settings-section-lbl { font-size:11px;font-weight:700;color:var(--lite); letter-spacing:.08em;text-transform:uppercase; padding:20px 20px 8px; } .settings-group { margin:0 16px;background:var(--wh); border-radius:20px;overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.04),0 2px 12px rgba(0,0,0,.06); border:1px solid var(--bdr); } .settings-row { display:flex;align-items:center;gap:14px; padding:15px 16px;cursor:pointer; border-bottom:1px solid var(--bdr); min-height:56px; -webkit-tap-highlight-color:transparent; } .settings-row:last-child { border-bottom:none; } .settings-row:active { background:var(--bg); } .settings-icon { width:34px;height:34px;border-radius:10px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .settings-label { flex:1;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.01em; } .settings-sub { font-size:12px;color:var(--lite);margin-top:2px; } .settings-chevron { color:var(--bdr); } .settings-deconn { margin:20px 16px 0; background:var(--wh);color:#EF4444; border:1.5px solid #FECACA;border-radius:50px; padding:14px;width:calc(100% - 32px); font-family:inherit;font-weight:600;font-size:15px; cursor:pointer;display:flex;align-items:center; justify-content:center;gap:8px;transition:all .2s; } .settings-deconn:hover { background:#FEF2F2; } html.dk .settings-sheet { background:var(--bg); } html.dk .settings-header { background:var(--bg); } html.dk .settings-group { background:var(--wh); border-color:var(--bdr); } html.dk .settings-row { border-color:var(--bdr); } html.dk .settings-chevron { color:var(--bdr); } /* bniMes — explicit show/hide */ .bni-mes { display: none; flex-direction: column; align-items: center; gap: 3px; } .bni-mes.show { display: flex !important; } /* ── Filter bar restructure ── */ .filter-bar-wrap { display:flex; flex-direction:column; align-items:stretch; padding:8px 0 4px; gap:0; background:var(--wh); } .filter-fixed { display:flex; align-items:center; gap:8px; padding:0 16px 8px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .filter-fixed::-webkit-scrollbar { display:none; } .filter-bar { display:flex; align-items:center; gap:8px; padding:6px 16px 2px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .filter-bar::-webkit-scrollbar { display:none; } .bni span { display:none; } @media(max-width:768px){ .topbar{display:none !important;} } /* ── Topbar Nav Desktop ── */ .topbar-nav { display:flex; align-items:center; gap:4px; margin:0 8px; } .tnav-item { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:50px; font-size:13px; font-weight:600; color:var(--mid); cursor:pointer; transition:all .18s; white-space:nowrap; position:relative; -webkit-tap-highlight-color:transparent; } .tnav-item:hover { background:var(--bg); color:var(--ink); } .tnav-item.active { background:var(--orp); color:var(--or); } .tnav-badge { position:absolute; top:4px; right:6px; width:8px; height:8px; border-radius:50%; background:#EF4444; display:none; } .tnav-badge.on { display:block; } /* ── Desktop (>768px) ── */ @media(min-width:769px){ .topbar { display:none !important; } #app { padding-top:0; } .pg { min-height:100vh; } .cnt { padding:28px 40px; max-width:1400px; margin:0 auto; } .grid { grid-template-columns:repeat(3,1fr); column-gap:0; padding:0 8px 36px; } .filter-bar-wrap { padding:12px 40px 8px; } #pgAcc .acc-body { max-width:720px; margin:0 auto; } /* Messagerie 2 colonnes */ #pgMsg { flex-direction:row !important; height:100vh !important; } #msgListPane { width:340px !important; max-width:340px !important; border-right:1px solid var(--bdr) !important; height:100% !important; } #msgConvPane { position:relative !important; display:flex !important; flex:1 !important; inset:auto !important; z-index:1 !important; height:100% !important; } /* Aucune conv sélectionnée : cacher pane + barre de saisie, montrer placeholder */ #pgMsg.no-conv #msgConvPane { display:none !important; } #pgMsg.no-conv #msgNoConvPlaceholder { display:flex !important; flex:1; align-items:center; justify-content:center; } #msgBackBtn { display:none !important; } /* 2026-05-26 (Nacera) : ancien override pill desktop retiré. La bnav reste en mobile fullwidth à cette tranche (769-1099) — au-dessus de 1100 elle est cachée par body.sbd-on (sidebar prend le relais). */ } /* ── Mobile (<769px) ── */ @media(max-width:768px){ .topbar { display:none !important; } #msgListPane { width:100% !important; max-width:100% !important; border-right:none !important; } } /* ════════════════════════════════════ MESSAGERIE — CSS propre et complet ════════════════════════════════════ */ /* Page messages */ #pgMsg { display: none; overflow: hidden; } #pgMsg.on { display: flex !important; flex-direction: column; min-height: 100dvh; height: 100dvh; background: var(--wh); position: relative; z-index: 1; } /* Liste conversations */ #msgListPane { display: flex; flex-direction: column; background: var(--wh); overflow: hidden; flex: 1; min-height: 0; width: 100%; padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } .msg-list-header { padding: max(20px,env(safe-area-inset-top,0px)) 20px 14px; position: relative; flex-shrink: 0; } .msg-list-title { font-size: 22px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); } #msgBadge { display: none; position: absolute; top: 20px; right: 20px; background: #EF4444; color: #fff; border-radius: 50px; min-width: 20px; height: 20px; padding: 0 6px; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; } #msgBadge.on { display: flex; } .msg-list-search { display: flex; align-items: center; gap: 10px; margin: 8px 16px 10px; background: #fff; border-radius: 40px; padding: 11px 18px; flex-shrink: 0; box-shadow: 0 2px 10px rgba(0,0,0,.10), 0 0 0 0.5px rgba(0,0,0,.06); } html.dk .msg-list-search { background: var(--wh); box-shadow: 0 2px 8px rgba(0,0,0,.3), 0 0 0 0.5px rgba(255,255,255,.06); } .msg-list-search svg { color: #888; flex-shrink: 0; } .msg-list-search input { border: none; background: transparent; -webkit-appearance: none; font-family: inherit; font-size: 14px; font-weight: 500; color: var(--ink); outline: none; width: 100%; } .msg-list-search input::placeholder { color: #aaa; } html.dk .msg-list-search input { background: var(--wh) !important; -webkit-text-fill-color: var(--ink) !important; } #listM { flex: 1; overflow-y: auto; padding: 6px 16px 100px; background: var(--wh); min-height: 100%; } /* ── A11y pre-join : focus-visible (navigation clavier) ───────────────────── Outline orange visible sur les boutons/toggles du pre-join quand l'user navigue au clavier (Tab). Pas affiché au mouseover (pas de noise pour souris). */ #bdVisio button:focus-visible, #bdVisio [role="switch"]:focus-visible, #bdVisio video:focus-visible, #_pjPermHelper button:focus-visible, #_pjDevSel button:focus-visible{ outline:2px solid #FF8C55; outline-offset:2px; } /* prefers-reduced-motion : désactiver les animations/transitions pour les users avec vestibular disorder. Cible les éléments visio uniquement. */ @media (prefers-reduced-motion: reduce){ #bdVisio *, #_pjPermHelper *, #_pjDevSel *, #_vQuitConfirm *, #_vEndRecap *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; } } /* Animation pulsation badge mains levées (in-call, bouton Plus) */ @keyframes _vBadgePulse{ 0%,100%{transform:scale(1);box-shadow:0 1px 5px rgba(229,62,62,.55);} 50%{transform:scale(1.18);box-shadow:0 1px 10px rgba(229,62,62,.85),0 0 0 4px rgba(229,62,62,.18);} } #_vPlusBadge{animation:_vBadgePulse 1.4s ease-in-out infinite;transform-origin:center;} /* ── Visio PIP automatique au navTo ────────────────────────────────────────── Quand l'user clique la bottom nav pendant un call actif, on réduit l'overlay visio en bulle flottante (180×110 top-right) au lieu de la fermer. Le call Daily.co reste vivant, les MediaStreamTracks aussi (le DOM reste attaché). Click sur la bulle → retour full-screen. Solution alternative à la destruction (qui causait l'écran noir au retour). */ #bdVisio.pip-mode{ width:180px !important;height:110px !important; top:max(12px,env(safe-area-inset-top,12px)) !important; right:12px !important;left:auto !important;bottom:auto !important; border-radius:14px !important; box-shadow:0 10px 36px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.12); cursor:pointer; z-index:10050 !important; transition:all .38s cubic-bezier(.34,1.56,.64,1); overflow:hidden; /* Empêcher les overlays internes (sheets, panels) de déborder */ contain:layout paint; } /* 2026-05-26 (Nacera) : override focus-visible global qui dessinait un outline orange (var --or) autour de la bulle PIP et de ses boutons mic/ cam dès qu'on les cliquait. L'outline avec outline-offset:2px combiné au contain:layout paint du PIP donnait un cadre orange dégradé "à l'intérieur" de la bulle. */ #bdVisio.pip-mode:focus,#bdVisio.pip-mode:focus-visible, #bdVisio.pip-mode button:focus,#bdVisio.pip-mode button:focus-visible, #bdVisio.pip-mode [role="button"]:focus,#bdVisio.pip-mode [role="button"]:focus-visible{outline:none;box-shadow:none} /* En PIP la card est trop petite pour qu'un ring orange "active speaker" ait du sens — et il restait souvent collé alors que le micro était mute (Nacera 2026-05-26). On masque le pseudo-element ::after qui dessine cette bordure quand on est en pip-mode. La logique active-speaker reste intacte pour le mode plein écran. */ #bdVisio.pip-mode [id^="_vt-"]::after{display:none !important;} #bdVisio.pip-mode [id^="_vt-"]{box-shadow:none !important;} /* 2026-05-26 (3e passe) : Nacera signale encore le cadre orange en pip-mode. On force aucun box-shadow orange ni outline ni border-color orange sur les éléments internes du PIP, y compris _vPipRestoreBtn qui reçoit un inline box-shadow speaker-ring (255,107,43) depuis _vAudioLoop. */ #bdVisio.pip-mode #_vPipRestoreBtn{box-shadow:none !important;} #bdVisio.pip-mode #_vdmic-local, #bdVisio.pip-mode #_vMic{box-shadow:none !important;} #bdVisio.pip-mode{border-color:rgba(255,255,255,.12) !important;} /* Cache tout sauf la zone vidéo principale */ #bdVisio.pip-mode > div:not(#_vMain){display:none !important;} #bdVisio.pip-mode #_vPeople, #bdVisio.pip-mode #_vComment, #bdVisio.pip-mode #_vReactPanel, #bdVisio.pip-mode #_vMutedBanner, #bdVisio.pip-mode #_vHands{display:none !important;} #bdVisio.pip-mode #_vGrid{padding:0 !important;gap:0 !important;} /* Indicateur visuel "tap to restore" */ #bdVisio.pip-mode::after{ content:''; position:absolute;top:6px;right:6px; width:22px;height:22px; background:rgba(0,0,0,.55); border-radius:50%; background-image:url("data:image/svg+xml;utf8,"); background-size:12px 12px; background-position:center; background-repeat:no-repeat; pointer-events:none; z-index:2; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); } /* Animation d'entrée pour les lignes de conversation */ @keyframes msgRowIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .msg-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; cursor: pointer; transition: transform .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s; background: var(--wh); border-radius: 16px; margin-bottom: 6px; box-shadow: 0 3px 12px rgba(0,0,0,.12), 0 0 0 0.5px rgba(0,0,0,.07); -webkit-tap-highlight-color: transparent; } .msg-row:active, .msg-row.tapped { transform: translateY(-1px) scale(.995); transition-duration: .1s; box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.08); } .msg-row.active { background: var(--orp); box-shadow: 0 2px 8px rgba(0,0,0,.06); } .msg-av { width: 52px; height: 52px; border-radius: 50%; background: linear-gradient(135deg,#FF8C55,var(--ord)); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; } .msg-info { flex: 1; min-width: 0; } .msg-name { font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; } .msg-preview { font-size: 13px; color: var(--lite); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; line-height: 1.3; } .msg-unread .msg-name { font-weight: 700; } .msg-unread .msg-preview { color: var(--mid); font-weight: 500; } /* Panneau conversation */ #msgConvPane { display: none; flex-direction: column; position: fixed; inset: 0; background: var(--wh); z-index: 200; overflow: hidden; } html.dk #msgConvPane { background: #1C1C1E; } .msg-conv-header { display: flex; align-items: center; gap: 10px; padding: max(env(safe-area-inset-top,44px),44px) 12px 12px; background: var(--wh); flex-shrink: 0; position: sticky; top: 0; z-index: 10; } #msgBackBtn { background: none; border: none; cursor: pointer; color: var(--or); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; -webkit-tap-highlight-color: transparent; } #msgBackBtn:active { background: var(--orp); } .msg-conv-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg,#FF8C55,var(--ord)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; flex-shrink: 0; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.14); } .msg-conv-info { flex: 1; min-width: 0; } .msg-conv-name { font-size: 16px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.02em; } .msg-share-btn { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--orp); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--or); font-size: 13px; font-weight: 600; flex-shrink: 0; -webkit-tap-highlight-color: transparent; letter-spacing: -.01em; } html.dk .msg-conv-header { background: #1C1C1E; } /* Zone messages */ #msgMessages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 1px; background: var(--wh); -webkit-overflow-scrolling: touch; overscroll-behavior: none; } html.dk #msgMessages { background: #1C1C1E; } /* Bulles */ .msg-bubble-row { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 2px; } .msg-bubble-row.me { justify-content: flex-end; } .msg-bubble-row.them { justify-content: flex-start; } .msg-bubble-av { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg,#FF8C55,var(--ord)); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; overflow: hidden; align-self: flex-end; } .msg-bubble { max-width: min(72%, 320px); min-width: 0; border-radius: 18px; padding: 9px 13px; font-size: 15px; line-height: 1.45; word-break: break-word; overflow-wrap: anywhere; transform-origin: bottom center; } /* Animation pop uniquement sur la bulle optimiste qu'on vient d'ajouter — évite le flicker au rebuild */ .msg-bubble-row.optimistic .msg-bubble { animation: msgBubblePop .42s cubic-bezier(.34,1.56,.64,1) both; } .msg-bubble-row.me .msg-bubble{ transform-origin: bottom right; } .msg-bubble-row.them .msg-bubble{ transform-origin: bottom left; } @keyframes msgBubblePop{ 0% { opacity:0; transform:scale(.72) translateY(6px); } 55% { opacity:1; transform:scale(1.05) translateY(0); } 100% { opacity:1; transform:scale(1) translateY(0); } } @media (prefers-reduced-motion: reduce){ .msg-bubble{ animation:none; } } .msg-bubble.me { background: var(--or); color: #fff; border-bottom-right-radius: 4px; box-shadow: none; } .msg-bubble.them { background: #E9E9EB; color: #000; border-bottom-left-radius: 4px; box-shadow: none; } html.dk .msg-bubble.them { background: #3A3A3C; color: #fff; } .msg-bubble-time { font-size: 10px; opacity: .45; margin-top: 3px; } .msg-bubble-time.me { text-align: right; color: #fff; } .msg-bubble-time.them { color: #000; } html.dk .msg-bubble-time.them { color: #fff; } /* ── REPLY (style Insta) ─────────────────────────────────────────────── */ /* Citation à l'intérieur d'une bulle de réponse */ .msg-quote { display: flex; align-items: stretch; gap: 8px; padding: 6px 10px; margin-bottom: 6px; background: rgba(0,0,0,.06); border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; max-width: 100%; } .msg-quote.me { background: rgba(255,255,255,.18); } .msg-quote.them { background: rgba(0,0,0,.06); } html.dk .msg-quote.them { background: rgba(255,255,255,.10); } .msg-quote-bar { width: 3px; border-radius: 2px; flex-shrink: 0; background: rgba(255,255,255,.7); } .msg-quote.them .msg-quote-bar { background: var(--or, #FF6B2B); } .msg-quote-body { min-width: 0; flex: 1; } .msg-quote-who { font-size: 11px; font-weight: 700; line-height: 1.2; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-quote-txt { font-size: 12px; line-height: 1.3; opacity: .8; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } /* Bandeau "Réponse à …" au-dessus de l'input */ .msg-reply-bar { display: flex; align-items: stretch; gap: 10px; margin: 0 12px 6px; padding: 8px 10px; background: var(--bg); border: 1px solid var(--bdr); border-radius: 12px; animation: msgReplyBarIn .18s ease; } @keyframes msgReplyBarIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .msg-reply-bar-bar { width: 3px; border-radius: 2px; background: var(--or, #FF6B2B); flex-shrink: 0; } .msg-reply-bar-body { flex: 1; min-width: 0; } .msg-reply-bar-who { font-size: 11px; font-weight: 700; color: var(--or, #FF6B2B); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .msg-reply-bar-txt { font-size: 12px; color: var(--lite); line-height: 1.3; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .msg-reply-bar-x { background: none; border: none; padding: 4px; color: var(--lite); cursor: pointer; align-self: flex-start; -webkit-tap-highlight-color: transparent; } /* Popup d'actions (Répondre) au-dessus d'une bulle après appui long */ .msg-actions-pop { position: fixed; z-index: 9999; background: var(--wh); border: 1px solid var(--bdr); border-radius: 12px; padding: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: msgPopIn .14s ease; } @keyframes msgPopIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } } .msg-actions-pop-btn { display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; padding: 8px 14px; border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink); -webkit-tap-highlight-color: transparent; } .msg-actions-pop-btn:hover { background: var(--bg); } .msg-actions-pop-btn:active { background: var(--bdr); } /* Effet visuel pendant l'appui long (la bulle "se soulève") */ .msg-bubble.lp-active { transform: scale(1.04); transition: transform .15s ease; } /* Flash de mise en valeur sur le message d'origine quand on tape la quote */ .msg-bubble-flash > .msg-bubble { animation: msgFlash 1.2s ease; } @keyframes msgFlash { 0% { box-shadow: 0 0 0 0 rgba(255,107,43,.6); } 30% { box-shadow: 0 0 0 6px rgba(255,107,43,.25); } 100% { box-shadow: 0 0 0 0 rgba(255,107,43,0); } } /* Card cours dans messages */ .msg-card-wrap { max-width: min(260px, 72vw); min-width: 0; } .msg-card-wrap .chat-cours-card { display: block; width: 100%; border-radius: 16px; overflow: hidden; cursor: pointer; border: 1.5px solid var(--bdr); background: var(--wh); box-shadow: 0 2px 8px rgba(0,0,0,.08); } .msg-card-time { font-size: 10px; color: var(--lite); margin-top: 4px; } /* Bandeau sécurité */ #msgSafetyBanner { flex-shrink: 0; padding: 6px 12px 4px; } /* Barre de saisie */ #msgInputBar { flex-shrink: 0; background: var(--wh); padding: 10px 14px; padding-bottom: max(20px,env(safe-area-inset-bottom,20px)); } .msg-input-wrap { display: flex; gap: 10px; align-items: center; background: #fff; border-radius: 40px; padding: 10px 10px 10px 14px; box-shadow: 0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); transition: box-shadow .18s; } html.dk .msg-input-wrap { background: var(--wh); box-shadow: 0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05); } .msg-input-wrap:focus-within { box-shadow: 0 3px 12px rgba(0,0,0,.12),0 0 0 1.5px rgba(255,107,43,.4); } html.dk .msg-input-wrap:focus-within { box-shadow: 0 2px 8px rgba(0,0,0,.2),0 0 0 1.5px rgba(255,107,43,.5); } .esp-msg-card { background: var(--wh); border: none; box-shadow: 0 4px 18px rgba(255,107,43,.15), 0 1px 4px rgba(0,0,0,.06), 0 0 0 0.5px rgba(255,107,43,.18); border-radius: 16px; padding: 14px 16px; max-width: 270px; min-width: 200px; -webkit-tap-highlight-color: transparent; } html.dk .esp-msg-card { background: #2C2C2E; } .esp-msg-card.clickable { cursor: pointer; } .esp-msg-card.clickable:active { opacity: .75; } #msgInput { flex: 1; border: none; background: transparent !important; -webkit-appearance: none; font-family: inherit; font-size: 15px; outline: none; resize: none; max-height: 120px; line-height: 1.45; padding: 4px 0; overflow-y: auto; color: var(--ink); } #msgInput::placeholder { color: var(--lite) !important; -webkit-text-fill-color: var(--lite) !important; opacity: 1; } .msg-send-btn { background: var(--or); border: none; border-radius: 50%; width: 36px; height: 36px; min-width: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 10px rgba(255,107,43,.4); transition: transform .15s; } .msg-send-btn:active { transform: scale(.92); } /* Séparateur date */ .msg-date-sep { text-align: center; margin: 14px 0 8px; } .msg-date-sep span { background: rgba(142,142,147,.18); color: var(--lite); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 50px; } /* DESKTOP */ @media(min-width:769px){ #pgMsg.on { flex-direction: row !important; height: 100vh !important; } #msgListPane { width: 340px !important; height: 100% !important; border-right: 1px solid var(--bdr); } #msgConvPane { position: relative !important; display: flex !important; flex: 1 !important; inset: auto !important; z-index: 1 !important; height: 100% !important; } #msgBackBtn { display: none !important; } #msgMessages { padding: 20px 32px 12px !important; } #msgInputBar { padding: 12px 32px 16px !important; } .msg-bubble { max-width: min(55%, 420px) !important; } } /* MOBILE */ @media(max-width:768px){ #msgListPane { height: 100%; min-height: 100%; } } /* ════ SEARCH BAR PREMIUM ════ */ .mob-search-wrap { padding:10px 16px 6px; background:var(--bg); } .search-bar-premium { display:flex; align-items:center; gap:10px; background:var(--wh); border-radius:16px; padding:11px 14px; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); transition:box-shadow .2s; } .search-bar-premium:focus-within { box-shadow:0 0 0 3px rgba(255,107,43,.2),0 3px 12px rgba(0,0,0,.1); } .search-icon-wrap { color:var(--lite); display:flex; align-items:center; flex-shrink:0; transition:color .2s; } .search-bar-premium:focus-within .search-icon-wrap { color:var(--or); } .search-input-premium { flex:1; border:none; background:transparent; font-family:inherit; font-size:15px; color:var(--ink); outline:none; min-width:0; width:100%; -webkit-appearance:none; box-sizing:border-box; } .search-input-premium::placeholder { color:var(--lite); } .search-clear-btn { display:none; width:22px; height:22px; border-radius:50%; background:var(--bdr); border:none; cursor:pointer; align-items:center; justify-content:center; flex-shrink:0; color:var(--mid); transition:background .15s; } .search-clear-btn:hover { background:var(--mid); color:#fff; } /* ════ FILTER BAR PREMIUM ════ */ .filter-bar-wrap { display:flex; flex-direction:column; align-items:stretch; padding:8px 0 4px; gap:0; background:var(--wh); position:relative; z-index:10; } .filter-fixed { display:flex; align-items:center; gap:6px; padding:0 16px 8px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .filter-fixed::-webkit-scrollbar { display:none; } .filter-sep { display:none; } .filter-bar { display:flex; align-items:center; gap:6px; padding:6px 16px 2px; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-top:1px solid var(--bdr); touch-action:pan-x; } .filter-bar::-webkit-scrollbar { display:none; } .filter-bar > * { touch-action:pan-x; } /* Pills filtres */ .filter-pill-btn { display:inline-flex; align-items:center; gap:5px; padding:0 14px; height:34px; border-radius:20px; border:1px solid #ddd; background:#fff; color:#222; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; font-size:12px; font-weight:500; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .18s; outline:none; -webkit-tap-highlight-color:transparent; } .filter-pill-btn:hover { border-color:#aaa; } .filter-pill-btn.active, .filter-pill-btn.on { background:#222; border-color:#222; color:#fff; box-shadow:none; } .filter-pill-add { border-style:dashed; padding:7px 10px; } .filter-pill-add:hover { background:var(--orp); border-color:var(--or); color:var(--or); } /* Dark mode */ html.dk .search-bar-premium { background:var(--wh); box-shadow:0 2px 8px rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.35); } html.dk .search-bar-premium:focus-within { box-shadow:0 0 0 3px rgba(255,107,43,.25),0 2px 8px rgba(0,0,0,.15); } html.dk .search-input-premium { background:transparent; -webkit-text-fill-color:var(--ink); } html.dk .filter-pill-btn { background:var(--wh);border-color:var(--bdr);color:var(--ink); } html.dk .filter-pill-btn.active, html.dk .filter-pill-btn.on { background:var(--ink);border-color:var(--ink);color:var(--bg); } /* ════ FILTER BAR : hide filter-fixed pills (now in AllFilters sheet) ════ */ .filter-fixed { display:none !important; } .filter-sep { display:none; } .filter-bar-wrap { padding:0; background:transparent; } .filter-bar { border-top:none; padding:4px 16px 6px; } /* ════ SEARCH PILL (top bar) ════ */ #searchPill:active { opacity:.8; transform:scale(.98); } #filtersBtn:active { opacity:.8; } /* ════ SEARCH PILL (Airbnb-style) ════ */ .search-pill { display:flex;align-items:center; background:#fff;border-radius:40px; padding:13px 14px 13px 18px;margin:0;gap:12px; box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07); cursor:pointer;-webkit-tap-highlight-color:transparent; } .pill-icon { width:19px;height:19px;color:#222;flex-shrink:0; } .pill-text { flex:1;min-width:0; } .pill-main { font-size:14px;font-weight:700;color:#222;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .pill-sub { font-size:12px;color:#666;margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap;line-height:1.3; } .pill-sub .sps-chip { display:inline-flex;align-items:center;gap:3px;color:#555;font-weight:500; } .pill-sub .sps-chip svg { color:#FF6B2B;flex-shrink:0; } .pill-sub .sps-dot { width:2.5px;height:2.5px;border-radius:50%;background:#bbb;flex-shrink:0; } .pill-divider { width:0.5px;height:28px;background:#ddd;flex-shrink:0; } .pill-filter-btn { width:34px;height:34px;border-radius:50%;border:0.5px solid #ccc; display:flex;align-items:center;justify-content:center; flex-shrink:0;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent; } .pill-filter-btn::before { content:'';position:absolute;inset:-12px;border-radius:50%; } .pill-filter-btn svg { width:15px;height:15px;color:#222; } html.dk .search-pill { background:var(--wh);box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05); } html.dk .pill-main { color:var(--ink); } html.dk .pill-sub { color:var(--lite); } html.dk .pill-divider { background:var(--bdr); } html.dk .pill-filter-btn { border-color:var(--bdr); } html.dk .pill-filter-btn svg { color:var(--ink); } html.dk .pill-icon { color:var(--ink); } /* ════ CREATE COURSE — Premium redesign ════ */ .cr-card{background:var(--wh);border-radius:16px;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);overflow:hidden;border:1px solid transparent;} html.dk .cr-card{box-shadow:0 2px 8px rgba(0,0,0,.2);border-color:rgba(255,255,255,.35);} /* ── Dark mode — unified card shadow ── */ html.dk .card,html.dk .rrow,html.dk .frow,html.dk .fav-cours-card,html.dk .prof-card,html.dk .skel-card,html.dk .tp-card-list,html.dk #accStats>div{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} html.dk .chat-cours-card,html.dk .esp-msg-card{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} html.dk .msg-row{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .cr-row{display:flex;align-items:center;gap:12px;padding:14px 16px;} .cr-row+.cr-row{border-top:1px solid var(--bdr);} .cr-section-title{font-size:11px;font-weight:700;color:var(--lite);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;} .cr-input-plain{flex:1;border:none;background:transparent;outline:none;font-family:inherit;font-size:15px;font-weight:500;color:var(--ink);padding:0;min-height:24px;width:100%;} .cr-input-plain::placeholder{color:var(--lite);} .cr-mat-scroller{display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .cr-mat-scroller::-webkit-scrollbar{display:none;} .cr-mat-item{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;flex-shrink:0;-webkit-tap-highlight-color:transparent;transition:transform .15s;} .cr-mat-item:active{transform:scale(.92);} .cr-mat-circle{width:60px;height:60px;border-radius:50%;background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;color:var(--mid);transition:all .2s cubic-bezier(.34,1.56,.64,1);} html.dk .cr-mat-circle{box-shadow:0 2px 8px rgba(0,0,0,.2),0 0 0 0.5px rgba(255,255,255,.05);} .cr-mat-item.on .cr-mat-circle{background:var(--or);box-shadow:0 4px 16px rgba(255,107,43,.4);color:#fff;} .cr-mat-lbl{font-size:11px;font-weight:600;color:var(--mid);text-align:center;max-width:68px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .cr-mat-item.on .cr-mat-lbl{color:var(--or);font-weight:700;} .cr-mode-btn{flex:1;padding:14px 10px;border-radius:16px;border:1px solid transparent;background:var(--wh);box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);font-family:inherit;font-size:14px;font-weight:600;color:var(--mid);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;-webkit-tap-highlight-color:transparent;} html.dk .cr-mode-btn{box-shadow:0 2px 8px rgba(0,0,0,.2);border-color:rgba(255,255,255,.35);} .cr-mode-btn.on{background:var(--or);color:#fff;box-shadow:0 4px 14px rgba(255,107,43,.35);border-color:var(--or) !important;} .cr-mode-btn:active{transform:scale(.97);} /* ════ SMART SEARCH (overlay supprimé — subject list réutilisé dans bdFilter) ════ */ /* Liste statique avec icônes */ .ss-subject-list { display:flex;flex-direction:column;margin:0 16px 8px; } .ss-subject-row { display:flex;align-items:center;gap:14px; padding:10px 0;background:transparent;border:none; border-bottom:0.5px solid var(--bdr); cursor:pointer;text-align:left;width:100%; -webkit-tap-highlight-color:transparent; } .ss-subject-row:last-child { border-bottom:none; } .ss-subject-row:active { opacity:.6; } .ss-subject-icon { width:36px;height:36px;border-radius:10px; background:var(--bg);flex-shrink:0; display:flex;align-items:center;justify-content:center; color:var(--mid); } html.dk .ss-subject-icon { background:#3A3A3C;color:var(--mid); } .ss-subject-info { display:flex;flex-direction:column;gap:1px;flex:1;min-width:0; } .ss-subject-name { font-size:15px;font-weight:600;color:var(--ink); } .ss-subject-desc { font-size:12px;color:var(--lite);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } html.dk .ss-subject-row { border-bottom-color:rgba(255,255,255,0.08); } /* Subject items (compat) */ .subject-item { display:flex;align-items:center;gap:12px; padding:10px 16px;cursor:pointer; -webkit-tap-highlight-color:transparent; } .subject-item:active { opacity:.7; } /* Segment tabs */ .ss-tab { flex:1;padding:7px 6px;border:none;border-radius:9px; background:transparent;font-family:inherit;font-size:12.5px; font-weight:600;color:var(--lite);cursor:pointer; transition:all .18s;white-space:nowrap;outline:none; -webkit-tap-highlight-color:transparent; } .ss-tab.on { background:var(--wh);color:var(--ink); box-shadow:0 1px 5px rgba(0,0,0,.1); } html.dk .ss-tab.on { background:var(--wh); } /* Suggestion rows */ .ss-sugg-item { display:flex;align-items:center;gap:12px; padding:12px 0;cursor:pointer; border-bottom:1px solid var(--bdr); transition:opacity .12s; -webkit-tap-highlight-color:transparent; } .ss-sugg-item:last-child { border-bottom:none; } .ss-sugg-item:active { opacity:.6; } .ss-sugg-icon { width:46px;height:46px;border-radius:13px; flex-shrink:0;display:flex;align-items:center;justify-content:center; } /* AllFilters sheet pills */ .af-pill { display:inline-flex;align-items:center;gap:5px; padding:8px 15px;border-radius:50px; border:1.5px solid var(--bdr);background:var(--wh); color:var(--mid);font-family:inherit;font-size:13px; font-weight:600;cursor:pointer;white-space:nowrap; transition:all .18s;outline:none; -webkit-tap-highlight-color:transparent; } .af-pill.on { background:linear-gradient(135deg,#FF7D42,#FF4500);border-color:transparent;color:#fff; box-shadow:0 4px 14px rgba(255,69,0,.28);transform:scale(1.04); } html.dk .af-pill { background:var(--wh); } html.dk #bdAllFilters > div { background:var(--wh); } html.dk #afVilleWrap { box-shadow:0 3px 16px rgba(0,0,0,.55),0 0 0 .5px rgba(255,255,255,.07) !important; } /* html.dk #smartSearchOverlay — supprimé, overlay reste semi-transparent */ @keyframes accIconPop { 0% { transform: scale(1) rotate(0deg); } 35% { transform: scale(1.35) rotate(-8deg); } 65% { transform: scale(0.88) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } } .acc-card-icon-anim { animation: accIconPop 0.45s cubic-bezier(.22,.61,.36,1) forwards; } .card-follow-btn { -webkit-tap-highlight-color: transparent; transition: transform 0.15s, background 0.15s; } .card-follow-btn:active { transform: scale(0.85); } /* ── NEW CARD DESIGN (v2) ── */ .card-wrap { position: relative; overflow: visible; padding-top: 18px; padding-left: 10px; padding-right: 10px; padding-bottom: 18px; cursor: pointer; transition: transform .26s cubic-bezier(.22,.61,.36,1); } .card-wrap.card-below { opacity: 0; transform: translateY(14px) scale(.985); } @keyframes cardSlideIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } } .card-wrap.card-in { animation: cardSlideIn .36s cubic-bezier(.22,.61,.36,1) forwards; } @media(hover:hover)and(pointer:fine){ .card-wrap:hover { transform: translateY(-6px) scale(1.008); } .card-wrap:hover .card.card-new { box-shadow: 0 14px 48px rgba(255,107,53,.24), 0 4px 16px rgba(255,107,53,.14); } } .card-wrap.tapped { transform: translateY(-5px) scale(1.006); transition: transform .18s cubic-bezier(.22,.61,.36,1); } .card-wrap.tapped .card.card-new { box-shadow: 0 14px 48px rgba(255,107,53,.24), 0 4px 16px rgba(255,107,53,.14); transition: box-shadow .18s; } .card-wrap:active:not(.tapped) { transform: translateY(-1px) scale(.997); transition-duration: .08s; } /* Prof profile courses list — vertical stack with proper spacing */ #tpCoursList { display: flex; flex-direction: column; gap: 16px; } .card.card-new { animation: none; overflow: hidden; position: relative; z-index: 1; background: var(--wh); box-shadow: 0 8px 32px rgba(255,107,53,.18), 0 2px 8px rgba(255,107,53,.10); border: 0.5px solid rgba(255,107,53,.2); } html.dk .card.card-new { box-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.3); border-color: rgba(255,255,255,.06); } .card-badges-row { position: absolute; top: 4px; left: 14px; right: 78px; z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px; pointer-events: none; } .card-badge-subj { color: #fff; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 5px 14px; border-radius: 50px; transform: rotate(-2deg); box-shadow: 0 2px 10px rgba(0,0,0,.18); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .card-badge-mode-new { background: #1A1A2E; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 5px 12px; border-radius: 50px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.22); white-space: nowrap; } html.dk .card-badge-mode-new { background: #22223A; } .card-prof-av { position: absolute; top: 12px; right: 14px; z-index: 3; width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 12px rgba(0,0,0,.18); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; color: #fff; cursor: pointer; overflow: visible; transition: transform .18s; flex-shrink: 0; } .card-prof-av:active { transform: scale(.93); } .card-prof-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .card-follow-mini { position: absolute; bottom: -2px; right: -2px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15); transition: transform .15s, background .15s; } .card-follow-mini:active { transform: scale(.82) !important; } .card-body-new { padding: 44px 16px 14px; } .card-title-new { font-size: 16.5px; font-weight: 800; line-height: 1.3; letter-spacing: -.025em; color: var(--ink); margin-bottom: 3px; padding-right: 70px; } .card-desc-preview { font-size: 12.5px; font-weight: 400; color: var(--lite); line-height: 1.45; margin-bottom: 10px; padding-right: 70px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; word-break: break-word; } .card-sched { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ink); background: #FFF5F0; border: 1.5px dashed #FF6B35; border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; } html.dk .card-sched { background: rgba(255,107,43,.08); border-color: rgba(255,107,43,.4); } .card-location { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--lite); margin-bottom: 6px; margin-top: 2px; } .card-sep-dash { border: none; border-top: 1.5px dashed rgba(0,0,0,.1); margin: 10px 0; } html.dk .card-sep-dash { border-top-color: rgba(255,255,255,.1); } .card-foot { display: flex; align-items: center; gap: 8px; } .card-price-block { flex-shrink: 0; margin-right: 6px; } .card-price-val { font-size: 20px; font-weight: 800; color: var(--or); letter-spacing: -.04em; line-height: 1.1; } .card-price-sub { font-size: 10px; color: var(--lite); margin-top: 1px; } .card-circles-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 1; min-width: 0; overflow: hidden; } .places-bar { width: 100%; max-width: 88px; height: 5px; background: var(--bg); border-radius: 50px; box-shadow: inset 0 1px 3px rgba(0,0,0,.12); overflow: hidden; } .places-bar-fill { height: 100%; border-radius: 50px; transition: width .4s cubic-bezier(.22,.61,.36,1); } html.dk .places-bar { background: rgba(255,255,255,.08); box-shadow: inset 0 1px 3px rgba(0,0,0,.3); } .card-places-count { font-size: 10.5px; font-weight: 700; color: var(--lite); white-space: nowrap; } .card-places-count.last { color: #EF4444; } .card-places-count.full { color: #9CA3AF; } .card-fav-btn { width: 36px; height: 36px; border-radius: 50%; background: #FFF0EB; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: var(--or); transition: transform .18s, background .18s; -webkit-tap-highlight-color: transparent; } .card-fav-btn:active { transform: scale(.88); } .card-fav-btn.saved { background: rgba(255,107,43,.18); } .card-fav-btn.saved svg { fill: #FF6B35; stroke: #FF6B35; } .card-fav-btn.popping { animation: heartPop .38s cubic-bezier(.34,1.56,.64,1); } html.dk .card-fav-btn { background: rgba(255,107,43,.12); } .card-btn-reserve { flex: 1; background: #FF6B35; color: #fff; border: none; border-radius: 50px; padding: 10px 14px; font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap; transition: all .18s; letter-spacing: -.01em; -webkit-tap-highlight-color: transparent; text-align: center; min-width: 64px; } .card-btn-reserve:active { transform: scale(.91); box-shadow: 0 0 0 4px rgba(255,107,53,.25); } .card-btn-consult { background: var(--orp); color: var(--or); } .card-btn-inscrit { background: transparent; color: var(--or); box-shadow: inset 0 0 0 1.5px var(--or); } html.dk .card-btn-inscrit { background: transparent; color: var(--or); } .card-btn-full { background: #EBEBEB; color: var(--lite); cursor: not-allowed; } html.dk .card-btn-full { background: rgba(255,255,255,.08); color: var(--lite); } html.dk .card.card-new { box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 18px rgba(0,0,0,.35); } /* ── Description HTML (tables) ── */ #rDesc table { width:100%;border-collapse:collapse;margin:10px 0;font-size:13.5px; } #rDesc th,#rDesc td { border:1px solid var(--bdr);padding:8px 10px;text-align:left;vertical-align:top; } #rDesc th { background:rgba(255,107,43,.07);font-weight:700;color:var(--ink); } #rDesc td { color:var(--mid); } #rDesc p { margin:0 0 10px;white-space:pre-wrap; } #rDesc { overflow-x:auto; } /* ── CAPACITOR iOS — overrides iPad/iPhone ── */ /* Bouton retour messagerie header : visible uniquement quand une conversation est ouverte */ html.cap-ios #pgMsg.conv-open #msgBackBtn { display: flex !important; } /* ── IPAD — Bouton retour messagerie animé (≥768px, cap-ios uniquement) ── */ #bnavIpadBack { position: fixed; bottom: max(24px, env(safe-area-inset-bottom, 24px)); left: max(20px, env(safe-area-inset-left, 20px)); width: 52px; height: 52px; border-radius: 50%; background: #F4622A; border: none; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(244,98,42,0.4); z-index: 100; -webkit-tap-highlight-color: transparent; opacity: 0; transform: scale(0.5) translateX(-16px); pointer-events: none; transition: opacity 300ms ease-in-out, transform 300ms cubic-bezier(.22,.61,.36,1); } @media (min-width: 768px) { html.cap-ios #bnavIpadBack { display: flex; } html.cap-ios .bnav { transition: opacity 300ms ease-in-out, transform 300ms ease-in-out; } html.cap-ios .bnav.ipad-back { opacity: 0 !important; transform: translateX(calc(-50% - 100px)) scale(0.75) !important; pointer-events: none !important; } } html.cap-ios #bnavIpadBack.visible { opacity: 1; transform: scale(1) translateX(0); pointer-events: auto; } /* ── IPAD — Grille 2 colonnes + barre de nav pleine largeur ── */ @media (min-width: 768px) and (max-width: 1400px) { .cnt { padding-left: 20px; padding-right: 20px; } .card-body-new { padding: 44px 20px 16px; } } /* Cours : 2 colonnes sur écrans moyens (tablettes portrait), 3 sur iPad, 1 sur téléphone */ @media (min-width: 641px) and (max-width: 767px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { html.cap-ios .grid { grid-template-columns: repeat(3, 1fr) !important; column-gap: 0 !important; } } /* iPad portrait : 2 colonnes au lieu de 3 (cards trop étroites sinon) */ @media (min-width: 768px) and (max-width: 1180px) and (orientation: portrait) { .grid, html.cap-ios .grid { grid-template-columns: repeat(2, 1fr) !important; column-gap: 0 !important; } } /* ── IPAD Capacitor — nav pill flottante centrée ── */ @media (min-width: 768px) { html.cap-ios .bnav { bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important; left: 50% !important; right: auto !important; width: auto !important; transform: translateX(-50%) !important; border-radius: 50px !important; border-top: none !important; padding: 6px 10px !important; box-shadow: 0 8px 40px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.07) !important; gap: 2px !important; align-items: center !important; justify-content: flex-start !important; transition: transform 380ms cubic-bezier(.34,1.56,.64,1), opacity 240ms ease !important; } html.cap-ios .bnav::after { display: none !important; } html.cap-ios .bni { flex: none !important; padding: 10px 12px !important; border-radius: 40px !important; min-width: 44px !important; min-height: 0 !important; gap: 0 !important; transition: background .18s, transform .12s cubic-bezier(.34,1.56,.64,1), color .15s !important; } html.cap-ios .bni:active { transform: scale(.82) !important; opacity: 1 !important; transition: transform .07s ease !important; } html.cap-ios .bni svg { width: 22px !important; height: 22px !important; } /* Pill icon-only: no labels */ html.cap-ios .bni-lbl { display: none !important; } html.cap-ios .bni-fab-lbl { display: none !important; } /* FAB: no negative margin inside the pill */ html.cap-ios .bni-fab { justify-content: center !important; padding-bottom: 0 !important; } html.cap-ios .bni.on { background: linear-gradient(145deg, #FF7D42, #FF4500) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(255,69,0,.35) !important; } html.cap-ios .bni.on svg { stroke: #fff !important; } html.cap-ios .bni.on .bni-lbl { color: #fff !important; font-weight: 600 !important; } html.dk.cap-ios .bnav { background: rgba(14,12,10,0.95) !important; box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.07) !important; } html.dk.cap-ios .bni.on { background: linear-gradient(145deg, #FF7D42, #FF4500) !important; } /* ipad-back : slide la pill vers la gauche */ html.cap-ios .bnav.ipad-back { opacity: 0 !important; transform: translateX(calc(-50% - 120px)) scale(0.75) !important; pointer-events: none !important; } /* Messagerie iPad : cacher nav + bouton retour géré par JS */ html.cap-ios .bnav.ipad-msg { display: none !important; } /* msg-mode iOS : pill réduite, bniMsg devient bouton retour (spécificité > html.cap-ios .bnav) */ html.cap-ios .bnav.msg-mode { left: 24px !important; transform: none !important; padding: 5px !important; gap: 0 !important; min-width: unset !important; transition: left 300ms cubic-bezier(.34,1.56,.64,1), transform 300ms cubic-bezier(.34,1.56,.64,1) !important; } html.cap-ios .bnav.msg-mode .bni:not(#bniMsg), html.cap-ios .bnav.msg-mode #bnavDragHandle { display: none !important; } html.cap-ios .bnav.msg-mode #bniMsg .bni-msg-icon, html.cap-ios .bnav.msg-mode #bniMsg .bni-msg-lbl, html.cap-ios .bnav.msg-mode #bniMsg .bni-badge { display: none !important; } html.cap-ios .bnav.msg-mode #bniMsg .bni-back { display: flex !important; } /* FAB sur iPad pill : même style que desktop */ html.cap-ios #bniAdd { padding: 6px !important; border-radius: 50% !important; min-width: unset !important; } html.cap-ios #bniAdd .bni-add-circle { width: 44px !important; height: 44px !important; margin-top: 0 !important; } html.cap-ios .bni-fab:active .bni-add-circle { transform: scale(.82) !important; } } /* ═══════════════════════════════════════════════════════════════ IRIS WIPE — Looney Tunes-style launch animation (1× per session) ═══════════════════════════════════════════════════════════════ */ html.irising,html.irising body{background:#FF6B2B !important;} html.irising #splash{display:none !important;} #irisWipe{display:none;} #irisWipe.on{ display:flex;align-items:center;justify-content:center; position:fixed;inset:0;z-index:99998; background:radial-gradient(circle at 50% 50%,#FF8C55 0%,#E04E10 75%); clip-path:circle(150% at 50% 50%); -webkit-clip-path:circle(150% at 50% 50%); pointer-events:none; } #irisWipe.closing{ animation:irisClose 1200ms cubic-bezier(.65,0,.35,1) forwards; } .iris-logo-wrap{text-align:center;animation:irisLogoIn 700ms cubic-bezier(.22,1.6,.36,1) forwards;} #irisWipe.closing .iris-logo-wrap{animation:irisLogoOut 600ms ease-in forwards;} .iris-logo{ color:#fff;font-size:clamp(36px,9vw,68px);font-weight:900;letter-spacing:-.045em; text-shadow:0 6px 24px rgba(0,0,0,.22); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; display:inline-block; animation:irisLogoBreathe 1800ms ease-in-out 700ms infinite; transform-origin:50% 50%; } .iris-sub{ margin-top:14px;color:rgba(255,255,255,.85);font-size:8px;letter-spacing:18px;padding-left:18px; animation:irisDots 900ms ease-out .2s forwards;opacity:0; } @keyframes irisClose{ 0% { clip-path:circle(150% at 50% 50%); -webkit-clip-path:circle(150% at 50% 50%); } 70% { clip-path:circle(40% at 50% 50%); -webkit-clip-path:circle(40% at 50% 50%); } 100%{ clip-path:circle(0% at 50% 50%); -webkit-clip-path:circle(0% at 50% 50%); } } @keyframes irisLogoIn{ 0% { opacity:0;transform:scale(.55); } 70% { opacity:1;transform:scale(1.08); } 100% { opacity:1;transform:scale(1); } } @keyframes irisLogoOut{ 0% { opacity:1;transform:scale(1); } 100% { opacity:0;transform:scale(1.3); } } @keyframes irisLogoBreathe{ 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } } /* ── Iris LOGOUT (inverse : ferme app, ouvre login) ─────────────────────── */ #irisWipe.logout-closing{ display:flex;align-items:center;justify-content:center; position:fixed;inset:0;z-index:99998; background:radial-gradient(circle at 50% 50%,#FF8C55 0%,#E04E10 75%); pointer-events:auto; clip-path:circle(0% at 50% 50%); -webkit-clip-path:circle(0% at 50% 50%); animation:irisLogoutClose 700ms cubic-bezier(.65,0,.35,1) forwards; } #irisWipe.logout-opening{ display:flex;align-items:center;justify-content:center; position:fixed;inset:0;z-index:99998; background:radial-gradient(circle at 50% 50%,#FF8C55 0%,#E04E10 75%); pointer-events:none; clip-path:circle(150% at 50% 50%); -webkit-clip-path:circle(150% at 50% 50%); animation:irisLogoutOpen 700ms cubic-bezier(.65,0,.35,1) forwards; } @keyframes irisLogoutClose{ 0% { clip-path:circle(0% at 50% 50%); -webkit-clip-path:circle(0% at 50% 50%); } 100%{ clip-path:circle(150% at 50% 50%); -webkit-clip-path:circle(150% at 50% 50%); } } @keyframes irisLogoutOpen{ 0% { clip-path:circle(150% at 50% 50%); -webkit-clip-path:circle(150% at 50% 50%); } 100%{ clip-path:circle(0% at 50% 50%); -webkit-clip-path:circle(0% at 50% 50%); } } @keyframes irisDots{ 0% { opacity:0;transform:translateY(6px); } 50% { opacity:1;transform:translateY(0); } 100%{ opacity:0; } } @media (prefers-reduced-motion: reduce){ #irisWipe{display:none !important;} } } /* iPad portrait (768–899px) : footer sur 2 lignes pour éviter le chevauchement */ @media (min-width: 768px) and (max-width: 899px) { .card-foot { flex-wrap: wrap; gap: 8px; } .card-price-block { margin-right: 0; } .card-btn-reserve { flex: none; width: 100%; min-width: 0; order: 4; } } /* ═══════════════════════════════════════════════ TEACHER PROFILE PAGE (tp-*) ═══════════════════════════════════════════════ */ .tp-topbar{ display:flex;align-items:center;justify-content:space-between; padding:max(52px,calc(env(safe-area-inset-top,0px) + 14px)) 16px 12px; background:#fff;flex-shrink:0; } .tp-topbar-btn{ width:32px;height:32px;border-radius:50%; border:0.5px solid #ddd;display:flex;align-items:center;justify-content:center; background:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent; } .tp-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:env(safe-area-inset-bottom,24px);} /* Hero */ .tp-hero{text-align:center;padding:20px 24px 16px;background:#fff;} .tp-av-wrap{position:relative;width:84px;margin:0 auto 14px;} .tp-avatar{ width:84px;height:84px;border-radius:50%; background:linear-gradient(135deg,#FF8C55,#E04E10); display:flex;align-items:center;justify-content:center; font-size:26px;font-weight:800;color:#fff;overflow:hidden; } .tp-verifbadge{ position:absolute;bottom:0;right:0;width:28px;height:28px; border-radius:50%;background:#E8611A;border:3px solid #fff; display:flex;align-items:center;justify-content:center; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:opacity .15s,transform .1s; } .tp-verifbadge:active{opacity:.8;transform:scale(.92);} .tp-verifbadge.following{background:#fff;border-color:#E8611A;} .tp-name{font-size:22px;font-weight:700;color:#222;letter-spacing:-0.5px;line-height:1.2;} .tp-since{font-size:12px;color:#717171;margin-top:5px;} .tp-hero-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;} .tp-action-btn{ display:flex;align-items:center;gap:7px; border-radius:50px;padding:10px 20px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; font-size:14px;font-weight:600;cursor:pointer; min-width:100px;justify-content:center; -webkit-tap-highlight-color:transparent;border:1px solid transparent; } .tp-action-sec{background:#fff;border-color:#ddd;color:#222;} .tp-action-sec:active{opacity:.7;} .tp-action-pri{background:#222;border-color:#222;color:#fff;} .tp-action-pri:active{opacity:.8;} .tp-action-pri.following{background:#fff;border-color:#ddd;color:#222;} /* Stats bar */ .tp-stats-bar{ display:flex;align-items:center; border-top:0.5px solid #F0F0F0;border-bottom:0.5px solid #F0F0F0; padding:12px 0;background:#fff; } .tp-stat{flex:1;text-align:center;} .tp-stat-num{font-size:18px;font-weight:700;color:#222;line-height:1;} .tp-stat-rating{color:#FF9500;} .tp-stat-lbl{font-size:10px;color:#717171;margin-top:3px;font-weight:500;} .tp-stat-sep{width:0.5px;height:30px;background:#E0E0E0;flex-shrink:0;} /* Tabs — iOS segmented style */ .tp-tab-bar{ display:flex;background:#fff;border-bottom:0.5px solid #E5E5E5; padding:0;position:sticky;top:0;z-index:2; } .tp-tab{ flex:1;background:none;border:none; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif; font-size:13px;font-weight:500;color:#8E8E93; padding:13px 0;cursor:pointer; border-bottom:2px solid transparent;margin-bottom:-0.5px; white-space:nowrap;-webkit-tap-highlight-color:transparent; transition:color .15s,border-color .15s;letter-spacing:-0.1px; } .tp-tab.on{color:#000;font-weight:600;border-bottom-color:#000;} /* Panel */ .tp-panel{padding:0;} /* Trust cards */ .tp-sec-title{font-size:15px;font-weight:700;color:#222;padding:18px 16px 10px;} .tp-trust-wrap{display:flex;flex-direction:column;gap:8px;padding:0 16px 16px;} .tp-trust-card{ display:flex;align-items:center;gap:12px; border:0.5px solid #E5E5E5;border-radius:12px;padding:11px 14px; } .tp-verif-card{ display:flex;align-items:center;gap:12px; background:var(--wh);border-radius:16px;padding:14px; box-shadow:0 2px 12px rgba(0,0,0,.06); } html.dk .tp-verif-card{background:var(--wh);box-shadow:0 2px 12px rgba(0,0,0,.35);} .tp-verif-badge{font-size:11px;font-weight:700;border-radius:20px;padding:4px 10px;white-space:nowrap;flex-shrink:0;} .tp-verif-btn{ width:100%;background:var(--wh);color:#FF5E14;border:1.5px solid #FF5E14;border-radius:12px; padding:11px;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;margin-top:10px; display:flex;align-items:center;justify-content:center;gap:8px;-webkit-tap-highlight-color:transparent; } .tp-verif-btn:active{background:#FFF3EE;} .tp-verif-progress{padding:12px 0 4px;} .tp-verif-progress-text{font-size:12px;font-weight:600;color:var(--mid);margin-bottom:8px;} .tp-verif-progress-bar{width:100%;height:6px;background:#F5F5F5;border-radius:4px;overflow:hidden;} html.dk .tp-verif-progress-bar{background:rgba(255,255,255,.08);} .tp-verif-progress-fill{height:100%;background:#FF5E14;border-radius:4px;transition:width .3s ease;} .tp-trust-icon{ width:36px;height:36px;border-radius:9px; display:flex;align-items:center;justify-content:center;flex-shrink:0; } .tp-trust-text{flex:1;} .tp-trust-lbl{font-size:13px;font-weight:600;color:#222;line-height:1.3;} .tp-trust-sub{font-size:11px;color:#717171;margin-top:2px;} .tp-trust-badge{ font-size:11px;font-weight:600;border-radius:50px; padding:3px 9px;white-space:nowrap;flex-shrink:0; } /* Bio */ .tp-bio{ background:#F7F7F7;border-radius:12px;padding:14px; font-style:italic;font-size:13px;color:#555;line-height:1.65; } /* Statut section */ .tp-sec-label{ font-size:11px;font-weight:700;text-transform:uppercase; letter-spacing:.06em;color:#aaa;margin-bottom:8px; } .tp-card-list{border:none;border-radius:12px;overflow:hidden;box-shadow:0 3px 12px rgba(0,0,0,.12),0 0 0 0.5px rgba(0,0,0,.07);} .tp-card-row{ display:flex;align-items:center; padding:11px 14px;border-bottom:0.5px solid #F0F0F0; } .tp-card-row:last-child{border-bottom:none;} .tp-card-row-left{flex:1;} .tp-card-row-lbl{font-size:11px;color:#aaa;margin-bottom:2px;} .tp-card-row-val{font-size:13px;font-weight:500;color:#222;} /* Chips matières */ .tp-chips-wrap{display:flex;flex-wrap:wrap;gap:7px;} .tp-chip{ background:#F2F2F7;color:#222;border-radius:20px; padding:5px 12px;font-size:12px;font-weight:600; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; } .tp-chip-primary{background:#FFF0E8;color:#E8611A;} /* Contact bottom */ .tp-contact-wrap{padding:12px 16px 32px;} .tp-contact-btn{ width:100%;height:48px;border-radius:12px; background:#222;color:#fff;border:none; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; font-size:15px;font-weight:600;cursor:pointer; display:flex;align-items:center;justify-content:center;gap:8px; -webkit-tap-highlight-color:transparent; } /* Espace */ #tpEspaceContent{padding:20px 16px 48px;} .tp-esp-group{ background:#fff;border-radius:16px; border:0.5px solid #E5E5EA; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.06); } .tp-esp-row{ display:flex;align-items:center;gap:14px; padding:13px 16px;cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .12s; } .tp-esp-row:active{background:#F5F5F5;} .tp-esp-ico{ width:36px;height:36px;border-radius:9px;flex-shrink:0; display:flex;align-items:center;justify-content:center; } .tp-esp-text{flex:1;min-width:0;} .tp-esp-title{font-size:14px;font-weight:600;color:#000;line-height:1.2;} .tp-esp-sub{font-size:12px;color:#8E8E93;margin-top:2px;} .tp-esp-sep{height:0.5px;background:#E5E5EA;margin-left:66px;} html.dk .tp-esp-group{background:var(--wh);border-color:var(--bdr);box-shadow:none;} html.dk .tp-esp-row:active{background:var(--bg);} html.dk .tp-esp-title{color:var(--ink);} html.dk .tp-esp-sep{background:var(--bdr);} .tp-espace-card{ background:#fff;border-radius:20px;padding:20px; box-shadow:0 3px 12px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.06); } .tp-espace-title{font-size:17px;font-weight:800;color:#111;margin-bottom:5px;letter-spacing:-.02em;} .tp-espace-desc{font-size:13px;color:#888;line-height:1.6;margin-bottom:18px;} .tp-espace-row{ display:flex;align-items:center; background:#fff;border-radius:14px; box-shadow:0 0 0 1px rgba(0,0,0,.09); overflow:hidden;margin-bottom:12px; } .tp-code-input{ flex:1;background:transparent;border:none; height:50px;padding:0 16px; font-family:'SF Mono',Menlo,Monaco,Courier,monospace; font-size:16px;font-weight:600;letter-spacing:.1em; text-transform:uppercase;outline:none;color:#111;transition:none; } .tp-code-input::placeholder{color:#D1D1D6;font-weight:400;letter-spacing:.02em;font-family:-apple-system,BlinkMacSystemFont,sans-serif;text-transform:none;} .tp-code-btn{ background:#FF6B2B;color:#fff;border:none;border-radius:0; height:50px;padding:0 20px; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; font-weight:700;font-size:14px;cursor:pointer; white-space:nowrap;-webkit-tap-highlight-color:transparent;flex-shrink:0; box-shadow:-1px 0 0 rgba(0,0,0,.06); } /* Dark mode overrides */ html.dk #bdPrFull{background:var(--bg);} html.dk .tp-topbar{background:var(--wh);} html.dk .tp-topbar-btn{background:var(--wh);border-color:var(--bdr);} html.dk .tp-topbar-btn svg{stroke:var(--ink);} html.dk .tp-hero{background:var(--wh);} html.dk .tp-name{color:var(--ink);} html.dk .tp-stats-bar{background:var(--wh);border-color:var(--bdr);} html.dk .tp-stat-num{color:var(--ink);} html.dk .tp-tab-bar{background:var(--wh);border-color:var(--bdr);} html.dk .tp-tab.on{color:var(--ink);font-weight:600;border-color:var(--ink);} html.dk .tp-sec-title{color:var(--ink);} html.dk .tp-trust-card{border-color:var(--bdr);} html.dk .tp-trust-lbl{color:var(--ink);} html.dk .tp-bio{background:var(--bg);color:var(--mid);} html.dk .tp-card-list{border-color:var(--bdr);} html.dk .tp-card-row{border-color:var(--bdr);} html.dk .tp-card-row-val{color:var(--ink);} html.dk .tp-chip{background:var(--bg);color:var(--ink);} html.dk .tp-contact-btn{background:var(--ink);color:var(--bg);} html.dk .tp-action-sec{background:var(--wh);border-color:var(--bdr);color:var(--ink);} html.dk .tp-action-pri{background:var(--ink);border-color:var(--ink);color:var(--bg);} html.dk .tp-espace-card{background:#1C1C1E;box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 .5px rgba(255,255,255,.07);} html.dk .tp-espace-title{color:var(--ink);} html.dk .tp-espace-desc{color:var(--mid);} html.dk .tp-espace-row{background:rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.1);} html.dk .tp-code-input{color:#fff;} html.dk .tp-code-input::placeholder{color:#48484A;} html.dk .tp-code-input::placeholder{color:#48484A;} html.dk .tp-code-btn{background:#FF6B2B;box-shadow:-1px 0 0 rgba(255,255,255,.07);} /* ═══════════════════════════════════════════════════════════════ DESKTOP SIDEBAR (Pinterest-style) — ≥1100px with mouse only ═══════════════════════════════════════════════════════════════ */ #sbarD{display:none;} #sbdBubble{display:none;position:fixed;z-index:940;} @media (min-width:1100px) and (hover:hover) and (pointer:fine){ #sbarD{ display:flex;flex-direction:column;align-items:center; position:fixed;top:0;left:0;bottom:0;width:76px;z-index:800; background:var(--wh);border-right:1px solid var(--bdr); padding:14px 0 14px;box-sizing:border-box; } .sbd-logo{ width:48px;height:48px;border-radius:14px; background:linear-gradient(135deg,#FF8C55,#E04E10); color:#fff;font-weight:800;font-size:15px;letter-spacing:.02em; display:flex;align-items:center;justify-content:center; margin-bottom:18px;cursor:pointer;overflow:hidden; box-shadow:0 4px 14px rgba(255,107,43,.28); transition:transform .2s cubic-bezier(.22,1.4,.36,1); } .sbd-logo:hover{transform:scale(1.06);} .sbd-logo img{width:100%;height:100%;object-fit:cover;} .sbd-items{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;overflow:visible;width:100%;} .sbd-bottom{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;padding-top:10px;border-top:1px solid var(--bdr);} .sbd-item{ position:relative;width:48px;height:48px;border-radius:14px; border:none;background:transparent;color:var(--mid);cursor:pointer; display:flex;align-items:center;justify-content:center; transition:background .18s,color .15s,transform .18s cubic-bezier(.22,1.4,.36,1); -webkit-tap-highlight-color:transparent;flex-shrink:0; } .sbd-item:hover{background:var(--bg);color:var(--ink);transform:scale(1.08);z-index:2;} .sbd-item.on{background:rgba(255,107,43,.1);color:var(--or);} /* Tooltip custom à droite de l'icône — évite que le title natif soit coupé par le bord gauche de l'écran (sidebar collée à x=0) */ .sbd-item::after{ content:attr(aria-label);position:absolute;left:calc(100% + 10px);top:50%; transform:translateY(-50%) translateX(-4px); background:#1C1C1E;color:#fff;padding:6px 10px;border-radius:8px; font-size:12px;font-weight:600;white-space:nowrap;pointer-events:none; opacity:0;transition:opacity .15s,transform .15s; box-shadow:0 4px 14px rgba(0,0,0,.18);z-index:999; } .sbd-item:hover::after{opacity:1;transform:translateY(-50%) translateX(0);} .sbd-item.on::before{ content:'';position:absolute;left:-14px;top:50%;transform:translateY(-50%); width:4px;height:24px;background:var(--or);border-radius:0 4px 4px 0; } .sbd-fab{ background:linear-gradient(145deg,#FF7D42,#FF4500);color:#fff; box-shadow:0 6px 18px rgba(255,69,0,.55); width:48px;height:48px;border-radius:50%; position:relative;overflow:visible; } .sbd-fab::after{ content:'';position:absolute;inset:0;border-radius:50%; border:4px solid rgba(255,107,43,.6); animation:fabRing 1.8s cubic-bezier(.4,0,.6,1) infinite; pointer-events:none; } .sbd-fab:hover{background:linear-gradient(135deg,#FF6B2B,#E04E10);color:#fff;transform:scale(1.1) rotate(90deg);} .sbd-fab:hover::after,.sbd-fab:active::after{animation:none;opacity:0;} .sbd-fab:active{transform:scale(.88);} .sbd-fab.on::before,.sbd-acc.on::before{display:none;} .sbd-badge{position:absolute;top:6px;right:6px;min-width:8px;height:8px;border-radius:50%;background:var(--or);border:2px solid var(--wh);display:none;} .sbd-badge.on{display:block;} .sbd-acc{border:2px solid var(--bdr);} .sbd-acc:hover{border-color:var(--or);} body.sbd-on{padding-left:76px;box-sizing:border-box;} body.sbd-on .bnav{display:none !important;} body.sbd-on #bnavIpadBack{display:none !important;} body.sbd-on #bdPrFull, body.sbd-on #bdEspaceEleve, body.sbd-on #bdMesPublications, body.sbd-on #bdBibliotheque, body.sbd-on #bdElveBibliotheque, body.sbd-on #bdEspEditor, body.sbd-on #bdEspPubs{left:76px !important;} /* Toolbar éditeur fiche/annonce : décalée de la largeur de la sidebar */ body.sbd-on .esp-kb-card{left:calc(76px + 10px);} body.sbd-on .esp-kb-card.kb-open{left:76px;} /* Boutons flottants Mes Profs : centrés sur la zone de contenu (hors sidebar) */ body.sbd-on #mesProfsFabs{left:76px !important;} /* ── Settings : vraie page plein écran sur desktop (pas une modale) ── */ body.sbd-on #bdSettings{ left:76px !important; background:var(--bg) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; align-items:flex-start !important; justify-content:center !important; overflow-y:auto !important; } body.sbd-on #bdSettings .settings-sheet{ border-radius:0 !important; width:100% !important; max-width:760px !important; max-height:none !important; overflow:visible !important; box-shadow:none !important; background:transparent !important; padding-bottom:60px !important; margin:0 auto; } body.sbd-on #bdSettings .settings-handle{display:none !important;} body.sbd-on #bdSettings .settings-header{background:transparent !important;padding-top:32px !important;} body.sbd-on #bdSettings .settings-header > button:first-child{display:none !important;} /* ── Fusion Mon profil inline sur desktop ── */ /* En home-mode, cacher la grille des 6 cards (déjà accessibles via sidebar + bulle) */ body.sbd-on #pgAcc.home-mode #accHome > div[style*="grid-template-columns:1fr 1fr"]{display:none !important;} /* Afficher la section profil inline sous les stats */ body.sbd-on #pgAcc.home-mode .acc-body{display:block;} body.sbd-on #pgAcc.home-mode .acc-body > .asec{display:none;} body.sbd-on #pgAcc.home-mode .acc-body > #asecP{display:block;} #sbdBubble.on{display:block;} .sbd-bub{ position:relative;background:var(--wh);border-radius:22px; box-shadow:0 12px 48px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.06); padding:10px;min-width:240px; transform-origin:left center; animation:sbdBubPop .28s cubic-bezier(.22,1.4,.36,1); } .sbd-bub::before{ content:'';position:absolute;left:-7px;top:var(--bub-arrow,30px); width:14px;height:14px;background:var(--wh);transform:rotate(45deg); box-shadow:-1px 1px 0 rgba(0,0,0,.04); } .sbd-bub-item{ display:flex;align-items:center;gap:12px;padding:11px 14px; border-radius:14px;cursor:pointer;color:var(--ink); font-size:14px;font-weight:600;transition:background .15s; -webkit-tap-highlight-color:transparent; } .sbd-bub-item:hover{background:var(--bg);} .sbd-bub-item svg{color:var(--mid);flex-shrink:0;} .sbd-bub-item:hover svg{color:var(--or);} .sbd-bub-item.danger{color:#EF4444;} .sbd-bub-item.danger svg{color:#EF4444;} .sbd-bub-sep{height:1px;background:var(--bdr);margin:6px 8px;} .sbd-bub-head{padding:10px 14px 12px;display:flex;align-items:center;gap:10px;} .sbd-bub-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#FF8C55,#E04E10);color:#fff;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0;} .sbd-bub-av img{width:100%;height:100%;object-fit:cover;} .sbd-bub-name{font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em;} .sbd-bub-sub{font-size:12px;color:var(--lite);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;} @keyframes sbdBubPop{0%{opacity:0;transform:scale(.8) translateX(-10px);}100%{opacity:1;transform:scale(1) translateX(0);}} } html.dk #sbarD{background:#181716;border-right-color:rgba(255,255,255,.08);} html.dk .sbd-item:hover{background:rgba(255,255,255,.06);} html.dk .sbd-item.on{background:rgba(255,107,43,.15);} html.dk .sbd-bottom{border-top-color:rgba(255,255,255,.08);} html.dk .sbd-bub{background:#1F1E1C;box-shadow:0 12px 48px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06);} html.dk .sbd-bub::before{background:#1F1E1C;} html.dk .sbd-bub-item{color:#EDEDED;} html.dk .sbd-bub-item:hover{background:rgba(255,255,255,.06);} html.dk .sbd-bub-sep{background:rgba(255,255,255,.08);} .hide-scrollbar::-webkit-scrollbar{display:none;} .hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none;} @keyframes slideDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}} .feed-heart{transition:transform .2s cubic-bezier(.34,1.56,.64,1),fill .15s ease;} /* Bouton vidéo éphémère — petite anim au clic */ #msgVideoBtn img{transition:transform .15s ease;} #msgVideoBtn:active img{transform:scale(.88);} @keyframes vidBtnPop{0%{transform:scale(1) rotate(0)}30%{transform:scale(.82) rotate(-6deg)}60%{transform:scale(1.12) rotate(5deg)}100%{transform:scale(1) rotate(0)}} #msgVideoBtn.pop img{animation:vidBtnPop .5s cubic-bezier(.34,1.56,.64,1);} /* Tuto visio — anims des mockups (point EN DIRECT qui pulse, courbe tableau qui se dessine) */ @keyframes pulseLive{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.45)}} @keyframes drawPath{0%{stroke-dashoffset:200}40%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-200}} /* Pack 6 — prefers-reduced-motion : respecte le réglage iOS « Réduire les animations » (Réglages > Accessibilité > Animations). Neutralise les keyframe animations sans casser les transitions essentielles (panels, PIP) qui restent utiles même en mode réduit. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;} } /* M2 — bulle messagerie en échec d'envoi. Border rouge + opacity réduite, l'icône `!` à gauche permet le tap-to-retry (handler dans _msgMarkBubbleFailed). */ .msg-bubble-row.msg-failed .msg-bubble{border:1.5px solid #e53e3e;opacity:.85;} .msg-bubble-row.msg-failed{padding-left:32px;} .msg-fail-ico:active{transform:translateY(-50%) scale(.92);} .msg-fail-ico{transition:transform .12s cubic-bezier(.4,0,.2,1);} /* M3 — read receipts (✓ / ✓✓) sur les bulles "me". Tick gris discret en sortie, devient orange CoursPool quand le destinataire a lu. tabular-nums sur le timestamp pour ne pas sauter en largeur entre 1:05 et 11:30. */ .msg-bubble-time{font-variant-numeric:tabular-nums;} .msg-tick{margin-left:5px;font-size:11px;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:-1px;} .msg-tick.read{color:#7CFFB1;} /* M3 — send button disabled visuel quand l'input est vide. iMessage-style : on grise sans bloquer le tap (hover stays subtle, transition douce). */ .msg-send-btn.disabled{opacity:.45;pointer-events:none;} .msg-send-btn{transition:opacity .18s cubic-bezier(.4,0,.2,1),transform .12s cubic-bezier(.4,0,.2,1);} .msg-send-btn:active{transform:scale(.92);} /* M4 — bouton "Supprimer" rouge dans le menu actions long-press */ .msg-actions-pop-btn-danger{color:#e53e3e;} .msg-actions-pop-btn-danger:hover{background:rgba(229,62,62,.08);} /* M5 — bulle suivante d'un même sender dans <60s : avatar invisible mais réserve l'espace pour aligner le texte avec les bulles avec avatar. gap réduit entre les bulles consécutives pour effet "burst". */ .msg-av-hidden{visibility:hidden;} .msg-bubble-row.msg-burst{margin-top:-4px;} /* Accessibilité — Augmenter le contraste (réglage iOS Settings > Display > Increase Contrast) */ @media (prefers-contrast: more) { :root { --bdr: #000; --mid: #1F2937; --lite: #374151; } .pb, .so, .field input, .field textarea, .field select, button { border-width: 2px !important; } } /* Smart Invert iOS — exclut les images de l'inversion (sinon les visages deviennent bleus) */ img, .avatar, .photo-prof, .fr-photo { -webkit-filter: none; filter: none; } /* Dark mode — bannières orange (remind-hero) + rouge (live-hero) : force texte BLANC partout (sinon les `color: var(--or)` héritées rendent un jaune-orange illisible) */ html.dk .remind-hero, html.dk .remind-hero *, html.dk .live-hero, html.dk .live-hero * { color: #fff !important; }