/* =============================================================================
   Mangalist.fr - Accueil et listes de series
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Accroche
   Pas de banniere pleine largeur ni d'image de fond : une accroche composee,
   calee a gauche, comme l'ouverture d'un article de revue.
-------------------------------------------------------------------------------- */

/* La largeur vit desormais sur les enfants, et non sur le bloc.

   Le titre garde ses 34ch : c'est ce qui le casse en deux lignes et fait toute
   la composition. La declaration d'identite, elle, etait bornee par ce meme
   34ch — elle y tombait en huit lignes etroites et repoussait le calendrier,
   qui porte l'argument du site, sous la ligne de flottaison. */
.accroche {
    margin-bottom: var(--pas-12);
}

.accroche h1 {
    max-width: 34ch;
    font-size: clamp(2.25rem, 5.5vw, 3.5rem);
    line-height: 1.08;
    margin-bottom: var(--pas-3);
}

.accroche__texte {
    font-size: var(--taille-intro);
    line-height: 1.5;
    color: var(--encre-douce);
    max-width: 54ch;
}

.accroche__texte + .accroche__texte {
    margin-top: var(--pas-2);
}

/* La phrase qui dit ce que le site EST passe en pleine encre : c'est elle qu'on
   lit d'abord, et le gris de l'accroche l'effaçait au profit du titre. */
.accroche__texte strong {
    color: var(--encre);
    font-weight: 600;
}

/* Sur un telephone, la declaration remplit deja l'ecran : six rem de blanc
   derriere elle repoussaient le calendrier — l'argument du site — entierement
   hors de vue. On garde le texte entier, on reprend l'espace. */
@media (max-width: 620px) {

    .accroche {
        margin-bottom: var(--pas-6);
    }

    .accroche__texte {
        font-size: var(--taille-texte);
    }
}

/* -----------------------------------------------------------------------------
   Calendrier des parutions
   Grille en colonnes plutot que cartes : une date de sortie se lit dans une
   liste alignee, pas dans une vignette. C'est un tableau de marche, pas une
   galerie.
-------------------------------------------------------------------------------- */

.calendrier {
    margin-bottom: var(--pas-12);
}

.calendrier__liste {
    margin: 0;
    padding: 0;
    list-style: none;
}

.calendrier__entree {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr) 10rem 5rem;
    gap: var(--pas-2);
    align-items: baseline;
    padding: var(--pas-2) 0;
    border-bottom: 1px solid var(--filet);
}

.calendrier__entree:first-child {
    border-top: 1px solid var(--filet-appuye);
}

.calendrier__date {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--ocre);
    font-weight: 500;
    white-space: nowrap;
}

.calendrier__titre {
    margin: 0;
    max-width: none;
    font-size: var(--taille-texte);
}

.calendrier__titre a {
    text-decoration-color: transparent;
    color: var(--encre);
}

.calendrier__titre a:hover {
    color: var(--bordeaux);
    text-decoration-color: var(--filet-appuye);
}

.calendrier__tome {
    color: var(--encre-pale);
    font-style: italic;
    margin-left: 0.35em;
}

.calendrier__editeur,
.calendrier__prix {
    margin: 0;
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-douce);
}

/* La colonne du prix est POSEE, et non laissee au placement automatique.

   L'element « editeur » n'est plus rendu quand la serie n'en a pas — un <p> vide
   se lit comme un champ vide pour une machine. Mais la grille comble alors le
   trou : le prix glissait dans la troisieme colonne, et deux lignes voisines ne
   s'alignaient plus. La mise en page ne doit pas dependre de la presence d'une
   donnee.

   La regle mobile, plus bas, redefinit cette colonne pour sa grille a deux
   colonnes : elle vient apres, elle gagne. */
.calendrier__prix {
    grid-column: 4;
    text-align: right;
}

/* Le texte d'ouverture de la page des sorties.

   Colonne de lecture, et non pleine largeur : deux paragraphes qui courent sur
   1100 px ne se lisent pas. Il precede le compte et la liste, dont il est
   separe par un blanc franc — c'est un chapo, pas une note de bas de page. */
.calendrier__intro {
    max-width: var(--largeur-lecture);
    margin-bottom: var(--pas-4);
}

.calendrier__intro p {
    margin: 0 0 var(--pas-2);
}

