/* =============================================================================
   Mangalist.fr - Fiche d'une serie
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Entete de la fiche
   Grille asymetrique : le texte occupe la colonne large a gauche, la couverture
   se cale a droite. On ne centre rien, un chemin de lecture unique suffit.
-------------------------------------------------------------------------------- */

/* Zones nommees plutot qu'un ordre implicite : c'est ce qui permet de replacer
   la couverture entre le titre et le texte sur petit ecran, sans dupliquer le
   moindre balisage. */
.fiche {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
        "entete     couverture"
        "texte      couverture";
    column-gap: var(--pas-8);
    align-items: start;
}

.fiche__entete {
    grid-area: entete;
}

.fiche__texte {
    grid-area: texte;
}

.fiche__colonne-couverture {
    grid-area: couverture;
}

.fiche__surtitre {
    margin-bottom: var(--pas-2);
}

.fiche__titre {
    margin-bottom: var(--pas-1);
}

/* -----------------------------------------------------------------------------
   Age conseille
   Marque d'un filet a gauche, comme une annotation en marge. La provenance
   est toujours visible : un age conseille venu du depot legal et une
   estimation maison ne se valent pas, et un parent merite de savoir laquelle
   il lit.
-------------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   Sélecteur d'édition
   Des onglets sobres, cernés d'un filet : on choisit un tirage, on ne navigue
   pas ailleurs. L'actif est souligné de bordeaux, comme partout sur le site.
-------------------------------------------------------------------------------- */

.editions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    margin-bottom: var(--pas-3);
}

.editions__choix {
    padding: 0.3rem var(--pas-2);
    border: 1px solid var(--filet);
    border-bottom-width: 2px;
    border-radius: var(--angle);
    background-color: var(--papier-creuse);
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-douce);
    text-decoration: none;
}

.editions__choix:hover {
    border-color: var(--filet-appuye);
    color: var(--encre);
}

.editions__choix--actif {
    border-bottom-color: var(--bordeaux);
    background-color: var(--papier);
    color: var(--encre);
    font-weight: 600;
}

.editions__compte {
    margin-left: 0.4em;
    font-weight: 400;
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

/* -----------------------------------------------------------------------------
   Détail des tomes
   Un tableau de données, pas une grille décorative : filets fins, chiffres
   alignés, aucune trame de fond. On lit une ligne, on la compare à la suivante.
-------------------------------------------------------------------------------- */

.tomes-detail {
    margin-top: var(--pas-8);
}

.tableau-tomes {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
}

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

.tableau-tomes thead th {
    font-size: var(--taille-mention);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
    border-bottom-color: var(--filet-appuye);
    white-space: nowrap;
}

.tableau-tomes tbody th {
    width: 3.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--encre);
}

/* Chiffres alignés sur la colonne : c'est ce qui permet de comparer d'un coup
   d'œil un prix ou une pagination d'une ligne à l'autre. */
.tableau-tomes__nombre {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tableau-tomes__isbn {
    font-variant-numeric: tabular-nums;
    font-size: var(--taille-mention);
    color: var(--encre-pale);
    white-space: nowrap;
}

/* Un tome à paraître est en attente, pas en retard : ocre, jamais bordeaux. */
.tableau-tomes__annonce th,
.tableau-tomes__annonce td {
    color: var(--encre-douce);
}

.tableau-tomes__etiquette {
    margin-left: 0.4em;
    padding: 1px 5px;
    border: 1px solid var(--ocre);
    border-radius: var(--angle);
    font-size: var(--taille-mention);
    color: var(--ocre);
    white-space: nowrap;
}

@media (max-width: 620px) {
    /* Le titre du volume saute : c'est la colonne la plus large et la moins
       consultée, et les cinq autres tiennent alors sans défilement. */
    .tableau-tomes thead th:nth-child(2),
    .tableau-tomes tbody td:nth-child(2) {
        display: none;
    }

    .tableau-tomes th,
    .tableau-tomes td {
        padding-right: var(--pas-1);
    }
}

/* -----------------------------------------------------------------------------
   Barre d'administration
   Visible du seul administrateur. Discrete par construction : c'est un outil
   pose sur une page publique, il ne doit pas la deformer.
-------------------------------------------------------------------------------- */

/* Posee avant .fiche, hors de sa grille a deux colonnes : a l'interieur, elle
   en devenait la premiere cellule et poussait le texte sous la couverture. */
.barre-admin {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pas-2);
    max-width: none;
    margin: 0 0 var(--pas-3);
    padding: var(--pas-1) var(--pas-2);
    border: 1px dashed var(--filet-appuye);
    border-radius: var(--angle);
    background-color: var(--papier-creuse);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
}

