/* v1.98.83 — menu SOBRE (maquette « recommandée ») : fond bleu nuit uni, icônes simples, un point de couleur par bloc,
   seule la page ouverte et les alertes ressortent. Sur ordinateur : colonne d'icônes qui se déploie au survol
   (par-dessus la page) ; bouton ☰ = épingler ouvert (mémorisé). Téléphone : tiroir habituel. */
.sidebar { background: #0f1a2e; border-right: 1px solid #1c2840; padding: 12px 10px 14px; gap: 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }
.nav-head { display: flex; align-items: center; gap: 10px; padding: 2px 6px 0; color: #fff; white-space: nowrap; }
.nav-app { width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 10.5px; background: #e11d24; color: #fff; }
.nav-head b { display: block; font-size: 14px; } .nav-head small { color: #7f8ba0; font-size: 11px; }

.nav-block { margin: 0 !important; gap: 1px; }
.nav-block .nav-cat-title { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; border-radius: 6px;
  color: #7f8ba0; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.nav-block .nav-cat-title:hover { color: #c9d2e0; }
.nav-block .nav-cat-title:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cat); flex: none; }
.nav-cnt { display: none; }
.nav-sum { font-style: normal; margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0; color: #fff; background: #e11d24; border-radius: 999px; padding: 0 6px; }
.nav-block.open .nav-sum { display: none; }
.nav-block .nav-cat-title svg { margin-left: auto; color: #56627a; transition: transform .2s; flex: none; }
.nav-sum:not([hidden]) ~ svg { margin-left: 6px; }
.nav-block.open .nav-cat-title svg { transform: rotate(90deg); }
.nav-items { display: none; flex-direction: column; gap: 1px; }
.nav-block.open .nav-items { display: flex; }

.nav-block .nav-link { border-left: 0 !important; min-height: 38px; padding: 0 10px; gap: 12px; border-radius: 8px; color: #c9d2e0; font-size: 13.5px; position: relative; white-space: nowrap; background: none; box-shadow: none; }
.nav-block .nav-link:hover { background: rgba(255,255,255,.05); color: #fff; transform: none; }
.nav-ic { width: 20px; height: 20px; flex: none; display: grid !important; place-items: center; }
.nav-block .nav-link .nav-ic svg { color: #8d99ad !important; }
.nav-block .nav-link:hover .nav-ic svg { color: #fff !important; }
.nav-block .nav-link .nav-tx { display: flex; flex-direction: column; min-width: 0; }
.nav-tx > span { font-size: 13.5px; font-weight: 500; }
.nav-tx small { display: none; }
.nav-block .nav-link .nav-count { margin-left: auto; background: #e11d24; color: #fff; font-size: 10.5px; padding: 0 6px; border-radius: 999px; box-shadow: none; }
.nav-block .nav-link.active { background: color-mix(in srgb, var(--cat) 18%, transparent); color: #fff; font-weight: 600; box-shadow: none; }
.nav-block .nav-link.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--cat); }
.nav-block .nav-link.active .nav-ic svg { color: var(--cat) !important; }
.nav-block .nav-link.active .nav-count { background: #e11d24; }
.sidebar .nav-account { border-radius: 10px; background: rgba(255,255,255,.04); white-space: nowrap; }
.sidebar .nav-legend { display: none; }

/* ordinateur : colonne d'icônes qui se déploie au survol */
@media (min-width: 821px) {
  :root { --side-w: 64px; }
  html.nav-pinned { --side-w: 248px; }
  .sidebar { width: var(--side-w); overflow-x: hidden; transition: width .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; z-index: 30; }
  .sidebar > * { min-width: 226px; }
  html:not(.nav-pinned) .sidebar:hover, html:not(.nav-pinned) .sidebar:focus-within { width: 248px; box-shadow: 18px 0 40px rgba(7,11,20,.35); transition-delay: .08s; }
  .nav-link span, .nav-cat-title, .nav-legend { display: revert; }
  .nav-block .nav-link { justify-content: flex-start; padding: 0 12px; }
  .nav-items { display: flex !important; }
  .nav-block .nav-cat-title { pointer-events: none; cursor: default; }
  .nav-block .nav-cat-title svg, .nav-sum { display: none !important; }
  html:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) :is(.nav-tx, .nav-head div, .nav-cat-title > span, .nav-account div, .nav-account button) { opacity: 0; }
  html:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .nav-cat-title { padding: 4px 18px; }
  html:not(.nav-pinned) .sidebar:not(:hover):not(:focus-within) .nav-link .nav-count { position: absolute; left: 26px; top: 4px; font-size: 9.5px; line-height: 14px; min-width: 14px; padding: 0 4px; text-align: center; }
  .nav-tx, .nav-head div, .nav-cat-title > span, .nav-sum { transition: opacity .15s; }
}
@media (max-width: 820px) {
  .nav-block .nav-link { min-height: 46px; font-size: 15px; }
  .nav-tx > span { font-size: 15px; }
  .nav-block .nav-cat-title { font-size: 11.5px; padding: 6px 8px; }
}

/* onglets des pages regroupées — v1.98.83 : barre bleu nuit (maquette C), onglet ouvert = pastille blanche */
.subnav { display: flex; gap: 2px; margin: 12px 14px 0; padding: 4px; width: max-content; max-width: calc(100% - 28px); box-sizing: border-box;
  background: #0f1a2e; border-radius: 12px; overflow-x: auto; scrollbar-width: none; box-shadow: 0 2px 8px rgba(15,26,46,.18); }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; padding: 8px 13px; border-radius: 9px;
  font-size: 13px; font-weight: 500; color: #9aa6b8; transition: color .15s, background .15s; }
.subnav a svg { color: #8d99ad; }
.subnav a:hover { color: #fff; } .subnav a:hover svg { color: #fff; }
.subnav a.on { background: #fff; color: #14223b; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.subnav a.on svg { color: var(--cat); }
.subnav a:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.subnav a em { font-style: normal; font-size: 10.5px; font-weight: 700; color: #fff; background: #e11d24; border-radius: 999px; padding: 0 6px; line-height: 16px; }
html[data-theme="dark"] .subnav { background: #0a1220; box-shadow: inset 0 0 0 1px #1c2840; }
@media (max-width: 820px) { .subnav { margin: 10px 10px 0; max-width: calc(100% - 20px); } .subnav a { padding: 8px 11px; } }

/* v1.98.83 : bandeau de titre sans photo (fond clair) */
.banner.banner-light { height: auto; overflow: visible; background: transparent; padding: 18px 22px 2px; display: flex; align-items: center; gap: 12px; --cat: #94a3b8; }
.banner.banner-light::before, .banner.banner-light::after { display: none; }
.banner.banner-light h1 { position: static; margin: 0; font-size: 22px; line-height: 1.15; color: var(--text, #14223b); text-shadow: none; display: block; }
.banner.banner-light .bl-sub { display: block; font-size: 12.5px; color: var(--muted, #6b7689); margin-top: 2px; }
.banner.banner-light .bl-sub:empty { display: none; }
.bl-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: var(--cat); background: color-mix(in srgb, var(--cat) 14%, #fff); }
.bl-ic:empty { display: none; }
.banner-light + .subnav { margin: 12px 22px 0; }
html[data-theme="dark"] .bl-ic { background: color-mix(in srgb, var(--cat) 20%, #121a2b); }
@media (max-width: 820px) { .banner.banner-light { padding: 14px 12px 2px; } .banner.banner-light h1 { font-size: 20px; } .banner-light + .subnav { margin: 10px 10px 0; } }

/* page « Toutes les pages » */
.ap-search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #dfe3ea; border-radius: 999px; padding: 8px 14px; min-width: min(320px, 100%); color: #6b7689; }
.ap-search input { border: 0; outline: 0; flex: 1; font: inherit; background: transparent; color: #14223b; }
.ap-cat h2 { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--cat) 80%, #000); }
.ap-cat h2 i { width: 10px; height: 10px; border-radius: 50%; background: var(--cat); }
.ap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ap-tile { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; text-decoration: none; color: #14223b; font-weight: 600; font-size: 14px;
  background: #fff; border: 1px solid color-mix(in srgb, var(--cat) 22%, #e3e7ee); box-shadow: 0 2px 8px rgba(20,34,59,.04); }
.ap-tile:hover { border-color: var(--cat); box-shadow: 0 6px 16px color-mix(in srgb, var(--cat) 18%, transparent); }
.ap-tile svg { color: var(--cat); flex: none; }