/* JAVOUE.com - stylesheet
 *
 * Adapted from the legacy site (web/style.css): Verdana, midnight-blue links,
 * lavender panels, maroon accents. The layout is no longer the legacy 706px
 * table, but the palette and the typography are unchanged.
 */

/* --- Base --------------------------------------------------------------- */

:root {
    --lavender: #e6e6fa;
    --steel: #b0c4de;
    --midnight: #191970;
    --maroon: maroon;
    --slate: #483d8b;
}

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

html {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 100%;
    line-height: 1.4;
}

body {
    margin: 0;
    background-color: var(--lavender);
    color: var(--midnight);
}

a:link,
a:visited,
a:active {
    color: var(--midnight);
    text-decoration: none;
}

a:hover {
    color: var(--maroon);
}

/* The selected page or category: the legacy menu bolded it. */
.surligne {
    font-weight: bold;
    color: var(--maroon);
}

hr {
    border: 0;
    border-top: 1px solid #cccccc;
}

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

input,
select,
textarea {
    color: #000000;
    background-color: var(--lavender);
    border: 1px solid var(--steel);
    max-width: 100%;
}

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

/* --- Page frame --------------------------------------------------------- */

.page {
    /* Une largeur commune au site et à l'administration : assez large pour les
       longues chaînes qu'on y trouve (une IP suivie de son nom d'hôte, un
       tableau de validation), sans étirer les lignes de texte au-delà du
       confortable. 72rem ≈ 1150px, dans la fourchette habituelle des sites
       de contenu, et sous la limite où l'œil perd la ligne suivante. */
    max-width: 72rem;
    margin: 0 auto;
    padding: 0.75rem 1.25rem 2rem;
}

/* --- Administration ----------------------------------------------------- */

.admin_entete {
    margin-bottom: 1.5rem;
}

/* Les deux groupes du menu admin restent collés à leur étiquette quand la
   ligne se replie. */
.admin_menu ul {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
}

.admin_menu li {
    display: inline-block;
    margin: 0 0.5rem 0 0;
}

.admin_menu li + li::before {
    content: "-";
    margin-right: 0.5rem;
}

.admin_menu a {
    white-space: nowrap;
}

.admin_voir {
    margin: 0;
}

/* Les tableaux de validation : lisibles et repliables sur petit écran. */
.admin .contenu table {
    border-collapse: collapse;
    max-width: 100%;
}

/* Un aveu en attente : métadonnées sur une ligne tant qu'il y a la place. */
.admin_aveu {
    margin-bottom: 1.5rem;
}


.admin_meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    margin: 0 0 0.4rem;
    /* Le numéro, la date et l'IP restent en bleu de minuit ; seuls l'auteur
       et la catégorie prennent le marron des accents. */
    color: var(--midnight);
}

/* Chaque information reste d'un bloc ; la ligne se replie entre elles. */
.admin_meta span {
    white-space: nowrap;
}

.admin_meta_id {
    font-weight: bold;
    color: var(--midnight);
}

/* L'auteur et la catégorie : la présentation de la page publique. */
.admin_meta_auteur,
.admin_meta_cat {
    color: var(--maroon);
}

.admin_meta_auteur {
    font-weight: bold;
}

/* La ligne de l'auteur suit celle du numéro, avec un léger écart. */
.admin_meta_auteur_ligne {
    margin-top: 0.15rem;
}

/* Un peu d'air avant l'aveu. */
.admin_aveu .admin_texte {
    margin-top: 0.9rem;
}

.admin_texte {
    border-left: 3px solid var(--steel);
    padding-left: 0.6rem;
    margin-bottom: 0.4rem;
}

/* Les liens d'action d'un aveu, sous son texte : flex pour qu'ils se
   replient entre eux. */
.admin_actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    border-top: 1px solid #cccccc;
    padding-top: 0.4rem;
    margin: 0;
}

/* Dans un tableau, une cellule ne peut pas être mise en flex : cela la rend
   bloc, et le tableau perd alors sa largeur de contenu. On y garde des liens
   en ligne. */
.mod_liste td.admin_actions {
    display: table-cell;
    border-top: 0;
    padding-top: 0;
}

.admin_actions a {
    white-space: nowrap;
}

/* L'espace entre le titre de la page et ce qui suit, le même partout : le
   premier élément du contenu reçoit la marge que le titre lui laisse. */
.admin .contenu > h1 + *,
.admin .contenu > h2 + * {
    margin-top: 1.2rem;
}

/* Et un peu d'air sous un titre qui en suit un autre. */
.admin .contenu > h1 + h2,
.admin .contenu > h2 + h2 {
    margin-top: 1.6rem;
}

