/* L'Espace SLHB : interface mobile (maquette). Unité --p = largeur / 392. */
@font-face{font-family:"TT Bluescreens Trial";font-weight:700;src:url(../fonts/TT_Bluescreens_Trial_Bold.ttf) format("truetype")}

/* Layout: écran mobile 392 unités de large (maquette), tout est dimensionné en --p ; en dessous, barre de profils de démonstration */

:root{--d:#203971;--l:#287FE5;--g:#3DD68C;--r:#CD3238;--o:#E8820C;--soft:#EEF3FC;--line:#E3E8F0;--mut:#8A94A8;--bg:#E7EDF8;--paper:#fff;--t:"TT Bluescreens Trial","League Gothic",Impact,sans-serif;--i:Inter,system-ui,sans-serif;--W:min(100vw,430px);--p:calc(var(--W)/392)}
*{box-sizing:border-box}
html,body{height:100%}
#app{display:flex;flex-direction:column;height:100%;min-height:0}
body{margin:0;display:flex;flex-direction:column;background:var(--bg);color:var(--d);font-family:var(--i);-webkit-text-size-adjust:100%}
.shell{display:flex;justify-content:center;flex:1;min-height:0}
.ph{position:relative;width:var(--W);height:100%;max-height:900px;min-height:0;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;border-radius:0}
@media(min-width:520px){.ph{border-radius:28px;box-shadow:0 10px 40px rgba(32,57,113,.18)}}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--l);outline-offset:2px}
.hd{flex:none;background:var(--l);height:calc(75*var(--p));border-radius:0 0 calc(24*var(--p)) calc(24*var(--p));display:flex;align-items:center;gap:calc(14*var(--p));padding:0 calc(20*var(--p));margin:0 calc(10*var(--p));margin-top:calc(10*var(--p));border-radius:0 0 calc(24*var(--p)) calc(24*var(--p))}
.hd img{width:calc(40*var(--p));height:calc(40*var(--p));border-radius:50%;background:#fff}
.hd h1{margin:0;font:700 calc(38*var(--p))/1 var(--t);color:#fff}
.sc{flex:1;min-height:0;overflow-y:auto;padding:0 calc(30*var(--p)) calc(90*var(--p))}
.sc.cal{display:flex;flex-direction:column;overflow:hidden;padding:0 0 0}
.sc.cal>.top{padding:0 calc(30*var(--p));flex:none}
.pf{margin-top:calc(10*var(--p));display:flex;align-items:center;border:calc(1.8*var(--p)) solid var(--d);border-radius:calc(24*var(--p));min-height:calc(44*var(--p));background:#fff;padding:0 calc(4*var(--p)) 0 0;gap:0}
.pf .av{flex:none;align-self:stretch;width:calc(48*var(--p));margin:calc(-1.8*var(--p)) 0 calc(-1.8*var(--p)) calc(-1.8*var(--p));background:var(--d);border-radius:calc(24*var(--p)) calc(14*var(--p)) calc(14*var(--p)) calc(24*var(--p));display:flex;align-items:center;justify-content:center}
.pf .av i{width:calc(31*var(--p));height:calc(31*var(--p));border-radius:50%;background:#5C7AC0;border:calc(1.5*var(--p)) solid #fff;color:#fff;font:700 calc(10*var(--p)) var(--i);font-style:normal;display:flex;align-items:center;justify-content:center}
.pf .nm{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:calc(4*var(--p)) calc(10*var(--p)) calc(4*var(--p)) calc(14*var(--p))}
.pf .nm b{font:700 calc(15*var(--p))/1.2 var(--i)}
.bdg{align-self:flex-start;margin-top:calc(3*var(--p));background:var(--o);color:#fff;font:700 calc(5.6*var(--p))/1 var(--i);text-transform:uppercase;padding:calc(3*var(--p)) calc(5*var(--p));border-radius:calc(8*var(--p))}
.pf .sw{flex:none;margin:0;border:0;border-radius:calc(12*var(--p));color:#fff;font:700 calc(8*var(--p))/1.15 var(--i);text-transform:uppercase;padding:0 calc(8*var(--p));height:calc(36*var(--p));display:flex;align-items:center;justify-content:center;text-align:center;min-width:calc(60*var(--p))}
.sw.o{background:var(--o)}.sw.b{background:var(--l)}
.ln{height:calc(2*var(--p));background:var(--l);border:0;margin:calc(10*var(--p)) 0 0}
.tb{display:flex;align-items:center;gap:calc(8*var(--p));margin-top:calc(9*var(--p))}
.tb .sp{flex:1}
.pill{border:0;border-radius:99px;height:calc(24*var(--p));padding:0 calc(11*var(--p));font:700 calc(11.5*var(--p)) var(--i);display:inline-flex;align-items:center;gap:calc(6*var(--p));white-space:nowrap}
.pill.n{background:var(--d);color:#fff}.pill.b{background:var(--l);color:#fff}
.pill.o{background:#fff;color:var(--d);border:calc(1.5*var(--p)) solid var(--d);padding:0 calc(12*var(--p));gap:calc(14*var(--p))}
.pill svg{width:calc(11*var(--p));height:calc(11*var(--p))}
.pill.n.wide{max-width:60%;overflow:hidden;text-overflow:ellipsis}
.wd{display:grid;grid-template-columns:repeat(7,1fr);margin-top:calc(12*var(--p));padding:0 calc(30*var(--p));position:relative}
.wd b{text-align:center;font:700 calc(9*var(--p)) var(--i);padding-bottom:calc(5*var(--p))}
.wd b.we{color:var(--mut)}
.dn{display:flex;justify-content:center;height:calc(38*var(--p));align-items:center;position:relative;border:0;background:none;padding:0;color:var(--d);font:500 calc(17*var(--p)) var(--i)}
.dn.we{color:var(--mut)}
.dn.s1,.dn.s2{background:#E9EDF4}
.dn.s1{border-radius:99px 0 0 99px}.dn.s2{border-radius:0 99px 99px 0}
.dn.s1 span{background:var(--l);color:#fff;width:calc(34*var(--p));height:calc(34*var(--p));border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:600}
.dn.s2{font-weight:600}
.dn.td span{box-shadow:0 0 0 calc(1.5*var(--p)) var(--l) inset;border-radius:50%;width:calc(34*var(--p));height:calc(34*var(--p));display:flex;align-items:center;justify-content:center}
.nv2{position:absolute;top:calc(-3*var(--p));border:0;background:none;color:var(--mut);font:700 calc(16*var(--p))/1 var(--i);padding:calc(2*var(--p)) calc(4*var(--p))}
.gr{flex:1;min-height:0;overflow:auto;margin:calc(6*var(--p)) calc(10*var(--p)) 0;border-top:calc(1.5*var(--p)) solid var(--line);position:relative;touch-action:pan-y}
.gh{position:sticky;top:0;z-index:3;display:grid;background:#fff;height:calc(38*var(--p));border-bottom:calc(1.5*var(--p)) solid var(--line)}
.gh b{display:flex;align-items:center;justify-content:center;font:700 calc(13*var(--p)) var(--i);border-left:calc(1.5*var(--p)) solid var(--line)}
.gh b:first-child{border:0}
.gb{position:relative;display:grid;padding-bottom:calc(110*var(--p))}
.hc{position:relative}
.hc .hh{position:absolute;right:calc(8*var(--p));transform:translateY(-50%);font:500 calc(11*var(--p)) var(--i);color:var(--mut);background:#fff;padding:0 calc(2*var(--p))}
.col{position:relative;border-left:calc(1.5*var(--p)) solid var(--line)}
.ev{position:absolute;left:calc(5*var(--p));right:calc(5*var(--p))}
.hl{position:absolute;left:0;right:0;height:0;border-top:calc(1.5*var(--p)) solid var(--line)}
.gb .hl{z-index:0}
.cd{background:#fff;border:calc(1.5*var(--p)) solid var(--d);border-radius:calc(10*var(--p));padding:calc(5*var(--p));font-size:calc(14*var(--p));display:flex;flex-direction:column;gap:calc(5*var(--p));text-align:center;position:relative}
.cd.perm{border-color:var(--l)}
.cd .tp{background:var(--l);color:#fff;font:700 1em/1 var(--i);border-radius:calc(5*var(--p));padding:.45em 0;text-transform:uppercase}
.cd .dt{background:var(--d);color:#fff;border-radius:calc(5*var(--p));font:700 .64em/1 var(--i);text-transform:uppercase;padding:.7em 0;display:flex;justify-content:center;gap:.55em}
.cd .dt i{font-style:normal;font-weight:400;border-left:1px solid #fff;padding-left:.55em;font-weight:500}
.cd h3{margin:0;font:700 .82em/1.2 var(--i);text-transform:uppercase}
.cd h3 em{font-style:normal;font-weight:400}
.cd .pl{margin:0;font:500 .6em/1.2 var(--i);display:flex;align-items:center;justify-content:center;gap:.4em}
.cd .pl svg{width:1.1em;height:1.1em;flex:none}
.cd .ab{display:flex;gap:calc(5*var(--p))}
.cd .ab button,.cd .ok{flex:1;border-radius:calc(5*var(--p));font:600 .6em/1 var(--i);padding:.95em 0;border:calc(1.2*var(--p)) solid var(--d)}
.cd .ab .y{background:var(--d);color:#fff}
.cd .ab .n{background:#fff;color:var(--l);border-color:var(--l)}
.cd .ok{width:100%;color:#fff;border:0}
.cd .ok.y{background:var(--g)}.cd .ok.n{background:var(--r)}
.cd .pn{border:calc(1.2*var(--p)) solid var(--l);border-radius:calc(5*var(--p));color:var(--l);font:500 .6em/1 var(--i);padding:.8em 0}
.cd.big{font-size:calc(14*var(--p));padding:calc(8*var(--p));gap:calc(7*var(--p));border-radius:calc(14*var(--p))}
.cd.big .dt{font-size:.66em}.cd.big h3{font-size:.84em}.cd.big .pl{font-size:.68em}
.cd.big .ab button,.cd.big .ok{font-size:.62em;padding:.9em 0}
.cd.big .tp{font-size:.72em}
.cp{font-size:calc(11*var(--p));padding:calc(6*var(--p));gap:calc(6*var(--p));border-radius:calc(12*var(--p))}
.cp .dt{font-size:calc(8.6*var(--p));border-radius:calc(6*var(--p))}
.cp h3{font-size:calc(10.6*var(--p))}
.cp .pl{font-size:calc(8.4*var(--p))}
.cp .tp{font-size:calc(9.6*var(--p));border-radius:calc(6*var(--p))}
.cp .ab button,.cp .ok,.cp .pn{font-size:calc(8.8*var(--p));border-radius:calc(6*var(--p))}
.chip{background:var(--d);color:#fff;border-radius:calc(5*var(--p));padding:calc(3*var(--p)) calc(4*var(--p));font:600 calc(8*var(--p))/1.2 var(--i);overflow:hidden;height:100%}
.chip.perm{background:var(--l)}
.h2{display:flex;justify-content:space-between;align-items:flex-end;margin-top:calc(12*var(--p));gap:calc(8*var(--p))}
.h2 h2{margin:0;font:700 calc(31*var(--p))/1 var(--t)}
.h2 .srch{max-width:calc(185*var(--p));margin-bottom:calc(3*var(--p))}
.h2 .srch input{font-size:calc(9.5*var(--p))}
.h2 button{border:0;background:none;color:var(--mut);font:500 calc(8.5*var(--p)) var(--i);text-decoration:underline;text-transform:uppercase;padding:0 0 calc(3*var(--p))}
.vis{margin:calc(10*var(--p)) 0 calc(12*var(--p));display:inline-flex;align-items:center;gap:calc(5*var(--p));background:#fff;border:0;border-radius:99px;box-shadow:0 1px calc(5*var(--p)) rgba(32,57,113,.25);color:var(--mut);font:600 calc(8*var(--p)) var(--i);text-transform:uppercase;padding:calc(5*var(--p)) calc(9*var(--p))}
.vis svg{width:calc(9*var(--p));height:calc(9*var(--p))}
.list{display:flex;flex-direction:column;gap:calc(9*var(--p))}
.gt{font:700 calc(13*var(--p)) var(--i);margin:calc(8*var(--p)) 0 calc(-2*var(--p));text-transform:uppercase}
.em{color:var(--mut);font:500 calc(12*var(--p)) var(--i);padding:calc(20*var(--p)) 0;text-align:center}
.nav{position:absolute;left:calc(10*var(--p));right:calc(10*var(--p));bottom:calc(10*var(--p));background:var(--d);border-radius:calc(26*var(--p));height:calc(60*var(--p));display:grid;grid-template-columns:repeat(5,1fr);padding:calc(8*var(--p)) calc(8*var(--p));gap:calc(2*var(--p));z-index:20;margin-bottom:env(safe-area-inset-bottom,0px)}
.nav button{border:0;background:none;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(4*var(--p));font:700 calc(8.5*var(--p)) var(--i);border-radius:calc(18*var(--p));padding:0}
.nav button svg{width:calc(20*var(--p));height:calc(20*var(--p));fill:currentColor}
.nav button.on{background:#fff;color:var(--d)}

.ov{position:absolute;inset:0;background:rgba(15,26,51,.45);z-index:30;display:flex;align-items:flex-end}
.sheet{background:#fff;width:100%;border-radius:calc(22*var(--p)) calc(22*var(--p)) 0 0;padding:calc(18*var(--p)) calc(20*var(--p)) calc(24*var(--p));display:flex;flex-direction:column;gap:calc(8*var(--p));max-height:85%;overflow:auto}
.sheet h4{margin:0 0 calc(4*var(--p));font:700 calc(20*var(--p)) var(--t)}
.sheet .op{border:calc(1.5*var(--p)) solid var(--line);background:#fff;color:var(--d);border-radius:calc(12*var(--p));padding:calc(11*var(--p)) calc(14*var(--p));font:600 calc(13*var(--p)) var(--i);text-align:left;display:flex;justify-content:space-between}
.sheet .op[aria-checked=true]{background:var(--d);color:#fff;border-color:var(--d)}
.sheet label{font:600 calc(10*var(--p)) var(--i);color:var(--mut);text-transform:uppercase;margin-top:calc(4*var(--p))}
.sheet input,.sheet select{font:500 calc(14*var(--p)) var(--i);border:calc(1.5*var(--p)) solid var(--line);border-radius:calc(10*var(--p));padding:calc(9*var(--p)) calc(10*var(--p));color:var(--d);background:#fff;width:100%}
.sheet .row{display:flex;gap:calc(8*var(--p))}.sheet .row>div{flex:1}
.sheet .go{background:var(--l);color:#fff;border:0;border-radius:calc(12*var(--p));padding:calc(12*var(--p));font:700 calc(13*var(--p)) var(--i);margin-top:calc(8*var(--p))}
.sheet .cl{background:none;border:0;color:var(--mut);font:600 calc(12*var(--p)) var(--i);padding:calc(6*var(--p))}
.sr{display:flex;gap:calc(8*var(--p));margin-top:calc(12*var(--p))}
.sr input{flex:1;border:calc(2*var(--p)) solid var(--d);border-radius:99px;padding:calc(8*var(--p)) calc(14*var(--p));font:500 calc(13*var(--p)) var(--i);color:var(--d)}
.mg{display:grid;grid-template-columns:repeat(7,1fr);margin:calc(6*var(--p)) calc(10*var(--p)) 0;gap:calc(2*var(--p))}
.mg .dn{height:calc(36*var(--p));font-size:calc(14*var(--p));border-radius:calc(10*var(--p))}
.mg .dn.dot::after{content:"";position:absolute;bottom:calc(3*var(--p));width:calc(4*var(--p));height:calc(4*var(--p));border-radius:50%;background:var(--l)}
.mg .dn.s1,.mg .dn.s2{border-radius:calc(10*var(--p));background:#E9EDF4}
.mg .dn.s1 span{border-radius:50%}
.mh{position:relative;margin:calc(10*var(--p)) calc(50*var(--p)) 0;font:700 calc(15*var(--p)) var(--i);text-align:center;text-transform:capitalize}
.mw{display:grid;grid-template-columns:repeat(7,1fr);margin:calc(8*var(--p)) calc(10*var(--p)) 0;text-align:center;font:700 calc(8*var(--p)) var(--i)}
.mw span.we{color:var(--mut)}
.sr2{padding:0 calc(30*var(--p));margin-top:calc(12*var(--p));overflow:auto;flex:1;padding-bottom:calc(90*var(--p));min-height:0}

.dv{flex:1;min-height:0;overflow-y:auto;padding:0 calc(30*var(--p)) calc(40*var(--p))}
.dv .tl{border-top:calc(1.8*var(--p)) solid var(--d);margin-top:calc(25*var(--p));padding:calc(6*var(--p)) 0 calc(7*var(--p))}
.dv .tl button{border:0;background:none;color:var(--d);font:700 calc(9*var(--p)) var(--i);text-transform:uppercase;padding:0;display:flex;align-items:center;gap:calc(3*var(--p))}
.dv .tl svg{width:calc(9*var(--p));height:calc(9*var(--p))}
.fc{border:calc(1.8*var(--p)) solid var(--d);border-radius:calc(16*var(--p));padding:calc(8*var(--p));display:flex;flex-direction:column;gap:calc(7*var(--p));text-align:center}
.fc .bar{background:var(--l);color:#fff;border-radius:calc(9*var(--p));padding:calc(8*var(--p)) 0;font:600 calc(17*var(--p))/1.1 var(--i);text-transform:uppercase}
.fc .bar i{font-style:normal;font-weight:400;border-left:calc(1.5*var(--p)) solid #fff;margin-left:calc(6*var(--p));padding-left:calc(6*var(--p))}
.fc .bar.tb2{font-size:calc(22*var(--p));font-weight:700;padding:calc(10*var(--p)) 0}
.fc .bar.nv{background:var(--d);font-size:calc(15*var(--p))}
.fc h2{margin:calc(2*var(--p)) 0 0;font:700 calc(21*var(--p))/1.15 var(--i);text-transform:uppercase}
.fc h2 em{font-style:normal;font-weight:400}
.fc .lieu{font:500 calc(13*var(--p)) var(--i);color:var(--d);text-decoration:underline;text-underline-offset:calc(3*var(--p));margin:calc(2*var(--p)) auto calc(4*var(--p))}
.fc .ab{display:flex;gap:calc(6*var(--p))}
.fc .ab button,.fc .ok{flex:1;border-radius:calc(9*var(--p));height:calc(50*var(--p));font:500 calc(14*var(--p)) var(--i);border:calc(1.5*var(--p)) solid var(--d)}
.fc .ab .y{background:var(--d);color:#fff}.fc .ab .n{background:#fff;color:var(--l);border-color:var(--l)}
.fc .ok{flex:none;width:100%;border:0;color:#fff}.fc .ok.y{background:var(--g)}.fc .ok.n{background:#E9414A}
.fc .pn{border:calc(1.5*var(--p)) solid var(--l);color:var(--l);border-radius:calc(9*var(--p));padding:calc(11*var(--p)) 0;font:500 calc(14*var(--p)) var(--i)}
.chs{display:flex;gap:calc(6*var(--p));margin-top:calc(12*var(--p));flex-wrap:wrap}
.chs span{background:#fff;border-radius:99px;box-shadow:0 1px calc(6*var(--p)) rgba(32,57,113,.28);padding:calc(6*var(--p)) calc(11*var(--p));font:700 calc(12*var(--p)) var(--i)}
.chs b{color:var(--g)}
.ph2{display:flex;justify-content:space-between;align-items:center;margin-top:calc(12*var(--p))}
.ph2 h3{margin:0;font:600 calc(20*var(--p)) var(--i)}
.pl2{position:relative;border:0;width:calc(24*var(--p));height:calc(24*var(--p));border-radius:50%;background:var(--d);color:#fff;display:flex;align-items:center;justify-content:center}
.pl2 svg{width:calc(12.5*var(--p));height:calc(12.5*var(--p))}
.pl2 i{position:absolute;top:calc(-1*var(--p));right:calc(-2*var(--p));width:calc(6*var(--p));height:calc(6*var(--p));border-radius:50%;background:var(--g)}
.tl2{display:flex;gap:calc(7*var(--p));margin-top:calc(12*var(--p))}
.tl2 button{flex:1;border:calc(1.5*var(--p)) solid var(--l);background:#fff;border-radius:calc(10*var(--p));height:calc(59*var(--p));color:var(--l);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2*var(--p));font:500 calc(8.5*var(--p)) var(--i);padding:0}
.tl2 button b{font:700 calc(24*var(--p))/1 var(--i)}
.tl2 button u{display:block;width:calc(20*var(--p));height:calc(2*var(--p));border-radius:calc(2*var(--p));margin-top:calc(1*var(--p))}
.tl2 button.on{color:#fff;border-color:transparent}
.tl2 button.on u{display:none}
.lb{margin-top:calc(8*var(--p));border-radius:calc(12*var(--p));color:#fff;text-align:center;font:700 calc(15*var(--p)) var(--i);padding:calc(9*var(--p)) 0}
.lb span{font-weight:400}
.pp{display:flex;align-items:center;gap:calc(6*var(--p));padding:calc(6*var(--p)) 0;position:relative}
.pp .ava{width:calc(42*var(--p));height:calc(42*var(--p));flex:none;border-radius:50%;background:#5C7AC0;border:calc(1.5*var(--p)) solid #D5DEEE;color:#fff;font:700 calc(13*var(--p)) var(--i);display:flex;align-items:center;justify-content:center}
.pp .dot{width:calc(7*var(--p));height:calc(7*var(--p));border-radius:50%;flex:none}
.pp .nmx{font:400 calc(17*var(--p)) var(--i);flex:1;min-width:0;overflow-wrap:anywhere}
.pp .mo2{display:block;font:500 calc(11*var(--p))/1.3 var(--i);color:var(--mut);margin-top:calc(2*var(--p))}
.pp .q{width:calc(18*var(--p));height:calc(18*var(--p));border-radius:50%;background:var(--d);color:#fff;border:0;font:700 calc(10*var(--p)) var(--i);padding:0}
.pp .mo{position:absolute;right:calc(26*var(--p));font:500 calc(11*var(--p)) var(--i);color:var(--mut)}
.ct{display:flex;align-items:center;gap:calc(8*var(--p));margin-top:calc(10*var(--p))}
.ct .ava{width:calc(42*var(--p));height:calc(42*var(--p));border-radius:50%;background:#5C7AC0;border:calc(1.5*var(--p)) solid #D5DEEE;color:#fff;font:700 calc(13*var(--p)) var(--i);display:flex;align-items:center;justify-content:center}
.ct div b{font:400 calc(18*var(--p))/1.2 var(--i);display:block}
.ct .rl{margin-top:calc(3*var(--p))}.ct div b{line-height:1}
.ct .pl2{margin-left:auto;width:calc(28*var(--p));height:calc(28*var(--p))}
.toast{position:absolute;left:calc(30*var(--p));right:calc(30*var(--p));bottom:calc(24*var(--p));background:var(--d);color:#fff;border-radius:calc(14*var(--p));padding:calc(12*var(--p)) calc(14*var(--p));font:600 calc(12*var(--p)) var(--i);z-index:40;text-align:center}
.yr{align-items:start;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(10*var(--p)) calc(8*var(--p));margin:calc(10*var(--p)) calc(14*var(--p));overflow:auto;flex:1;padding-bottom:calc(90*var(--p))}
.ym{border:0;background:none;padding:0;color:var(--d);text-align:left}
.ym b{display:block;font:700 calc(11*var(--p)) var(--i);text-transform:capitalize;margin-bottom:calc(3*var(--p))}
.ym div{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(1*var(--p))}
.ym i{font:500 calc(6.4*var(--p))/1.7 var(--i);font-style:normal;text-align:center;border-radius:50%}
.ym i.e{color:var(--l);font-weight:700}
.ym i.t{background:var(--l);color:#fff}
.rb{margin-left:auto;border:0;border-radius:99px;font:700 calc(8.5*var(--p)) var(--i);padding:calc(5*var(--p)) calc(10*var(--p));box-shadow:0 1px calc(5*var(--p)) rgba(32,57,113,.25);color:#fff}
.rb.g{background:var(--g)}.rb.k{background:#1B1B1B}.rb.o{background:#F28A0D}
.pp .q{margin-left:calc(6*var(--p))}

.pfb{flex:1;display:flex;align-self:stretch;align-items:stretch;min-width:0;border:0;background:none;padding:0;text-align:left;color:inherit}
.pf .av{margin:calc(-1.8*var(--p)) 0 calc(-1.8*var(--p)) calc(-1.8*var(--p));align-self:stretch;height:auto}
.pfb .nm{justify-content:center}
.pfp{width:calc(31*var(--p));height:calc(31*var(--p));border-radius:50%;background-size:cover;background-position:center;border:calc(1.5*var(--p)) solid #fff}
.pf .nm b{font:700 calc(17*var(--p))/1 var(--i)}
.rl{display:block;font:500 calc(8.6*var(--p))/1 var(--i);color:#4F9BEE;text-transform:uppercase;letter-spacing:.05em;margin-top:calc(3*var(--p))}
.pf{align-items:stretch;min-height:calc(46*var(--p));border-radius:calc(26*var(--p));padding:0 calc(3*var(--p)) 0 0}
.pfb{margin:calc(-1.8*var(--p)) 0 calc(-1.8*var(--p)) calc(-1.8*var(--p));align-self:stretch;align-items:stretch}
.pf .av{margin:0;width:calc(50*var(--p));border-radius:calc(26*var(--p)) calc(14*var(--p)) calc(14*var(--p)) calc(26*var(--p));align-self:stretch;height:auto}
.pf .nm{padding:calc(4*var(--p)) calc(8*var(--p)) calc(4*var(--p)) calc(12*var(--p));justify-content:center}
.pfp{width:calc(36*var(--p));height:calc(36*var(--p));display:block;flex:none}
.pf .sw{align-self:stretch;height:auto;margin:calc(3*var(--p)) 0;border-radius:calc(22*var(--p));padding:0 calc(10*var(--p))}
.bdg.b{background:var(--l);font-size:calc(6.4*var(--p))}

.mrow{display:flex;align-items:center;gap:calc(8*var(--p));padding:calc(2*var(--p)) 0;margin-top:calc(2*var(--p))}
.mrow .ava{width:calc(42*var(--p));height:calc(42*var(--p));border-radius:50%;background-size:cover;background-position:center;border:calc(1.5*var(--p)) solid #D5DEEE;flex:none}
.mi{flex:1;min-width:0}.mi b{display:block;font:500 calc(15.5*var(--p))/1 var(--i)}
.mi .rl{display:block;margin-top:calc(3*var(--p))}
.mi i{font:700 calc(6.4*var(--p))/1 var(--i);font-style:normal;text-transform:uppercase;background:var(--l);color:#fff;border-radius:calc(5*var(--p));padding:calc(3*var(--p)) calc(5*var(--p))}
.mi i.dk{background:var(--d)}
.pl2.bg{width:calc(28*var(--p));height:calc(28*var(--p));margin-left:auto;flex:none}
.pl2.bg svg{width:calc(14*var(--p));height:calc(14*var(--p))}
.pl2.plus{width:calc(28*var(--p));height:calc(28*var(--p));flex:none}
.pl2.plus svg{width:calc(12*var(--p));height:calc(12*var(--p))}
.pill.o.ic{width:calc(24*var(--p));padding:0;justify-content:center}
.srch{display:flex;align-items:center;gap:calc(6*var(--p));margin-left:auto;border:calc(1.5*var(--p)) solid var(--d);border-radius:99px;height:calc(24*var(--p));padding:0 calc(10*var(--p));flex:1;min-width:0;max-width:calc(190*var(--p));background:#fff}
.srch input{border:0;outline:0;background:none;font:500 calc(10.5*var(--p)) var(--i);color:var(--d);flex:1;min-width:0;width:100%}
.srch span{display:flex}.srch svg{width:calc(11*var(--p));height:calc(11*var(--p));color:var(--d)}
.srch.wide2{max-width:none;margin-top:calc(8*var(--p));height:calc(28*var(--p))}
.cvl{margin-top:calc(10*var(--p))}
.cv{display:flex;gap:calc(10*var(--p));width:100%;border:0;background:none;border-bottom:calc(1.5*var(--p)) solid #9AA9CF;padding:calc(10*var(--p)) 0;text-align:left;color:var(--d)}
.cv .cl{width:calc(56*var(--p));height:calc(56*var(--p));border-radius:50%;border:calc(1.5*var(--p)) solid var(--l);flex:none;background:#fff;padding:calc(2*var(--p))}
.ct2{flex:1;min-width:0}
.r1{display:flex;justify-content:space-between;align-items:baseline;gap:calc(6*var(--p))}
.r1 b{font:700 calc(17*var(--p)) var(--i);text-transform:uppercase}
.r1 u{font:500 calc(8.5*var(--p)) var(--i);color:#9DB8E8;flex:none}.r1 u.g{color:var(--g)}
.r2{font:700 calc(12.5*var(--p)) var(--i);color:var(--l);text-transform:uppercase;margin-top:calc(1*var(--p))}
.r3{display:flex;gap:calc(6*var(--p));align-items:center;font:500 calc(11*var(--p)) var(--i);color:#5D6F95;margin-top:calc(3*var(--p))}
.r3 span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r3 i{font:700 calc(8.5*var(--p)) var(--i);font-style:normal;background:var(--g);color:#fff;border-radius:50%;min-width:calc(17*var(--p));height:calc(17*var(--p));display:flex;align-items:center;justify-content:center;flex:none}
.dv.chat{display:flex;flex-direction:column;overflow:hidden;padding-bottom:calc(12*var(--p))}
.chh{margin-top:calc(8*var(--p))}.chh b{display:block;font:700 calc(20*var(--p)) var(--i);text-transform:uppercase}.chh span{font:700 calc(11*var(--p)) var(--i);color:var(--l);text-transform:uppercase}
.msgs{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:calc(8*var(--p));padding:calc(12*var(--p)) 0}
.bb{max-width:82%;align-self:flex-start;background:var(--soft);border-radius:calc(14*var(--p));padding:calc(8*var(--p)) calc(11*var(--p));font:500 calc(12*var(--p))/1.4 var(--i)}
.bb small{display:block;font:700 calc(9*var(--p)) var(--i);color:var(--l);margin-bottom:calc(2*var(--p))}
.bb.me{align-self:flex-end;background:var(--d);color:#fff}
.cin{display:flex;gap:calc(8*var(--p));align-items:center;padding-top:calc(6*var(--p))}
.cin input{flex:1;min-width:0;border:calc(1.5*var(--p)) solid var(--d);border-radius:99px;padding:calc(9*var(--p)) calc(14*var(--p));font:500 calc(12*var(--p)) var(--i);color:var(--d)}
.mg2{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--p));margin-top:calc(10*var(--p))}
.mc{background:var(--d);border-radius:calc(14*var(--p));padding:calc(5*var(--p));display:flex;flex-direction:column;gap:calc(4*var(--p));text-align:center;min-width:0}
.pl3{background:#fff;border-radius:calc(6*var(--p));padding:calc(5*var(--p)) calc(3*var(--p));font:500 calc(9.6*var(--p))/1.25 var(--i);color:var(--d)}
.pl3 b:first-child{color:var(--l)}.pl3 em{font-style:normal;font-weight:400}
.dt2{margin:0;color:#fff;font:700 calc(8.6*var(--p))/1.2 var(--i);padding:calc(1*var(--p))}
.dt2 i{font-style:normal;font-weight:400;border-left:1px solid #fff;padding-left:calc(4*var(--p));margin-left:calc(3*var(--p))}
.pl4{margin:0;background:var(--l);border-radius:calc(6*var(--p));padding:calc(5*var(--p));display:flex;align-items:center;justify-content:center;gap:calc(4*var(--p));color:#fff;font:500 calc(7*var(--p))/1.25 var(--i)}
.pl4 svg{width:calc(8*var(--p));height:calc(8*var(--p));flex:none}
.rc{border:calc(1.5*var(--p)) solid var(--d);border-radius:calc(14*var(--p));padding:calc(5*var(--p));text-align:center;background:#fff;min-width:0}
.rc b{display:block;background:var(--d);color:#fff;border-radius:calc(6*var(--p));font:700 calc(13*var(--p)) var(--i);padding:calc(5*var(--p))}
.sc2{display:flex;justify-content:center;gap:calc(10*var(--p));font:700 calc(30*var(--p))/1.2 var(--i);margin:calc(6*var(--p)) 0 calc(2*var(--p))}
.sc2.w{color:var(--g)}.sc2.l{color:#E9414A}.sc2.d{color:var(--mut)}
.rc p{margin:0 0 calc(3*var(--p));font:700 calc(10.5*var(--p)) var(--i)}.rc p em{font-weight:400;font-style:normal}
.shp{margin-top:calc(12*var(--p));background:var(--l);border-radius:calc(20*var(--p));padding:calc(5*var(--p));display:flex;gap:calc(6*var(--p))}
.shp button{flex:1;height:calc(50*var(--p));border:0;border-radius:calc(15*var(--p));background-size:cover;background-position:center;color:#fff;font:700 calc(12*var(--p)) var(--i);text-transform:uppercase;text-shadow:0 1px calc(6*var(--p)) rgba(0,0,0,.7)}
.ac{display:flex;gap:calc(10*var(--p));width:100%;border:0;background:var(--d);border-radius:calc(20*var(--p));padding:calc(5*var(--p));color:#fff;text-align:left;align-items:center}
.ph3{flex:none;width:calc(118*var(--p));height:calc(80*var(--p));border-radius:calc(15*var(--p));background-size:cover;background-position:center}
.tx{display:flex;flex-direction:column;gap:calc(5*var(--p));align-items:flex-start;min-width:0}
.tx b{font:700 calc(11*var(--p))/1.15 var(--i);text-transform:uppercase}
.tx i{font:600 calc(7.5*var(--p)) var(--i);font-style:normal;background:var(--l);border-radius:99px;padding:calc(3*var(--p)) calc(7*var(--p))}
.tx u{display:block;width:70%;height:calc(1.5*var(--p));background:#fff}
.tx small{font:500 calc(7.5*var(--p)) var(--i);text-decoration:underline}
.dv.art,.dv.prf{background:var(--d);color:#fff}
.art .tl,.prf .tl{border-top:0;margin-top:0;padding-top:calc(24*var(--p))}
.art .tl button,.prf .tl button{color:#fff}
.art h1{margin:calc(14*var(--p)) 0 0;font:700 calc(26*var(--p))/1.08 var(--i)}
.meta{display:flex;gap:calc(8*var(--p));margin:calc(12*var(--p)) 0;align-items:center;flex-wrap:wrap}
.meta i{font:600 calc(8.5*var(--p)) var(--i);font-style:normal;background:var(--l);border-radius:99px;padding:calc(4*var(--p)) calc(9*var(--p))}
.meta a{border:calc(1.5*var(--p)) solid #fff;border-radius:99px;padding:calc(3*var(--p)) calc(9*var(--p));font:600 calc(8.5*var(--p)) var(--i);color:#fff;text-decoration:none;text-transform:uppercase}
.art img{width:100%;border-radius:calc(16*var(--p));display:block}
.art hr{border:0;height:calc(2*var(--p));background:var(--l);margin:calc(14*var(--p)) 0}
.art p{font:500 calc(11.5*var(--p))/1.6 var(--i);margin:0 0 calc(10*var(--p))}
.prf{display:flex;flex-direction:column;align-items:center;text-align:center}
.prf .tl{align-self:stretch;text-align:left}
.bigav{flex:none;aspect-ratio:1/1;width:calc(140*var(--p));height:calc(140*var(--p));border-radius:50%;border:calc(2*var(--p)) solid #fff;background-size:cover;background-position:center;margin-top:calc(12*var(--p))}
.prf h1{margin:calc(14*var(--p)) 0 calc(8*var(--p));font:700 calc(28*var(--p)) var(--i)}
.cb{background:var(--l);border-radius:calc(8*var(--p));font:500 calc(12*var(--p)) var(--i);padding:calc(6*var(--p)) calc(14*var(--p));text-transform:uppercase}
.lo{background:none;border:0;color:#fff;text-decoration:underline;font:500 calc(8*var(--p)) var(--i);text-transform:uppercase;margin:calc(10*var(--p)) 0 calc(16*var(--p))}
.ea{width:100%;border:0;border-radius:calc(12*var(--p));padding:calc(14*var(--p)) calc(16*var(--p));color:#fff;font:700 calc(13*var(--p)) var(--i);text-align:left;text-transform:uppercase}
.ea.o{background:#F28A0D}.ea.b{background:var(--l)}
.pc{margin-top:calc(16*var(--p));width:100%;background:#fff;border-radius:calc(20*var(--p));height:calc(190*var(--p));display:flex;align-items:center;justify-content:center;overflow:hidden}
.pc img{width:75%}
.wwrap{position:relative}
.wband{position:absolute;left:0;right:0;top:calc(44*var(--p));height:calc(44*var(--p));border:calc(1.8*var(--p)) solid var(--d);border-radius:calc(12*var(--p));pointer-events:none;z-index:1}
.wheel{height:calc(132*var(--p));overflow-y:auto;scroll-snap-type:y mandatory;padding:calc(44*var(--p)) 0;scrollbar-width:none;background:var(--soft);border-radius:calc(14*var(--p))}
.wheel::-webkit-scrollbar{display:none}
.wr{display:flex;justify-content:space-between;align-items:center;width:100%;height:calc(44*var(--p));scroll-snap-align:center;border:0;background:none;padding:0 calc(18*var(--p));font:600 calc(14*var(--p)) var(--i);color:#8A94A8;text-align:left}
.wr.on{color:var(--d);font-weight:700}
@media(prefers-reduced-motion:no-preference){.sheet{animation:up .2s ease-out}@keyframes up{from{transform:translateY(30px)}}}
/* admin général */
.hx{margin-left:auto;width:calc(118*var(--p));height:calc(44*var(--p));border-radius:calc(14*var(--p));background:#fff;overflow:hidden;position:relative;border:0;padding:0;display:block;flex:none}
button.hx{cursor:pointer}
.hx .trk{display:flex;width:max-content;height:100%;animation:mq 9s linear infinite}
.hx .trk img{width:calc(72*var(--p));height:calc(44*var(--p));object-fit:contain;padding:calc(6*var(--p)) calc(8*var(--p));box-sizing:border-box;flex:none;display:block}
.hx .one{width:100%;height:100%;object-fit:contain;padding:calc(5*var(--p)) calc(8*var(--p));box-sizing:border-box;display:block}
.hxp{width:calc(118*var(--p));height:calc(44*var(--p));border-radius:calc(14*var(--p));background:#fff;border:calc(1*var(--p)) solid var(--line);overflow:hidden}.hxp img{width:100%;height:100%;object-fit:contain;padding:calc(5*var(--p)) calc(8*var(--p));box-sizing:border-box;display:block}
@keyframes mq{to{transform:translateX(-50%)}}
.hd h1{min-width:0;white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:calc(6*var(--p))}
.chip{border:calc(1.5*var(--p)) solid var(--line);background:#fff;color:var(--d);border-radius:99px;padding:calc(6*var(--p)) calc(11*var(--p));font:600 calc(11*var(--p)) var(--i)}
.chip.on{background:var(--d);color:#fff;border-color:var(--d)}
.sheet textarea{font:500 calc(13*var(--p)) var(--i);border:calc(1.5*var(--p)) solid var(--line);border-radius:calc(10*var(--p));padding:calc(9*var(--p)) calc(10*var(--p));color:var(--d);background:#fff;width:100%;min-height:calc(80*var(--p));resize:vertical}
.sheet .code{font:700 calc(26*var(--p))/1 'Courier New',monospace;letter-spacing:.12em;color:var(--l);text-align:center;background:var(--soft);border-radius:calc(12*var(--p));padding:calc(14*var(--p))}
.sheet .er{color:var(--r);font:600 calc(11*var(--p)) var(--i)}
.sheet p.nt{margin:0;font:500 calc(11*var(--p))/1.35 var(--i);color:var(--mut)}
.sheet label.op{text-transform:none;color:var(--d);margin:0;font:600 calc(13*var(--p)) var(--i);cursor:pointer}
.sheet input[type=file]{display:none}
.sheet .dn{background:none;border:0;color:var(--r);font:600 calc(12*var(--p)) var(--i);padding:calc(6*var(--p))}
.mod{border:calc(1.5*var(--p)) solid var(--d);background:#fff;color:var(--d);border-radius:99px;font:700 calc(9.5*var(--p)) var(--i);height:calc(22*var(--p));padding:0 calc(11*var(--p));flex:none}
.pill.o.dl{color:var(--l);border-color:var(--l);padding:0 calc(12*var(--p));gap:0}
.ma{background:var(--d);border-radius:calc(14*var(--p));padding:calc(5*var(--p));display:flex;flex-direction:column;gap:calc(4*var(--p));text-align:center;min-width:0}
.ma .t{background:#fff;border-radius:calc(8*var(--p));padding:calc(5*var(--p)) calc(3*var(--p));font:500 calc(9.5*var(--p))/1.2 var(--i);color:var(--l)}
.ma .t b{font-weight:800}.ma .t em{font-style:normal;font-weight:400}
.ma .d{color:#fff;font:700 calc(8.5*var(--p))/1.3 var(--i);text-transform:uppercase;padding:calc(2*var(--p)) 0}
.ma .d i{font-style:normal;font-weight:400}
.ma .lp{background:var(--l);color:#fff;border-radius:calc(6*var(--p));font:500 calc(6.6*var(--p)) var(--i);padding:calc(4*var(--p)) calc(4*var(--p));display:flex;align-items:center;justify-content:center;gap:calc(3*var(--p));min-width:0}
.ma .lp svg{width:calc(8*var(--p));height:calc(8*var(--p));flex:none}.ma .lp span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ma .sc3{background:var(--l);color:#fff;border-radius:calc(6*var(--p));font:800 calc(14*var(--p)) var(--i);padding:calc(3*var(--p))}
.ma .mb{border:calc(1.5*var(--p)) solid #fff;background:none;color:#fff;border-radius:calc(8*var(--p));font:700 calc(8.5*var(--p)) var(--i);padding:calc(4*var(--p))}
.h2 button.pl2{background:var(--l);color:#fff;text-decoration:none;padding:0;width:calc(26*var(--p));height:calc(26*var(--p));margin-bottom:0;flex:none}
.h2 button.pl2 svg{width:calc(12*var(--p));height:calc(12*var(--p))}
.prt{display:flex;align-items:center;gap:calc(8*var(--p))}
.prt img{width:calc(64*var(--p));height:calc(30*var(--p));object-fit:cover;border-radius:calc(6*var(--p));border:calc(1*var(--p)) solid var(--line);flex:none}
.prt span{flex:1;font:600 calc(12*var(--p)) var(--i);color:var(--d);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prt button{border:calc(1.5*var(--p)) solid var(--line);background:#fff;color:var(--d);border-radius:50%;width:calc(26*var(--p));height:calc(26*var(--p));font:700 calc(12*var(--p)) var(--i);flex:none;padding:0}
.prt button.on{background:var(--d);color:#fff;border-color:var(--d)}
.tms{margin:calc(8*var(--p)) 0 0;font:600 calc(9.5*var(--p)) var(--i);color:var(--l);text-transform:uppercase;letter-spacing:.05em}
.gh{display:flex;align-items:center;justify-content:space-between;margin-top:calc(8*var(--p))}.gh .tms{margin:0}
.ro{padding:calc(12*var(--p)) calc(20*var(--p));text-align:center;background:#EAF1FB;margin:0}
.bigav.sm{width:calc(110*var(--p));height:calc(110*var(--p))}
.ea.w{background:#fff;color:var(--d);text-align:center;margin-top:calc(6*var(--p));padding:calc(11*var(--p)) calc(16*var(--p));width:auto;display:inline-block;cursor:pointer;font-size:calc(11*var(--p))}
.ea.w input{display:none}
.pe label:not(.ea){align-self:stretch;text-align:left;font:600 calc(10*var(--p)) var(--i);text-transform:uppercase;color:#9FC4F5;margin-top:calc(12*var(--p))}
.pe input{align-self:stretch;width:100%;font:500 calc(14*var(--p)) var(--i);border:0;border-radius:calc(10*var(--p));padding:calc(10*var(--p)) calc(12*var(--p));color:var(--d);background:#fff;margin-top:calc(4*var(--p))}
.pe .er{color:#FFB4B7;font:600 calc(11*var(--p)) var(--i);margin-top:calc(8*var(--p))}

/* ---- adaptations appli réelle ---- */
html,body{height:100dvh}
@media(max-width:519px){.ph{max-height:none}}
.lgn{background:var(--l);justify-content:center;overflow-y:auto}
.lgb{padding:calc(24*var(--p)) calc(30*var(--p));display:flex;flex-direction:column;align-items:center;color:#fff}
.lgb img{width:calc(76*var(--p));height:calc(76*var(--p));border-radius:50%;background:#fff}
.lgb h1{margin:calc(14*var(--p)) 0 0;font:700 calc(40*var(--p))/1 var(--t)}
.lgb p{margin:calc(8*var(--p)) 0 calc(14*var(--p));font:500 calc(12*var(--p))/1.4 var(--i);text-align:center;color:#DCE9FC}
.lgb form{width:100%;display:flex;flex-direction:column}
.lgb label{font:600 calc(10*var(--p)) var(--i);text-transform:uppercase;color:#9FC4F5;margin-top:calc(10*var(--p))}
.lgb input{font:500 calc(15*var(--p)) var(--i);border:0;border-radius:calc(10*var(--p));padding:calc(11*var(--p)) calc(12*var(--p));color:var(--d);background:#fff;margin-top:calc(4*var(--p));width:100%}
.lgb .er{color:#FFD6D8;font:600 calc(12*var(--p)) var(--i);margin-top:calc(10*var(--p))}
.lgb .go{margin-top:calc(16*var(--p));background:var(--d);color:#fff;border:0;border-radius:calc(12*var(--p));padding:calc(13*var(--p));font:700 calc(14*var(--p)) var(--i)}
.dmo{margin-top:calc(18*var(--p));display:flex;flex-direction:column;gap:calc(6*var(--p));width:100%}
.dmo small{color:#DCE9FC;font:500 calc(10*var(--p))/1.3 var(--i)}
.dmo button{background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:calc(10*var(--p));padding:calc(9*var(--p));font:600 calc(11*var(--p)) var(--i);text-align:left}
.un{margin-top:calc(14*var(--p));padding:calc(12*var(--p)) 0}
.un h3{margin:0 0 calc(6*var(--p));font:700 calc(22*var(--p)) var(--t)}
.un .nt{margin:0 0 calc(8*var(--p));font:500 calc(12*var(--p))/1.4 var(--i);color:var(--mut)}
.nt{font:500 calc(12*var(--p))/1.4 var(--i);color:var(--mut);margin:calc(8*var(--p)) 0}
.pf .nm .rl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}