.barre-admin__intitule {
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

.barre-admin__etat {
    margin-left: auto;
    font-weight: 600;
    color: var(--bordeaux);
}

/* Pose juste au-dessus du resume : la marge haute le detache du bloc des
   auteurs, la marge basse reste serree pour qu'il se lise avec le texte qu'il
   annonce. */
.age-conseille {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    max-width: none;
    margin: var(--pas-3) 0 var(--pas-2);
    padding: 3px 0 3px 10px;
    border-left: 3px solid var(--filet-appuye);
}

.age-conseille--officiel {
    border-left-color: var(--olive);
}

.age-conseille__valeur {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    font-weight: 600;
    color: var(--encre);
}

.age-conseille__source {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    font-style: italic;
    color: var(--encre-pale);
}

/* Le titre original vient juste sous le titre francais, en italique discret. */
.fiche__titre-original {
    font-style: italic;
    font-size: var(--taille-intro);
    color: var(--encre-pale);
    margin-bottom: var(--pas-3);
}

.fiche__auteurs {
    padding-top: var(--pas-2);
    border-top: 1px solid var(--filet);
    margin-bottom: var(--pas-3);
}

.fiche__auteur {
    font-size: var(--taille-petit);
    color: var(--encre-douce);
}

.fiche__auteur strong {
    font-weight: 500;
    color: var(--encre);
}

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

/* Le resume porte desormais sa propre mise en forme. Les regles qui suivent ne
   valent que dans ce bloc : ailleurs, un h2 ou une liste garde son style de
   page. On reste sur des ecarts mesures — un resume qui crie plus fort que le
   titre de la fiche inverse la hierarchie de lecture. */
.fiche__synopsis > :first-child {
    margin-top: 0;
}

.fiche__synopsis > :last-child {
    margin-bottom: 0;
}

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

.fiche__synopsis h2,
.fiche__synopsis h3,
.fiche__synopsis h4 {
    margin: var(--pas-3) 0 var(--pas-1);
    font-size: var(--taille-etiquette);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bordeaux);
}

.fiche__synopsis ul,
.fiche__synopsis ol {
    margin: 0 0 var(--pas-2);
    padding-left: var(--pas-3);
}

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

/* Filet a gauche plutot que guillemets : la citation se distingue sans changer
   de graisse ni de corps, et le filet reprend celui du reste du site. */
.fiche__synopsis blockquote {
    margin: 0 0 var(--pas-2);
    padding-left: var(--pas-2);
    border-left: 1px solid var(--filet);
    font-style: italic;
    color: var(--encre-douce);
}

.fiche__synopsis blockquote p {
    margin: 0;
}

/* Attribution du resume : discrete, mais toujours presente. Un resume est une
   oeuvre de l'esprit, on dit d'ou il vient. */
.fiche__origine {
    margin-top: calc(var(--pas-2) * -0.5);
    margin-bottom: var(--pas-2);
    max-width: var(--largeur-lecture);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

.fiche__origine a {
    color: var(--encre-douce);
    text-decoration-color: var(--filet);
}

.fiche__origine a:hover {
    color: var(--bordeaux);
}

.fiche__genres {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    margin-top: var(--pas-3);
}

/* Les genres sont des mentions cernees d'un filet, pas des pastilles colorees. */
/* La pastille de genre elle-même est dans base.css : elle sert ici ET sur le
   catalogue, qui ne charge pas cette feuille. Tant qu'elle vivait ici, la liste
   « parcourir par genre » de /series sortait sans aucun style. */

/* -----------------------------------------------------------------------------
   Couverture
   L'effet de tranche est obtenu par deux calques decales bordes d'un filet :
   on simule l'epaisseur des pages, pas une ombre portee.
-------------------------------------------------------------------------------- */

.couverture {
    position: relative;
    margin: 0 8px 0 0;   /* laisse la place aux deux calques decales vers la droite */
}

/* Les calques sont cales sur la seule image, pas sur la legende : meme largeur,
   meme rapport, ancres en haut. */
.couverture::before,
.couverture::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    aspect-ratio: 2 / 3;
    border: 1px solid var(--filet);
    background-color: var(--papier-creuse);
    z-index: -1;
}