.calendrier__intro p:last-child {
    margin-bottom: 0;
    color: var(--encre-douce);
    font-size: var(--taille-petit);
}

/* La mise en garde sur les dates, en tete de page.

   Un filet ocre a gauche, et rien de plus : c'est la couleur que le site donne
   deja aux parutions annoncees, donc a ce qui n'est pas encore certain. Ni
   aplat, ni encadre — ce n'est pas une alerte, c'est une precaution, et elle
   doit se distinguer du texte courant sans l'interrompre. */
.calendrier__prudence {
    padding-left: var(--pas-2);
    border-left: 2px solid var(--ocre);
    color: var(--encre);
}

.calendrier__suite {
    margin-top: var(--pas-3);
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
}

/* -----------------------------------------------------------------------------
   Grille de series
   Les couvertures portent la meme tranche que sur la fiche : deux calques
   decales bordes d'un filet, jamais d'ombre portee.
-------------------------------------------------------------------------------- */

.grille-series {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--pas-4) var(--pas-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.serie-vignette a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.serie-vignette__image {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 1px solid var(--filet-appuye);
    background-color: var(--papier-creuse);

    /* Tranche de pages. Ce n'est pas une ombre portee : le flou est nul, ce
       sont deux rectangles decales bordes d'un filet, exactement le meme
       procede que les pseudo-elements de .couverture sur la fiche serie. Un
       <img> etant un element remplace, on ne peut pas lui attacher de
       pseudo-element : le box-shadow a bord net est ici l'outil de trace. */
    box-shadow: 3px 3px 0 -1px var(--papier-creuse),
                3px 3px 0 0 var(--filet),
                6px 6px 0 -1px var(--papier-creuse),
                6px 6px 0 0 var(--filet);
    transition: transform 140ms ease-out;
}

.serie-vignette a:hover .serie-vignette__image {
    transform: translate(-2px, -2px);
}

.serie-vignette__titre {
    display: block;
    margin-top: calc(var(--pas-2) + 4px);
    font-size: var(--taille-petit);
    line-height: 1.3;
    text-wrap: balance;
}

.serie-vignette a:hover .serie-vignette__titre {
    color: var(--bordeaux);
}

.serie-vignette__meta {
    display: block;
    margin-top: 2px;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

/* L'état de lecture, au-dessus du décompte. Il porte l'information principale
   pour qui lit sans acheter : « à lire », « à jour », « terminée ». Bordeaux et
   en majuscules pour se détacher du décompte, qui reste secondaire. */
.serie-vignette__etat {
    display: block;
    margin-top: 4px;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bordeaux);
}

/* -----------------------------------------------------------------------------
   Page des sorties : le calendrier complet, mois par mois

   L'accueil en montre un extrait en liste serrée ; ici on a la place de
   montrer les couvertures, ce qui rend la page parcourable d'un coup d'œil.
-------------------------------------------------------------------------------- */

.calendrier__mois {
    margin-top: var(--pas-6);
    margin-bottom: var(--pas-4);
}

.calendrier__mois:first-of-type {
    margin-top: var(--pas-4);
}

.calendrier__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.calendrier__mois .calendrier__liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 0 var(--pas-4);
}

/* Nom distinct de « .parution », qui existe déjà dans fiche-serie.css pour
   l'encadré « prochain tome » d'une fiche : réutiliser le nom faisait hériter
   ces cartes d'un aplat crème et d'un filet ocre destinés à tout autre chose. */
.sortie__lien {
    display: flex;
    align-items: flex-start;
    gap: var(--pas-2);
    padding: var(--pas-2) 0;
    border-bottom: 1px solid var(--filet);
    text-decoration: none;
    color: inherit;
}

.sortie__lien:hover {
    border-bottom-color: var(--filet-appuye);
}

.sortie__image {
    flex: 0 0 auto;
    width: 80px;
    height: auto;
    border: 1px solid var(--filet);
    background-color: var(--papier-creuse);
}

.sortie__corps {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sortie__titre {
    font-family: var(--police-lecture);
    font-size: var(--taille-petit);
    color: var(--encre);
}

.sortie__lien:hover .sortie__titre {
    color: var(--bordeaux);
}

.sortie__tome {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-douce);
}

