/**
 * Ce fichier contient les styles CSS qui s'appliquent au site public.
 */

/* CSS RESET */
body, form, p, div, hr, fieldset, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}
h1  { font-size: 2em; }
h2  { font-size: 1.5em; }
h3  { font-size: 1.2em; }
h4  { font-size: 1em; }
h5  { font-size: 0.9em; }
h6  { font-size: 0.8em; }
ul, ol { list-style-type: none; }
article, aside, figure, footer, header, hgroup, menu, nav, section { display: block; }

/* CORPS */
body {
    font-size: 100.01%;
    color: #000;
    font-family: "Trebuchet MS", Helvetica, Sans-serif;
    background: #fff;
}

header.main, footer.main, section.page {
    max-width: 950px;
    margin: 0 auto;
}

/* NAVIGATION EN HAUT DE LA PAGE */
header.nav {
    background: #ddd;
    border-bottom: 1px solid #999;
    border-top: .3em solid #666;
    text-align: center;
    padding-top: .3em;
}

header.nav li {
    display: inline-block;
    padding: .3em .5em;
    margin-bottom: -1px;
}

header.nav li a {
    padding: .3em .5em;
    text-transform: uppercase;
    color: #666;
    text-decoration: none;
}

header.nav li.current a {
    background: #fff;
    border: .1em solid #999;
    border-bottom: none;
    border-top-left-radius: .3em;
    border-top-right-radius: .3em;
}

header.nav li a:hover {
    color: #000;
}

/* ENTÊTE (AVEC LE NOM DE L'ASSOCIATION) */
header.main h1 {
    color: #9c4f15;
    padding: .2em 0 .1em 0;
    font-size: 4em;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: normal;
}

header.main h1 a {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
    color: #9c4f15;
    text-decoration: none;
}

header.main h1 a span {
    margin-right: auto;
}

header.main {
    margin-bottom: 1em;
    background: url("data:image/png;base64,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") no-repeat top right;
}

/* LISTE DES CATÉGORIES EN DESSOUS DU NOM DE L'ASSOCIATION */
header.main nav, .subcategories {
    font-size: 1.2em;
    margin: 1em 0;
}

header.main nav ul li, .subcategories li {
    display: inline-block;
    margin: .1rem .2rem;
    padding: 0;
}

header.main nav ul li a, .subcategories li a {
    display: inline-block;
    margin: 0;
    padding: .2em .5em;
    color: #006;
    text-decoration: none;
    background: #ddd;
    border-radius: .5rem;
}

header.main nav ul li a:hover, .subcategories li a:hover {
    color: darkred;
    background: #eee;
}

.contacts * {
    font-size: 1rem;
    display: inline-block;
    font-weight: normal;
    margin: 0;
    margin-right: 1em;
}


/* PIED DE PAGE */
footer.main {
    color: #999;
    margin-top: 1em;
    text-align: center;
}

footer.main a {
    text-decoration: none;
    font-weight: bold;
    color: #666;
}

footer.main a:hover {
    color: #006;
}

footer.main a#garradin {
    padding-left: 20px;
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEX///+qjnmcTxWgYzWeWyiysrGzs7Ozs7MzVhJAAAAAB3RSTlMAGtv2e9p5oKuvKgAAAH1JREFUCNcdzLEOwjAMBNCrFDoXEGK3zA906RoifwBLmpVUSrMTpf59DNM9nU4HYNhjzJNlUaUPAzddN54NKU5uJsGoL4CYce9vA3mUJiLEHrURiRUoXQLRM6N2F4jrajcXm9YDJ+Xwx5AegX/Addn82eA4tah6QPwYNe75C+4yHrwP6fqUAAAAAElFTkSuQmCC") no-repeat left top;
    min-height: 16px;
    display: inline-block;
}

/* CHEMIN VERS L'ARTICLE (BREADCRUMBS), affiche les catégories parentes */
.breadcrumbs {
    margin: 1em 0;
}

.breadcrumbs ul li {
    display: inline-block;
}

.breadcrumbs ul li::before {
    content: "»";
    color: #ccc;
    margin: .5em;
}

.breadcrumbs ul li:nth-child(1)::before {
    content: "";
}

