/*
 * site.css -- la feuille de style de la page publique de Pili Bazar
 *
 * role:
 *   habiller la page que pibaz-site.py fabrique a partir de sources/one-sheet.md.
 *   Les selecteurs suivent ce que pandoc produit : les trois div
 *   data-custom-style du source, la figure de la photo, et la table des liens.
 *
 * concepts:
 *   - les couleurs sont celles du projet : l'accent #B3261E que porte deja la
 *     facade web, et le rouge sombre #5A0A0A du badge pour le bandeau de tete
 *   - un theme sombre suit le reglage du systeme, comme la facade
 *   - la mise en page est d'abord celle d'un telephone : une colonne, un
 *     plafond de largeur pour que la prose reste lisible sur un grand ecran
 *   - DM Sans est la police du projet, chargee depuis Google Fonts par la page
 *
 * Owner: Pili Bazar
 * License: none, internal band tooling
 */

:root
{
    --accent: #B3261E;
    --attenue: #6E6862;
    --bandeau: #5A0A0A;
    --fond: #FBFAF8;
    --lien: #2A5C7A;
    --lien-fort: #1D435A;
    --sur-accent: #FFFFFF;
    --sur-bandeau: #FFFFFF;
    --texte: #23201E;
    --trait: #E2DDD6;
    --voile: rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --accent: #E5584A;
        --attenue: #9B948D;
        --bandeau: #3A0808;
        --fond: #1B1917;
        --lien: #7FB3D0;
        --lien-fort: #A8CDE3;
        --sur-accent: #1B1917;
        --sur-bandeau: #F6EFEE;
        --texte: #E8E4DF;
        --trait: #383433;
        --voile: rgba(0, 0, 0, .58);
    }
}

*
{
    box-sizing: border-box;
}

body
{
    margin: 0;
    background: var(--fond);
    color: var(--texte);
    font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

/* le bandeau de tete : le lit de piments, et le lettrage du groupe dessus.
   Le voile noir est pose ici et non cuit dans la photo, pour qu'il se regle
   sans reencoder l'image : les piments sont vifs, et du blanc pose dessus
   sans voile ne se lit pas. Le rouge du badge reste le fond de repli, visible
   le temps que la photo arrive et a sa place si elle manque */
header.tete
{
    background-color: var(--bandeau);
    background-image: linear-gradient(var(--voile), var(--voile)),
                      url("medias/bandeau.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--sur-bandeau);
    padding: 3rem 1rem;
    text-align: center;
}

header.tete h1
{
    margin: 0;
    font-size: 2.6rem;
    font-weight: 500;
    letter-spacing: .06em;
    line-height: 1;
}

/* le lettrage est vectoriel : il reste net a tous les ecrans, et un plafond en
   rem le borne sur un grand ecran plutot que de le laisser suivre la page */
header.tete h1 img
{
    display: block;
    width: min(78%, 26rem);
    height: auto;
    margin: 0 auto;
}

main
{
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1rem 1rem;
}

p
{
    margin: 0 0 1rem;
}

/* la ligne de genre et d'effectif, juste sous le nom */
[data-custom-style="SousTitre"]
{
    margin: -1rem 0 2rem;
    text-align: center;
    color: var(--attenue);
    font-size: 1.05rem;
}

[data-custom-style="SousTitre"] p
{
    margin: 0;
}

/* l'accroche : le paragraphe que l'on lit en premier, mis en avant */
[data-custom-style="Accroche"]
{
    margin: 2rem 0;
    padding: 0 0 0 1.1rem;
    border-left: 3px solid var(--accent);
    font-size: 1.12rem;
}

[data-custom-style="Accroche"] p
{
    margin: 0;
}

/* la photo, avec son credit : celui que communication.md impose */
figure
{
    margin: 0 0 1.4rem;
}

figure img
{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

figcaption
{
    margin-top: .35rem;
    text-align: right;
    color: var(--attenue);
    font-size: .8rem;
}

/* les reseaux : la table de liens du one-sheet devenue un rang d'icones. Un
   document imprime liste ses adresses parce qu'on ne clique pas du papier ;
   une page, elle, se clique, et trois lignes "Instagram / instagram.com"
   disent deux fois la meme chose */
nav.reseaux
{
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    align-items: center;
    justify-content: center;
    margin: 2.4rem 0 1rem;
}

nav.reseaux a
{
    display: inline-flex;
    color: var(--accent);
}

nav.reseaux a:hover,
nav.reseaux a:focus
{
    opacity: .65;
}

p.contact
{
    margin: 0 0 1rem;
    text-align: center;
}

/* une table peut encore venir du source : elle garde de quoi se lire */
table
{
    width: 100%;
    margin: 2rem 0;
    border-collapse: collapse;
}

td
{
    padding: .55rem .6rem;
    border-top: 1px solid var(--trait);
    vertical-align: top;
    overflow-wrap: anywhere;
}

td:first-child
{
    color: var(--attenue);
    white-space: nowrap;
}

a
{
    color: var(--lien);
}

a:hover,
a:focus
{
    color: var(--lien-fort);
}

/* le seul document a telecharger : le dossier de presse */
section.telecharger
{
    margin: 2.5rem 0 1rem;
    text-align: center;
}

section.telecharger a
{
    display: inline-block;
    padding: .7rem 1.4rem;
    border-radius: 3px;
    background: var(--accent);
    color: var(--sur-accent);
    font-weight: 500;
    text-decoration: none;
}

section.telecharger a:hover,
section.telecharger a:focus
{
    background: var(--lien-fort);
    color: var(--sur-accent);
}

footer
{
    margin-top: 2rem;
    padding: 1.5rem 1rem 2.5rem;
    border-top: 1px solid var(--trait);
    color: var(--attenue);
    font-size: .85rem;
    text-align: center;
}

/* l'adresse de courriel, assemblee par le script de la page : sans lui, elle
   se lit quand meme, ce qui est le repli voulu */
.courriel
{
    overflow-wrap: anywhere;
}

@media (max-width: 30rem)
{
    header.tete
    {
        padding: 2rem 1rem;
    }

    header.tete h1
    {
        font-size: 2rem;
    }

    header.tete h1 img
    {
        width: 86%;
    }

    main
    {
        padding-top: 1.5rem;
    }

    td
    {
        padding: .5rem .35rem;
    }
}