.sortie__meta {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

/* La page existe même vide : son adresse est publique et peut avoir été
   partagée. Reste à ce que le vide soit accueillant plutôt que muet. */
.calendrier-vide {
    max-width: var(--largeur-lecture);
    padding: var(--pas-4);
    border: 1px dashed var(--filet-appuye);
    border-radius: var(--angle);
    background-color: var(--papier-creuse);
}

/* Bloc des dernières séries ajoutées, sur l'accueil. Il se distingue du bloc
   précédent par un blanc, pas par un cadre. */
.nouveautes {
    margin-top: var(--pas-8);
}

/* -----------------------------------------------------------------------------
   Recherche

   Elle vit sur le catalogue et non sur une page dédiée : chercher, c'est
   filtrer. Un formulaire GET, sans script : le résultat a sa propre adresse,
   se partage et se met en favori.
-------------------------------------------------------------------------------- */

.recherche {
    display: block;
    margin-bottom: var(--pas-3);
}

.recherche__formulaire {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-1);
    max-width: 46rem;
}

/* Le champ et sa liste forment un bloc positionné : la liste se déploie
   par-dessus le contenu, elle ne pousse jamais la page vers le bas. */
.recherche__champ {
    position: relative;
    flex: 1 1 18rem;
    min-width: 0;
}

.recherche__saisie {
    width: 100%;
}

/* -----------------------------------------------------------------------------
   Suggestions au fil de la frappe
-------------------------------------------------------------------------------- */

.suggestions {
    position: absolute;
    z-index: 20;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    max-height: 24rem;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--filet-appuye);
    border-radius: var(--angle);
    background-color: var(--papier-vif);
}

.suggestion + .suggestion {
    border-top: 1px solid var(--filet);
}

.suggestion__lien {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    padding: var(--pas-1) var(--pas-2);
    text-decoration: none;
    color: inherit;
}

/* Le survol ET la sélection au clavier donnent le même aplat : on ne doit pas
   pouvoir dire, en regardant, si l'on navigue à la souris ou aux flèches. */
.suggestion__lien:hover,
.suggestion--actif .suggestion__lien {
    background-color: var(--bordeaux-voile);
}

.suggestion__image {
    flex: 0 0 auto;
    width: 32px;
    height: 48px;
    border: 1px solid var(--filet);
    object-fit: cover;
}

.suggestion__corps {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suggestion__titre {
    font-family: var(--police-lecture);
    font-size: var(--taille-petit);
    color: var(--encre);
}

/* La partie tapée, mise en évidence. Pas de fond jaune de navigateur : un filet
   sous le texte, comme partout ailleurs sur le site. */
.suggestion__titre mark {
    background: none;
    color: var(--bordeaux);
    font-weight: 600;
}

.suggestion__meta {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

/* Le navigateur ajoute sa propre croix d'effacement aux champs de recherche ;
   elle jure avec le reste et double le lien « Effacer », qui, lui, relance
   réellement la page. */
.recherche__saisie::-webkit-search-cancel-button {
    display: none;
}

.recherche__bouton {
    flex: 0 0 auto;
}

.recherche__effacer {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-douce);
}

/* -----------------------------------------------------------------------------
   Catalogue : en-tête, tri, pagination, genres
-------------------------------------------------------------------------------- */

.catalogue__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pas-2) var(--pas-3);
    margin-bottom: var(--pas-4);
}

.catalogue__compte {
    margin: 0;
    max-width: none;
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-douce);
}

.catalogue__compte strong {
    font-weight: 600;
    color: var(--encre);
}

.catalogue__tri {
    display: flex;
    align-items: center;
    gap: var(--pas-1);
}

.catalogue__tri-libelle {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
    white-space: nowrap;
}

.catalogue__tri-choix {
    width: auto;
    min-width: 14rem;
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-left-width: 1px;
    font-size: var(--taille-etiquette);
}

.catalogue__tri-bouton {
    padding: 0.4rem 0.75rem;
}

/* Bouton d'accès au catalogue depuis l'accueil. */
.nouveautes__suite {
    margin-top: var(--pas-4);
    padding-top: var(--pas-3);
    border-top: 1px solid var(--filet);
    max-width: none;
}

/* --- Pagination ---------------------------------------------------------- */

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pas-2);
    margin-top: var(--pas-6);
    padding-top: var(--pas-3);
    border-top: 1px solid var(--filet);
}

