/* ============================================================================
   REFONTE APP — Réglages (menu) fidèle maquette 15. Scopé html.apprefonte
   + ≤768px + body.page-reglages. Additif/réversible. Rouge réservé au danger.
   ============================================================================ */
html.apprefonte .ar-reglages { display: none; }
html.apprefonte .ar-rg-back { display: none; }

@media (max-width: 768px), (pointer: coarse) and (max-width: 1366px), (display-mode: standalone) and (max-width: 1366px) {
  html.apprefonte:not(.ar-rg-editing):has(.ar-reglages) .pub-content > *:not(.ar-reglages):not(.ar-rg-back):not(.ann-banner-wrap):not(.flash) { display: none !important; }
  html.apprefonte body.page-reglages .pub-topbar { display: none !important; }
  html.apprefonte .ar-reglages { display: block; padding: 8px 14px calc(var(--ar-navh,64px) + var(--ar-safe-b,0px) + 84px); color: var(--ar-ink); }

  /* Mode « voir la page d'origine » (clic sur une rangée section) */
  html.apprefonte.ar-rg-editing .ar-reglages { display: none !important; }
  /* (19/08 correctif) L'ancienne regle « display: revert !important » ne s'appliquait JAMAIS :
     la regle de masquage ci-dessus etait PLUS SPECIFIQUE (3 x :not = 6 classes contre 5) et
     gagnait la cascade -> la page restait entierement vide. Le masque est desormais desactive
     par :not(.ar-rg-editing), et le contenu d'origine reprend son propre affichage (grid/flex). */
  html.apprefonte.ar-rg-editing .ar-rg-back { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 12px; padding: 9px 15px; border: 1px solid var(--ar-hairline); border-radius: 100px; background: var(--ar-surface); color: var(--ar-ink); font: 600 14px/1 system-ui, -apple-system, sans-serif; cursor: pointer; }
  html.apprefonte.ar-rg-editing body.page-reglages .pub-topbar { display: flex !important; }

  /* En-tête */
  html.apprefonte .ar-rg-head { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 16px; position: relative; }
  html.apprefonte .ar-rg-fire { position: absolute; left: 0; font-size: 26px; }
  html.apprefonte .ar-rg-head h1 { margin: 0; font: 700 31px/1.05 'Cormorant Garamond',Georgia,serif; color: var(--ar-ink); }

  /* Recherche */
  html.apprefonte .ar-rg-search { display: flex; align-items: center; gap: 10px; background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: 14px; padding: 12px 15px; margin-bottom: 16px; }
  html.apprefonte .ar-rg-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--ar-ink); font-size: 15px; }
  html.apprefonte .ar-rg-search input::placeholder { color: var(--ar-ink-soft); }

  /* Liste des catégories */
  html.apprefonte .ar-rg-list { background: var(--ar-surface); border: 1px solid var(--ar-hairline); border-radius: 16px; overflow: hidden; margin-bottom: 16px; }
  html.apprefonte .ar-rg-row { display: flex; align-items: center; gap: 14px; padding: 15px 16px; text-decoration: none; color: var(--ar-ink); border-bottom: 1px solid var(--ar-hairline); }
  html.apprefonte .ar-rg-row:last-child { border-bottom: 0; }
  html.apprefonte .ar-rg-ic { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(53,215,209,.10); border: 1px solid var(--ar-hairline); font-size: 19px; }
  html.apprefonte .ar-rg-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  html.apprefonte .ar-rg-t { font-weight: 700; font-size: 15.5px; }
  html.apprefonte .ar-rg-s { font-size: 12.5px; color: var(--ar-ink-soft); }
  html.apprefonte .ar-rg-chev { flex: 0 0 auto; color: var(--ar-ink-soft); font-size: 22px; }

  /* Cartes danger (rouge) */
  html.apprefonte .ar-rg-danger { border: 1px solid rgba(220,53,47,.45); border-radius: 16px; overflow: hidden; }
  html.apprefonte .ar-rg-drow { display: flex; align-items: center; gap: 14px; padding: 15px 16px; text-decoration: none; color: #ff6b63; border-bottom: 1px solid rgba(220,53,47,.25); background: rgba(220,53,47,.06); }
  html.apprefonte .ar-rg-drow:last-child { border-bottom: 0; }
  html.apprefonte .ar-rg-drow .ar-rg-ic { background: rgba(220,53,47,.12); border-color: rgba(220,53,47,.4); }
  html.apprefonte .ar-rg-drow .ar-rg-t { color: #ff6b63; }
  html.apprefonte .ar-rg-drow .ar-rg-s { color: rgba(255,120,110,.75); }
  html.apprefonte .ar-rg-drow .ar-rg-chev { color: #ff6b63; }
}