/* Design system Digital Spirit appliqué à Glance : Swiss Modernism 2.0, mode clair.
   Fil unique identique sur ordinateur et mobile. Terracotta réservé aux états actifs. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --border-radius: 0;
  --color-text-highlight: #0A0A0A;
  --color-text-paragraph: #0A0A0A;
  --color-text-base: #595959;
  --color-text-base-muted: #595959;
  --color-text-subdue: #595959;
  --color-separator: #E5E5E5;
  --color-widget-content-border: #E5E5E5;
  --color-widget-background: #FFFFFF;
  --dsr-hover: #D04E33;
}

html, body, button, input, textarea {
  font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* Titres neutres : le terracotta signale, il ne décore pas. */
.color-primary-if-not-visited:not(:visited) { color: var(--color-text-highlight); }
a:hover, .color-primary-if-not-visited:hover { color: var(--dsr-hover); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Un fil, pas des cartes : filets fins, pas de fond ni de cadre. */
.widget-content, .widget-content:not(.widget-content-frameless) { background: transparent; border: 0; padding-inline: 0; box-shadow: none; }
.widget-small-content-bounds, .widget-group-content { background: transparent; }
.dsr-feed .list-gap-24 > li + li { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #E5E5E5; }
.dsr-feed .list-gap-24 > li { align-items: flex-start; flex-direction: row; gap: 2rem; }

.dsr-feed a.size-h3 { font-size: 1.8rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; display: block; }
.dsr-feed .list-horizontal-text { font-size: 1.3rem; margin-top: 0.6rem; color: #595959; }
.dsr-feed .rss-detailed-description { display: -webkit-box; font-size: 1.5rem; line-height: 1.6; color: #595959; margin-top: 0.8rem; max-width: 65ch; }
.dsr-feed .attachments { display: none; }

/* Images au même format partout ; sans image, l'article garde sa place dans la grille. */
.dsr-feed .rss-detailed-thumbnail { display: block; flex: none; width: 20rem; aspect-ratio: 16 / 10; height: auto; background: #F7F6F2; }
.dsr-feed .rss-detailed-thumbnail > * { display: block; width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.dsr-feed .rss-detailed-thumbnail > svg { display: none; }
/* Sans image utile (logo générique du flux), tuile papier neutre plutôt que le logo flou. */
.dsr-feed .rss-detailed-thumbnail:not(:has(img)), .dsr-feed .rss-detailed-thumbnail:has(img[src*="favicon"])  { background: #F7F6F2 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23A6A6A6%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-newspaper%22%3E%3Cpath%20d%3D%22M4%2022h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v16a2%202%200%200%201-2%202Zm0%200a2%202%200%200%201-2-2v-9c0-1.1.9-2%202-2h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%2014h-8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%2018h-5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M10%206h8v4h-8V6Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center / 3rem no-repeat; }
.dsr-feed .rss-detailed-thumbnail img[src*="favicon"] { display: none; }
.dsr-feed .thumbnail, .dsr-videos .thumbnail { filter: none; opacity: 1; }

/* Onglets façon légende, avec icônes Lucide (trait 1.5). */
.widget-group-title { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 1.3rem; font-weight: 600; letter-spacing: 0.04em; color: #595959; border-color: transparent; padding-bottom: 0.8rem; }
.widget-group-title-current { color: #0A0A0A; border-bottom: 2px solid var(--color-primary); }
.widget-group-title::before { content: ''; width: 1.6rem; height: 1.6rem; background: currentColor; -webkit-mask: var(--dsr-icon) center / contain no-repeat; mask: var(--dsr-icon) center / contain no-repeat; }
.dsr-videos .widget-group-title { --dsr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-play%22%3E%3Cpolygon%20points%3D%226%203%2020%2012%206%2021%206%203%22%3E%3C%2Fpolygon%3E%3C%2Fsvg%3E"); }
.dsr-feed .widget-group-title:nth-child(1) { --dsr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-cpu%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20x%3D%224%22%20y%3D%224%22%20rx%3D%222%22%3E%3C%2Frect%3E%3Crect%20width%3D%226%22%20height%3D%226%22%20x%3D%229%22%20y%3D%229%22%20rx%3D%221%22%3E%3C%2Frect%3E%3Cpath%20d%3D%22M15%202v2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%2020v2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M2%2015h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M2%209h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20%2015h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M20%209h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9%202v2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M9%2020v2%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.dsr-feed .widget-group-title:nth-child(2) { --dsr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-newspaper%22%3E%3Cpath%20d%3D%22M4%2022h16a2%202%200%200%200%202-2V4a2%202%200%200%200-2-2H8a2%202%200%200%200-2%202v16a2%202%200%200%201-2%202Zm0%200a2%202%200%200%201-2-2v-9c0-1.1.9-2%202-2h2%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M18%2014h-8%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M15%2018h-5%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M10%206h8v4h-8V6Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.dsr-feed .widget-group-title:nth-child(3) { --dsr-icon: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22lucide%20lucide-briefcase%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22%3E%3C%2Fpath%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%3E%3C%2Frect%3E%3C%2Fsvg%3E"); }

/* Carrousel vidéo horizontal, même gabarit partout. */
.dsr-videos .cards-horizontal { --cards-per-row: 3.3; scroll-snap-type: x proximity; }
.dsr-videos .card { background: transparent; border: 0; scroll-snap-align: start; }
.dsr-videos .widget-content { padding-block: 1.2rem 0; }
.dsr-videos .card .color-primary-if-not-visited, .dsr-videos .card a { font-weight: 600; }

/* Mobile : même fil, mêmes onglets. Une seule colonne, donc plus de pastilles de colonnes. */
.mobile-navigation-label:has(.mobile-navigation-input) { display: none; }
.mobile-navigation-icons { justify-content: space-between; }
.mobile-reachability-header { height: 5.6rem; min-height: 0; justify-content: flex-start; padding: 0 1.5rem; gap: 1rem; font-size: 1.6rem; font-weight: 600; border-bottom: 1px solid #E5E5E5; align-items: center; }
.mobile-reachability-header::before { content: ''; width: 3.2rem; height: 2.7rem; background: url('/assets/logo-mark.svg') center / contain no-repeat; }

@media (max-width: 680px) {
  .widget-group-title { font-size: 1.2rem; letter-spacing: 0; gap: 0.5rem; }
  .widget-group-title::before { width: 1.4rem; height: 1.4rem; }
  .widget-group-header { gap: 1.2rem; }
  .dsr-feed .list-gap-24 > li { flex-direction: row; gap: 1.2rem; }
  .dsr-feed .rss-detailed-thumbnail { width: 10rem; }
  .dsr-feed a.size-h3 { font-size: 1.6rem; }
  .dsr-feed .rss-detailed-description { font-size: 1.4rem; -webkit-line-clamp: 2; }
  .dsr-videos .cards-horizontal { --cards-per-row: 1.4; }
}

@media (max-width: 1190px) {
  .mobile-reachability-header { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}