/* zzzz-notifs.css — REFONTE APP · fidelite maquette 21 (Notifications).
   Role : charge en dernier, affine l'ecran .ar-notifs (onglets soulignes,
   en-tete kebab, cartes a icone ronde + horodatage haut-droite). 100% additif.
   Rollback : supprimer ce fichier (aucune structure/DOM/PHP modifiee). */
@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ---- En-tete : titre serif + bouton icone (rond -> carre arrondi kebab) ---- */
  html.apprefonte .ar-nt-head { align-items: flex-start !important; padding-top: 6px !important; }
  html.apprefonte .ar-nt-head h1 { font-size: 34px !important; letter-spacing: -.01em !important; }
  html.apprefonte .ar-nt-head .ar-ic {
    width: 46px !important; height: 40px !important;
    border-radius: 12px !important;
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    font-size: 0 !important;              /* masque le glyphe engrenage existant */
  }
  html.apprefonte .ar-nt-head .ar-ic::before {
    content: "\22EE";                     /* kebab ⋮ — visuel (le lien mene aux Reglages) */
    font-size: 21px; line-height: 1; color: var(--ar-ink);
  }

  /* ---- Onglets SOULIGNES EN RELIEF (remplace le segmente a pilule cyan) ----
     15/09 : Julien a demande « plus elegant, effet 3D » et a choisi la variante B sur apercu
     rendu. On GARDE la maquette 21 (onglets soulignes) et on lui ajoute de la profondeur :
     rail eclaire sur son arete haute, texte grave, barre ambre bombee sous l onglet actif.
     100 % additif : ni le HTML, ni le PHP, ni le script de filtre, ni les cartes ne changent.
     Rollback : remettre la sauvegarde datee de ce seul fichier. */
  html.apprefonte .ar-nt-tabs {
    background: linear-gradient(180deg, rgba(255,255,255,.030), rgba(255,255,255,0)) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(155,177,191,.16) !important;
    border-radius: 0 !important;
    padding: 0 2px !important;
    gap: 18px !important;
    margin: 2px 0 18px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05);   /* arete haute : la lumiere du dessus */
  }
  html.apprefonte .ar-nt-tab {
    position: relative;                   /* ancre la barre ::after ci-dessous */
    flex: 0 0 auto !important;
    padding: 5px 3px 13px !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ar-ink-soft) !important;
    border-bottom: 0 !important;          /* la barre n est plus un bord : voir ::after */
    margin-bottom: -1px;                  /* chevauche le trait du conteneur */
    font-size: 14px !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.55); /* texte grave dans le fond sombre */
    transition: color 160ms ease, text-shadow 160ms ease;
  }
  /* La barre ambre est un element a elle : un border-bottom ne sait etre ni arrondi, ni
     degrade, ni porter une ombre. Elle existe sous CHAQUE onglet, invisible tant qu il
     n est pas actif : rien ne bouge en largeur quand on change d onglet. */
  html.apprefonte .ar-nt-tab::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255,182,90,0) 0%, #FFD693 24%, #E09A3F 76%, rgba(255,182,90,0) 100%);
    box-shadow: 0 2px 8px rgba(255,150,40,.42), inset 0 1px 0 rgba(255,255,255,.28);
    opacity: 0; transform: scaleX(.55);
    transition: opacity 160ms ease, transform 160ms ease;
    pointer-events: none;
  }
  html.apprefonte .ar-nt-tab.is-active {
    background: transparent !important;
    color: #FFD693 !important;
    text-shadow: 0 1px 0 rgba(0,0,0,.60), 0 0 14px rgba(255,182,90,.45);
  }
  html.apprefonte .ar-nt-tab.is-active::after { opacity: 1; transform: scaleX(1); }
  /* Qui reduit les animations garde le relief, sans le glissement. */
  @media (prefers-reduced-motion: reduce) {
    html.apprefonte .ar-nt-tab,
    html.apprefonte .ar-nt-tab::after { transition: none !important; }
    html.apprefonte .ar-nt-tab::after { transform: none !important; }
  }

  /* ---- Cartes : icone ronde plus grande, horodatage en haut a droite ---- */
  html.apprefonte .ar-nt-card {
    align-items: center !important;
    padding: 16px !important;
    gap: 14px !important;
  }
  /* Non-lue : differenciee par le point (on retire la teinte cyan globale). */
  html.apprefonte .ar-nt-card.is-unread {
    background: var(--ar-surface) !important;
    border-color: rgba(255,255,255,.10) !important;
  }
  html.apprefonte .ar-nt-ic {
    width: 52px !important; height: 52px !important;
    font-size: 24px !important;
  }
  html.apprefonte .ar-nt-main { padding-right: 54px; }
  html.apprefonte .ar-nt-title { font-size: 16px !important; }
  /* .ar-nt-card est position:relative (base) -> ancrage de l'horodatage absolu. */
  html.apprefonte .ar-nt-time {
    position: absolute !important;
    top: 15px !important; right: 16px !important;
    margin: 0 !important;
  }
  html.apprefonte .ar-nt-dot {
    top: 40px !important; right: 20px !important;
  }
}