/* Application RAC : ouverture animée, aide à l'installation, notifications */
.intro-app{position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center;transition:opacity .7s ease}
.intro-app{overflow:hidden}
.intro-app video{width:100%;height:100%;object-fit:contain}
@media (orientation:portrait){.intro-app video{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:118vw;max-width:none;height:auto}.intro-app::before,.intro-app::after{content:'';position:absolute;left:0;right:0;height:16vw;z-index:1;pointer-events:none}.intro-app::before{top:calc(50% - 33.2vw - 1px);background:linear-gradient(#000,rgba(0,0,0,0))}.intro-app::after{top:calc(50% + 33.2vw - 16vw + 1px);background:linear-gradient(rgba(0,0,0,0),#000)}.intro-app button{z-index:2}}
.intro-app.fin{opacity:0;pointer-events:none}
.intro-app button{position:absolute;right:16px;bottom:calc(20px + env(safe-area-inset-bottom,0px));min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.45);color:#fff;font:600 13px Inter,system-ui,sans-serif}
.app-bandeau{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;gap:12px;padding:12px 12px 12px 14px;border-radius:18px;background:rgba(14,14,18,.96);border:1px solid rgba(242,190,43,.4);box-shadow:0 20px 40px -10px rgba(0,0,0,.7);color:#F7F8FC;font:500 14px/1.35 Inter,system-ui,sans-serif;animation:app-monte .5s ease}
.app-bandeau img{width:44px;height:44px;border-radius:11px;flex:none}
.app-bandeau b{display:block;font-size:14.5px}
.app-bandeau small{color:#A9AEB8;font-size:12.5px}
.app-bandeau .go{margin-left:auto;flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:0;background:#F2BE2B;color:#141414;font:700 13px Inter,system-ui,sans-serif}
.app-bandeau .x{flex:none;width:32px;height:32px;border:0;background:none;color:#A9AEB8;font-size:20px;line-height:1}
@keyframes app-monte{from{transform:translateY(20px);opacity:0}}
.app-aide{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.72);display:grid;align-items:end;padding:12px}
.app-aide .boite{background:#111216;border:1px solid rgba(255,255,255,.12);border-radius:22px;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));color:#F7F8FC;font:400 15px/1.5 Inter,system-ui,sans-serif;max-width:520px;margin:0 auto;width:100%}
.app-aide h3{font:800 20px/1.2 Archivo,Inter,sans-serif;margin:0 0 14px}
.app-aide ol{margin:0 0 16px;padding-left:22px;display:grid;gap:10px}
.app-aide .ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:#2A2B31;vertical-align:middle;margin:0 2px}
.app-aide button{width:100%;min-height:48px;border-radius:999px;border:0;background:#F2BE2B;color:#141414;font:700 15px Inter,system-ui,sans-serif}
.notif-carte{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:18px 20px;border-radius:20px;border:1px solid rgba(242,190,43,.35);background:rgba(242,190,43,.06)}
.notif-carte b{display:block;font-size:16px}
.notif-carte span{color:#A9AEB8;font-size:14px}
.notif-carte .btn{margin-left:auto}
.notif-carte[hidden]{display:none}

/* application installée : le menu passe sous la barre d'état de l'iPhone (heure, réseau, batterie) */
.nav{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.nav-bas,.mbar{padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}

.notif-invite{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.7);display:grid;align-items:end;padding:12px}
.notif-invite .boite{background:#111216;border:1px solid rgba(242,190,43,.4);border-radius:22px;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));color:#F7F8FC;font:400 15px/1.5 Inter,system-ui,sans-serif;max-width:520px;margin:0 auto;width:100%;text-align:center;animation:app-monte .45s ease}
.notif-invite .cloche{font-size:40px;line-height:1}
.notif-invite h3{font:800 21px/1.2 Archivo,Inter,sans-serif;margin:10px 0 8px}
.notif-invite p{margin:0 0 18px;color:#C9CCD3}
.notif-invite .oui{width:100%;min-height:50px;border-radius:999px;border:0;background:#F2BE2B;color:#141414;font:700 15.5px Inter,system-ui,sans-serif}
.notif-invite .non{width:100%;min-height:44px;margin-top:8px;border:0;background:none;color:#A9AEB8;font:600 14px Inter,system-ui,sans-serif}

/* cloche des notifications */
.cloche-btn{position:relative;flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.22);background:none;color:#F7F8FC;cursor:pointer;transition:border-color .3s,color .3s}
.cloche-btn:hover,.cloche-btn:focus-visible{border-color:#F2BE2B;color:#F2BE2B}
.cloche-btn svg{width:20px;height:20px}
.cloche-btn .pastille{position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#E5484D;color:#fff;font:700 11px/19px Inter,system-ui,sans-serif;text-align:center;box-shadow:0 0 0 2px #050506}
.cloche-btn .pastille[hidden]{display:none}
.panneau-notifs{position:fixed;inset:0;z-index:9997;background:rgba(0,0,0,.55)}
.panneau-notifs .boite{position:absolute;right:12px;top:calc(72px + env(safe-area-inset-top,0px));width:min(380px,calc(100% - 24px));max-height:min(70vh,560px);overflow:auto;background:#111216;border:1px solid rgba(255,255,255,.12);border-radius:20px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);color:#F7F8FC;font:400 14.5px/1.45 Inter,system-ui,sans-serif;animation:app-monte .3s ease}
.panneau-notifs h3{display:flex;align-items:center;justify-content:space-between;margin:0;padding:16px 18px;font:800 17px/1.2 Archivo,Inter,sans-serif;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:#111216}
.panneau-notifs h3 button{width:36px;height:36px;border:0;background:none;color:#A9AEB8;font-size:22px;line-height:1;cursor:pointer}
.panneau-notifs a{display:grid;grid-template-columns:10px 1fr;gap:4px 10px;padding:14px 18px;text-decoration:none;color:inherit;border-bottom:1px solid rgba(255,255,255,.06)}
.panneau-notifs a:hover{background:rgba(255,255,255,.04)}
.panneau-notifs a i{width:8px;height:8px;border-radius:50%;margin-top:7px;background:transparent}
.panneau-notifs a.nouveau i{background:#F2BE2B}
.panneau-notifs a b{font-weight:600}
.panneau-notifs a span{grid-column:2;color:#C9CCD3}
.panneau-notifs a small{grid-column:2;color:#80858F;font-size:12.5px}
.panneau-notifs .vide{padding:26px 18px;color:#A9AEB8;text-align:center}
@media (max-width:600px){.panneau-notifs .boite{right:8px;width:calc(100% - 16px)}}
/* état « notifications activées » */
.notif-carte .btn[hidden],.notif-carte button[hidden]{display:none!important}
.notif-carte.active{border-color:rgba(52,199,89,.45);background:rgba(52,199,89,.08)}
.notif-carte.active b{color:#4CD964}
.notif-carte .couper{margin-left:auto;min-height:44px;padding:0 6px;border:0;background:none;color:#A9AEB8;font:600 13px Inter,system-ui,sans-serif;text-decoration:underline;cursor:pointer}
/* petits écrans : menu resserré pour laisser la place à la cloche */
@media (max-width:440px){
  header.nav .brand-groupe{gap:8px;min-width:0;flex:1 1 auto}
  header.nav .brand{gap:8px;min-width:0}
  header.nav .brand>img{width:34px;height:34px}
  header.nav .brand b{font-size:14px}
  header.nav .live{font-size:11px}
  header.nav .live b{font-size:11px}
  header.nav .live>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
  header.nav .omni img{width:30px;height:30px}
  header.nav .nav-actions{gap:6px}
  .cloche-btn,header.nav .icone-pres{width:40px;height:40px}
}

/* accès permanent à l'installation : pied de page et panneau de la cloche */
.appli-pied,.appli-cloche{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border-radius:16px;border:1px solid rgba(242,190,43,.4);background:rgba(242,190,43,.07);color:#F7F8FC;text-align:left;font:400 14px/1.35 Inter,system-ui,sans-serif;cursor:pointer}
.appli-pied img,.appli-cloche img{width:36px;height:36px;border-radius:9px;flex:none}
.appli-pied b,.appli-cloche b{display:block;font-weight:700;color:#F2BE2B}
.appli-pied small,.appli-cloche small{display:block;color:#A4A7AE;font-size:12.5px}
.appli-pied{grid-column:1/-1;margin-bottom:6px}
.appli-cloche{width:calc(100% - 24px);margin:10px 12px 12px}