/* --- Titres de l'admin ------------------------------------------------- */

/* En marron, la couleur des accents du site : le fond reste le lavande de la
   page, seul le texte change. Le titre du site, lui, garde sa couleur. */
.admin h1,
.admin h2 {
    color: var(--maroon);
}

.admin .titre_site {
    color: #00008b;
}

/* --- Formulaires d'admin (modif.asp, mod.asp) --------------------------- */

.admin_formulaire {
    width: auto;
    max-width: 46rem;
    border-collapse: separate;
    border-spacing: 0 0.4rem;
}

.admin_formulaire td:first-child {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    padding-right: 0.6rem;
}

/* L'étiquette de la zone de texte se place au-dessus d'elle. */
.admin_formulaire td.admin_haut {
    vertical-align: top;
    padding-top: 0.3rem;
}

/* Les champs courts se réduisent à leur contenu : l'âge et la catégorie à leur
   plus longue valeur, auteur et ville à la longueur maximale de la colonne. */
.admin_formulaire input#id_age,
.admin_formulaire input[name="age"] {
    width: 5em;
}

.admin_formulaire select {
    width: max-content;
    max-width: 100%;
    field-sizing: content;
}

.admin_formulaire input[name="auteur"],
.admin_formulaire input[name="ville"] {
    width: 24rem;
    max-width: 100%;
}

.admin_formulaire textarea {
    width: 100%;
    resize: vertical;
}

.admin_aide {
    color: #555555;
}

/* Les boutons, centrés sous le formulaire. */
.admin_boutons {
    text-align: center;
    padding-top: 0.8rem;
}

.admin_boutons button {
    font-family: inherit;
    padding: 0.3rem 0.9rem;
    margin: 0 0.2rem;
    color: var(--midnight);
    background-color: var(--steel);
    border: 1px solid var(--slate);
    border-radius: 3px;
    cursor: pointer;
}

.admin_boutons button:hover {
    color: var(--maroon);
}

/* Liste des accès : un tableau simple, sans les traits dupliqués du hérité. */
.admin_tableau,
.admin_formulaire {
    width: auto;
    max-width: 100%;
    margin-bottom: 1.5rem;
}

.mod_liste {
    border-spacing: 0;
    /* Le tableau se cale sur son contenu et se centre : un <table> prend
       toute la largeur par défaut, quelle que soit sa largeur déclarée. La
       règle doit passer après `.admin_tableau`, qui pose `width: auto`. */
    display: table;
    width: fit-content;
    margin: 0.5rem auto 1.5rem;
}

.mod_liste tbody tr:nth-child(odd) {
    background-color: rgba(176, 196, 222, 0.25);
}

/* Chaque colonne respire autant que les autres : `table-layout: auto` répartit
   l'espace restant, et le poste s'aligne sur son libellé le plus long
   (« modérateur »). */
.mod_liste th,
.mod_liste td {
    padding: 0.4rem 1.5rem;
    white-space: nowrap;
}

.mod_liste th:first-child,
.mod_liste td:first-child {
    padding-left: 0.9rem;
}

.mod_liste th:last-child,
.mod_liste td:last-child {
    padding-right: 0.9rem;
}

/* Le poste occupe la largeur de « modérateur ». */
.mod_poste {
    display: inline-block;
    min-width: 6.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 3px;
    font-size: 0.85rem;
    text-align: center;
}

.mod_admin {
    background-color: var(--maroon);
    color: #ffffff;
}

.mod_moderateur {
    background-color: var(--steel);
    color: var(--midnight);
}

/* Le compte en cours de modification ressort. */
.mod_en_cours {
    outline: 2px solid var(--slate);
}

/* Les comptes qu'on ne peut ni supprimer ni rétrograder. */
.mod_protege {
    color: #888888;
    font-size: 0.85rem;
}

.admin_tableau th {
    text-align: left;
    border-bottom: 1px solid var(--midnight);
    padding: 0.2rem 1rem 0.2rem 0;
}

.admin_tableau td {
    padding: 0.25rem 1rem 0.25rem 0;
    border-bottom: 1px solid #cccccc;
}

.admin_login {
    font-weight: bold;
}

/* Modifier / Effacer sur une seule ligne, Effacer d'abord stylé comme un lien. */
.admin_actions {
    white-space: nowrap;
}

.admin_actions form {
    display: inline;
}

