/* Vigie · thème « Signal dense » pour Glance 0.8.7
   Déclaré dans glance.yml : theme.custom-css-file: /assets/signal-dense.css
   Remplace l'ancienne feuille glance-perso.css (dont il reprend les réglages utiles).

   Deux modes, choisis par le sélecteur de thème de Glance :
   - clair (thème par défaut, data-scheme="light") ;
   - sombre doux (préréglage default-dark, data-scheme="dark") : fond gris ardoise, jamais noir,
     texte blanc cassé au contraste ~9:1 au lieu de ~17:1, couleurs adoucies, graisses et
     interlettrage ajustés pour limiter l'effet de halo (astigmatisme, myopie).

   Polices : Atkinson Hyperlegible Next et Mono (Braille Institute, licence OFL), en fichiers
   variables (axe de graisse 200 à 800) servis depuis /assets/fonts/.
   « :root:root » l'emporte sur les déclarations « :root » de Glance, quel que soit l'ordre.

   Feuille de base de Glance (/static/…/css/bundle.css, intégrée au programme, chargée avant celle-ci) :
   ses effets indésirables sont corrigés dans la section 13 (v1.2), qui en donne l'inventaire. */

/* ---------------------------------------------------------------- 1. Polices variables */

@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2-variations'),
       url('fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2') format('woff2-variations'),
       url('fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible Mono';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/atkinson-hyperlegible-mono-latin-ext-wght-normal.woff2') format('woff2-variations'),
       url('fonts/atkinson-hyperlegible-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- 2. Jetons : mode clair */

:root:root {
  color-scheme: light;

  --vg-font: 'Atkinson Hyperlegible Next', Verdana, 'Segoe UI', Arial, sans-serif;
  --vg-mono: 'Atkinson Hyperlegible Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Variables de Glance */
  --color-background: hsl(210 25% 96%);
  --color-widget-background: hsl(0 0% 100%);
  --color-widget-content-border: hsl(210 16% 80%);
  --color-widget-background-highlight: hsl(210 25% 93%);
  --color-separator: hsl(210 16% 89%);
  --color-popover-background: hsl(0 0% 100%);
  --color-popover-border: hsl(210 16% 78%);
  --color-text-highlight: hsl(215 40% 10%);   /* 17,9:1 */
  --color-text-paragraph: hsl(215 25% 18%);
  --color-text-base: hsl(215 18% 24%);        /* 11,3:1 */
  --color-text-base-muted: hsl(215 15% 29%);
  --color-text-subdue: hsl(215 12% 34%);      /* 7,6:1 */
  --color-primary: hsl(225 85% 40%);          /* 8,9:1 */
  --color-positive: hsl(150 70% 28%);
  --color-negative: hsl(356 80% 38%);         /* 7,2:1 */

  /* Jetons Vigie */
  --vg-visited: hsl(285 45% 48%);             /* 5,6:1 ; écart de luminosité 1,6 avec le lien */
  --vg-err: hsl(356 80% 38%);
  --vg-err-bg: hsl(356 90% 97%);
  --vg-err-pill-bg: hsl(356 80% 38%);
  --vg-err-pill-fg: hsl(0 0% 100%);
  --vg-amb: hsl(30 100% 26%);                 /* 7,6:1 */
  --vg-amb-bg: hsl(45 100% 94%);
  --vg-amb-pill-bg: hsl(45 100% 52%);
  --vg-amb-pill-fg: hsl(215 40% 10%);
  --vg-info-pill-bg: hsl(215 30% 91%);
  --vg-info-pill-fg: hsl(215 40% 10%);
  --vg-selection: hsl(225 85% 40% / 0.16);
  --vg-marque: url('vigie/marque-clair.svg');
  /* Fond des widgets en valeurs TSL séparées par des virgules : Glance s'en sert dans des dégradés */
  --color-widget-background-hsl-values: 0, 0%, 100%;

  /* Graisses prises sur l'axe variable, interlignes et interlettrages */
  --vg-w-title: 560;
  --vg-w-text: 400;
  --vg-w-meta: 420;
  --vg-lh-title: 1.32;
  --vg-lh-text: 1.45;
  --vg-ls-title: 0;
  --vg-ls-text: 0;
  --vg-ls-meta: 0;

  /* Petites tailles de Glance relevées : rien sous 12 px */
  --font-size-h5: 1.2rem;
  --font-size-h6: 1.2rem;

  /* Densité (piste Ardoise) */
  --border-radius: 8px;
  --widget-gap: 20px;
  --widget-content-vertical-padding: 13px;
  --widget-content-horizontal-padding: 15px;
}

/* ---------------------------------------------------------------- 3. Jetons : mode sombre doux */

:root:root[data-scheme="dark"] {
  color-scheme: dark;

  --color-background: hsl(218 13% 18%);
  --color-widget-background: hsl(218 12% 22%);
  --color-widget-content-border: hsl(218 10% 34%);
  --color-widget-background-highlight: hsl(218 12% 27%);
  --color-separator: hsl(218 10% 30%);
  --color-popover-background: hsl(218 12% 25%);
  --color-popover-border: hsl(218 10% 40%);
  --color-text-highlight: hsl(40 22% 88%);    /* 9,4:1, blanc cassé chaud */
  --color-text-paragraph: hsl(40 14% 83%);
  --color-text-base: hsl(40 10% 79%);         /* 7,5:1 */
  --color-text-base-muted: hsl(40 8% 74%);
  --color-text-subdue: hsl(218 10% 69%);      /* 5,4:1 */
  --color-primary: hsl(208 80% 80%);          /* 7,4:1, bleu ciel peu saturé */
  --color-positive: hsl(150 40% 66%);
  --color-negative: hsl(6 85% 76%);           /* 5,6:1, corail */

  --vg-visited: hsl(285 22% 67%);             /* 4,7:1 ; plus sombre que le lien */
  --vg-err: hsl(6 85% 76%);
  --vg-err-bg: hsl(6 30% 27%);
  --vg-err-pill-bg: hsl(6 80% 74%);
  --vg-err-pill-fg: hsl(218 13% 18%);
  --vg-amb: hsl(40 90% 66%);                  /* 7,4:1 */
  --vg-amb-bg: hsl(40 30% 25%);
  --vg-amb-pill-bg: hsl(44 92% 64%);
  --vg-amb-pill-fg: hsl(218 13% 18%);
  --vg-info-pill-bg: hsl(218 12% 32%);
  --vg-info-pill-fg: hsl(40 22% 88%);
  --vg-selection: hsl(208 80% 80% / 0.22);
  --vg-marque: url('vigie/marque-sombre.svg');
  --color-widget-background-hsl-values: 218, 12%, 22%;

  /* Contre le halo : titres un peu plus légers, lettres et lignes un peu plus aérées */
  --vg-w-title: 530;
  --vg-w-meta: 400;
  --vg-lh-title: 1.38;
  --vg-lh-text: 1.52;
  --vg-ls-title: 0.01em;
  --vg-ls-text: 0.012em;
  --vg-ls-meta: 0.01em;
}

/* ---------------------------------------------------------------- 4. Base */

/* Taille de référence (ajout du 27/10). Glance fixe la racine à 10 px (1rem = 10 px) : la taille de police
   du navigateur (16 px par défaut, réglable dans Chrome) n'était plus prise en compte, et le texte courant
   de Glance (1,3rem) tombait à 13 px, les titres à 14 px. Ici, la racine suit le navigateur : 1,3rem vaut
   exactement sa taille de base (16 px par défaut), soit des titres à 17 px et des métadonnées à 15 px ;
   toutes les tailles du thème restent dans les mêmes proportions. Pour tout agrandir ou réduire :
   Chrome, Réglages › Apparence › Taille de police (ou le zoom de la page). */
:root:root { font-size: calc(100% / 1.3); }

body {
  font-family: var(--vg-font);
  font-weight: var(--vg-w-text);
  font-variant-ligatures: normal;
  line-height: var(--vg-lh-text);
  letter-spacing: var(--vg-ls-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background-color: var(--vg-selection); color: inherit; }

*:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

/* Cadres plats : sans l'ombre portée de Glance */
.widget-content:not(.widget-content-frameless), .widget-content-frame { box-shadow: none; }

/* ---------------------------------------------------------------- 5. En-tête, logo, navigation */

.header-container { --header-height: 48px; --header-items-gap: 2.2rem; }

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--vg-font);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-highlight);
}
.logo::before {
  content: "";
  flex: none;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--vg-marque) center / contain no-repeat;
}