.couverture::before { transform: translate(4px, 4px); }
.couverture::after  { transform: translate(8px, 8px); }

/* La couverture devient un bouton pour pouvoir etre agrandie. On lui retire
   toute apparence de bouton : c'est l'image qui est cliquable, pas un controle
   ajoute par-dessus. */
.couverture__loupe,
.volet-tome__loupe {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

/* Sans couverture, le bouton reste en place — c'est lui qui tient la colonne du
   volet — mais il ne promet plus rien : ni curseur d'agrandissement, ni filet au
   survol. Un visuel de remplacement n'a rien à montrer de plus grand. */
.volet-tome__loupe:disabled {
    cursor: default;
}

.couverture__loupe:focus-visible,
.volet-tome__loupe:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 3px;
}

.couverture__image {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 1px solid var(--filet-appuye);
    background-color: var(--papier-vif);
    transition: border-color 140ms linear;
}

.couverture__loupe:hover .couverture__image,
.volet-tome__loupe:enabled:hover .volet-tome__couverture {
    border-color: var(--bordeaux);
}

.couverture__legende {
    margin-top: var(--pas-2);
    text-align: right;
}

/* -----------------------------------------------------------------------------
   Bloc de progression
   Deux affichages selon la longueur de la serie, la bascule se fait en PHP au
   seuil de 24 tomes (constante SEUIL_PASTILLES) :

   - jusqu'a 24 tomes : des pastilles. On denombre les tomes manquants d'un coup
     d'oeil, ce qu'aucun pourcentage ne permet.
   - au-dela : un taux en gros chiffres et une regle graduee. Sur 110 tomes les
     pastilles deviennent illisibles et debordent sur cinq lignes.
-------------------------------------------------------------------------------- */

.progression {
    margin-top: var(--pas-4);
    padding-top: var(--pas-2);
    border-top: 1px solid var(--filet-appuye);
    text-align: right;
}

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

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

/* --- Affichage court : pastilles ---------------------------------------- */

.progression__pastilles {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
    margin: var(--pas-2) 0;
}

.pastille {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: 1px solid var(--filet-appuye);
    background-color: transparent;
}

.pastille--pleine {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
}

/* --- Affichage long : taux et regle graduee ------------------------------ */

/* Le taux est compose dans la serif de lecture, en grand corps : c'est un
   chiffre a lire, pas une etiquette d'interface. */
.progression__taux {
    margin: var(--pas-1) 0 0;
    font-family: var(--police-lecture);
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--encre);
}

.progression__taux span {
    font-size: 1.25rem;
    color: var(--encre-pale);
    margin-left: 0.1em;
}

.progression__regle-cadre {
    position: relative;
    margin: var(--pas-2) 0 var(--pas-1);
}

/* Graduations tous les dixiemes, tracees sous la regle. On garde le registre
   de l'instrument de mesure plutot que celui de la barre de chargement. */
.progression__regle-cadre::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 4px;
    background-image: repeating-linear-gradient(
        to right,
        var(--filet-appuye) 0 1px,
        transparent 1px 10%
    );
}

/* L'element <progress> natif evite tout style en ligne pour la largeur du
   remplissage, ce que la politique de securite du contenu interdit de toute
   facon. Il apporte aussi la semantique et l'accessibilite sans une ligne de JS. */
.progression__regle {
    display: block;
    width: 100%;
    height: 3px;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 0;
    background-color: var(--filet);
    color: var(--bordeaux);
}

.progression__regle::-webkit-progress-bar {
    background-color: var(--filet);
    border-radius: 0;
}

.progression__regle::-webkit-progress-value {
    background-color: var(--bordeaux);
    border-radius: 0;
}

.progression__regle::-moz-progress-bar {
    background-color: var(--bordeaux);
    border-radius: 0;
}

/* -----------------------------------------------------------------------------
   Grille des tomes
   Chaque tome est une case carree portant son numero. Trois etats seulement,
   distingues par la couleur du filet et de l'aplat, jamais par une icone.
-------------------------------------------------------------------------------- */

.tomes {
    margin-top: var(--pas-8);
}

