/* =============================================================================
   Mangalist.fr - Socle : variables, remise a zero, typographie
   Direction : editorial papier. Filets et blanc tournant, jamais d'ombre.

   Ce fichier est la source de travail : il garde ses commentaires.
   La version servie en production est minifiee et debarrassee de tout ceci.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Polices
   Auto-hebergees dans /includes/fonts/ : la politique de securite du contenu
   interdit fonts.googleapis.com. Tant que les fichiers ne sont pas deposes,
   la pile de repli assure un rendu correct (Iowan, Palatino, Georgia).
   Spectral : https://fonts.google.com/specimen/Spectral (licence OFL)
-------------------------------------------------------------------------------- */

:root {

    /* --- Papier et encres ------------------------------------------------- */
    --papier:              #faf7f0;   /* fond general, creme */
    --papier-creuse:       #f2ece0;   /* surfaces en retrait, bandeaux */
    --papier-vif:          #fffdf8;   /* surfaces en avant, fiches */

    --encre:               #1f1b16;   /* texte principal, brun-noir jamais pur */
    --encre-douce:         #5c5348;   /* texte secondaire */
    --encre-pale:          #8b8175;   /* mentions, legendes */

    --filet:               #ddd5c7;   /* trait de separation standard */
    --filet-appuye:        #c2b7a3;   /* trait de separation marque */

    /* --- Accents ---------------------------------------------------------- */
    --bordeaux:            #7b2230;   /* accent principal */
    --bordeaux-fonce:      #5e1824;   /* survol, etat actif */
    --bordeaux-voile:      #7b223014; /* aplat tres leger */
    --ocre:                #8a6d3b;   /* parutions annoncees, a venir */
    --olive:               #4f5f3a;   /* confirmations discretes */

    /* --- Typographie ------------------------------------------------------ */
    --police-lecture: "Spectral", "Iowan Old Style", "Palatino Linotype",
                      Palatino, "Book Antiqua", Georgia, serif;
    --police-interface: "Inter Tight", -apple-system, BlinkMacSystemFont,
                      "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Echelle typographique, rapport 1.25 */
    --taille-mention:      0.75rem;
    --taille-etiquette:    0.8125rem;
    --taille-petit:        0.9375rem;
    --taille-texte:        1.0625rem;
    --taille-intro:        1.25rem;
    --taille-titre-3:      1.375rem;
    --taille-titre-2:      1.875rem;
    --taille-titre-1:      2.75rem;

    --interligne-serre:    1.25;
    --interligne:          1.65;

    /* --- Rythme vertical, base 8px ---------------------------------------- */
    --pas-1:  0.5rem;
    --pas-2:  1rem;
    --pas-3:  1.5rem;
    --pas-4:  2rem;
    --pas-6:  3rem;
    --pas-8:  4rem;
    --pas-12: 6rem;

    /* --- Gabarit ----------------------------------------------------------- */
    --largeur-page:        1140px;
    --largeur-lecture:     62ch;    /* longueur de ligne confortable */
    --angle:               2px;     /* angles quasi vifs : on est sur du papier */

    /* Indique au navigateur de quel cote nous sommes : sans cette declaration,
       les controles natifs — champs, listes, barres de defilement — restent
       clairs sur un systeme en mode sombre, et jurent au milieu de la page. */
    color-scheme: light;
}

/* -----------------------------------------------------------------------------
   Mode sombre

   Ce n'est pas l'inverse video du mode clair : un creme inverse donne un gris
   bleute sans caractere. On garde la logique du papier — un brun tres sombre
   plutot qu'un noir pur, des filets qui restent des filets — et on remonte le
   bordeaux, illisible sur fond sombre a sa valeur d'origine.

   Seules les variables changent. Aucune regle de mise en page n'est dupliquee :
   c'est ce qui garantit que les deux themes ne divergent pas avec le temps.
-------------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
    :root {
        --papier:          #16130f;
        --papier-creuse:   #1e1a15;
        --papier-vif:      #201c17;

        --encre:           #ece5d8;
        --encre-douce:     #b3a996;
        --encre-pale:      #8b8175;

        --filet:           #332d25;
        --filet-appuye:    #4a4136;

        /* Le bordeaux d'origine tombe a 2,4:1 sur ce fond : sous le seuil de
           lisibilite. On l'eclaircit jusqu'a passer le rapport de 4,5:1 exige
           pour du texte courant. */
        --bordeaux:        #e0899a;
        --bordeaux-fonce:  #f0a8b6;
        --bordeaux-voile:  #e0899a1f;
        --ocre:            #cba46a;
        --olive:           #9cb37c;

        color-scheme: dark;
    }
}