.nav-item { font-size: 1.4rem; font-weight: 600; border-bottom-width: 3px; }
.desktop-navigation .nav-item-text { margin-top: 3px; }

/* Sélecteur de thème : deux choix seulement (clair, sombre doux). Le préréglage
   default-light reprend les valeurs du thème clair : on masque ce doublon. */
.theme-choices .theme-preset[data-key="default-light"] { display: none; }
.current-theme-preview { opacity: 0.7; }

/* ---------------------------------------------------------------- 6. Widgets et onglets */

.widget-header {
  font-family: var(--vg-font);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-highlight);
  margin-bottom: 0.8rem;
}
.widget-header .uppercase { text-transform: none; }

.widget-group-title {
  text-transform: none;
  font-weight: 700;
  color: var(--color-text-subdue);
  border-bottom: 3px solid transparent;
  padding-bottom: 1px;
}
.widget-group-title:hover:not(.widget-group-title-current) { color: var(--color-text-base); }
.widget-group-title-current { color: var(--color-text-highlight); border-bottom-color: var(--color-primary); }

/* ---------------------------------------------------------------- 7. Listes : titres, méta, résumés */

.list-gap-14 { --list-half-gap: 0.55rem; }

.size-title-dynamic {
  font-weight: var(--vg-w-title);
  line-height: var(--vg-lh-title);
  letter-spacing: var(--vg-ls-title);
  text-wrap: pretty;
}
.page-column-full .size-title-dynamic { font-size: 1.4rem; }
.page-column-small .size-title-dynamic { font-size: 1.3rem; }

