/* ============================================================================
   REFONTE APP — Ma sécurité (thème CLAIR) fidèle maquette 25. Scopé
   html.apprefonte + ≤768px + body.page-ma-securite. Additif/réversible.
   ============================================================================ */
html.apprefonte .ar-secu { display: none; }

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  /* (audit 24/08 · FDCN-067) `:not(.ar-secu-editing)` AJOUTÉ ICI.
     AVANT : la règle de ré-affichage plus bas pesait (0,5,1) alors que ce masquage
     pèse (0,6,1) — trois `:not()` contre un seul — et les DEUX sont `!important`.
     Le masquage gagnait donc toujours : « Sécuriser un rendez-vous » et « Passées »
     cachaient le bloc APP SANS révéler la vraie page, et l'écran principal devenait
     entièrement vide (mainTextLength = 0). On neutralise désormais le masquage à la
     source plutôt que de lutter avec une contre-règle. */
  html.apprefonte:not(.ar-secu-editing):has(.ar-secu) .pub-content > *:not(.ar-secu):not(.ann-banner-wrap):not(.flash) { display: none !important; }
  html.apprefonte body.page-ma-securite .pub-topbar { display: none !important; }
  /* Fond CLAIR pour cet écran (neutralise le fond sombre + éventuelle image de page) */
  html.apprefonte body.page-ma-securite { background: #EEF1F4 !important; }
  html.apprefonte body.page-ma-securite::before { display: none !important; }
  html.apprefonte:has(.ar-secu) .pub-content { background: #EEF1F4 !important; }
  html.apprefonte .ar-secu { display: block; padding: 14px 14px calc(var(--ar-navh,64px) + var(--ar-safe-b,0px) + 84px); color: #1F2D37; }

  /* Ré-affichage de la vraie page (bouton / onglet Passées) */
  html.apprefonte.ar-secu-editing .ar-secu { display: none !important; }
  /* (audit 24/08 · FDCN-067) L'ancienne contre-règle `display: revert !important` est
     RETIRÉE : elle ne gagnait pas la spécificité (voir plus haut) et, si elle avait
     gagné, `revert` aurait écrasé le display naturel de chaque bloc (un conteneur en
     flex ou en grid serait redevenu block). Le masquage ne s'appliquant plus quand
     `.ar-secu-editing` est posée, chaque bloc retrouve simplement son display d'origine.
     Ancienne ligne, conservée pour mémoire :
     html.apprefonte.ar-secu-editing:has(.ar-secu) .pub-content > *:not(.ar-secu) { display: revert !important; } */
  html.apprefonte.ar-secu-editing body.page-ma-securite { background: #071624 !important; }
  html.apprefonte.ar-secu-editing:has(.ar-secu) .pub-content { background: transparent !important; }
  html.apprefonte.ar-secu-editing body.page-ma-securite .pub-topbar { display: flex !important; }

  /* En-tête */
  html.apprefonte .ar-secu-head { display: flex; align-items: center; gap: 14px; padding: 6px 0 16px; }
  html.apprefonte .ar-secu-shield { font-size: 34px; }
  html.apprefonte .ar-secu-titles h1 { margin: 0; font: 800 27px/1.05 'Inter',system-ui,sans-serif; color: #16232B; letter-spacing: -.3px; }
  html.apprefonte .ar-secu-titles p { margin: 4px 0 0; font-size: 14px; color: #64748B; }

  /* Carte succès (vert clair) */
  html.apprefonte .ar-secu-hero { background: #E9F7EF; border: 1px solid #BBE8CC; border-radius: 20px; padding: 18px; margin-bottom: 18px; }
  html.apprefonte .ar-secu-hero-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  html.apprefonte .ar-secu-check { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; background: #16A34A; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; }
  html.apprefonte .ar-secu-hero-top h2 { margin: 0 0 3px; font: 800 18px/1.15 'Inter',system-ui,sans-serif; color: #15803D; }
  html.apprefonte .ar-secu-hero-top p { margin: 0; font-size: 13.5px; color: #5B6B76; }
  html.apprefonte .ar-secu-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; box-sizing: border-box; padding: 15px; border-radius: 13px; background: #16A34A; color: #fff; font-weight: 800; font-size: 15.5px; text-decoration: none; }

  /* Onglets */
  html.apprefonte .ar-secu-tabs { display: flex; gap: 6px; background: #fff; border: 1px solid #E4E9ED; border-radius: 13px; padding: 5px; margin-bottom: 16px; }
  html.apprefonte .ar-secu-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 6px; border: 0; border-radius: 9px; background: transparent; color: #5B6B76; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; text-decoration: none; }
  html.apprefonte .ar-secu-tab.is-active { color: #15803D; box-shadow: inset 0 -2px 0 #16A34A; }

  /* Liste / vide */
  html.apprefonte .ar-secu-empty { background: #fff; border: 1px solid #E4E9ED; border-radius: 16px; padding: 26px 16px; text-align: center; color: #64748B; font-size: 14px; margin-bottom: 16px; }

  /* Barre info (bleu clair) */
  html.apprefonte .ar-secu-info { display: flex; align-items: center; gap: 10px; background: #EAF0FB; border: 1px solid #D0DEF5; border-radius: 14px; padding: 14px 16px; color: #3B5B9A; font-size: 13.5px; }
  html.apprefonte .ar-secu-lock { font-size: 17px; }

  /* (15/08 AUDIT) Hero — variantes selon l'état RÉEL (au lieu du « aucune protection » en dur). */
  html.apprefonte .ar-secu-hero.is-pending { background: #FFF6E6; border-color: #F3DCA8; }
  html.apprefonte .ar-secu-hero.is-pending .ar-secu-check { background: #D98A15; }
  html.apprefonte .ar-secu-hero.is-pending .ar-secu-hero-top h2 { color: #9A6410; }
  html.apprefonte .ar-secu-hero.is-pending .ar-secu-btn { background: #D98A15; }

  /* Liste des protections/RDV réellement en cours (chacun ouvre le détail via le toggle). */
  html.apprefonte .ar-secu-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  html.apprefonte .ar-secu-item { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #E4E9ED; border-radius: 14px; padding: 13px 14px; text-decoration: none; color: #1F2D37; }
  html.apprefonte .ar-secu-item-ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; background: #EAF0FB; display: flex; align-items: center; justify-content: center; font-size: 19px; }
  html.apprefonte .ar-secu-item-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  html.apprefonte .ar-secu-item-tt { font-weight: 700; font-size: 14.5px; color: #16232B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html.apprefonte .ar-secu-item-sub { font-size: 12.5px; color: #64748B; }
  html.apprefonte .ar-secu-badge { flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
  html.apprefonte .ar-secu-badge.live { background: rgba(22,163,74,.14); color: #15803D; }
  html.apprefonte .ar-secu-badge.off { background: rgba(217,138,21,.16); color: #9A6410; }
  html.apprefonte .ar-secu-badge.done { background: rgba(95,107,120,.16); color: #5F6B78; }
}