/* Garde-robe — Nouveautés (htdocs/assets/garderobe/nouveautes.css), 20/10/2026. Racine : .ec-nouveautes (route #nouveautes).
   Téléphone d'abord, comme Couleurs et Style : « ‹ Réglages » (ou d'où l'on vient), surtitre, affiche, chapô ; le résumé ;
   « depuis votre dernière visite » ; les puces des jours ; un jour par section (titre serif), ses versions en cartes (genre,
   numéro, « Nouveau », titre, textes). Bureau (1024 et plus) : sans « ‹ » ni barre compacte (la colonne latérale y mène),
   l'affiche à 34, une colonne de 760 au plus. En fin de fichier, le point des entrées qui mènent ici (colonne latérale,
   bouton Réglages de Pièces, rangée de Réglages). Aucune couleur en dur. */

.ec-nouveautes { position: relative; padding-bottom: 32px; }
.ec-nouveautes :where(.nv-h2, .nv-h3, .nv-items, .nv-resume, .nv-depuis) { overflow-wrap: anywhere; }
.ec-nouveautes .nv-h2[tabindex="-1"]:focus { outline: none; }
.ec-nouveautes .nv-h2[tabindex="-1"]:focus-visible { outline: 2px solid var(--gr-focus); outline-offset: 4px; }

/* ---------------- En-tête ---------------- */
.ec-nouveautes .nv-entete-ligne { margin-left: -10px; }
.ec-nouveautes .nv-surtitre { margin: 8px 0 0; color: var(--gr-texte-2); }
.ec-nouveautes .g-entete > .nv-titre { margin: 4px 0 0; }
.ec-nouveautes .nv-chapo { margin: 10px 0 0; color: var(--gr-texte-2); max-width: 32ch; }

/* ---------------- Résumé, « depuis votre dernière visite », jours ---------------- */
.ec-nouveautes .nv-corps { margin-top: 20px; }
.ec-nouveautes :where(.nv-resume, .nv-depuis, .nv-jours, .nv-jour, .nv-attente, .nv-erreur) { margin-left: var(--gr-marge); margin-right: var(--gr-marge-d); }
.ec-nouveautes .nv-resume { margin-top: 0; margin-bottom: 0; font: 400 15px/21px var(--gr-sans); color: var(--gr-texte-2); max-width: 62ch; }
.ec-nouveautes .nv-depuis { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; margin-bottom: 0; font: 600 15px/21px var(--gr-sans); color: var(--gr-texte); }
.ec-nouveautes .nv-depuis > .g-ic { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.ec-nouveautes .nv-jours { margin-top: 16px; }

/* ---------------- Un jour ---------------- */
.ec-nouveautes .nv-jour { margin-top: 36px; scroll-margin-top: 64px; }
.ec-nouveautes .nv-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0 0 12px; font: 400 28px/1.1 var(--gr-serif); }
.ec-nouveautes .nv-compte { font: 500 13px/18px var(--gr-sans); color: var(--gr-texte-2); font-variant-numeric: tabular-nums; }
.ec-nouveautes .nv-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

