/* ============================================================================
   refonte-lots/notifs-demandes.css — LOT « Notifications & Demandes »
   ----------------------------------------------------------------------------
   Écrans visés  : notifications.php  (maquette 21-notifications)
                   my-requests.php    (maquette 22-demandes / « Pigeon voyageur »)
   ----------------------------------------------------------------------------
   • 100 % ADDITIF & RÉVERSIBLE. Aucune logique, requête, CSRF, permission,
     ni structure DOM n'est modifiée : ce fichier ne fait que REPEINDRE des
     classes existantes avec les tokens --ar-* déjà définis dans app-refonte.css.
   • Activation stricte : html.apprefonte  ET  @media (max-width:768px).
     Le BUREAU (>768px) et le mode hors-refonte ne sont JAMAIS touchés.
   • Palette imposée : sombre unique. On neutralise le hors-charte présent en
     inline dans ces pages (teal #00e5ff, violet #a855f7, vert #22c55e, orange
     #e07a5f, or #C9A45C/#F3D58A) → cyan (exploration/comm.) + ambre (engagement)
     + rouge (destructif seulement).
   • Le GARDIEN (.ai-*, .gw-*, gardien-*) et ÉTINCELLES ne sont pas concernés :
     aucune de leurs classes n'apparaît ici.
   • Beaucoup de couleurs sources sont en style="" inline (spécificité maximale) :
     les overrides utilisent donc !important. Les règles « phare-light » /
     « has-pagebg » de la page (texte forcé foncé pour le thème clair) sont
     re-neutralisées avec une spécificité ≥ pour rester lisibles sur fond sombre.
   ============================================================================ */

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {

  /* ==========================================================================
     ÉCRAN 1 — notifications.php  (maquette 21)
     Cible maquette : en-tête + kebab, cartes de notif (icône ronde teintée,
     libellé catégorie, titre, corps, horodatage + point non-lu), bloc
     « À répondre », réglages repliables, états vides.
     ========================================================================== */

  /* --- 1.1 Rangée d'actions (Tout marquer lu / Sélectionner / Tout supprimer)
     La maquette regroupe ça dans un kebab ⋮ ; on garde la rangée existante
     (aucune restructuration DOM) mais on la repeint en pilules DS neutres. --- */
  html.apprefonte .btn.btn-mini {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-tap) !important;
    padding: 0 16px !important;
    font: 600 14px/1 'Inter', system-ui, sans-serif !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  }
  /* « Tout supprimer » (seul <form> à onsubmit=confirm) + « Supprimer la sélection »
     = destructif → contour rouge réservé. */
  html.apprefonte form[onsubmit] .btn.btn-mini,
  html.apprefonte #notifDelSel {
    background: transparent !important;
    border: 1px solid var(--ar-danger) !important;
    color: var(--ar-danger) !important;
  }

  /* --- 1.2 Barre de sélection multiple (#notifBulkBar) : or → surface-2 --- */
  html.apprefonte #notifBulkBar {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte #notifBulkBar label,
  html.apprefonte #notifSelCount { color: var(--ar-ink-soft) !important; }
  html.apprefonte #notifCheckAll,
  html.apprefonte .notif-cb { accent-color: var(--ar-cyan) !important; }

  /* --- 1.3 En-têtes de blocs repliables (.nt-grp) : or → surface / ink --- */
  html.apprefonte .nt-grp > summary {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    color: var(--ar-ink) !important;
    min-height: var(--ar-tap);
    box-sizing: border-box;
  }
  html.apprefonte .nt-grp-n,
  html.apprefonte .nt-grp-chev { color: var(--ar-ink-soft) !important; }
  html.apprefonte .nt-grp-new {                 /* badge « N NOUVEAUX » */
    background: var(--ar-amber) !important;
    color: var(--ar-on-accent) !important;
  }
  /* Mise en évidence du bloc ciblé par ?section= : anneau bleu → cyan DS. */
  html.apprefonte .nt-grp.is-hl > summary {
    box-shadow: 0 0 0 2px var(--ar-cyan), 0 0 18px var(--ar-cyan-40) !important;
  }

  /* --- 1.4 Carte de notification (.notif-row) : fond/bord inline → tokens --- */
  html.apprefonte .notif-row {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
    margin-bottom: 10px !important;
  }
  /* Non-lue : accent ambre (attention/engagement) au lieu de l'or. */
  html.apprefonte .notif-row.is-unread {
    background: var(--ar-surface) !important;
    border-color: var(--ar-amber-40) !important;
  }
  html.apprefonte .notif-link { padding: 14px 16px !important; gap: 14px !important; }

  /* Pastille icône : les hex par type (#E08080, #7FB5D6, #8B9DC3…) contiennent
     du bleu/vert hors-charte → on neutralise en cercle surface-2 + glyphe cyan.
     Le glyphe emoji reste (défini en PHP, non modifiable ici). */
  html.apprefonte .notif-row .notif-ico {
    width: 46px !important; height: 46px !important;
    background: var(--ar-surface-2) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important;
    flex-shrink: 0;
  }

  /* Textes de la ligne : titre or → crème ; corps/horodatage → soft. */
  html.apprefonte .notif-row strong { color: var(--ar-ink) !important; }
  html.apprefonte .notif-link p { color: var(--ar-ink-soft) !important; }

  /* Bouton ✕ de suppression : cible tactile pleine hauteur, teinte danger douce. */
  html.apprefonte .notif-del {
    min-width: var(--ar-tap) !important;
    border-left: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important;
  }

  /* --- 1.5 Bloc « À répondre » (.arep-*) : orange #e07a5f → ambre DS.
     C'est un rappel d'ENGAGEMENT (accepter/refuser) → ambre. Le glow orange
     est retiré (rendu plat DS ; l'accessibilité reduced-motion existe déjà). --- */
  html.apprefonte .arep-head {
    background: var(--ar-amber-10) !important;
    border: 1px solid var(--ar-amber-40) !important;
    color: var(--ar-amber) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .arep-count {
    background: var(--ar-amber) !important; color: var(--ar-on-accent) !important;
  }
  html.apprefonte .arep-card {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-amber-40) !important;
    border-radius: var(--ar-r-md) !important;
    animation: none !important;                 /* plat : on retire le pulse orange */
  }
  html.apprefonte .arep-ico {
    background: var(--ar-amber-10) !important; color: var(--ar-amber) !important;
  }
  html.apprefonte .arep-title { color: var(--ar-ink) !important; }
  html.apprefonte .arep-obj { color: var(--ar-ink) !important; }
  html.apprefonte .arep-meta { color: var(--ar-ink-soft) !important; }
  html.apprefonte .arep-lock { color: var(--ar-ink-soft) !important; }
  /* 1 seule action pleine par carte = Accepter (ambre) ; Refuser = contour. */
  html.apprefonte .arep-btn { min-height: var(--ar-tap); }
  html.apprefonte .arep-ok {
    background: var(--ar-amber) !important; border-color: var(--ar-amber) !important;
    color: var(--ar-on-accent) !important;
  }
  html.apprefonte .arep-no {
    background: transparent !important;
    border-color: var(--ar-border) !important; color: var(--ar-ink) !important;
  }
  html.apprefonte .arep-view { color: var(--ar-cyan) !important; }

  /* --- 1.6 Réglages repliables (<details class="card">) : summary or → cyan.
     (Le fond de .card est déjà géré par app-refonte.css.) --- */
  html.apprefonte details.card > summary { color: var(--ar-cyan) !important; }

  /* --- 1.7 État vide « Tu es à jour » : titre serif or → Inter crème (DS bannit
     les titres serif). Boutons or → pilules neutres DS. --- */
  html.apprefonte .card h3 {
    font-family: 'Inter', system-ui, sans-serif !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .card a.btn {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-tap) !important;
    display: inline-flex; align-items: center; gap: 8px;
  }

  /* --- 1.8 Ré-neutralisation « thème clair » (Phare allumé) / « fond image ».
     La page force le texte en foncé (#16233d / #0b0e14) pour le thème clair ;
     en mode app on reste sur fond sombre → on rétablit crème/soft. Sélecteurs
     préfixés des mêmes classes body pour dépasser la spécificité source. --- */
  html.apprefonte body.page-notifications.phare-light .page-title,
  html.apprefonte body.page-notifications.has-pagebg  .page-title,
  html.apprefonte body.page-notifications.phare-light .card h3,
  html.apprefonte body.page-notifications.has-pagebg  .card h3,
  html.apprefonte body.page-notifications.phare-light .notif-row strong,
  html.apprefonte body.page-notifications.has-pagebg  .notif-row strong,
  html.apprefonte body.page-notifications.phare-light .arep-title,
  html.apprefonte body.page-notifications.phare-light .arep-obj {
    color: var(--ar-ink) !important;
  }
  html.apprefonte body.page-notifications.phare-light .page-subtitle,
  html.apprefonte body.page-notifications.has-pagebg  .page-subtitle,
  html.apprefonte body.page-notifications.phare-light .card p,
  html.apprefonte body.page-notifications.has-pagebg  .card p,
  html.apprefonte body.page-notifications.phare-light .notif-link p,
  html.apprefonte body.page-notifications.has-pagebg  .notif-link p,
  html.apprefonte body.page-notifications.phare-light .arep-meta {
    color: var(--ar-ink-soft) !important;
  }
  /* Cartes/rangées : la page les repeint en blanc translucide sur fond image →
     on rétablit la surface sombre du DS. */
  html.apprefonte body.page-notifications.has-pagebg .card,
  html.apprefonte body.page-notifications.has-pagebg .notif-row,
  html.apprefonte body.page-notifications.has-pagebg .nt-grp > summary {
    background: var(--ar-surface) !important;
    border-color: var(--ar-hairline) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  html.apprefonte body.page-notifications.has-pagebg .notif-row.is-unread {
    border-color: var(--ar-amber-40) !important;
  }
  /* (25/09) COMPLÉMENT au 1.8 — depuis que la liste complète est la SEULE page Notifications (le bloc .ar-notifs
     est retiré, décision de Julien), ces éléments-ci restaient forcés en foncé par la page sur le fond sombre de
     l'appli : mesuré sur son A55, contraste 1,06 à 1,19 (« messages privés », « Pigeon voyageur », « Réglages des
     notifications » et ses cases) ; et les pilules « Tout marquer comme lu » / « Sélectionner » restaient grises.
     Mêmes classes body que la page + html.apprefonte ⇒ spécificité supérieure, comme le reste du 1.8. */
  html.apprefonte body.page-notifications.phare-light .page-subtitle strong,
  html.apprefonte body.page-notifications.has-pagebg  .page-subtitle strong,
  html.apprefonte body.page-notifications.phare-light .card label,
  html.apprefonte body.page-notifications.has-pagebg  .card label,
  html.apprefonte body.page-notifications.phare-light .card label span,
  html.apprefonte body.page-notifications.has-pagebg  .card label span {
    color: var(--ar-ink) !important;
  }
  html.apprefonte body.page-notifications.phare-light .page-subtitle a,
  html.apprefonte body.page-notifications.has-pagebg  .page-subtitle a,
  html.apprefonte body.page-notifications.phare-light .card summary,
  html.apprefonte body.page-notifications.has-pagebg  .card summary {
    color: var(--ar-cyan) !important;
  }
  html.apprefonte body.page-notifications.phare-light .card button.btn-mini,
  html.apprefonte body.page-notifications.has-pagebg  button.btn-mini {
    background: var(--ar-surface) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte body.page-notifications.phare-light .card form[onsubmit] button.btn-mini,
  html.apprefonte body.page-notifications.has-pagebg  form[onsubmit] button.btn-mini {
    background: transparent !important;
    color: var(--ar-danger) !important;
  }


  /* ==========================================================================
     ÉCRAN 2 — my-requests.php  (maquette 22 · « Pigeon voyageur »)
     La page est une messagerie split (liste .pv-sidebar + fil .pv-main),
     entièrement teintée teal #00e5ff / violet #a855f7 + statuts vert/rouge.
     On repeint tout en DS sombre. La logique split (sélection conv, envoi
     cercle, recherche, auto-scroll) est INCHANGÉE.
     ========================================================================== */

  /* --- 2.1 Titre de page + icône cœur (stroke inline #00e5ff → cyan) --- */
  html.apprefonte .pub-pagetitle svg,
  html.apprefonte .pub-pagetitle svg * { stroke: var(--ar-cyan) !important; }

  /* --- 2.2 Ossature split : cadre surface, empilement mobile propre --- */
  html.apprefonte .pv-layout {
    background: var(--ar-surface) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-lg) !important;
    height: auto !important; min-height: 0 !important;
  }
  html.apprefonte .pv-sidebar {
    background: transparent !important;
    border-right: none !important;
    border-bottom: 1px solid var(--ar-hairline) !important;
    max-height: 46vh !important;
  }
  html.apprefonte .pv-sidebar-head { border-bottom: 1px solid var(--ar-hairline) !important; }
  html.apprefonte .pv-sidebar-title { color: var(--ar-ink) !important; }
  html.apprefonte .pv-main { background: transparent !important; }

  /* --- 2.3 Bouton « Nouveau message » = communication → cyan --- */
  html.apprefonte .pv-new-btn {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-pill) !important;
    min-height: var(--ar-tap);
    font-size: 14px;
  }
  html.apprefonte .pv-new-btn:hover { background: var(--ar-cyan-10) !important; }
  html.apprefonte .pv-new-btn svg { stroke: currentColor !important; }

  /* --- 2.4 Recherche : surface-2 + bord hairline (anti-zoom 16px déjà global) --- */
  html.apprefonte .pv-search {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-sm) !important;
    min-height: var(--ar-tap);
  }
  html.apprefonte .pv-search input {
    background: none !important; border: 0 !important;
    color: var(--ar-ink) !important; min-height: auto !important;
    padding: 0 !important; font-size: 16px !important;
  }
  html.apprefonte .pv-search input::placeholder { color: var(--ar-ink-dis) !important; }
  html.apprefonte .pv-search svg { stroke: var(--ar-ink-soft) !important; }

  /* --- 2.5 Lignes de conversation (demandes + cercles) --- */
  html.apprefonte .pv-conv-item {
    border-left: 3px solid transparent !important;
    min-height: 56px;
  }
  html.apprefonte .pv-conv-item:hover { background: var(--ar-surface-2) !important; }
  html.apprefonte .pv-conv-item.is-active {
    background: var(--ar-cyan-10) !important;
    border-left-color: var(--ar-cyan) !important;
  }
  /* Avatar : le dégradé bleu ET la variante violette (cercles, inline) → neutre. */
  html.apprefonte .pv-conv-avatar {
    background: var(--ar-surface-2) !important; background-image: none !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-cyan) !important;
  }
  html.apprefonte .pv-conv-name { color: var(--ar-ink) !important; }
  html.apprefonte .pv-conv-preview,
  html.apprefonte .pv-conv-time { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pv-section-label { color: var(--ar-cyan) !important; }
  /* Point non-lu (demande en attente, inline ambre) → ambre DS. */
  html.apprefonte .pv-conv-unread { background: var(--ar-amber) !important; }
  /* Compteur de messages de cercle (inline violet, div sans classe) → neutre. */
  html.apprefonte .pv-conv-meta > div:not(.pv-conv-time):not(.pv-conv-unread) {
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
  }

  /* --- 2.6 En-tête du fil : pigeon SVG (glow + stroke cyan inline) → plat --- */
  html.apprefonte .pv-main-head { border-bottom: 1px solid var(--ar-hairline) !important; }
  html.apprefonte .pv-pigeon-icon svg { filter: none !important; }
  html.apprefonte .pv-pigeon-icon svg * { stroke: var(--ar-cyan) !important; }
  html.apprefonte .pv-main-title {
    font-family: 'Inter', system-ui, sans-serif !important;   /* serif banni */
    color: var(--ar-ink) !important;
  }
  html.apprefonte .pv-main-sub,
  html.apprefonte .pv-main-sub strong { color: var(--ar-ink-soft) !important; }

  /* --- 2.7 Bulles du fil : bleu/teal → surface-2 (reçu) / cyan-10 (à moi) --- */
  html.apprefonte .pv-bubble-system {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink-soft) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .pv-bubble-row:not(.mine) .pv-bubble {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .pv-bubble-row.mine .pv-bubble {
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-ink) !important;
  }
  html.apprefonte .pv-bubble-meta { color: var(--ar-ink-soft) !important; }
  /* Pseudo de l'expéditeur (inline cyan) → cyan token. */
  html.apprefonte .pv-bubble-row > div > div[style*="229"] { color: var(--ar-cyan) !important; }

  /* --- 2.8 Carte « demande » dans le fil (.pv-req-card) --- */
  html.apprefonte .pv-req-card {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-hairline) !important;
    border-radius: var(--ar-r-md) !important;
  }
  html.apprefonte .pv-req-card-title { color: var(--ar-ink) !important; }
  html.apprefonte .pv-req-card-meta { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pv-req-card-msg {
    color: var(--ar-ink-soft) !important;
    border-left: 2px solid var(--ar-cyan-40) !important;
  }
  /* Bouton « Annuler la demande » (.adm-btn-red, non couvert par app-refonte) → danger. */
  html.apprefonte .adm-btn-red {
    background: transparent !important;
    border: 1px solid var(--ar-danger) !important;
    color: var(--ar-danger) !important;
    border-radius: var(--ar-r-pill) !important;
  }
  /* Pilules de statut du fil (vert/orange/rouge/gris) → DS, scopées au fil. */
  html.apprefonte .pv-thread .adm-pill.green {
    background: var(--ar-cyan-10) !important; color: var(--ar-cyan) !important;
    border-color: var(--ar-cyan-40) !important;
  }
  html.apprefonte .pv-thread .adm-pill.orange {
    background: var(--ar-amber-10) !important; color: var(--ar-amber) !important;
    border-color: var(--ar-amber-40) !important;
  }
  html.apprefonte .pv-thread .adm-pill.red {
    background: var(--ar-danger-10) !important; color: var(--ar-danger) !important;
    border-color: var(--ar-danger) !important;
  }
  html.apprefonte .pv-thread .adm-pill.gray {
    background: var(--ar-surface-2) !important; color: var(--ar-ink-soft) !important;
    border-color: var(--ar-hairline) !important;
  }

  /* --- 2.9 Barre d'envoi (cercles) : teal → surface-2 + envoi cyan --- */
  html.apprefonte .pv-composer { border-top: 1px solid var(--ar-hairline) !important; }
  html.apprefonte .pv-composer textarea {
    background: var(--ar-surface-2) !important;
    border: 1px solid var(--ar-border) !important;
    color: var(--ar-ink) !important;
    border-radius: var(--ar-r-sm) !important;
    font-size: 16px !important;                 /* anti-zoom iOS */
  }
  html.apprefonte .pv-composer textarea:focus { border-color: var(--ar-cyan) !important; }
  html.apprefonte .pv-send-btn {
    width: var(--ar-btn-h) !important; height: var(--ar-btn-h) !important;
    background: var(--ar-cyan-10) !important;
    border: 1px solid var(--ar-cyan-40) !important;
    color: var(--ar-cyan) !important;
    border-radius: var(--ar-r-sm) !important;
  }
  html.apprefonte .pv-send-btn:hover { background: var(--ar-cyan-10) !important; }

  /* --- 2.10 États vides (liste vide + « Sélectionnez une conversation ») --- */
  html.apprefonte .pv-empty-title {
    font-family: 'Inter', system-ui, sans-serif !important;   /* serif banni */
    color: var(--ar-ink) !important;
  }
  html.apprefonte .pv-empty-sub { color: var(--ar-ink-soft) !important; }
  html.apprefonte .pv-empty-icon svg,
  html.apprefonte .pv-empty-icon svg * { stroke: var(--ar-cyan) !important; }
}