.breadcrumbs a {
    color: #999;
}


/* MESSAGES ALERTE ET ERREUR (par exemple : page non trouvée) */
.error {
    border-bottom: .2em solid #c00;
    border-radius: .5em;
    background: #fcc;
    padding: .5em;
    margin-bottom: 1em;
    font-size: 1.2em;
    color: #900;
}

.alert {
    border-bottom: .2em solid #cc0;
    border-radius: .5em;
    background: #ffc;
    padding: .5em;
    margin-bottom: 1em;
    font-size: 1.2em;
    color: #990;
}

/* AFFICHAGE D'UN ARTICLE */
section.articles article {
    clear: both;
    border-left: .2em solid #ccc;
    border-radius: .5em;
    padding-left: 1em;
}

section.articles article h3, section.articles article h1 {
    margin-bottom: .3em;
}

section.articles article h1 a {
    color: #000;
    text-decoration: none;
    font-weight: normal;
}

section.articles article h3 a {
    color: #009;
    font-weight: normal;
}

section.articles article h3 a:visited {
    color: #669;
}

section.articles article h5 {
    color: #666;
    font-weight: normal;
    font-size: .8em;
    margin-bottom: .3em;
}

section.page article {
    margin-bottom: 1em;
}

/* CONTENU DE L'ARTICLE */
article ul, article ol, article blockquote {
    margin-left: 2em;
}

article ul {
    list-style-type: disc;
}

article ol {
    list-style-type: decimal;
}

article dl dd {
    margin: .5em 0 .5em 2em;
}

article img {
    max-width: 100%;
}

article figure {
    text-align: center;
}

article figcaption {
    font-style: italic;
    color: #666;
    margin-top: 2pt;
    font-size: .8em;
}

article > h1 {
    margin-bottom: 1rem;
}

/* GALERIE D'IMAGES EN DESSOUS DE L'ARTICLE */
section.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 1.5rem;
    justify-content: center;
    align-items: center;
}

section.gallery figure {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

/* FORMULAIRES */
fieldset {
    border: 2px solid #ccc;
    border-radius: .5em;
    padding: 1em;
    margin: 1em;
}

fieldset legend {
    padding: 0 1em;
}

fieldset input {
    padding: .5rem;
    border: 1px solid #999;
    border-radius: .3rem;
    font-size: 1.2em;
}

fieldset input[type=submit] {
    background: #999;
    color: #fff;
    cursor: pointer;
}

input:focus {
    outline: none;
    box-shadow: 0px 0px 5px 2px orange;
}

/* Formulaire de recherche */
.search article p b {
    background: #ff9;
    padding: .2em 0;
}

.search-widget {
    float: right;
    margin-top: -1rem;
}

.search-widget input {
    padding: .2em;
    border: 1px solid #999;
    border-radius: .3rem;
    line-height: 1rem;
    line-height: .8rem;
    display: inline-block;
    vertical-align: middle;
}

.search-widget input[type=submit] {
    background: #999;
    font-size: 1.2rem;
    line-height: .8rem;
    color: #fff;
    cursor: pointer;
}

/* Modifications du style pour les petits écrans */
@media handheld, screen and (max-width: 980px) {
    body {
        padding: 0;
    }

    header.nav {
        font-size: .9em;
        margin: 0;
    }

    header.main {
        padding: 0 .2em;
        background-position: center top;
        text-align: center;
    }

    header.main h1 {
        font-size: 2em;
    }

    header.main .contacts {
        text-align: center;
        margin: .5em 0;
    }

    header.main .contacts * {
        font-size: .8em;
        display: block;
        margin: 0;
    }

    .search-widget {
        float: none;
        margin: .5em;
    }

    header.main nav {
        font-size: 1em;
        background: none;
    }

    section.page {
        margin: 0 .3em;
    }

    section.page h1 { font-size: 1.5em; }
    section.page h2 { font-size: 1.3em; }
    section.page h3 { font-size: 1.2em; }
    section.page h4 { font-size: 1em; }
    section.page h5 { font-size: .9em; }
    section.page h6 { font-size: .8em; }

    footer.main {
        background: #eee;
        padding: .2em;
        font-size: .8em;
    }
}