:root {
  color-scheme: dark;
  --fond: #353535;
  --carte: #3e3e3e;
  --survol: #484848;
  --bord: #4a4a4a;
  --texte: #e6e6e6;
  --discret: #999999;
  --pale: #6d6d6d;
  --accent: #78aeed;
  --accent-demi: rgb(120 174 237 / .5);
  --erreur: #cc9393;
  --leger: 'Aller Light', Aller, system-ui, sans-serif;
  --r: 3px;
  --r-carte: 4px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 400 15px/1.35 Aller, system-ui, sans-serif;
}
.bandeau {
  position: sticky; top: 0; z-index: 2;
  height: 32px; padding: 0 8px;
  background: var(--bord);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
#bandeau-titre { overflow: hidden; font-family: var(--leger); text-overflow: ellipsis; white-space: nowrap; }
.historique { display: flex; flex: none; gap: 4px; }
.icone-petite {
  width: 24px; height: 24px; padding: 3px;
  border: 0; border-radius: var(--r);
  background: none; color: var(--texte); cursor: pointer;
}
.icone-petite:hover:enabled { background: var(--survol); }
.icone-petite:disabled { color: var(--pale); cursor: default; }
.icone-petite svg { display: block; width: 100%; height: 100%; fill: currentColor; }
main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 8px;
  align-items: start;
  width: min(100%, max(1000px, 70vw));
  margin-inline: auto;
  padding: 8px;
}
.catalogue, #categories { display: grid; gap: 8px; min-width: 0; }
.lecteur { position: sticky; top: 40px; display: grid; gap: 8px; min-width: 0; }
@media (max-width: 760px) {
  main { grid-template-columns: minmax(0, 1fr); }
  .lecteur { position: static; order: -1; }
}

.carte, details { border-radius: var(--r-carte); background: var(--carte); }
.carte { display: grid; gap: 6px; padding: 8px; }
.tete { display: flex; align-items: baseline; gap: 8px; min-height: 22px; padding: 0 4px; }
h2 { flex: none; margin: 0; color: var(--discret); font-size: inherit; font-weight: 400; }
#sous-titre { overflow: hidden; color: var(--texte); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }

details { padding: 8px; }
details > * + * { margin-top: 4px; }
summary {
  padding: 2px 4px; border-radius: var(--r);
  color: var(--accent); font-weight: 700;
  cursor: pointer; list-style: none;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: '▾'; float: right; color: var(--pale); }
details:not([open]) > summary::after { content: '▸'; }
summary:hover { background: var(--survol); }
details details { padding: 0; background: none; }
details details > summary { color: var(--texte); font-weight: 400; }

.infos { min-width: 0; padding: 0 4px; }
.transport { display: flex; justify-content: center; align-items: center; gap: 8px; }
h1 { margin: 0; font-size: inherit; font-weight: 400; overflow-wrap: anywhere; }
#heure-direct { margin: 0; color: var(--discret); font-variant-numeric: tabular-nums; }
#etat { margin: 0; padding: 0 4px; color: var(--discret); }
#etat.erreur { color: var(--erreur); }

.icone {
  flex: none; width: 48px; height: 48px; padding: 9px;
  border: 0; border-radius: var(--r);
  background: none; color: var(--texte); cursor: pointer;
}
.icone.principal { width: 60px; height: 60px; padding: 10px; color: var(--accent); }
.icone:hover:enabled { background: var(--survol); }
.icone:disabled { color: var(--pale); cursor: default; }
.icone svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.icone:focus-visible, .puce:focus-visible, summary:focus-visible { outline: 1px solid var(--accent); }

.barre {
  --v: 0%;
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  height: 26px; padding: 0 8px;
  border-radius: var(--r);
  background: var(--fond);
  overflow: hidden;
}
.barre[hidden] { display: none; }
.remplissage { position: absolute; inset: 0 auto 0 0; width: var(--v); background: var(--accent-demi); }
.nom, .valeur { position: relative; }
.valeur { font-variant-numeric: tabular-nums; }
.barre input {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: ew-resize;
}

.puce {
  justify-self: center; margin-top: 10px; padding: 4px 12px;
  border: 0; border-radius: var(--r);
  background: var(--fond); color: var(--discret);
  font: inherit; cursor: pointer;
}
.puce:hover { background: var(--survol); }
.puce[hidden] { display: none; }