.pagination__position {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-pale);
}

/* --- Liste des genres ---------------------------------------------------- */

/* Les genres sont désormais EN HAUT du catalogue, sous la recherche : c'est une
   façon d'y entrer, pas une note de bas de page. La marge basse remplace donc
   l'ancienne marge haute, qui les décrochait du reste. */
.catalogue__genres {
    margin-bottom: var(--pas-3);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--filet);
}

.liste-genres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* L'effectif est collé au libellé, en corps réduit : on choisit un genre pour
   ce qu'il contient, l'information doit être là sans prendre le dessus. */
.genre__compte {
    margin-left: 0.4em;
    padding-left: 0.4em;
    border-left: 1px solid var(--filet);
    color: var(--encre-pale);
}

.genre--actif {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
    color: var(--papier-vif);
}

.genre--actif:hover {
    border-color: var(--bordeaux-fonce);
    color: var(--papier-vif);
}

.genre--actif .genre__compte {
    border-left-color: var(--papier-creuse);
    color: var(--papier-creuse);
}

/* --- Index alphabétique --------------------------------------------------- */

/* Sous les genres, dans sa propre bande : le filet des genres la sépare d'eux,
   le sien la sépare des résultats. Les deux barres se lisent ainsi comme deux
   façons d'entrer dans le catalogue, empilées avant la grille. */
.index-alpha {
    margin-bottom: var(--pas-3);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--filet);
}

.index-alpha__liste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Chiffres tabulaires et largeur minimale : sans elles, le I et le W ne font
   pas la même largeur et la barre devient une suite irrégulière que l'œil ne
   parcourt plus.

   2rem de large, 2.25rem de haut : les 28 cases tiennent alors sur UNE ligne à
   la largeur de lecture du site. À 2.25rem de large elles débordaient, et la
   barre se terminait par un Z et un # seuls sur une seconde ligne — un index
   alphabétique se parcourt d'un seul regard ou ne sert à rien. Les deux
   dimensions restent au-dessus des 24 px de cible tactile de la WCAG 2.5.8. */
.index-alpha__case {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2.25rem;
    padding: 0 0.3rem;
    border: 1px solid var(--filet);
    border-radius: var(--angle);
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    color: var(--encre);
}

a.index-alpha__case:hover,
a.index-alpha__case:focus-visible {
    border-color: var(--bordeaux);
    color: var(--bordeaux);
}

.index-alpha__case--actif,
a.index-alpha__case--actif:hover {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
    color: var(--papier-vif);
}

/* Une lettre sans série reste à sa place — la barre garde sa forme d'une page à
   l'autre — mais elle s'efface et ne se clique pas. Le contraste reste au-dessus
   du seuil : c'est une information, pas un élément décoratif. */
.index-alpha__case--vide {
    border-color: transparent;
    color: var(--encre-pale);
    cursor: default;
}

@media (max-width: 620px) {

    .catalogue__entete {
        flex-direction: column;
        align-items: stretch;
    }

    .catalogue__tri-choix {
        min-width: 0;
        flex: 1;
    }

    /* Sur téléphone la barre tient sur quatre lignes, ce qui est normal pour un
       index A-Z. Seul le rembourrage se resserre, pour que « 0-9 » ne soit pas
       deux fois plus large que ses voisines ; la case garde ses 32 × 36 px,
       au-dessus des 24 px de la WCAG 2.5.8. */
    .index-alpha__case {
        padding: 0 0.2rem;
    }
}

/* -----------------------------------------------------------------------------
   Collection personnelle
-------------------------------------------------------------------------------- */

.collection-vide {
    max-width: 46ch;
    padding: var(--pas-6) 0;
}

.collection-vide__texte {
    font-size: var(--taille-intro);
    line-height: 1.55;
    color: var(--encre-douce);
}

.filtres-statut {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    margin-bottom: var(--pas-4);
    padding-bottom: var(--pas-3);
    border-bottom: 1px solid var(--filet);
}

/* Série déjà suivie : le bouton cesse d'être un appel à l'action et devient un
   état. Filet olive, sans aplat : on confirme, on ne sollicite plus. */
/* .bouton--suivi est dans base.css : il est employé sur la fiche série, qui ne
   charge pas cette feuille. */

/* --- Appareils connectés -------------------------------------------------- */

