/* zzzz-securite.css — REFONTE APP « Ma securite » : passe SOMBRE finale (charte
   navy/cyan/ambre) posee PAR-DESSUS zz-securite-app.css, qui rendait cet ecran
   en theme CLAIR. Recoloration seule : memes classes, aucune fonction touchee.
   Rollback : supprimer ce fichier -> retour au rendu clair precedent. */

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

  /* ---- Fond sombre (annule le #EEF1F4 clair), hors mode « vraie page » ---- */
  html.apprefonte:not(.ar-secu-editing) body.page-ma-securite { background: #071624 !important; }
  html.apprefonte:not(.ar-secu-editing):has(.ar-secu) .pub-content { background: #071624 !important; }
  html.apprefonte:not(.ar-secu-editing) .ar-secu { color: #F6F0DF !important; }

  /* ---- En-tete ---- */
  html.apprefonte .ar-secu-titles h1 { color: #F6F0DF !important; }
  html.apprefonte .ar-secu-titles p  { color: rgba(246,240,223,.60) !important; }

  /* ---- Carte d'etat (hero) + CTA integre : etat « OK / active » = cyan ---- */
  html.apprefonte .ar-secu-hero { background: #0D2233 !important; border: 1px solid rgba(255,255,255,.08) !important; }
  html.apprefonte .ar-secu-hero-top h2 { color: #35D7D1 !important; }
  html.apprefonte .ar-secu-hero-top p  { color: rgba(246,240,223,.62) !important; }
  html.apprefonte .ar-secu-check { background: #35D7D1 !important; color: #071624 !important; }
  html.apprefonte .ar-secu-btn {
    background: #35D7D1 !important; color: #071624 !important;
    box-shadow: 0 8px 22px rgba(53,215,209,.22) !important;
  }

  /* Etat « en attente » (programmee, pas encore active) = ambre */
  html.apprefonte .ar-secu-hero.is-pending { background: #0D2233 !important; border-color: rgba(255,182,90,.32) !important; }
  html.apprefonte .ar-secu-hero.is-pending .ar-secu-check { background: #FFB65A !important; color: #071624 !important; }
  html.apprefonte .ar-secu-hero.is-pending .ar-secu-hero-top h2 { color: #FFB65A !important; }
  html.apprefonte .ar-secu-hero.is-pending .ar-secu-btn {
    background: #FFB65A !important; color: #071624 !important;
    box-shadow: 0 8px 22px rgba(255,182,90,.20) !important;
  }

  /* ---- Onglets soulignes ---- */
  html.apprefonte .ar-secu-tabs { background: #0D2233 !important; border: 1px solid rgba(255,255,255,.08) !important; }
  html.apprefonte .ar-secu-tab { color: rgba(246,240,223,.55) !important; }
  html.apprefonte .ar-secu-tab.is-active { color: #35D7D1 !important; box-shadow: inset 0 -2px 0 #35D7D1 !important; }

  /* ---- Etat vide ---- */
  html.apprefonte .ar-secu-empty { background: #0D2233 !important; border: 1px solid rgba(255,255,255,.08) !important; color: rgba(246,240,223,.55) !important; }

  /* ---- Lignes a tuiles ---- */
  html.apprefonte .ar-secu-item { background: #0D2233 !important; border: 1px solid rgba(255,255,255,.08) !important; color: #F6F0DF !important; }
  html.apprefonte .ar-secu-item-ic {
    border-radius: 12px !important;               /* tuile arrondie (maquette) */
    background: rgba(53,215,209,.12) !important;
    border: 1px solid rgba(255,255,255,.06) !important;
  }
  html.apprefonte .ar-secu-item-tt  { color: #F6F0DF !important; }
  html.apprefonte .ar-secu-item-sub { color: rgba(246,240,223,.55) !important; }
  /* Chevron « › » a droite (chrome decoratif conforme maquette, ajout inerte) */
  html.apprefonte .ar-secu-item::after {
    content: '\203A'; flex: 0 0 auto; margin-left: 2px;
    font-size: 22px; line-height: 1; color: rgba(246,240,223,.35);
  }

  /* ---- Badges de statut ---- */
  html.apprefonte .ar-secu-badge.live { background: rgba(53,215,209,.16) !important; color: #35D7D1 !important; }
  html.apprefonte .ar-secu-badge.off  { background: rgba(255,182,90,.16) !important; color: #FFB65A !important; }
  html.apprefonte .ar-secu-badge.done { background: rgba(246,240,223,.10) !important; color: rgba(246,240,223,.70) !important; }

  /* ---- Barre d'info (bas) ---- */
  html.apprefonte .ar-secu-info {
    background: rgba(53,215,209,.07) !important;
    border: 1px solid rgba(53,215,209,.18) !important;
    color: rgba(246,240,223,.75) !important;
  }
  html.apprefonte .ar-secu-lock { color: #35D7D1 !important; }
}