select {
  width: 100%; padding: 4px 8px;
  border: 0; border-radius: var(--r);
  background: var(--fond); color: var(--texte); font: inherit;
}
select[hidden] { display: none; }
.etat-liste { margin: 4px; color: var(--discret); }
.etat-liste:empty { display: none; }
.liste { display: grid; margin: 4px -8px -8px; padding: 0 0 4px; list-style: none; }
details details .liste { margin: 0 -8px; }
.liste button {
  display: grid; width: 100%; padding: 4px 12px;
  border: 0; background: none; color: var(--texte);
  font: inherit; text-align: left; cursor: pointer;
}
.liste button:hover { background: var(--survol); }
.liste button[aria-current="true"] { background: var(--accent-demi); }
.liste small { color: var(--discret); font-size: inherit; }
.liste button[aria-current="true"] small { color: var(--texte); }

#details[hidden] { display: none; }
#liens { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 0 4px; }
#liens a { color: var(--accent); }
#resume { margin: 0; padding: 0 4px; max-height: 40vh; overflow-y: auto; color: var(--texte); white-space: pre-line; }
#resume:empty { display: none; }
.icone[hidden] { display: none; }

/* Trois graisses : gras pour la structure, regular pour ce qu'on choisit,
   light pour ce qui accompagne. */
.insecable { white-space: nowrap; }
#bandeau-titre strong { font-family: Aller, system-ui, sans-serif; font-weight: 700; }
h2, #etat, #heure-direct, .nom, .valeur, .etat-liste, .liste small, #resume, .puce, select {
  font-family: var(--leger);
}

