/* Appli des licenciés — notifications (lot D) : cloche, boîte des notifications, invitation à activer, guide iPhone,
   écran « Mes notifications ». Préfixe ntf-. Couleurs de la charte seulement ; téléphone d'abord (390 px) ; mode sombre
   (système, ou thème forcé par l'appli : html.el-theme-sombre / [data-theme="sombre"]). */
:root{--ntf-act:#191970;--ntf-act-fond:rgba(25,25,112,.1);--ntf-fond:#fff;--ntf-fond2:#F5F5F5;--ntf-encre:#120D16;--ntf-doux:rgba(18,13,22,.66);--ntf-trait:rgba(18,13,22,.1);--ntf-klein:#001CA8;--ntf-minuit:#191970;--ntf-rouge:#F32837;--ntf-cranberry:#950714;--ntf-voile:rgba(18,13,22,.5)}
@media (prefers-color-scheme:dark){html.el-mode-appli:not(.el-theme-clair):not([data-theme="clair"]){--ntf-act:#A9B4FF;--ntf-act-fond:rgba(169,180,255,.14);--ntf-fond:#1B1726;--ntf-fond2:#120D16;--ntf-encre:#F5F5F5;--ntf-doux:rgba(245,245,245,.7);--ntf-trait:rgba(245,245,245,.12);--ntf-klein:#8FA2FF;--ntf-voile:rgba(0,0,0,.65)}}
html.el-theme-sombre,html[data-theme="sombre"]{--ntf-act:#A9B4FF;--ntf-act-fond:rgba(169,180,255,.14);--ntf-fond:#1B1726;--ntf-fond2:#120D16;--ntf-encre:#F5F5F5;--ntf-doux:rgba(245,245,245,.7);--ntf-trait:rgba(245,245,245,.12);--ntf-klein:#8FA2FF;--ntf-voile:rgba(0,0,0,.65)}

.ntf-ico{width:1.2rem;height:1.2rem;flex:none}
.ntf-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cloche de l'en-tête */
.ntf-cloche{position:relative}
.ntf-pastille{position:absolute;top:-.35rem;right:-.35rem;min-width:1.25rem;height:1.25rem;padding:0 .3rem;border-radius:999px;background:#F32837;color:#fff;font:800 .68rem/1.25rem Montserrat,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff;animation:ntf-pop .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes ntf-pop{from{transform:scale(.3)}to{transform:scale(1)}}

/* Boîte des notifications (onglet Messages) */
.ntf-boite{display:grid;gap:.85rem;background:var(--ntf-fond);color:var(--ntf-encre);border:1px solid var(--ntf-trait);border-radius:18px;padding:1rem;box-shadow:0 10px 30px rgba(25,25,112,.06);margin-bottom:1rem}
.ntf-tete{display:flex;align-items:center;gap:.6rem}
.ntf-titre{display:flex;align-items:center;gap:.5rem;margin:0 auto 0 0;font:800 1.15rem/1.2 Montserrat,sans-serif;color:var(--ntf-encre)}
.ntf-titre .ntf-ico{color:var(--ntf-klein)}
.ntf-compte{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;padding:0 .4rem;border-radius:999px;background:var(--ntf-klein);color:#fff;font:800 .75rem Montserrat,sans-serif}
.ntf-tete-actions{display:flex;align-items:center;gap:.35rem}
.ntf-lien{border:0;background:none;padding:.45rem .55rem;border-radius:999px;color:var(--ntf-klein);font:700 .88rem Cabin,sans-serif;cursor:pointer}
.ntf-lien:hover{background:rgba(0,28,168,.08)}
.ntf-rond{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--ntf-trait);background:var(--ntf-fond);color:var(--ntf-encre);cursor:pointer}
.ntf-rond:hover{border-color:var(--ntf-klein);color:var(--ntf-klein)}
.ntf-liste{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.ntf-item{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) auto;gap:.75rem;align-items:start;width:100%;padding:.75rem .7rem;border:0;border-radius:14px;background:none;text-align:left;font:inherit;color:inherit;cursor:pointer;transition:background .2s}
.ntf-item:hover{background:var(--ntf-fond2)}
.ntf-item:focus-visible{outline:3px solid var(--ntf-klein);outline-offset:1px}
.ntf-item.est-nonlue{background:color-mix(in srgb,var(--ntf-klein) 6%,transparent)}
.ntf-item.est-urgente{background:color-mix(in srgb,#F32837 9%,transparent);box-shadow:inset 3px 0 0 #F32837}
.ntf-item-ico,.ntf-pastille-cat{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:rgba(0,28,168,.1);color:var(--ntf-klein);flex:none}
.est-securite .ntf-item-ico,.ntf-pastille-cat.est-securite{background:rgba(149,7,20,.1);color:#950714}
.est-urgente .ntf-item-ico,.ntf-pastille-cat.est-urgent{background:#F32837;color:#fff}
.est-activite .ntf-item-ico,.ntf-pastille-cat.est-activite{background:var(--ntf-act-fond);color:var(--ntf-act)}
.est-challenge .ntf-item-ico,.ntf-pastille-cat.est-challenge{background:rgba(243,40,55,.1);color:#F32837}   /* Challenge France 1 (migration 123) */
.ntf-pastille-cat.est-nuit{background:#191970;color:#fff}
.ntf-item-txt{display:grid;gap:.2rem;min-width:0}
.ntf-item-txt b{font:700 .98rem/1.3 Montserrat,sans-serif;color:var(--ntf-encre)}
.ntf-item-texte{color:var(--ntf-doux);font-size:.92rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ntf-item-txt small{color:var(--ntf-doux);font-size:.78rem}
.ntf-urgent{justify-self:start;padding:.1rem .45rem;border-radius:999px;background:#F32837;color:#fff;font:800 .62rem Montserrat,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.ntf-exemple{display:inline-block;margin-right:.35rem;padding:0 .35rem;border-radius:5px;background:#F5F5F5;color:#120D16;font-weight:700}
.ntf-point{width:.65rem;height:.65rem;margin-top:.45rem;border-radius:50%;background:var(--ntf-klein);box-shadow:0 0 0 3px color-mix(in srgb,var(--ntf-klein) 22%,transparent)}
.est-urgente .ntf-point{background:#F32837;box-shadow:0 0 0 3px rgba(243,40,55,.25)}
.ntf-plus{justify-self:center}
.ntf-vide{display:flex;gap:.8rem;align-items:center;margin:0;padding:1rem;border-radius:14px;background:var(--ntf-fond2);color:var(--ntf-doux);font-size:.93rem;line-height:1.45}
.ntf-vide b{display:block;color:var(--ntf-encre);font:700 1rem Montserrat,sans-serif}
.ntf-vide .ntf-ico{width:2rem;height:2rem;color:var(--ntf-klein)}
.ntf-squelette li{height:4.2rem;border-radius:14px;background:linear-gradient(90deg,var(--ntf-fond2),color-mix(in srgb,var(--ntf-fond2) 40%,var(--ntf-fond)),var(--ntf-fond2));background-size:200% 100%;animation:ntf-luit 1.3s infinite}
@keyframes ntf-luit{to{background-position:-200% 0}}

/* Invitation à activer */
.ntf-activer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.8rem;align-items:center;padding:1rem;border-radius:16px;background:linear-gradient(135deg,#001CA8,#191970);color:#fff}
.ntf-activer>div{display:grid;gap:.25rem}
.ntf-activer b{font:800 1rem/1.25 Montserrat,sans-serif}
.ntf-activer p{margin:0;color:rgba(255,255,255,.85);font-size:.9rem;line-height:1.45}
.ntf-activer .ntf-bouton-plein{grid-column:1/-1;background:#fff;color:#001CA8;border-color:#fff;justify-self:stretch}
.ntf-activer-ico{display:inline-grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:14px;background:rgba(255,255,255,.14)}
.ntf-activer-ico .ntf-ico{width:1.5rem;height:1.5rem;animation:ntf-sonne 2.6s ease-in-out infinite;transform-origin:50% 15%}
@keyframes ntf-sonne{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(8deg)}90%{transform:rotate(-4deg)}}
.ntf-activer.est-refuse{background:#950714}
.ntf-activer .ntf-msg.est-erreur{color:#fff;font-weight:700}
.ntf-activer .ntf-msg:empty{display:none}

/* Boutons */
.ntf-bouton{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.75rem;padding:.6rem 1.15rem;border-radius:999px;border:1.5px solid var(--ntf-klein);background:transparent;color:var(--ntf-klein);font:700 .95rem Montserrat,sans-serif;cursor:pointer}
.ntf-bouton-plein{background:var(--ntf-klein);color:#fff}
.ntf-bouton:disabled{opacity:.5;cursor:wait}
.ntf-boutons{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}

/* Guide iPhone */
.ntf-guide{display:grid;gap:.6rem;padding:1.1rem;border-radius:18px;background:linear-gradient(160deg,#191970,#120D16);color:#fff}
.ntf-guide-sur{display:flex;align-items:center;gap:.4rem;margin:0;font:700 .7rem Montserrat,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.ntf-guide-titre{margin:0;font:800 1.2rem/1.25 Montserrat,sans-serif;color:#fff}
.ntf-guide-texte,.ntf-guide-note{margin:0;font-size:.9rem;line-height:1.45;color:rgba(255,255,255,.85)}
.ntf-guide-note{font-size:.8rem;color:rgba(255,255,255,.65)}
.ntf-etapes{list-style:none;margin:.2rem 0;padding:0;display:grid;gap:.5rem;counter-reset:e}
.ntf-etapes li{display:grid;grid-template-columns:1.6rem 2.8rem minmax(0,1fr);gap:.65rem;align-items:center;padding:.65rem .7rem;border-radius:14px;background:rgba(255,255,255,.08)}
.ntf-etape-n{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:#F32837;font:800 .8rem Montserrat,sans-serif}
.ntf-etape-ico{display:inline-grid;place-items:center;width:2.8rem;height:2.8rem;border-radius:12px;background:#fff;color:#001CA8}
.ntf-etape-ico .ntf-ico{width:1.45rem;height:1.45rem}
.ntf-etape-logo img{width:2rem;height:2rem;border-radius:8px}
.ntf-etapes b{display:block;font:700 .95rem/1.25 Montserrat,sans-serif}
.ntf-etapes small{display:block;color:rgba(255,255,255,.72);font-size:.82rem;line-height:1.35}

/* Entrée « Notifications » dans Plus */
.ntf-entree{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.8rem;align-items:center;width:100%;margin:.5rem 0 1rem;padding:.85rem 1rem;border:1px solid var(--ntf-trait);border-radius:16px;background:var(--ntf-fond);color:var(--ntf-encre);text-align:left;font:inherit;cursor:pointer}
.ntf-entree:hover{border-color:var(--ntf-klein)}
.ntf-entree-txt{display:grid;gap:.1rem}.ntf-entree-txt b{font:700 1rem Montserrat,sans-serif}.ntf-entree-txt small{color:var(--ntf-doux);font-size:.84rem}
.ntf-entree-fleche{color:var(--ntf-doux)}

/* Feuille « Mes notifications » */
html.ntf-ouverte{overflow:hidden}
.ntf-fond{position:fixed;inset:0;z-index:2147483000;display:grid;align-items:end;justify-items:center;background:var(--ntf-voile,rgba(18,13,22,.5));animation:ntf-voile .2s ease-out}
.ntf-fond[hidden]{display:none}
@keyframes ntf-voile{from{opacity:0}}
.ntf-feuille{display:flex;flex-direction:column;width:min(34rem,100%);max-height:min(92vh,100%);background:var(--ntf-fond2);color:var(--ntf-encre);border-radius:22px 22px 0 0;box-shadow:0 -20px 60px rgba(18,13,22,.35);animation:ntf-monte .28s cubic-bezier(.2,.9,.3,1);outline:none;padding-bottom:env(safe-area-inset-bottom)}
@keyframes ntf-monte{from{transform:translateY(40px);opacity:.4}}
.ntf-feuille-tete{display:flex;align-items:center;gap:.7rem;padding:1rem 1rem .8rem;border-bottom:1px solid var(--ntf-trait);background:var(--ntf-fond);border-radius:22px 22px 0 0}
.ntf-feuille-tete h3{margin:0 auto 0 0;font:800 1.2rem Montserrat,sans-serif;color:var(--ntf-encre)}
.ntf-feuille-ico{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--ntf-klein);color:#fff}
.ntf-feuille-corps{display:grid;gap:.8rem;padding:1rem;overflow:auto;overscroll-behavior:contain}
.ntf-feuille-corps p{margin:0}
.ntf-petite{border-radius:22px;margin:auto 1rem}
.ntf-carte{display:grid;gap:.7rem;padding:1rem;border-radius:18px;background:var(--ntf-fond);border:1px solid var(--ntf-trait)}
.ntf-carte-tel{grid-template-columns:auto minmax(0,1fr) auto;align-items:center}
.ntf-carte-tel>div{display:grid;gap:.15rem}.ntf-carte-tel b{font:700 1rem Montserrat,sans-serif}
.ntf-carte-ico{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:13px;background:rgba(0,28,168,.1);color:var(--ntf-klein)}
.ntf-etat{display:flex;align-items:center;gap:.35rem;color:var(--ntf-doux);font-size:.88rem}
.ntf-etat::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:#950714}
.ntf-etat.est-ok::before{background:#001CA8}
.ntf-grille{gap:0;padding:.4rem 1rem}
.ntf-grille-tete,.ntf-grille-ligne{display:grid;grid-template-columns:minmax(0,1fr) 4.2rem 4.2rem;gap:.4rem;align-items:center;padding:.7rem 0}
.ntf-grille-tete{border-bottom:1px solid var(--ntf-trait);font-size:.74rem;color:var(--ntf-doux)}
.ntf-grille-tete b{font:800 .98rem Montserrat,sans-serif;color:var(--ntf-encre)}
.ntf-grille-tete span{display:grid;justify-items:center;gap:.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.62rem}
.ntf-grille-tete span .ntf-ico{width:1.05rem;height:1.05rem}
.ntf-grille-ligne+.ntf-grille-ligne{border-top:1px solid var(--ntf-trait)}
.ntf-grille-ligne .ntf-inter{justify-self:center}
.ntf-grille-lib{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:center}
.ntf-grille-lib b,.ntf-option b{display:block;font:700 .93rem/1.25 Montserrat,sans-serif;color:var(--ntf-encre)}
.ntf-grille-lib small,.ntf-option small{display:block;color:var(--ntf-doux);font-size:.8rem;line-height:1.35}
.ntf-grille-lib .ntf-pastille-cat{width:2.2rem;height:2.2rem;border-radius:11px}
.ntf-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.7rem;align-items:center}
.ntf-option .ntf-pastille-cat{width:2.3rem;height:2.3rem;border-radius:11px}
.ntf-note{margin:.2rem 0 .4rem !important;color:var(--ntf-doux);font-size:.8rem;line-height:1.4}
.ntf-alerte{padding:.6rem .75rem;border-radius:12px;background:rgba(243,40,55,.12);color:#950714;font-size:.85rem;font-weight:600;line-height:1.4}
.ntf-heures{display:flex;gap:.6rem;flex-wrap:wrap}
.ntf-heures[hidden]{display:none}
.ntf-heures label{display:flex;align-items:center;gap:.45rem;font-weight:700;font-size:.9rem}
.ntf-heures input{min-height:2.6rem;padding:.35rem .6rem;border:1px solid var(--ntf-trait);border-radius:10px;background:var(--ntf-fond2);color:var(--ntf-encre);font:600 1rem Cabin,sans-serif}
.ntf-msg{min-height:1.2em;color:var(--ntf-doux);font-size:.88rem}
.ntf-msg.est-ok{color:var(--ntf-klein);font-weight:700}.ntf-msg.est-erreur{color:#950714;font-weight:700}

/* Interrupteur */
.ntf-inter{position:relative;display:inline-flex;cursor:pointer}
.ntf-inter input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ntf-inter-piste{position:relative;width:3.1rem;height:1.85rem;border-radius:999px;background:color-mix(in srgb,var(--ntf-encre) 22%,transparent);transition:background .2s}
.ntf-inter-piste::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.45rem;height:1.45rem;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(18,13,22,.3);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.ntf-inter input:checked+.ntf-inter-piste{background:#001CA8}
.ntf-inter input:checked+.ntf-inter-piste::after{transform:translateX(1.25rem)}
.ntf-inter input:focus-visible+.ntf-inter-piste{outline:3px solid var(--ntf-klein);outline-offset:2px}
.ntf-inter input:disabled+.ntf-inter-piste{opacity:.45}

@media (min-width:700px){
  .ntf-fond{align-items:center}
  .ntf-feuille{border-radius:22px;max-height:88vh}
  .ntf-activer{grid-template-columns:auto minmax(0,1fr) auto}
  .ntf-activer .ntf-bouton-plein{grid-column:auto;justify-self:end}
}
@media (max-width:420px){.ntf-cloche span:not(.ntf-pastille){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.ntf-pastille,.ntf-activer-ico .ntf-ico,.ntf-feuille,.ntf-fond,.ntf-squelette li{animation:none}.ntf-inter-piste::after{transition:none}}