/* GLRSO - site statique. Palette tiree du bandeau historique : rouge, noir, creme. */

:root
    {
    --rouge      : #e3261d;
    --rouge-fonce: #b51a13;
    --noir       : #1b1b1b;
    --gris       : #5a5a5a;
    --creme      : #fbf7f0;
    --blanc      : #ffffff;
    --trait      : #e6ded2;
    --todo       : #fff3b0;
    --font-titre : Georgia, "Times New Roman", serif;
    --font-texte : "Helvetica Neue", Arial, sans-serif;
    }

*
    {
    box-sizing: border-box;
    }

html
    {
    scroll-behavior: smooth;
    }

body
    {
    margin      : 0;
    background  : var(--creme);
    color       : var(--noir);
    font-family : var(--font-texte);
    font-size   : 17px;
    line-height : 1.6;
    }

a
    {
    color: var(--rouge-fonce);
    }

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

h1, h2, h3
    {
    font-family : var(--font-titre);
    font-weight : normal;
    line-height : 1.15;
    margin      : 0 0 .5em;
    }

h1 { font-size: 2.6rem; }
h2 { font-size: 1.9rem; color: var(--rouge-fonce); margin-top: 2rem; }
h3 { font-size: 1.3rem; }

p
    {
    margin: 0 0 1em;
    }

.wrap
    {
    max-width : 960px;
    margin    : 0 auto;
    padding   : 0 16px;
    }

/* ---------------------------------------------------------------- en-tete */

.site-header
    {
    background    : var(--blanc);
    border-bottom : 3px solid var(--rouge);
    }

.site-header .bandeau
    {
    display  : block;
    width    : 100%;
    height   : auto;
    max-width: 1200px;
    margin   : 0 auto;
    }

.nav
    {
    display         : flex;
    flex-wrap       : wrap;
    justify-content : center;
    gap             : 4px 28px;
    padding         : 10px 16px;
    margin          : 0;
    list-style      : none;
    }

.nav a
    {
    text-decoration : none;
    text-transform  : uppercase;
    letter-spacing  : .08em;
    font-size       : .9rem;
    color           : var(--noir);
    padding         : 6px 0;
    border-bottom   : 2px solid transparent;
    }

.nav a:hover, .nav a[aria-current="page"]
    {
    color        : var(--rouge);
    border-color : var(--rouge);
    }

/* ---------------------------------------------------------------- hero */

.hero
    {
    background : var(--noir);
    color      : var(--blanc);
    padding    : 56px 0 48px;
    text-align : center;
    }

.hero .surtitre
    {
    text-transform : uppercase;
    letter-spacing : .25em;
    font-size      : .85rem;
    color          : #d9d9d9;
    margin-bottom  : 12px;
    }

.hero h1
    {
    font-size : clamp( 2.6rem, 8vw, 4.6rem );
    color     : var(--blanc);
    margin    : 0;
    }

.hero h1 em
    {
    color      : var(--rouge);
    font-style : normal;
    }

.hero .soustitre
    {
    font-family : var(--font-titre);
    font-size   : 1.5rem;
    font-style  : italic;
    margin      : 8px 0 28px;
    }

.hero .dates
    {
    font-size : 1.25rem;
    margin    : 0 0 4px;
    }

.hero .lieu
    {
    color     : #d9d9d9;
    margin    : 0 0 32px;
    }

.btn
    {
    display         : inline-block;
    background      : var(--rouge);
    color           : var(--blanc);
    text-decoration : none;
    text-transform  : uppercase;
    letter-spacing  : .1em;
    font-size       : .9rem;
    padding         : 12px 26px;
    border-radius   : 3px;
    margin          : 4px 6px;
    }

.btn:hover
    {
    background : var(--rouge-fonce);
    color      : var(--blanc);
    }

.btn.secondaire
    {
    background : transparent;
    border     : 2px solid var(--blanc);
    }

.btn.secondaire:hover
    {
    background : var(--blanc);
    color      : var(--noir);
    }

/* ---------------------------------------------------------------- contenu */

main
    {
    padding: 32px 0 48px;
    }

.cartes
    {
    display               : grid;
    grid-template-columns : repeat( auto-fit, minmax( 260px, 1fr ) );
    gap                   : 20px;
    margin                : 24px 0;
    }

.carte
    {
    background    : var(--blanc);
    border        : 1px solid var(--trait);
    border-top    : 4px solid var(--rouge);
    padding       : 20px 22px;
    }

.carte h3
    {
    margin-top: 0;
    }

.carte p:last-child
    {
    margin-bottom: 0;
    }

.affiche
    {
    display        : flex;
    align-items    : center;
    justify-content: center;
    background     : var(--blanc);
    border         : 2px dashed var(--rouge);
    min-height     : 260px;
    color          : var(--gris);
    text-align     : center;
    padding        : 20px;
    margin         : 0 0 24px;
    }

.deux-colonnes
    {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 32px;
    }

@media ( min-width: 760px )
    {
    .deux-colonnes
        {
        grid-template-columns: 2fr 1fr;
        }
    }

dl.fiche
    {
    display               : grid;
    grid-template-columns : max-content 1fr;
    gap                   : 6px 18px;
    margin                : 0 0 1.5em;
    }

dl.fiche dt
    {
    color          : var(--gris);
    text-transform : uppercase;
    font-size      : .78rem;
    letter-spacing : .08em;
    padding-top    : 4px;
    }

dl.fiche dd
    {
    margin: 0;
    }

ul.liste
    {
    padding-left: 1.2em;
    }

.todo
    {
    background    : var(--todo);
    border-left   : 4px solid #e0b000;
    padding       : 2px 8px;
    border-radius : 2px;
    }

blockquote
    {
    font-family  : var(--font-titre);
    font-style   : italic;
    font-size    : 1.2rem;
    border-left  : 4px solid var(--rouge);
    margin       : 1.5em 0;
    padding-left : 18px;
    color        : var(--gris);
    }

/* ---------------------------------------------------------------- pied */

.site-footer
    {
    background : var(--noir);
    color      : #cfcfcf;
    padding    : 28px 0;
    font-size  : .9rem;
    text-align : center;
    }

.site-footer a
    {
    color: var(--blanc);
    }

.site-footer img
    {
    width   : 64px;
    height  : auto;
    display : block;
    margin  : 0 auto 10px;
    }