.liste-sessions {
    margin: 0 0 var(--pas-3);
    padding: 0;
    list-style: none;
}

.session {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pas-2);
    padding: var(--pas-2) 0;
    border-bottom: 1px solid var(--filet);
}

.session__navigateur {
    font-size: var(--taille-petit);
    overflow-wrap: anywhere;
}

.session__dates {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Pages de texte : mentions légales, à propos, conditions
-------------------------------------------------------------------------------- */

.page-texte {
    max-width: 70ch;
}

.page-texte__section {
    margin-bottom: var(--pas-6);
}

.page-texte__section h2 {
    margin-bottom: var(--pas-2);
    padding-bottom: var(--pas-1);
    border-bottom: 1px solid var(--filet);
    font-size: var(--taille-titre-3);
}

.page-texte__section h3 {
    margin: var(--pas-4) 0 var(--pas-2);
    font-size: var(--taille-intro);
}

.page-texte__section p {
    line-height: 1.6;
}

/* Fiche en deux colonnes : intitulé à gauche, valeur à droite. */
.page-texte__fiche {
    display: grid;
    grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
    gap: var(--pas-1) var(--pas-3);
    margin: 0 0 var(--pas-3);
    padding-top: var(--pas-1);
}

.page-texte__fiche dt {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-pale);
}

.page-texte__fiche dd {
    margin: 0;
    font-size: var(--taille-petit);
}

/* Chapô : le paragraphe d'ouverture d'une page de texte, un cran au-dessus du
   corps. Un seul par page. */
.page-texte__chapo {
    margin-bottom: var(--pas-4);
    font-size: var(--taille-intro);
    line-height: 1.5;
    color: var(--encre-douce);
}

.page-texte__liste {
    margin: 0 0 var(--pas-3);
    padding-left: var(--pas-3);
    max-width: var(--largeur-lecture);
    line-height: 1.6;
}

.page-texte__liste li {
    margin-bottom: var(--pas-1);
}

.page-texte__pied {
    padding-top: var(--pas-2);
    border-top: 1px solid var(--filet);
}

/* Tableau de texte — durées de conservation, correspondances. Mêmes filets que
   partout : une ligne sous chaque rangée, rien d'autre. */
.tableau-donnees {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--taille-petit);
}

.tableau-donnees th,
.tableau-donnees td {
    padding: var(--pas-1) var(--pas-2) var(--pas-1) 0;
    border-bottom: 1px solid var(--filet);
    text-align: left;
    vertical-align: top;
}

.tableau-donnees thead th {
    border-bottom-color: var(--filet-appuye);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

.tableau-donnees tbody th {
    font-weight: 500;
    color: var(--encre);
}

.tableau-donnees .mention {
    display: block;
    margin-top: 2px;
}

/* Un tableau ne fait jamais défiler la page en travers : il défile dans sa
   propre boîte. */
/* .tableau-defilant est dans base.css : il servait sur quatre pages réparties
   sur trois feuilles, et manquait à la fiche série. */

/* Raccourcis de la collection : les deux gestes qui servent vraiment. */
.collection__raccourcis {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    max-width: none;
    margin-bottom: var(--pas-3);
}

/* -----------------------------------------------------------------------------
   Fiche d'auteur
-------------------------------------------------------------------------------- */

/* Conteneur de la page. Sans règle propre, mais nommé : c'est le point
   d'accroche si la mise en page évolue, et le scanner de styles le réclame. */
.auteur {
    max-width: none;
}

.auteur__identite {
    max-width: var(--largeur-lecture);
    margin-bottom: var(--pas-3);
    padding-left: var(--pas-2);
    border-left: 2px solid var(--filet-appuye);
}

.auteur__original {
    margin-bottom: var(--pas-1);
    font-family: var(--police-lecture);
    font-size: var(--taille-intro);
    color: var(--encre-douce);
}

.auteur__biographie {
    margin: 0;
    line-height: 1.6;
}

/* Portrait de la page « à propos ». Photo à gauche, texte à droite ; en dessous
   de 620 px la photo passe au-dessus, centrée. */
.portrait {
    display: flex;
    align-items: flex-start;
    gap: var(--pas-3);
}

.portrait__photo {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    border: 1px solid var(--filet-appuye);
    border-radius: 50%;
    background-color: var(--papier-creuse);
    object-fit: cover;
}

.portrait__texte {
    min-width: 0;
}

/* Le titre du portrait ne porte pas le filet des autres sections : il vit à
   côté de la photo, un trait sous lui couperait le bloc en deux. */
.portrait__texte h2 {
    margin-bottom: var(--pas-2);
    padding-bottom: 0;
    border-bottom: 0;
    font-size: var(--taille-titre-3);
}

/* Chiffres clés de la page « à propos ». */
.chiffres-cles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-4);
    margin: 0 0 var(--pas-2);
}

