/* reset */

figure { margin:0; padding:0; }


body {
    font-size: 1rem;
    background-color: #ccc;
    color: #212529;
    font-family: system-ui, sans-serif;
    line-height: 1.5;

    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: stretch;

    min-height: 100vh; /* toute la hauteur du viewport (compatible IE9+) */
}

body.nav-opened {
    overflow: hidden;
}

#spip-admin { display:none; }
#spip-admin a { padding: 4px 1em; font-weight: normal; font-size: 0.9em; }
#spip-admin.spip-admin-float { top: 0 !important; }


#global {
    gap: 32px;
}

#content {
    margin-bottom: 64px;
}

#ariane {
    text-align: center;
}

#ariane a {
    display: inline-block;
    padding: 2em;
    text-decoration: none;
    border-bottom: none;
    color: #000;
}
#ariane a::before {
    content: "\003008";
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin-right: 1em;
}

#c-aside { 
    display: none;
}
#c-aside .bloc {
    padding: 0 0 1em 0;
    margin-bottom: 2em;
}


#footer-content { padding: 2em 1em; }
#footer-content div:first-child {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
#footer-content ul { margin-top: 0; }

#global {
    margin-bottom: 3em;
    /* En mobile, il y a le fil d'ariane qui crée la marge haute */
}

#c-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3em;
}
#c-content .c-article:last-child {
    flex-grow: 1; /* le dernier element va jusqu'en bas de la colonne droite si plus longue */
}
#c-content .c-article:first-child {
    min-height: 420px;
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    
    /* Sur la home, pas de fil d'ariane, donc marge haute partout, sauf en mobile */
    .page-sommaire #global {
        margin-top: 3em;
    }

    #footer-content { padding: 2em 0; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
    #footer-content div:first-child {
        display: block;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

    /* A cette taille, le file d'ariane n'existe plus */
    #global {
        margin-top: 3em;
    }

    #c-aside { 
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hidden-md { display: none !important; }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
    h2 { font-size: 1.4em }

    #c-aside .bloc {
        width: 80%;
    }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

    #spip-admin { display: block; }

    main .c-article {
        padding: 0 4em 4em 4em;
        font-size: 1.2em;
    }
}