.admin_actions button {
    font: inherit;
    color: var(--midnight);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.admin_actions button:hover,
.admin_actions a:hover {
    color: var(--maroon);
}

.admin_actions a,
.admin_actions button {
    margin-right: 0.5rem;
}

.admin .contenu td {
    vertical-align: top;
    padding: 0.2rem 0.5rem 0.2rem 0;
}

/* La colonne des actions (Modifier / Supprimer / Valider), toujours à droite. */
.admin .contenu td[rowspan] {
    white-space: nowrap;
    padding-left: 1rem;
}

@media (max-width: 48rem) {
    .admin .contenu table,
    .admin .contenu tbody,
    .admin .contenu tr,
    .admin .contenu td {
        display: block;
        width: auto;
    }

    .admin .contenu td[rowspan] {
        padding-left: 0;
    }
}

/* --- Recherche (bas de default.asp) ------------------------------------- */

.recherche {
    margin-top: 2rem;
}

.recherche_titre {
    text-align: center;
    margin-bottom: 0.5rem;
}

/* Une seule ligne : les listes gardent la largeur de leur plus longue
   entrée et le champ de recherche prend le reste. La ligne se replie d'abord
   le champ de recherche, puis les groupes, sans jamais séparer une étiquette
   de son champ. */
.recherche_champs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.5rem;
    align-items: center;
    justify-content: center;
}