/* ---------------- Une version ---------------- */
.ec-nouveautes .nv-carte { padding: 14px 16px 16px; border-radius: var(--r-ctrl); background: var(--gr-surface); box-shadow: inset 0 0 0 1px var(--gr-ligne); }
.ec-nouveautes .nv-version.nouvelle .nv-carte { box-shadow: inset 0 0 0 2px var(--gr-texte); }
.ec-nouveautes .nv-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ec-nouveautes .nv-genre { display: inline-block; padding: 3px 8px; border-radius: 999px; font: 600 11px/13px var(--gr-sans); letter-spacing: .04em; text-transform: uppercase; }
.ec-nouveautes .nv-genre.nouveaute { background: var(--gr-texte); color: var(--gr-inverse); }
.ec-nouveautes .nv-genre.amelioration { background: var(--gr-surface-2); color: var(--gr-texte); }
.ec-nouveautes .nv-genre.correction { box-shadow: inset 0 0 0 1px var(--gr-ligne-forte); color: var(--gr-texte-2); }
.ec-nouveautes .nv-numero { font: 500 12px/16px var(--gr-mono); color: var(--gr-texte-3); font-variant-numeric: tabular-nums; }
.ec-nouveautes .nv-nouveau { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font: 600 13px/16px var(--gr-sans); color: var(--gr-texte); }
.ec-nouveautes .nv-nouveau-point { width: 8px; height: 8px; border-radius: 50%; background: var(--gr-texte); }
.ec-nouveautes .nv-h3 { margin: 10px 0 0; font: 400 22px/1.15 var(--gr-serif); }
.ec-nouveautes .nv-items { list-style: none; margin: 8px 0 0; padding: 0; max-width: 62ch; }
.ec-nouveautes .nv-items > li { position: relative; margin-top: 8px; padding-left: 16px; font: 400 15px/22px var(--gr-sans); color: var(--gr-texte); }
.ec-nouveautes .nv-items > li::before { content: ''; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--gr-texte-3); }
.ec-nouveautes .nv-items > li:first-child { margin-top: 0; }

/* ---------------- États ---------------- */
.ec-nouveautes .nv-attente { display: flex; flex-direction: column; gap: 12px; }
.ec-nouveautes .nv-attente-texte { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; font: 500 15px/21px var(--gr-sans); color: var(--gr-texte-2); }
.ec-nouveautes .nv-sq { height: 132px; border-radius: var(--r-ctrl); }
.ec-nouveautes .nv-tourne { animation: nv-tourne 800ms linear infinite; }
@keyframes nv-tourne { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ec-nouveautes .nv-tourne { animation-duration: 2400ms; } }
.ec-nouveautes .nv-erreur { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.ec-nouveautes .nv-erreur-texte { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--gr-danger); font: 500 15px/21px var(--gr-sans); }
.ec-nouveautes .nv-erreur-texte > .g-ic { flex: none; margin-top: 1px; }

/* ---------------- Bureau (1024 et plus) ---------------- */
@media (min-width: 1024px) {
    .ec-nouveautes { padding-top: 24px; }
    .ec-nouveautes .nv-compacte, .ec-nouveautes .nv-entete-ligne { display: none; }
    .ec-nouveautes .nv-entete { padding-top: 0; }
    .ec-nouveautes .nv-surtitre { margin-top: 0; }
    .ec-nouveautes .g-entete > .nv-titre { margin: 2px 0 0; font-size: 34px; line-height: 40px; }
    .ec-nouveautes .nv-chapo { max-width: 44ch; }
    .ec-nouveautes .nv-h2 { font-size: 34px; }
    .ec-nouveautes :where(.nv-resume, .nv-depuis, .nv-jours, .nv-jour, .nv-attente, .nv-erreur) { max-width: calc(760px - var(--gr-marge) - var(--gr-marge-d)); }
}

/* ---------------- Le point des entrées qui mènent ici (nouveautes.js : data-nv-point) ---------------- */
/* Colonne latérale : au bout de l'entrée, à la place d'un nombre. */
.g-entree > .nv-point-entree { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--gr-texte); flex: none; }
/* Bouton Réglages de Pièces (une icône de 44) : en haut à droite du dessin, détaché par un liseré du fond. */
.g-bouton-ic > .nv-point-ic { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--gr-texte);
    box-shadow: 0 0 0 2px var(--gr-fond); }
/* Rangée « Nouveautés » de Réglages : le point devant « 3 à lire ». */
.nv-point-rangee { width: 8px; height: 8px; border-radius: 50%; background: var(--gr-texte); flex: none; margin-left: auto; }
.nv-point-rangee + .g-valeur { margin-left: 8px; }
.nv-point-entree[hidden], .nv-point-ic[hidden], .nv-point-rangee[hidden] { display: none; }