/* Colonnes de largeur egale : toutes les cases ont donc exactement la meme
   taille, quel que soit le nombre de chiffres du numero. La piste minimale
   tient compte du remplissage lateral, pour qu'un « 110 » ne vienne pas
   toucher la bordure.

   Cases divisees par deux : une serie longue tenait sur trois ecrans, et la
   grille se lit mieux d'un coup d'oeil qu'en defilant. Le remplissage et le
   corps du texte suivent la meme reduction, sinon un numero a trois chiffres
   deborderait de sa case.

   PLANCHER A 24 px, jamais moins : c'est la taille minimale d'une cible tactile
   (WCAG 2.5.8). En dessous, la case devient impossible a viser au doigt. */
.tomes__grille {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(31px, 1fr));
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tome {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0 0.2rem;
    border: 1px solid var(--filet);
    border-radius: var(--angle);
    background-color: var(--papier-vif);
    color: var(--encre-pale);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    font-weight: 500;
    /* Le numero ne se coupe jamais sur deux lignes : la hauteur resterait
       identique, mais l'alignement optique sauterait d'une case a l'autre. */
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 120ms linear, background-color 120ms linear,
                color 120ms linear;
}

.tome:hover {
    border-color: var(--encre-douce);
    color: var(--encre);
}

/* Tome possede : aplat bordeaux plein. */
.tome--possede {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
    color: var(--papier-vif);
}

.tome--possede:hover {
    border-color: var(--bordeaux-fonce);
    background-color: var(--bordeaux-fonce);
    color: var(--papier-vif);
}

/* Tome annonce, pas encore paru : filet ocre discontinu. Il reste cliquable,
   c'est meme le tome dont la date de parution interesse le plus. */
.tome--annonce {
    border-style: dashed;
    border-color: var(--ocre);
    background-color: transparent;
    color: var(--ocre);
}

.tome--annonce:hover {
    border-color: var(--ocre);
    background-color: var(--papier-creuse);
    color: var(--ocre);
}

/* -----------------------------------------------------------------------------
   Tome dont le volet est ouvert
   Il doit se distinguer des trois etats existants — possede, manquant,
   annonce — sans les effacer : on lit toujours si on possede le tome qu'on
   consulte. D'ou un cerne d'encre pose PAR-DESSUS l'etat, en `outline` plutot
   qu'en bordure : une bordure epaissie decalerait toute la grille.
-------------------------------------------------------------------------------- */

.tome--ouvert {
    outline: 2px solid var(--encre);
    outline-offset: -1px;
    font-weight: 700;
    z-index: 1;
}

.tome--ouvert:not(.tome--possede) {
    background-color: var(--papier-creuse);
    color: var(--encre);
}

.tome--ouvert.tome--possede {
    color: var(--papier-vif);
}

.tome--ouvert.tome--annonce {
    border-style: solid;
    color: var(--ocre);
}

.tome--ouvert::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    width: 9px;
    height: 9px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 1px solid var(--encre);
    border-top: 1px solid var(--encre);
    background-color: var(--papier-creuse);
}

/* -----------------------------------------------------------------------------
   Volet de detail d'un tome
   S'ouvre sous la grille plutot qu'en fenetre modale : pas de voile sombre,
   pas de rupture de lecture. On reste dans le registre de la notice qu'on
   deplie, et la page conserve son fil.
-------------------------------------------------------------------------------- */

.volet-tome {
    display: grid;
    grid-template-columns: auto 150px minmax(0, 1fr) auto;
    gap: var(--pas-3);
    /* Etirement et non centrage : les fleches doivent occuper toute la hauteur
       du volet. Centrees, elles se deplaceraient verticalement selon la
       longueur du resume — et l'on cliquerait a cote. */
    align-items: stretch;
    margin-top: var(--pas-3);
    padding: var(--pas-3);
    border: 1px solid var(--filet-appuye);
    border-left: 3px solid var(--encre);
    background-color: var(--papier-creuse);
}

/* La couverture et le texte gardent leur hauteur propre : seul l'espace des
   fleches est etire. */
.volet-tome__loupe,
.volet-tome__corps {
    align-self: start;
}

/* Fleches de passage d'un tome a l'autre.
   Le bouton occupe toute la hauteur du volet pour que la zone cliquable ne se
   deplace pas selon la longueur du resume ; le chevron, lui, est centre.
   Fond transparent : la fleche se fond dans le bloc, seul un filet fin la
   delimite. On reste dans le registre du trait, sans aplat rapporte. */
.volet-tome__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    width: 34px;
    min-height: 100%;
    padding: 0;
    border: 1px solid var(--filet);
    border-radius: var(--angle);
    background-color: transparent;
    font-family: var(--police-lecture);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--encre-douce);
    cursor: pointer;
    transition: border-color 120ms linear, color 120ms linear;
}

