/* Contenus de l'application (étape 5 de la bascule Supabase) : unes (publications
   Swift, dans article.html), Guides, Lexique, et mots reliés au lexique.
   Chargé seulement par article.html, guides.html et lexique.html. */
.mini-badge.app-cat-general { color: var(--text-dim); }
.une-niveau { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2px; color: var(--text-dim); }
.une-niveau::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.une-niveau-fort, .feed-post-meta .une-niveau-fort { color: var(--bad); }
.une-niveau-notable, .feed-post-meta .une-niveau-notable { color: var(--accent); }
.une-niveau-calme, .feed-post-meta .une-niveau-calme { color: var(--good); }
.feed-post-meta .une-niveau { font-size: 0.72rem; font-weight: 600; margin: 0 10px; }
.actu-post .actu-cat.app-cat-general { color: var(--text-dim); }
/* Le bloc ne doit jamais s'élargir pour contenir le tableau des cours :
   c'est le tableau qui défile dans sa largeur (téléphone). */
.actu-feed > .feed-post { min-width: 0; max-width: 100%; }
.une-sources a { overflow-wrap: anywhere; }
.une-chapeau { padding: 16px 24px 0; margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--text); font-weight: 500; }
.une-points { list-style: none; margin: 0; padding: 12px 24px 0; }
.une-points li { padding: 10px 0; border-bottom: 1px solid var(--border); line-height: 1.55; color: var(--text-muted, var(--text-dim)); }
.une-points li:last-child { border-bottom: 0; }
.une-points strong { color: var(--text); margin-right: 4px; }
.une-sous-titre { margin: 22px 24px 8px; font-size: 0.78rem; letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); font-weight: 600; }
.une-cours-wrap { overflow-x: auto; padding: 0 24px; }
.une-cours { width: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.une-cours th, .une-cours td { padding: 9px 6px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
.une-cours th[scope="row"], .une-cours thead th:first-child { text-align: left; font-weight: 500; color: var(--text); }
.une-cours thead th { font-size: 0.72rem; color: var(--text-dim); font-weight: 600; }
.une-cours .is-up { color: var(--good); }
.une-cours .is-down { color: var(--bad); }
.une-seuil { margin-left: 6px; padding: 2px 8px; border-radius: 100px; font-size: 0.66rem; font-weight: 600; color: var(--accent); background: rgba(var(--accent-rgb, 125,48,248), 0.12); }
.une-sources { list-style: none; margin: 0; padding: 0 24px; }
.une-sources li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.9rem; line-height: 1.45; }
.une-sources a { display: inline-block; padding: 3px 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--border-hover, var(--border)); text-underline-offset: 3px; }
.une-source-nom { display: block; font-size: 0.75rem; color: var(--text-dim); margin-top: 2px; }
.une-mention { margin: 20px 24px 22px; font-size: 0.78rem; color: var(--text-dim); line-height: 1.5; }
.lexique-filtres { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px auto 0; max-width: 760px; }
.lexique-filtre { min-height: 36px; padding: 6px 14px; border-radius: 100px; border: 1px solid var(--border); background: var(--surface-card, transparent); color: var(--text-dim); font: inherit; font-size: 0.85rem; cursor: pointer; }
.lexique-filtre[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent, #fff); }
.lexique-liste { max-width: 760px; margin: 28px auto 0; }
.lexique-lettre + .lexique-lettre { margin-top: 26px; }
.lexique-initiale { font-size: 1.1rem; margin: 0 0 6px; color: var(--accent); }
.lexique-liste dl { margin: 0; }
.lexique-terme { padding: 14px 0; border-bottom: 1px solid var(--border); }
.lexique-terme dt { font-weight: 600; color: var(--text); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lexique-terme dd { margin: 6px 0 0; line-height: 1.6; color: var(--text-muted, var(--text-dim)); }

/* Mots techniques reliés au lexique (publications Swift). */
.lex-mot { display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; line-height: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: var(--accent); }
.lex-mot:hover, .lex-mot[aria-expanded="true"] { color: var(--accent); }
.lex-mot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.lex-pop { position: fixed; z-index: 1000; width: min(320px, calc(100vw - 24px)); padding: 14px 16px; border-radius: 14px;
  background: var(--bg-card, #fff); color: var(--text); border: 1px solid var(--border); box-shadow: 0 12px 32px rgba(0,0,0,0.28); }
.lex-pop-terme { display: block; font-size: 0.95rem; margin-bottom: 6px; }
.lex-pop p { margin: 0 0 10px; font-size: 0.88rem; line-height: 1.55; color: var(--text-muted, var(--text-dim)); }
.lex-pop-lien { font-size: 0.82rem; font-weight: 600; color: var(--accent); }
.une-corps { padding-bottom: 2px; }


/* En-tête d'une actualité (L'Actu) : étiquette, date et niveau vont à la ligne
   PROPREMENT sur téléphone au lieu de couper la date sous l'étiquette. */
.actu-post .feed-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.actu-post .feed-post-meta > span { white-space: nowrap; }
.actu-post .feed-post-meta .actu-cat, .feed-post-meta .une-niveau { margin: 0; }

/* Vignette d'un guide (liste des guides). */
.mini-card .guide-vignette { margin: -2px -2px 12px; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface-badge, rgba(0,0,0,0.05)); }
.mini-card .guide-vignette img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; }