/* -----------------------------------------------------------------------------
   Remise a zero minimale
-------------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* L'attribut `hidden` doit toujours l'emporter.
   Sa regle native est `[hidden] { display: none }`, de specificite tres faible :
   la moindre classe posant `display: grid` ou `display: flex` la neutralise, et
   l'element reste visible alors que le HTML le declare masque. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--papier);
    color: var(--encre);
    font-family: var(--police-lecture);
    font-size: var(--taille-texte);
    line-height: var(--interligne);
    /* Chiffres alignes en colonne : indispensable pour les listes de tomes */
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

/* -----------------------------------------------------------------------------
   Titres
-------------------------------------------------------------------------------- */

h1, h2, h3, h4 {
    margin: 0;
    font-family: var(--police-lecture);
    font-weight: 500;
    line-height: var(--interligne-serre);
    letter-spacing: -0.011em;   /* leger resserrement optique sur les grands corps */
    text-wrap: balance;
}

h1 { font-size: var(--taille-titre-1); }
h2 { font-size: var(--taille-titre-2); }
h3 { font-size: var(--taille-titre-3); }

p {
    margin: 0 0 var(--pas-2);
    max-width: var(--largeur-lecture);
    text-wrap: pretty;
}

/* -----------------------------------------------------------------------------
   Liens
   Soulignement decale et fin : registre editorial, pas de survol tape-a-l'oeil.
-------------------------------------------------------------------------------- */

a {
    color: var(--bordeaux);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--filet-appuye);
    transition: text-decoration-color 120ms linear, color 120ms linear;
}

a:hover {
    color: var(--bordeaux-fonce);
    text-decoration-color: currentColor;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--bordeaux);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Etiquettes fonctionnelles
   Le sans-serif ne sert QU'a ca : capitales espacees, petit corps. Tout le
   reste du site est en serif de lecture.
-------------------------------------------------------------------------------- */

.etiquette {
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--encre-pale);
}

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

/* Fil de metadonnees : Seinen · Ki-oon · 2013-2021 */
.fil-meta {
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    letter-spacing: 0.02em;
    color: var(--encre-douce);
}

.fil-meta > * + *::before {
    content: "·";
    margin: 0 0.5em;
    color: var(--filet-appuye);
}

/* -----------------------------------------------------------------------------
   Filets
   Toute la hierarchie du site repose sur ces traits, jamais sur une elevation.
-------------------------------------------------------------------------------- */

.filet {
    border: 0;
    border-top: 1px solid var(--filet);
    margin: var(--pas-4) 0;
}

.filet-titre {
    display: flex;
    align-items: center;
    gap: var(--pas-2);
    margin-bottom: var(--pas-3);
}

.filet-titre::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--filet);
}

/* -----------------------------------------------------------------------------
   Boutons
   Rectangulaires, cernes d'un filet. Le bouton principal est un aplat bordeaux.
-------------------------------------------------------------------------------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pas-1);
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--filet-appuye);
    border-radius: var(--angle);
    background-color: transparent;
    color: var(--encre);
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms linear, border-color 120ms linear,
                color 120ms linear;
}

.bouton:hover {
    border-color: var(--encre);
    background-color: var(--papier-vif);
    color: var(--encre);
}

.bouton--principal {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
    color: var(--papier-vif);
}

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

/* Bouton d'une action irreversible : suppression de compte, de fiche. Il ne
   crie pas — le registre du site l'interdit — mais il ne se confond avec
   aucun autre. */
.bouton--danger {
    border-color: var(--bordeaux);
    color: var(--bordeaux);
}