.volet-tome__nav:hover {
    border-color: var(--encre-douce);
    color: var(--encre);
}

.volet-tome__nav[hidden] {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
}

.volet-tome__couverture {
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border: 1px solid var(--filet-appuye);
    background-color: var(--papier-vif);
}

.volet-tome__corps {
    min-width: 0;
}

.volet-tome__entete {
    display: flex;
    align-items: baseline;
    gap: var(--pas-2);
    margin-bottom: var(--pas-2);
    padding-bottom: var(--pas-2);
    border-bottom: 1px solid var(--filet);
}

.volet-tome__titre {
    margin: 0;
    font-size: var(--taille-titre-3);
}

.volet-tome__edition {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ocre);
    white-space: nowrap;
}

.volet-tome__edition {
    margin-left: auto;
}

.volet-tome__resume {
    font-size: var(--taille-petit);
    line-height: 1.55;
    margin-bottom: var(--pas-2);
}

/* Le resume d'un tome accepte la meme mise en forme que celui d'une serie, en
   plus resserre : le volet est etroit, et les marges d'une pleine page y
   laisseraient plus de blanc que de texte. */
.volet-tome__resume > :first-child {
    margin-top: 0;
}

.volet-tome__resume > :last-child {
    margin-bottom: 0;
}

.volet-tome__resume p {
    margin: 0 0 var(--pas-1);
}

.volet-tome__resume h4,
.volet-tome__resume h5,
.volet-tome__resume h6 {
    margin: var(--pas-2) 0 var(--pas-1);
    font-size: var(--taille-mention);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bordeaux);
}

.volet-tome__resume ul,
.volet-tome__resume ol {
    margin: 0 0 var(--pas-1);
    padding-left: var(--pas-3);
}

.volet-tome__resume blockquote {
    margin: 0 0 var(--pas-1);
    padding-left: var(--pas-1);
    border-left: 1px solid var(--filet);
    font-style: italic;
    color: var(--encre-douce);
}


/* Actions de suivi du tome. Deux formulaires cote a cote : chacun porte son
   jeton, aucun n'a besoin de JavaScript pour fonctionner. */
.volet-tome__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    margin: var(--pas-2) 0;
}

.volet-tome__actions form {
    margin: 0;
}

.volet-tome__actions .bouton {
    padding: 0.4rem 0.8rem;
    font-size: var(--taille-mention);
}

.volet-tome__mention {
    margin: 0 0 var(--pas-2);
    max-width: none;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    font-style: italic;
    color: var(--encre-pale);
}

/* Fiche technique en deux colonnes : intitule a gauche, valeur a droite,
   alignes comme un ours de revue. */
.volet-tome__fiche {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--pas-2);
    margin: 0;
    padding-top: var(--pas-2);
    border-top: 1px solid var(--filet);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
}

.volet-tome__fiche dt {
    color: var(--encre-pale);
    letter-spacing: 0.04em;
}

.volet-tome__fiche dd {
    margin: 0;
    color: var(--encre);
}

.volet-tome__chargement {
    margin: 0;
    max-width: none;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

/* -----------------------------------------------------------------------------
   Avis des lecteurs
-------------------------------------------------------------------------------- */

.avis {
    margin-top: var(--pas-12);
}

.avis__moyenne {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pas-2);
    margin-bottom: var(--pas-4);
}

/* Les etoiles sont des caracteres, pas un habillage : la largeur de
   remplissage d'une barre se pose en style en ligne, que la CSP interdit. */
.avis__etoiles {
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ocre);
}

.avis__valeur {
    font-family: var(--police-lecture);
    font-size: var(--taille-titre-3);
    font-weight: 500;
    color: var(--encre);
}

.avis__valeur span {
    font-size: var(--taille-petit);
    color: var(--encre-pale);
}

.avis__nombre,
/* .avis__invitation est dans base.css : /contribuer l'emploie aussi, et ne
   charge pas cette feuille. Elle y était de surcroît déclarée DEUX FOIS. */

/* --- Notation ------------------------------------------------------------- */

.notation {
    margin-bottom: var(--pas-2);
}

/* Le fieldset reste en bloc : une legende posee dans un conteneur flex n'est
   pas traitee de la meme facon d'un navigateur a l'autre. La rangee est donc
   un element interne. */