.recherche_groupe {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.recherche_label {
    white-space: nowrap;
}

.recherche_mot {
    flex: 1 1 8rem;
    min-width: 0;
}

/* `field-sizing: content` ne sert que là où il existe ; ailleurs
   `width: max-content` suffit à coller les listes à leur contenu. */
.recherche_ou,
.recherche_cat {
    width: max-content;
    max-width: 100%;
    field-sizing: content;
}

.recherche_bouton {
    flex: 0 0 auto;
}

/* Sous 48rem, le champ de recherche passe sur sa propre ligne. */
@media (max-width: 48rem) {
    .recherche_groupe:first-child {
        flex: 1 1 100%;
    }

    .recherche_mot {
        flex: 1 1 auto;
    }
}

/* --- Pied de page ------------------------------------------------------- */

.pied {
    text-align: center;
}

.pied_ligne {
    margin: 0.6rem 0;
}

.pied_ligne:first-child {
    margin-top: 1.5rem;
}

/* --- Headings ----------------------------------------------------------- */

h1,
h2,
h3 {
    color: var(--midnight);
    line-height: 1.25;
    margin: 0.6em 0 0.3em;
}

h1 {
    font-size: 1.2rem;
}

h2 {
    font-size: 1.05rem;
}

h3 {
    font-size: 1rem;
}

/* The site title, in the steel-blue box the legacy header used. */
.titre_site {
    display: inline-block;
    background-color: var(--steel);
    color: #00008b;
    padding: 0.15em 0.6em;
    margin: 0 0 0.5rem;
    font-size: 1.3rem;
}

/* --- Navigation --------------------------------------------------------- */

/* Centred in the header, as the legacy menu was. */
.menu {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Les trois lignes du menu (pages, catégories, liens) sont un peu aérées. */
.menu ul {
    list-style: none;
    margin: 0.6rem 0;
    padding: 0;
}

.menu li {
    display: inline-block;
    margin: 0 0.5rem 0 0;
}

.menu li + li::before {
    content: "-";
    color: var(--midnight);
    margin-right: 0.5rem;
}

/* The last group (favourites, news, pressbook) reads as a smaller strip. */
.menu_liens {
    font-size: 0.85rem;
}

.menu a {
    white-space: nowrap;
}

/* --- AVEUX (article listing) -------------------------------------------- */

.aveu {
    margin-bottom: 1rem;
}

/* Author, age, city: the legacy maroon line. */
.aveu_titre {
    color: var(--maroon);
    margin: 0.8em 0 0.45em;
}

.aveu_texte {
    color: var(--midnight);
}

.aveu_moderation {
    color: var(--maroon);
    font-weight: bold;
    margin: 0.3em 0;
}

/* Chaque lien reste d'un bloc ; la ligne ne se coupe qu'aux séparateurs.
   Les deux-points de "Nombre d'envois :" sont déjà insécables dans le
   gabarit (&nbsp;). */
.aveu_moderation a {
    white-space: nowrap;
}

.aveu_sep {
    white-space: nowrap;
    margin: 0 0.1rem;
}

.aveu_envois {
    white-space: nowrap;
}

/* Les deux liens sous l'aveu au hasard, centrés et détachés de l'aveu. */
.aveu_aleatoire {
    text-align: center;
    margin-top: 1.2rem;
}

.aveu_liens {
    text-align: right;
    font-size: 0.85rem;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 0.3em;
    margin-bottom: 0;
}

.article_meilleur {
    color: var(--maroon);
}

.article_tag span {
    color: var(--midnight);
    background-color: var(--steel);
    padding: 0 0.3em;
    margin-right: 0.3em;
}

.pagination {
    text-align: center;
    margin: 0.8rem 0;
}

/* --- Page de connexion -------------------------------------------------- */

/* Autonome : le titre dans le cadre bleu du site, le formulaire centré. */
.login_form {
    margin: 1.5rem 0;
}

.login_form table {
    border-collapse: separate;
    border-spacing: 0 0.4rem;
}

.login_form td:first-child {
    padding-right: 0.6rem;
    white-space: nowrap;
}

.login_bouton {
    margin-top: 0.8rem;
}

.login_bouton input {
    font-family: inherit;
    padding: 0.3rem 0.9rem;
    color: var(--midnight);
    background-color: var(--steel);
    border: 1px solid var(--slate);
    border-radius: 3px;
    cursor: pointer;
}

.login_bouton input:hover {
    color: var(--maroon);
}

.login_erreur {
    color: var(--maroon);
    font-weight: bold;
}

/* La barre d'ajout / retour en haut des pages news et pressbook, centrée. */
.admin_lien_haut {
    text-align: center;
    margin: 1rem 0;
}

/* Le retour à l'interface, réservé aux modérateurs, au-dessus du compteur. */
.retour_admin {
    text-align: center;
    margin: 0.8rem 0 0;
    font-size: 0.85rem;
}

/* "Nous sommes sur la page X / Y": breathing room above and below, so it is
 * not glued to the menu or to the first aveu. */
.compteur_page {
    text-align: center;
    margin: 1.2rem 0 1.5rem;
}

.messages {
    list-style: none;
    padding-left: 0;
    color: var(--maroon);
}

/* --- Confess form ------------------------------------------------------- */

.aveu_emphase {
    color: var(--midnight);
}

/* The intro block spans the container; the legacy page pinned it at 582px. */
.aveu_intro {
    width: 100%;
}

/* Le formulaire est centré et gardé à une largeur confortable : les champs
   restent courts, la zone de texte prend la place qui reste. */
.aveu_formulaire {
    width: auto;
    max-width: 40rem;
    /* Peu de marge en bas : les boutons suivent de près la zone de texte. */
    margin: 1.5rem auto 0.3rem;
    border-collapse: separate;
    border-spacing: 0 0.4rem;
}

.aveu_formulaire td:first-child {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}

/* Les cellules pleine largeur (la zone de texte) ne sont pas des étiquettes. */
.aveu_formulaire td[colspan] {
    width: auto;
    white-space: normal;
    vertical-align: top;
}

/* "J'avoue" se place au-dessus de sa zone de texte. Même spécificité que
 * `td:first-child` ci-dessus, sinon la règle perd. */
.aveu_formulaire td.aveu_etiquette_haut {
    vertical-align: top;
    padding-top: 0.3rem;
}

.aveu_formulaire input[type="text"] {
    max-width: 100%;
}

.aveu_formulaire textarea {
    width: 100%;
    resize: vertical;
}

/* La liste des catégories se cale sur sa plus longue entrée ("Multizaveux"),
   `size="1"` étant nécessaire pour que la largeur suive le contenu. */
.aveu_formulaire select {
    width: auto;
    min-width: 12em;
    max-width: 100%;
}

/* Les deux boutons, centrés. */
.aveu_boutons {
    text-align: center;
    /* Le tableau porte déjà sa marge basse : les boutons remontent donc près
       de la zone de texte, et respirent en dessous. */
    margin: 0.2rem 0 1.5rem;
}

.aveu_boutons button {
    font-family: inherit;
    padding: 0.3rem 0.9rem;
    margin: 0 0.2rem;
    color: var(--midnight);
    background-color: var(--steel);
    border: 1px solid var(--slate);
    border-radius: 3px;
    cursor: pointer;
}

.aveu_boutons button:hover {
    color: var(--maroon);
}

/* Les messages d'erreur du formulaire : sur la même ligne que le champ, donc
   ils ne décalent pas les lignes suivantes. Le <li> que Django produit est
   remis à plat. */
.aveu_erreur {
    color: var(--maroon);
    margin-left: 0.6rem;
}

.aveu_erreur ul {
    display: inline;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aveu_erreur li {
    display: inline;
}

.aveu_erreur li + li::before {
    content: " ";
}

/* The legacy avouer.asp labelled each field with a maroon caption over a pale
 * steel-blue highlight. */
.aveu_etiquette {
    color: var(--maroon);
    background-color: var(--steel);
}

.aveu_marron {
    color: var(--maroon);
}

.droits {
    font-size: 0.85rem;
}

/* The legacy admin marked every plain cell with class="normal"; the base
 * typography now covers it, so the class only needs to exist. */
.normal {
    font-family: inherit;
}

/* La date et le titre d'une news, dans le marron des accents. */
.news_titre {
    color: var(--maroon);
}

/* Un aveu demandé qui n'existe pas : le cadre reste, seul le message change. */
.aveu_absent {
    color: var(--maroon);
    font-weight: bold;
    margin: 1.5rem 0;
}

/* --- Inscription (receive.htm) ------------------------------------------ */

.receive_form {
    margin: 1.5rem 0;
}

.receive_form input[type="email"] {
    max-width: 100%;
}

.receive_ok {
    color: var(--midnight);
    font-weight: bold;
}

/* --- PressBook ---------------------------------------------------------- */

.presse_item {
    margin-bottom: 0.5rem;
}

/* One centred column of entries, as the legacy page showed them. */
.presse_liste {
    max-width: 44rem;
    margin: 0 auto;
}

.presse_item table {
    border: 1px solid var(--slate);
    border-collapse: separate;
    border-spacing: 2px;
    width: 100%;
}

/* Le logo garde la colonne étroite de la page d'origine. */
.presse_logo_cellule {
    width: 98px;
    text-align: center;
    vertical-align: middle;
}

.presse_desc {
    background-color: var(--lavender);
    vertical-align: top;
}

.presse_nom {
    color: var(--maroon);
    font-weight: bold;
}

.presse_texte {
    color: #00008b;
    font-weight: bold;
}

.presse_date {
    text-align: right;
}

.presse_lecteur {
    max-width: 100%;
}

.presse_titre {
    display: inline-block;
    background-color: var(--steel);
    color: #00008b;
    font-weight: bold;
    padding: 0.15em 0.5em;
}

.presse_retour {
    text-align: center;
}

.presse_gestion,
.news_gestion {
    font-size: 0.85rem;
}

/* --- Popups (send.asp) -------------------------------------------------- */

.fenetre_corps {
    padding: 0.5rem 0.75rem;
}

.fenetre {
    text-align: center;
}

/* Le titre de la fenêtre reprend celui du site (même taille que
   « Les aveux ... »), calé en haut à gauche du cadre. */
.fenetre_entete {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 0.6rem;
}

.fenetre_titre {
    display: inline-block;
    background-color: var(--steel);
    color: #00008b;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 0.15em 0.6em;
}

.fenetre_fermer {
    margin: 1rem 0 0;
}

.fenetre form table {
    margin: 0 auto;
}

.fenetre input[type="text"] {
    width: 100%;
}

/* --- Statistics --------------------------------------------------------- */

.stats_totals {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.stats_total strong {
    font-size: 1.4em;
}

.stats_table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1.5rem;
}

.stats_table th,
.stats_table td {
    text-align: left;
    padding: 2px 8px 2px 0;
    vertical-align: middle;
}

.stats_table th {
    border-bottom: 1px solid var(--midnight);
}

.stats_bar_col {
    width: 20rem;
}

.stats_cat {
    white-space: nowrap;
    padding-right: 1rem;
}

.stats_bar {
    background: var(--midnight);
    color: #ffffff;
    height: 1.3em;
    line-height: 1.3em;
    padding: 0 0.4em;
    /* Le compte reste lisible même sur une barre très courte. */
    min-width: 3em;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

/* Les aveux en attente, dans un ton plus clair que les validés. */
.stats_bar_attente {
    background: var(--slate);
}

.stats_vide {
    color: #888888;
}

/* Les colonnes portent leur en-tête sur grand écran ; la ligne ci-dessous ne
   sert qu'au repli, où les en-têtes du tableau ont disparu. */
.stats_mobile_label {
    display: none;
}

/* Sous 48rem, les colonnes de barres passent l'une sous l'autre. */
@media (max-width: 48rem) {
    .stats_table,
    .stats_table thead,
    .stats_table tbody,
    .stats_table tr,
    .stats_table td,
    .stats_table th {
        display: block;
        width: auto;
    }

    .stats_table thead {
        display: none;
    }

    .stats_bar_col {
        padding-bottom: 0.5rem;
    }

    .stats_mobile_label {
        display: inline;
        color: var(--midnight);
    }

    .stats_cat {
        font-weight: bold;
        padding-top: 0.6rem;
    }
}