.chiffres-cles__bloc {
    padding-left: var(--pas-2);
    border-left: 2px solid var(--bordeaux);
}

.chiffres-cles dt {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

.chiffres-cles dd {
    margin: 0;
    font-family: var(--police-lecture);
    font-size: var(--taille-titre-2);
    line-height: 1.1;
}

/* Champ que l'exploitant doit compléter : visible sans être alarmant. */
.a-renseigner {
    padding: 1px 6px;
    border: 1px dashed var(--ocre);
    border-radius: var(--angle);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--ocre);
}

@media (max-width: 620px) {

    .page-texte__fiche {
        grid-template-columns: 1fr;
        gap: 0 0;
    }

    .page-texte__fiche dd {
        margin-bottom: var(--pas-2);
    }

    .portrait {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    /* Le texte reprend l'alignement à gauche : un paragraphe de trois lignes
       centré se lit mal, seul le portrait est centré. */
    .portrait__texte {
        text-align: left;
    }

    .chiffres-cles {
        gap: var(--pas-2) var(--pas-3);
    }
}

/* -----------------------------------------------------------------------------
   Page d'erreur
-------------------------------------------------------------------------------- */

.erreur {
    max-width: 48ch;
    padding-top: var(--pas-8);
}

.erreur h1 {
    margin: var(--pas-1) 0 var(--pas-3);
}

.erreur__details {
    margin-top: var(--pas-6);
    padding: var(--pas-2);
    border: 1px solid var(--filet);
    border-left: 3px solid var(--bordeaux);
    background-color: var(--papier-creuse);
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: var(--taille-mention);
    line-height: 1.5;
    color: var(--encre-douce);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* -----------------------------------------------------------------------------
   Adaptation aux petits ecrans
-------------------------------------------------------------------------------- */

@media (max-width: 860px) {

    .calendrier__entree {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 2px;
    }

    .calendrier__date {
        grid-column: 1 / -1;
        order: -1;
    }

    .calendrier__editeur {
        grid-column: 1;
    }

    .calendrier__prix {
        grid-column: 2;
    }
}

@media (max-width: 520px) {

    .grille-series {
        grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
        gap: var(--pas-3) var(--pas-2);
    }
}

/* -----------------------------------------------------------------------------
   Navigation de l'espace collection

   Elle ne vivait que sur /ma-collection : cliquer sur un raccourci faisait
   disparaître les sept autres, et il fallait revenir en arrière pour passer de
   l'une à l'autre. Elle est maintenant posée à l'identique sur les huit pages,
   la page courante marquée.

   Elle est ici et non dans manquants.css parce que trois de ces huit pages ne
   chargent pas cette feuille-là : accueil.css est la seule commune aux huit.

   Des liens en ligne et non des boutons pleine largeur : huit boutons
   empileraient un écran de haut sur téléphone avant le premier contenu.
-------------------------------------------------------------------------------- */

.nav-collection {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1) var(--pas-3);
    margin-bottom: var(--pas-4);
    padding-bottom: var(--pas-2);
    border-bottom: 1px solid var(--filet);
}

.nav-collection__lien {
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    letter-spacing: 0.02em;
    color: var(--encre-douce);
    text-decoration: none;
}

.nav-collection__lien:hover {
    border-bottom-color: var(--filet-appuye);
    color: var(--encre);
}

/* La page courante : bordeaux et soulignée. Jamais la couleur seule —
   aria-current le dit aux lecteurs d'écran, et le filet la distingue en
   contrastes forcés, où les couleurs sont remplacées. */
.nav-collection__lien--actif {
    border-bottom-color: var(--bordeaux);
    color: var(--bordeaux);
    font-weight: 600;
}

@media print {

    .nav-collection {
        display: none;
    }
}