.notation__champs {
    margin: 0;
    padding: var(--pas-2) var(--pas-3);
    border: 1px solid var(--filet);
    border-radius: var(--angle);
    background-color: var(--papier-creuse);
}

.notation__ligne {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-2);
}

.notation__legende {
    padding: 0 var(--pas-1);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

/* Les etoiles sont posees a l'envers dans le HTML (cinq vers une) : row-reverse
   remet l'ordre visuel a l'endroit tout en laissant le selecteur de frere
   suivant colorer les etoiles inferieures a celle pointee. */
.notation__etoiles {
    position: relative;   /* ancre les boutons radio masques */
    display: flex;
    flex-direction: row-reverse;
}

.notation__etoiles input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.notation__etoiles label {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--filet-appuye);
    transition: color 100ms linear;
}

.notation__etoiles label::before {
    content: "★";
}

.notation__etoiles input:checked ~ label,
.notation__etoiles label:hover,
.notation__etoiles label:hover ~ label {
    color: var(--ocre);
}

.notation__etoiles input:focus-visible + label {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
}

.notation-retrait {
    margin-bottom: var(--pas-2);
}

.notation__retirer {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
    text-decoration: underline;
    text-decoration-color: var(--filet-appuye);
    text-underline-offset: 0.18em;
    cursor: pointer;
}

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

.commentaire-forme {
    margin: var(--pas-4) 0 var(--pas-6);
}

/* --- Fil des avis --------------------------------------------------------- */

.commentaires {
    margin: var(--pas-4) 0 0;
    padding: 0;
    list-style: none;
}

.commentaire {
    padding: var(--pas-3) 0;
    border-top: 1px solid var(--filet);
}

.commentaire--sien {
    padding-left: var(--pas-2);
    border-left: 3px solid var(--bordeaux);
}

.commentaire__entete {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pas-2);
    margin-bottom: var(--pas-1);
}

.commentaire__auteur {
    font-family: var(--police-interface);
    font-weight: 600;
    font-size: var(--taille-etiquette);
    color: var(--encre);
}

.commentaire__note {
    font-size: var(--taille-petit);
    letter-spacing: 0.04em;
    color: var(--ocre);
}

.commentaire__date {
    margin-left: auto;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

.commentaire__contenu {
    max-width: var(--largeur-lecture);
    margin: 0;
    font-size: var(--taille-petit);
    line-height: 1.6;
}

.commentaire__actions {
    margin-top: var(--pas-1);
}

.commentaire__supprimer {
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
    text-decoration: underline;
    text-decoration-color: var(--filet-appuye);
    text-underline-offset: 0.18em;
    cursor: pointer;
}

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

/* -----------------------------------------------------------------------------
   Visionneuse
   L'element <dialog> natif apporte le fond, le piegeage du focus et la
   fermeture par Echap. On ne style que l'apparence.

   La couverture est conservee en 512 px de large, volontairement : c'est une
   vignette d'identification, pas une reproduction. « En grand » signifie donc
   plein cadre a la resolution disponible, sans agrandissement flou au-dela.
-------------------------------------------------------------------------------- */

.visionneuse {
    max-width: min(92vw, 560px);
    max-height: 92vh;
    padding: var(--pas-2);
    border: 1px solid var(--filet-appuye);
    border-radius: var(--angle);
    background-color: var(--papier);
    color: var(--encre);
    overflow: visible;
}

.visionneuse::backdrop {
    background-color: rgba(31, 27, 22, 0.82);
}

/* Numero de tome, au-dessus de l'image : en parcourant les couvertures a la
   fleche, on doit savoir a tout moment ou l'on se trouve dans la serie. */
.visionneuse__titre {
    margin: 0 0 var(--pas-2);
    max-width: none;
    text-align: center;
    font-family: var(--police-lecture);
    font-size: var(--taille-titre-3);
    font-weight: 500;
    line-height: 1.2;
    color: var(--encre);
}

.visionneuse__image {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 9rem);
    margin: 0 auto;
    border: 1px solid var(--filet-appuye);
    background-color: var(--papier-creuse);
}

.visionneuse__legende {
    margin: var(--pas-2) 0 0;
    max-width: none;
    text-align: center;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-douce);
}

.visionneuse__fermer {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--filet-appuye);
    border-radius: 50%;
    background-color: var(--papier);
    font-family: var(--police-interface);
    font-size: 20px;
    line-height: 1;
    color: var(--encre-douce);
    cursor: pointer;
}