.bouton--danger:hover {
    border-color: var(--bordeaux);
    background-color: var(--bordeaux);
    color: var(--papier-vif);
}

/* Zone regroupant ces actions : un encadre discret suffit a dire « ici, on ne
   clique pas par distraction ». */
.zone-danger {
    margin-top: var(--pas-4);
    padding: var(--pas-3);
    border: 1px solid var(--filet-appuye);
    border-left: 3px solid var(--bordeaux);
    border-radius: var(--angle);
    background-color: var(--papier-creuse);
}

.zone-danger h3 {
    margin-bottom: var(--pas-1);
    font-size: var(--taille-titre-3);
}

/* -----------------------------------------------------------------------------
   Utilitaires partagés

   Tout ce qui suit servait déjà sur plusieurs pages tout en vivant dans UNE
   feuille de page : chaque page qui ne la chargeait pas affichait l'élément
   sans style, sans la moindre erreur. Un scanner les cherche désormais
   (tests/scan-styles.php), après trois occurrences du même défaut.
-------------------------------------------------------------------------------- */

/* Un tableau ne fait JAMAIS défiler la page en travers : il défile dans sa
   propre boîte. Était défini deux fois — accueil.css et admin.css — et la fiche
   série, qui ne charge ni l'une ni l'autre, laissait son tableau des tomes
   déborder sur téléphone. */
.tableau-defilant {
    overflow-x: auto;
    margin-bottom: var(--pas-3);

    /* Et pourtant la page défilait quand même en travers, sur téléphone.
       Mesuré : la boîte défile bien en interne (570 px de contenu pour 327 px
       de large), aucun élément ne dépasse du cadre, et la page glisse de 156 px
       malgré tout — deux barres de défilement horizontales à l'écran.

       « contain: paint » le règle, et rien d'autre n'y a suffi : ni max-width,
       ni min-width: 0, ni display: grid, ni overflow: auto hidden. Il isole le
       débordement de la boîte du calcul de la zone défilable du document, ce
       que « overflow: auto » seul ne garantit pas.

       Rien à perdre : la propriété promet exactement ce qu'on veut ici — que
       rien de cette boîte ne se dessine en dehors d'elle. */
    contain: paint;
}

/* Bouton d'une série déjà suivie : olive, et non bordeaux. Le bordeaux dirait
   « clique ici » ; ici l'action est déjà faite. */
.bouton--suivi {
    border-color: var(--olive);
    color: var(--olive);
}

.bouton--suivi:hover {
    border-color: var(--bordeaux);
    background-color: transparent;
    color: var(--bordeaux);
}

/* Bouton de bout de ligne, dans un tableau. Il répète la même action sur chaque
   ligne : à taille pleine, la colonne pèserait plus lourd que la donnée qu'elle
   accompagne. Il garde sa bordure et son focus — un bouton doit se voir et se
   viser, même discret. */
.bouton--discret {
    padding: 0.125rem 0.5rem;
    font-size: var(--taille-mention);
    letter-spacing: 0.02em;
}

/* Encart invitant à se connecter, sur une fiche comme sur /contribuer. */
.avis__invitation {
    max-width: none;
    margin: var(--pas-3) 0;
    padding: var(--pas-2);
    border: 1px solid var(--filet);
    border-left: 3px solid var(--bordeaux);
    background-color: var(--papier-creuse);
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
    color: var(--encre-douce);
}

/* Étiquette qui appelle l'œil : adresse non confirmée, compte désactivé. Elle
   était employée sur trois pages et définie nulle part — donc rendue comme une
   étiquette ordinaire, ce qui annulait tout son propos. */
.etiquette--attention {
    color: var(--ocre);
}

/* Le lien de pagination : un bouton, mais qui ne doit pas rétrécir sous le
   texte. Employé sur le catalogue et sur la liste des inscrits. */
.pagination__lien {
    flex: 0 0 auto;
}