/* Liens visités : couleur (seule propriété permise par les navigateurs sur :visited) */
.color-primary-if-not-visited:visited { color: var(--vg-visited); }
a.color-primary-if-not-visited:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* Lignes de méta (sources, points, dates) : Next en chiffres tabulaires.
   La Mono est réservée aux informations de collecte (pied « Collecté … »). */
.list-horizontal-text {
  font-family: var(--vg-font);
  font-size: 1.2rem;
  font-weight: var(--vg-w-meta);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--vg-ls-meta);
  line-height: 1.45;
}
.list-horizontal-text > *:not(:last-child)::after { margin: 0 0.45rem; }
.text-compact { word-spacing: normal; }

.rss-detailed-description { color: var(--color-text-base); line-height: var(--vg-lh-text); }
/* Descriptions des flux RSS en liste détaillée (News Minimalist…) : en entier, plus coupées à 2 lignes. */
.rss-detailed-description.text-truncate-2-lines { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }

.expand-toggle-button {
  text-transform: none;
  font-family: var(--vg-font);
  font-size: 1.3rem;
  font-weight: 700;
  padding-block: 1.1rem;
}
/* Le chevron de Glance est un glyphe propre à JetBrains Mono : remplacé par « › » */
.expand-toggle-button-icon::before { content: '›' / ""; font-size: 1.5rem; font-weight: 700; }
/* Glance remonte l'icône de 0,2rem pour son glyphe d'origine : le chevron « › » flottait au-dessus du texte (v1.2) */
.expand-toggle-button-icon { top: 0.05em; margin-left: 0.7rem; }