.visionneuse__fermer:hover {
    border-color: var(--bordeaux);
    color: var(--bordeaux);
}

/* Fleches de la visionneuse : posees hors du cadre de l'image, pour ne rien
   masquer de la couverture. */
.visionneuse__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 64px;
    padding: 0;
    border: 1px solid var(--filet-appuye);
    border-radius: var(--angle);
    background-color: var(--papier);
    font-family: var(--police-lecture);
    font-size: 1.75rem;
    line-height: 1;
    color: var(--encre-douce);
    cursor: pointer;
    transition: border-color 120ms linear, color 120ms linear;
}

.visionneuse__nav:hover {
    border-color: var(--bordeaux);
    color: var(--bordeaux);
}

.visionneuse__nav--precedent { left: -52px; }
.visionneuse__nav--suivant   { right: -52px; }

@media (max-width: 620px) {

    /* Quatre colonnes ne tiennent pas sur un telephone : mesure faite, il
       restait CENT pixels au texte du tome, ou « 1 janvier 2025 » s'ecrivait
       sur trois lignes. La couverture passe donc au-dessus du texte, les
       fleches gardent les bords — elles doivent rester atteignables au pouce
       sans viser. */
    .volet-tome {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "precedent couverture suivant"
            "precedent corps      suivant";
        gap: var(--pas-2);
        padding: var(--pas-2);
    }

    .volet-tome__nav--precedent { grid-area: precedent; }
    .volet-tome__nav--suivant   { grid-area: suivant; }

    .volet-tome__loupe {
        grid-area: couverture;
        justify-self: center;
        max-width: 140px;
    }

    .volet-tome__corps {
        grid-area: corps;
    }

    .volet-tome__nav {
        width: 24px;
        height: 48px;
        font-size: 1.25rem;
    }

    .visionneuse {
        max-width: 88vw;
    }

    .visionneuse__fermer {
        top: -12px;
        right: -6px;
    }

    /* Plus de place hors cadre sur petit ecran : les fleches passent a
       l'interieur, en bas, ou elles ne recouvrent que le bord de l'image. */
    .visionneuse__nav {
        top: auto;
        bottom: 8px;
        transform: none;
        width: 36px;
        height: 44px;
        opacity: 0.92;
    }

    .visionneuse__nav--precedent { left: 8px; }
    .visionneuse__nav--suivant   { right: 8px; }
}

/* Barre de lecture : trait fin sous le numero, presente uniquement si lu. */
.tome__lu {
    width: 8px;
    height: 2px;
    background-color: currentColor;
    opacity: 0.55;
}

/* -----------------------------------------------------------------------------
   Mode de pointage
   Bandeau discret au-dessus de la grille. Il n'apparait qu'avec JavaScript :
   sans lui, les boutons du volet restent le chemin normal, et rien ne promet
   ce qui ne fonctionne pas.
-------------------------------------------------------------------------------- */

.pointage {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pas-1);
    margin-bottom: var(--pas-3);
    padding-bottom: var(--pas-2);
    border-bottom: 1px solid var(--filet);
}

.pointage__intitule {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--encre-pale);
    margin-right: var(--pas-1);
}

.pointage__mode,
.pointage__sortie {
    padding: 0.35rem 0.75rem;
    font-size: var(--taille-mention);
}

/* L'aide occupe toute la largeur restante : elle change a chaque bascule de
   mode, elle ne doit pas deplacer les boutons. */
.pointage__aide {
    flex-basis: 100%;
    margin: var(--pas-1) 0 0;
    max-width: none;
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    font-style: italic;
    color: var(--encre-douce);
}

/* Grille en mode pointage : le curseur annonce que le clic marque, il n'ouvre
   plus. Le filet gauche rappelle le bandeau de commande. */
.tomes__grille--pointage .tome {
    cursor: copy;
}

.tomes__grille--pointage .tome:hover {
    border-color: var(--bordeaux);
}

/* Series longues : cases resserrees et repere tous les dix tomes, pour qu'une
   collection de cent tomes reste denombrable sans compter case par case. */
.tomes__grille--longue {
    grid-template-columns: repeat(auto-fill, minmax(26px, 1fr));
    gap: 3px;
}

/* Remplissage encore reduit : c'est ici que vivent les numeros a trois
   chiffres, et ce sont eux qui decident de la largeur utile. */
.tomes__grille--longue .tome {
    padding: 0 0.1rem;
}