/* -----------------------------------------------------------------------------
   Fil d'Ariane

   Ici, et non dans une feuille de page : six pages l'utilisent, réparties sur
   quatre feuilles différentes. Rangé dans l'une d'elles, il sortait sans son
   séparateur partout ailleurs — deux liens collés l'un à l'autre.
-------------------------------------------------------------------------------- */

.fil-ariane {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pas-1);
    margin-bottom: var(--pas-2);
    font-family: var(--police-interface);
    font-size: var(--taille-etiquette);
}

.fil-ariane a + a::before {
    content: "›";
    margin-right: var(--pas-1);
    color: var(--filet-appuye);
}

/* -----------------------------------------------------------------------------
   Pastille de genre

   Ici, et non dans une feuille de page : elle sert sur les fiches série ET sur
   le catalogue, qui ne charge pas la même feuille. Rangée dans fiche-serie.css,
   elle laissait la liste « parcourir par genre » du catalogue sans style.
-------------------------------------------------------------------------------- */

.genre {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--filet);
    border-radius: var(--angle);
    background-color: var(--papier-vif);
    font-family: var(--police-interface);
    font-size: var(--taille-mention);
    letter-spacing: 0.04em;
    color: var(--encre-douce);
    text-decoration: none;
}

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

/* -----------------------------------------------------------------------------
   Utilitaires
-------------------------------------------------------------------------------- */

.lecture-seule-lecteur-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

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

/* -----------------------------------------------------------------------------
   Contraste force

   Windows en mode contraste eleve impose sa propre palette et ignore la notre.
   Tout ce qui portait une information par la seule couleur d'un aplat — un
   bouton principal, une etiquette, un filet — disparaissait alors purement et
   simplement. On redonne des bordures a ce qui n'en avait pas, et on laisse le
   systeme choisir ses couleurs.
-------------------------------------------------------------------------------- */

@media (forced-colors: active) {
    .bouton,
    .bouton--principal,
    .bouton--danger {
        border: 1px solid ButtonBorder;
        forced-color-adjust: none;
        background-color: ButtonFace;
        color: ButtonText;
    }

    .bouton:hover,
    .bouton--principal:hover,
    .bouton--danger:hover {
        background-color: Highlight;
        color: HighlightText;
    }

    /* Les filets sont la seule hierarchie du site : sans cette regle, ils
       s'effacent et la page devient un bloc de texte continu. */
    .filet,
    .filet-titre::after,
    .zone-danger {
        border-color: CanvasText;
        background-color: CanvasText;
    }

    .filet-titre::after {
        height: 1px;
    }

    .zone-danger {
        background-color: Canvas;
        border: 1px solid CanvasText;
    }

    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid Highlight;
        outline-offset: 2px;
    }
}

/* -----------------------------------------------------------------------------
   Impression

   Un collectionneur imprime sa liste de tomes manquants pour l'emporter chez
   son libraire : c'est exactement le public du site, et la page sortait avec
   sa navigation, son pied et ses boutons.

   Tout ce qui ne se lit pas sur papier disparait ; l'adresse des liens
   internes est ecrite en clair, faute de quoi un lien imprime ne mene nulle
   part.
-------------------------------------------------------------------------------- */

@media print {
    :root {
        color-scheme: light;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .entete,
    .pied,
    .navigation,
    .entete__bascule,
    .recherche,
    .catalogue__tri,
    .pagination,
    .bouton,
    .formulaire__actions,
    .zone-danger,
    .avis__formulaire,
    .volet-tome,
    .visionneuse,
    .lecture-seule-lecteur-ecran {
        display: none !important;
    }

    main.page {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    /* Un titre seul en bas de feuille, ou une ligne de tableau coupee en deux,
       rendent une liste imprimee penible a suivre. */
    h1, h2, h3 {
        break-after: avoid-page;
    }

    tr, li, .sortie {
        break-inside: avoid;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border-bottom: 1px solid #999;
    }

    /* Les liens internes deviennent des adresses lisibles. Les liens externes
       et les ancres sont laisses tels quels : leur adresse complete
       encombrerait plus qu'elle n'aiderait. */
    .page-texte a[href^="/"]::after {
        content: " (mangalist.fr" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    img {
        max-width: 100%;
    }
}