:root[data-theme="clair"] {
  color-scheme: light;
  --fond: #fff8ef;
  --carte: #fffdf9;
  --survol: #ffeedd;
  --bord: #ffd9b8;
  --texte: #2b2320;
  --discret: #6b5b52;
  --pale: #b3a297;
  --accent: #c2410c;
  --accent-demi: rgb(251 146 60 / .4);
  --erreur: #b3261e;
}
:root[data-theme="couleurs"] {
  color-scheme: light;
  --fond: #fffaf0;
  --carte: #ffffff;
  --survol: rgb(0 0 0 / .1);
  --bord: #ffe066;
  --texte: #1c1a2b;
  --discret: #45415c;
  --pale: #7d7992;
  --accent: #b00068;
  --accent-demi: rgb(255 0 128 / .3);
  --erreur: #b3261e;
}
/* Pas de couleur dominante : chaque section a la sienne, le texte reste foncé. */
[data-theme="couleurs"] .bandeau {
  background: linear-gradient(90deg, #ff6b6b, #ffb347, #ffe066, #7bd88f, #6cb8ff, #c79bff);
}
[data-theme="couleurs"] summary { color: var(--texte); }
[data-theme="couleurs"] summary::after { color: var(--texte); }
[data-theme="couleurs"] #section-matins { background: #ffd23fe0; }
[data-theme="couleurs"] #section-journaux { background: #ff9fb2e0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 1) { background: #7ce0c3e0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 2) { background: #ffb347e0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 3) { background: #a0c4ffe0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 4) { background: #c9f26be0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 5) { background: #f9a8f0e0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 6) { background: #8be9fde0; }
[data-theme="couleurs"] #categories > details:nth-child(8n + 7) { background: #ffa08ae0; }
[data-theme="couleurs"] #categories > details:nth-child(8n) { background: #d0b3ffe0; }
[data-theme="couleurs"] details details { background: none !important; }
[data-theme="couleurs"] select { background: #ffffff; }
[data-theme="couleurs"] .lecteur .carte:first-child { background: #fff3b0e0; }
[data-theme="couleurs"] #details { background: #b8f2e6e0; }
[data-theme="couleurs"] .barre { background: #ffffff; }
[data-theme="couleurs"] .remplissage {
  background: linear-gradient(90deg, #ff6b6b, #ffb347, #ffe066, #7bd88f, #6cb8ff);
}
.themes { display: flex; justify-content: center; gap: 8px; }
.theme {
  width: 36px; height: 36px; padding: 6px;
  border: 0; border-radius: var(--r);
  background: none; color: var(--discret); cursor: pointer;
}
.theme:hover { background: var(--survol); }
.theme[aria-pressed="true"] { background: var(--carte); color: var(--texte); outline: 1px solid var(--accent); }
.theme svg { display: block; width: 100%; height: 100%; }
[data-theme="couleurs"] body::before { background-image: var(--maison); }
[data-theme="couleurs"] body { background: #cfeeff; }
[data-theme="couleurs"] .themes { justify-self: center; padding: 2px; border-radius: var(--r-carte); background: #ffffffe0; }
[data-theme="nuit"] .carte,
[data-theme="nuit"] #section-matins,
[data-theme="nuit"] #section-journaux,
[data-theme="nuit"] #categories > details { background: #3e3e3ed0; }
[data-theme="nuit"] .themes { justify-self: center; padding: 2px; border-radius: var(--r-carte); background: #3e3e3ed0; }
.lecteur, .carte { grid-template-columns: minmax(0, 1fr); }
.tete { min-width: 0; }
[data-theme="clair"] .carte,
[data-theme="clair"] #section-matins,
[data-theme="clair"] #section-journaux,
[data-theme="clair"] #categories > details { background: #fffdf9e0; }
[data-theme="clair"] .themes { justify-self: center; padding: 2px; border-radius: var(--r-carte); background: #fffdf9e0; }
#credit-photo {
  justify-self: center; margin: 0; padding: 2px 6px;
  border-radius: var(--r); background: #fffdf9e0;
  color: var(--discret); font-family: var(--leger); font-size: .8rem;
}
#credit-photo[hidden] { display: none; }
#credit-photo a { color: inherit; }

/* Le fond est un calque fixe à la taille de la fenêtre : « background-attachment: fixed »
   recadre mal les photos sur téléphone. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: center / cover no-repeat;
}
[data-theme="clair"] body::before { background-image: var(--photo, none); }
[data-theme="nuit"] body::before { background-image: url(fond-nuit.jpg); }
[data-theme="nuit"] body { background: #1b2a33; }
#credit-photo { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Thème clair : du blanc chaud, et une couleur franche par section sur la tranche. */
[data-theme="clair"] .bandeau { background: linear-gradient(180deg, #ffd0a6, #ffb98a); }
[data-theme="clair"] .remplissage { background: rgb(255 255 255 / .6); }
[data-theme="clair"] #liens a { color: #0f766e; }
[data-theme="clair"] #section-matins,
[data-theme="clair"] #section-journaux,
[data-theme="clair"] #categories > details { --teinte: #c2410c; border-left: 5px solid var(--teinte); }
[data-theme="clair"] #section-journaux { --teinte: #be185d; }
[data-theme="clair"] #categories > details:nth-child(5n + 1) { --teinte: #0f766e; }
[data-theme="clair"] #categories > details:nth-child(5n + 2) { --teinte: #7c3aed; }
[data-theme="clair"] #categories > details:nth-child(5n + 3) { --teinte: #1d4ed8; }
[data-theme="clair"] #categories > details:nth-child(5n + 4) { --teinte: #b45309; }
[data-theme="clair"] #categories > details:nth-child(5n) { --teinte: #be185d; }
[data-theme="clair"] details > summary { color: var(--teinte); }
[data-theme="clair"] details details > summary { color: var(--texte); }
/* Thème clair : verre dépoli. La photo colore les blocs, le flou garde le texte lisible. */
[data-theme="clair"] .carte,
[data-theme="clair"] #section-matins,
[data-theme="clair"] #section-journaux,
[data-theme="clair"] #categories > details,
[data-theme="clair"] .themes,
[data-theme="clair"] #credit-photo {
  background: rgb(255 250 244 / .58);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 4px 14px rgb(60 30 10 / .12);
}
[data-theme="clair"] .bandeau {
  background: rgb(255 250 244 / .6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  backdrop-filter: blur(16px) saturate(1.6);
}
[data-theme="clair"] .barre { background: rgb(43 35 32 / .22); }
[data-theme="clair"] select { background: rgb(255 255 255 / .55); }

/* Bandeau plus grand, sur tous les thèmes. */
.bandeau { height: 46px; padding: 0 12px; font-size: 18px; }
.lecteur { top: 54px; }
.icone-petite { width: 32px; height: 32px; padding: 4px; }

/* Le survol couvre la section, à 2 px du bord. */
details, details[open] { padding: 2px; }
details > * + * { margin-top: 0; }
summary { padding: 8px 10px; }
details details { padding: 0; }
details details > summary { padding: 6px 10px; }
details > select { display: block; width: calc(100% - 16px); margin: 4px 8px; }
details > select[hidden] { display: none; }
.liste, details details .liste { margin: 0; padding: 0 0 4px; }
.liste button { padding: 4px 10px; border-radius: var(--r); }

/* Le texte du bandeau s'aligne sur le contenu : 30 % de marges au total en fenêtre large. */
.bandeau { padding-inline: max(12px, calc((100vw - min(100vw, max(1000px, 70vw))) / 2 + 8px)); }
#bandeau-titre { font-family: Aller, system-ui, sans-serif; font-weight: 400; }

/* Une petite ombre sur tous les blocs, dans les trois thèmes. */
.carte,
#section-matins,
#section-journaux,
#categories > details,
[data-theme="clair"] .carte,
[data-theme="clair"] #section-matins,
[data-theme="clair"] #section-journaux,
[data-theme="clair"] #categories > details {
  box-shadow: 0 2px 6px rgb(0 0 0 / .25);
}

/* Le thème courant se signale sans attirer l'œil. */
.theme { color: var(--pale); }
.theme[aria-pressed="true"] { background: none; color: var(--texte); outline: 0; box-shadow: inset 0 -2px 0 var(--discret); }
.theme[data-theme="couleurs"]:not([aria-pressed="true"]) svg { opacity: .55; }
.bandeau { box-shadow: 0 2px 6px rgb(0 0 0 / .25); }

/* Le bandeau est un bloc à part entière : un peu plus large que le contenu, bords finis. */
.bandeau {
  top: 8px;
  width: min(calc(100% - 16px), calc(max(1000px, 70vw) + 32px));
  height: 54px;
  margin: 8px auto 0;
  padding-inline: 24px;
  border-radius: 6px;
}
.lecteur { top: 70px; }
@media (max-width: 760px) { .bandeau { padding-inline: 12px; } }
.bandeau { margin-bottom: 8px; }
.lecteur { top: 78px; }
.bandeau { margin-bottom: 16px; }
.lecteur { top: 86px; }
.bandeau { top: 16px; margin-top: 16px; }
.lecteur { top: 94px; }
.bandeau { width: min(calc(100% - 16px), calc(max(1000px, 70vw) - 16px)); padding-inline: 12px; }

/* Mode zen : le bandeau s'allonge pour accueillir le lecteur, tout le reste s'efface. */
.zen .catalogue, .zen #details, .zen .themes, .zen .tete, .zen .infos h1 { display: none; }
.zen .bandeau { height: 46px; margin-bottom: 0; border-radius: 6px 6px 0 0; box-shadow: none; }
.zen main { display: block; padding-top: 0; }
.zen .lecteur { position: static; display: block; }
.zen .lecteur .carte:first-child {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 6px 12px 10px;
  border-radius: 0 0 6px 6px;
  background: var(--bord);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.zen .infos { order: 2; padding: 0; }
.zen #etat { order: 3; padding: 0; }
.zen .transport { order: 1; }
.zen .barre { order: 4; flex: 1 1 180px; }
.zen #retour-direct { order: 5; margin: 0; }
.zen #credit-photo { position: fixed; right: 12px; bottom: 12px; }
[data-theme="clair"].zen .lecteur .carte:first-child { background: rgb(255 250 244 / .6); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); }
[data-theme="couleurs"].zen .lecteur .carte:first-child { background: #fff3b0; }
#zen[aria-pressed="true"] { color: var(--accent); }

/* En zen, le bloc s'efface jusqu'au survol ; sur téléphone, il suit le doigt (focus). */
.zen #retour-direct { display: none; }
.zen .bandeau, .zen .lecteur .carte:first-child { opacity: .25; transition: opacity .25s; }
.zen:has(.bandeau:hover, .bandeau :focus-visible, .lecteur .carte:first-child:hover, .lecteur .carte:first-child :focus-visible) :is(.bandeau, .lecteur .carte:first-child) { opacity: 1; }

/* Le crédit de la photo reste en bas à droite, partout. */
#credit-photo { position: fixed; right: 12px; bottom: 12px; z-index: 3; max-width: calc(100vw - 24px); }

/* Le choix du thème vit dans À propos, qui reste donc toujours affiché. */
#details .themes {
  justify-self: center; margin-top: 12px; padding: 0;
  background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}