.tomes__grille--longue > li:nth-child(10n + 1) .tome {
    border-left-width: 3px;
    border-left-color: var(--filet-appuye);
}

.tomes__grille--longue > li:nth-child(10n + 1) .tome--possede {
    border-left-color: var(--bordeaux-fonce);
}

.tomes__legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-3);
    margin-top: var(--pas-3);
    padding-top: var(--pas-2);
    border-top: 1px solid var(--filet);
}

.legende__entree {
    display: flex;
    align-items: center;
    gap: var(--pas-1);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    color: var(--encre-pale);
}

.legende__carre {
    width: 12px;
    height: 12px;
    border: 1px solid var(--filet);
    border-radius: 1px;
    background-color: var(--papier-vif);
}

.legende__carre--possede {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
}

.legende__carre--annonce {
    border-style: dashed;
    border-color: var(--ocre);
    background-color: transparent;
}

/* -----------------------------------------------------------------------------
   Encart de parution a venir
   Bandeau creux borde a gauche d'un filet ocre appuye : c'est l'information la
   plus utile de la page, elle doit se detacher sans crier.
-------------------------------------------------------------------------------- */

.parution {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--pas-2) var(--pas-3);
    margin-top: var(--pas-6);
    padding: var(--pas-3);
    border: 1px solid var(--filet);
    border-left: 3px solid var(--ocre);
    background-color: var(--papier-creuse);
}

.parution__titre {
    font-size: var(--taille-titre-3);
    margin-right: auto;
}

.parution__date {
    font-family: var(--police-interface);
    font-size: var(--taille-petit);
    color: var(--ocre);
    font-weight: 500;
}

/* -----------------------------------------------------------------------------
   Actions de suivi
-------------------------------------------------------------------------------- */

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

/* -----------------------------------------------------------------------------
   Adaptation aux petits ecrans
   La couverture passe en tete, reduite, et la progression s'aligne a gauche.
-------------------------------------------------------------------------------- */

@media (max-width: 860px) {

    /* Une seule colonne, et la couverture remonte juste sous le titre : c'est
       elle qui identifie l'oeuvre, elle ne doit pas attendre la fin du resume,
       des genres et des boutons pour apparaitre. */
    .fiche {
        grid-template-columns: 1fr;
        grid-template-areas:
            "entete"
            "couverture"
            "texte";
        gap: var(--pas-4);
    }

    /* Couverture et progression cote a cote : en pleine largeur, l'image ferait
       un ecran a elle seule et repousserait tout le reste.
       Alignes en HAUT : la couverture fait deux fois la hauteur du bloc de
       progression, et un alignement en bas laissait un vide franc au-dessus
       de « Votre collection ». */
    .fiche__colonne-couverture {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        gap: var(--pas-4);
        align-items: start;
    }

    .progression,
    .couverture__legende,
    .progression__pastilles {
        text-align: left;
        justify-content: flex-start;
        margin-top: 0;
    }
}

@media (max-width: 520px) {

    .tomes__grille {
        grid-template-columns: repeat(auto-fill, minmax(27px, 1fr));
    }

    /* 24 px et pas 23 : moitie de 46 tomberait sous la taille minimale d'une
       cible tactile. On s'arrete au plancher plutot que de le franchir. */
    .tomes__grille--longue {
        grid-template-columns: repeat(auto-fill, minmax(24px, 1fr));
    }

    .tome {
        padding: 0 0.15rem;
    }

    /* « Je possede tous les tomes parus » ne tient pas sur une ligne de
       telephone : les boutons s'empilent en pleine largeur plutot que de se
       casser en escalier, et la cible de touche y gagne. */
    .actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions form,
    .actions .bouton {
        width: 100%;
    }

    .actions .bouton {
        text-align: center;
    }

    /* La couverture passe au-dessus de la progression : sous 520 px, deux
       colonnes laissent moins de cent pixels au decompte des tomes. Et elle se
       centre : seule sur sa ligne, calee a gauche, elle laissait un large vide
       a sa droite que rien ne venait equilibrer. */
    .fiche__colonne-couverture {
        grid-template-columns: 1fr;
        gap: var(--pas-2);
        justify-items: center;
    }

    .couverture {
        max-width: 190px;
        /* Les deux calques decales vers la droite sont compenses, sans quoi le
           centrage optique serait fausse de huit pixels. */
        margin-right: 0;
        padding-right: 8px;
    }

    .couverture__legende,
    .progression {
        width: 100%;
    }
}