.bookmarks-group-title { font-weight: 700; }
.bookmarks-link { font-weight: 560; }

/* ---------------------------------------------------------------- 8. Gabarits de Raphaël (gabarits/sources.html) */

.src-meta { margin-top: 0.2rem; }
/* Texte très agrandi sur téléphone (v1.3) : un nom de domaine long (« magazine.sebastianraschka.com »)
   pouvait déborder de la carte ; il se coupe désormais, seulement s'il ne tient pas sur la ligne. */
.src-meta > li { min-width: 0; overflow-wrap: anywhere; }
.src-meta .src-lien { color: var(--color-text-base); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.src-meta .src-lien:hover { color: var(--color-primary); }
.src-resume { font-size: 1.3rem; line-height: var(--vg-lh-text); color: var(--color-text-base); }
.src-lies { padding-left: 1.2rem; border-left: 2px solid var(--color-separator); }
.src-lies .src-resume { font-size: 1.2rem; }
.src-lies .color-primary-if-not-visited { font-weight: var(--vg-w-title); line-height: var(--vg-lh-title); }
.src-groupe.uppercase { text-transform: none; font-size: 1.2rem; font-weight: 700; color: var(--color-text-subdue); }
.src-pied { font-family: var(--vg-mono); font-size: 1.15rem; line-height: 1.45; letter-spacing: var(--vg-ls-meta); }

/* ---------------------------------------------------------------- 9. Signaux de fraîcheur
   Lisibles sans la couleur : chaque message porte une étiquette écrite.
   rouge  .src-alerte  « Échec »   collecte en échec ou arrêtée, contenu daté
   ambre  .src-calme   « Attente » source muette, ou capture X d'hier à faire
   note   .src-note    « Info »    rattrapage en cours
   gris   .src-pied    pied « Collecté … · dernière publication … » */

.src-alerte, .src-calme {
  display: block;
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-family: var(--vg-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.45;
}
.src-alerte { background-color: var(--vg-err-bg); color: var(--vg-err); }
.src-calme { background-color: var(--vg-amb-bg); color: var(--vg-amb); }
.src-note { font-family: var(--vg-font); font-size: 1.25rem; line-height: 1.45; color: var(--color-text-base); }

.src-alerte::before, .src-calme::before, .src-note::before {
  display: inline-block;
  margin-right: 0.7rem;
  padding: 0.1rem 0.9rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1.45;
}
.src-alerte::before { content: "Échec"; background-color: var(--vg-err-pill-bg); color: var(--vg-err-pill-fg); }
.src-calme::before { content: "Attente"; background-color: var(--vg-amb-pill-bg); color: var(--vg-amb-pill-fg); }
.src-note::before { content: "Info"; background-color: var(--vg-info-pill-bg); color: var(--vg-info-pill-fg); }
/* Ajout à l'installation (27/10) : un avertissement des collecteurs (volume anormal, page non reconnue)
   reste rouge mais porte son étiquette propre ; le gabarit sources.html lui donne la classe src-attention. */
.src-alerte.src-attention::before { content: "Attention"; }

/* ---------------------------------------------------------------- 10. Pied de page (branding.custom-footer) */

.footer { font-family: var(--vg-font); }
.vg-pied { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding-inline: var(--content-bounds-padding); text-align: center; }
.vg-legende { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.6rem 1.8rem; margin: 0; font-size: 1.2rem; color: var(--color-text-base); }
.vg-legende span { display: inline-flex; align-items: center; gap: 0.6rem; }
.vg-pastille { padding: 0.1rem 0.9rem; border-radius: 999px; font-weight: 700; }
.vg-echec { background-color: var(--vg-err-pill-bg); color: var(--vg-err-pill-fg); }
.vg-attente { background-color: var(--vg-amb-pill-bg); color: var(--vg-amb-pill-fg); }
.vg-info { background-color: var(--vg-info-pill-bg); color: var(--vg-info-pill-fg); }
.vg-credit { margin: 0; font-family: var(--vg-mono); font-size: 1.15rem; color: var(--color-text-subdue); }
.vg-credit a { color: var(--color-text-base); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------------------------------------------------------------- 11. Mobile */

.mobile-navigation { border-radius: 12px 12px 0 0; }

/* Plus d'agrandissement propre au mobile (27/10) : il compensait la racine de 10 px de Glance. La taille
   de référence suit désormais celle du navigateur, qui est déjà la bonne sur téléphone (16 px). */

/* Téléphone (v1.2) : Glance resserre les marges sous 550 px, mais les jetons « :root:root » de la section 2
   l'emportaient sur son « :root » et annulaient ce resserrement. On le rétablit, à l'échelle du thème.
   (Sa racine à 9,4 px reste, elle, volontairement écartée par la section 4.) */
@media (max-width: 550px) {
  :root:root {
    --widget-gap: 15px;
    --widget-content-vertical-padding: 10px;
    --widget-content-horizontal-padding: 12px;
  }
}

/* Une seule colonne (fenêtre de moins de 1 190 px) : les titres de la colonne étroite prennent la taille de
   ceux des colonnes larges, comme le prévoit Glance (sa règle était masquée par la section 7). */
@media (max-width: 1190px) {
  .page-column-small .size-title-dynamic { font-size: 1.4rem; }
}

/* ---------------------------------------------------------------- 12. Images en mode sombre doux : moins d'éblouissement */

:root[data-scheme="dark"] .thumbnail { filter: grayscale(0.2) contrast(0.9) brightness(0.9); }
:root[data-scheme="dark"] .thumbnail-parent:hover .thumbnail { filter: brightness(0.95); }
:root[data-scheme="dark"] .xg-media img,
:root[data-scheme="dark"] .xg-link img { filter: brightness(0.9); }

/* ---------------------------------------------------------------- 13. Corrections de la feuille de base de Glance (v1.2)
   Audit du 27/10/2026 de bundle.css (Glance 0.8.7), règle par règle, sur les quatre pages, en clair et en
   sombre doux, à 1 440, 1 200, 1 024 et 390 px. Déjà neutralisé ailleurs dans ce thème : racine à 10 px
   (section 4), police JetBrains Mono, ligatures coupées et interligne 1,6 (section 4), capitales forcées des
   titres, onglets et boutons (sections 6 et 7), espacement de mots resserré (section 7), ombre des cadres
   (section 4), petites tailles h5/h6 (section 2), contour de focus de 2 px (section 4), resserrement mobile
   (section 11). Ci-dessous, le reste : ce qui gênait la lecture, le clavier ou le confort. Glance n'utilise
   pas ici ses autres règles (météo, DNS, Docker, vidéos, cartes RSS…), qui restent sans effet. */

/* 13.1 Tailles en px qui ne suivaient pas la taille de police du navigateur.
   Colonne étroite : 300 px fixes chez Glance ; 24,4rem = les mêmes 300 px à 16 px, mais elle grandit avec
   le texte si l'on agrandit la police dans Chrome. Flèche « ↑ » de la barre mobile : 15 px fixes. */
.page-column-small { width: 24.4rem; }
@media (max-width: 1190px) {
  .page-column-small { width: 100%; }
  .mobile-navigation-label { font-size: 1.4rem; }
}

/* 13.2 Onglets (groupes de widgets). Glance les garde sur une ligne et fait défiler l'en-tête de côté, presque
   sans barre : à 1 200 px de large, les derniers onglets d'OpenEdition et d'OpenEdition Books sortaient du
   cadre ; sur téléphone, ceux de tous les groupes. Ils passent désormais à la ligne. Le défilement
   supprimé, le contour de focus n'est plus rogné en haut. */
.widget-group-header { overflow: visible; }
.widget-group-header > .widget-header { flex-wrap: wrap; row-gap: 0.3rem; column-gap: 1.8rem; }
.widget-group-title { flex-shrink: 1; min-width: 0; text-align: left; }

/* 13.3 Navigation du haut. Glance la rend défilante (overflow-x: auto), ce qui rognait le contour de focus
   des pages en haut et en bas. Le contour passe à l'intérieur de l'onglet, élargi d'un léger retrait ;
   l'écart visible entre les noms de pages ne change pas (0,6 + 2 × 0,8 = 2,2rem). */
.desktop-navigation { gap: 0.6rem; margin-inline-start: -0.8rem; }
.desktop-navigation .nav-item { padding-inline: 0.8rem; }
.nav-item:focus-visible { outline-offset: -3px; border-radius: 6px; }

/* 13.4 Barre de navigation mobile (fenêtre de moins de 1 190 px, y compris une fenêtre étroite sur le Mac).
   - Glance masque les boutons de colonnes et du menu par display: none : impossibles à atteindre au clavier.
     Ils deviennent invisibles mais atteignables (Tab, puis flèches pour changer de colonne), avec un contour.
   - Menu fermé, ses liens de pages restaient atteignables au clavier alors qu'ils sont hors de l'écran :
     le focus disparaissait. Ils sont retirés du parcours tant que le menu est fermé.
   - Les noms de pages passent à la ligne au lieu de défiler de côté sans barre visible.
   Leurs noms pour les lecteurs d'écran (« Afficher la colonne 1 », « Menu : pages et thème »…) ne peuvent
   pas venir d'une feuille de style : assets/vigie/accessibilite.js les ajoute (v1.3). */
@media (max-width: 1190px) {
  .mobile-navigation-label { position: relative; }
  .mobile-navigation-input, .mobile-navigation-page-links-input {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
  }
  .mobile-navigation-label:has(> input:focus-visible) {
    outline: 3px solid var(--color-primary);
    outline-offset: -4px;
    border-radius: 10px;
  }
  .mobile-navigation:not(:has(.mobile-navigation-page-links-input:checked)) :is(.mobile-navigation-page-links, .mobile-navigation-actions) {
    visibility: hidden;
    transition: visibility 0s 0.3s;   /* le temps que le menu redescende */
  }
  .mobile-navigation-page-links { flex-wrap: wrap; row-gap: 1.2rem; column-gap: 2rem; }
}

/* 13.5 Mouvement. Glance anime l'arrivée de la page, des onglets, des listes dépliées et des bulles, et fait
   défiler en douceur : tout cela est coupé quand le système demande de réduire les animations
   (macOS : Réglages › Accessibilité › Affichage › Réduire les animations). Durées quasi nulles plutôt que
   nulles : les scripts de Glance attendent la fin de certaines transitions. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* 13.6 Détails. Bulle du sélecteur de thème : rayon de 5 px fixe, aligné sur celui du thème. Message d'erreur
   d'un widget natif (Reddit…) : Glance coupe les mots n'importe où (word-break: break-all), même les mots
   courants ; seules les longues adresses sont désormais coupées, là où il le faut. */
.popover-frame { border-radius: var(--border-radius); }
.widget-error-header ~ .break-all { word-break: normal; overflow-wrap: anywhere; }

/* 13.7 Séparateur des lignes de méta des widgets natifs (RSS, Lobsters, Reddit…). Glance y met une puce « • »
   abaissée de 0,1rem pour sa police à chasse fixe : avec Atkinson elle tombait sous le milieu des minuscules,
   et voisinait avec le point médian « · » des listes de Raphaël sur une même ligne (« Apple · 19 autres
   articles • Techmeme »). Un seul séparateur désormais, le point médian, centré par la police. */
.list-horizontal-text > *:not(:last-child)::after { content: "·" / ""; top: 0; font-weight: 700; }