/* ============================================= */
/* ================== Pages ==================== */
/* ============================================= */

/* Validation W3C CSS : aucune erreur */

/*
    1. Layout aside (pages articles et mot)
    2. Layout main/header
    3. Listes
    4. Tableaux
    5. Divers (paragraphes, soustitres, chapo, logo article)
*/

/* =============================================== */
/* === 1. Layout aside (pages articles et mot) === */
/* =============================================== */

    .aside {
        padding: 0 1.6em;
        border-right: 1px solid #d8d8d8; }

    .aside_section {
        padding: 0.5em 0 1em 0;
        border-bottom: 1px solid #d8d8d8;
        }

    .aside_section .titre {
        margin: 2em 0 0.6em 0;
        padding: 0 0 0 0.4em;
        border-left: 3px solid #ffaa46;
        font-size: 1.3em;
        font-weight: 500;
        line-height: 1.2em;
        color: #326295;}

    .aside_section ul {margin-left: 0.7em;}
    .aside_section ul li {margin-bottom: 0.5em; }
    .aside_section .titre:first-child {margin: 1em 0 0.6em 0;}

    /* Aside : listes dans section types */

    .typologie ul li { margin-bottom: 0.2em; }

/* ======================================== */
/* ======== 2. layout main/header ========= */
/* ======================================== */

/* ======== main ========= */

    main.article,
    main.mot {padding: 1em 3em 1em 2em; }
    main.rubrique { padding: 1em 2em; }

/* ======= header ======== */

    .rubrique_header {
        padding-bottom: 1em;
        margin: 0 0 2em 0;
        border-bottom: 1px solid #ffaa46;}

    @media screen and (min-width: 992px) {
    .rubrique_header.rub1 {width: 90%; }}/* Rubrique 1 domaines */

    /* logos */
    .rubrique_header .spip_logo {
        margin: 0.3em 0 0.3em 1em;
        box-shadow: 0px 8px 38px -19px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 8px 38px -19px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 8px 38px -19px rgba(0,0,0,0.75);}

    .rubrique_content .spip_logo {
        float: right;
        margin: 0 0 0.3em 0.3em;}

/* ======================================== */
/* ============= 3. Listes ================ */
/* ======================================== */

/* utiliser margin, pas padding, pour controler l’indentation des élément ul et li */

/* Rubrique 1, Domaines : Liste des sous-domaines */

ul.domaines {padding: 0 0 1.2em 0;}

ul.domaines li {
    margin-bottom: 0;
}

ul.domaines li > a { /* sert de conteneur grid ce qui respecte la logique du DOM */
    display: grid;
    grid-template-areas:
        "logo"
        "presentation";
    text-decoration: none;
    color: inherit;
}

/* logo et texte de présentation des sous-rubriques */
.dom_logo {grid-area: logo;}
.dom_presentation {grid-area: presentation;}
.domaines p {font-weight: 400;}

.dom_logo .spip_logo {
    float: none;
    max-width: 120px !important;
    margin: 0.5em 0 0.5em 0;
    box-shadow: 0px 8px 38px -19px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 8px 38px -19px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 8px 38px -19px rgba(0,0,0,0.75);
}

@media screen and (min-width: 720px) {
    ul.domaines li > a {
        grid-template-columns: auto 1fr;
        grid-template-areas: "logo presentation";
    }

    .dom_logo {margin: 1.2em 0.5em 0.5em 0;}
    .dom_logo .spip_logo {max-width: 150px !important;}
    .dom_presentation {margin-left: 1em;}
}

@media screen and (min-width: 992px) {
    .dom_logo .spip_logo {max-width: 200px !important;}
    .dom_presentation {max-width: 80%; margin-left: 2em;}
}

/* Liste d’articles (rubriques Outils et Acteurs et rubriques 6 à 17) */

    ul.liste-articles {
        margin: 0;
        padding-bottom: 1em;}

    .mot_content ul.liste-articles { margin: 0; }

    li.liste-articles-item {
        margin: 2em 0;
        padding-bottom: 1em; /* padding nécessaire pour écarter bordure du contenu li */
        border-bottom: 1px solid #C7C7C7;}

    .mot_content li.liste-articles-item {
        margin: 1em 0;
        padding-bottom: 1em; /* padding nécessaire pour écarter bordure du contenu li */
        }

    @media screen and (min-width: 720px) {
        ul.liste-articles {margin: 0 0 0 1em;}
        }

    @media screen and (min-width: 992px) {
        ul.liste-articles {width: 90%;}
        .mot_content ul.liste-articles { width: 100%; }
        }

/* Liste d’ancres dans header des rubriques 6 à 17 */

    ul.ancres { margin-bottom: 0.5em; }
    ul.ancres li { margin: 0 0 0.2em 1em; }

/* Liste dans plan du site */

    ul.plan { margin-left: 2em; list-style: disc; }

/* =========================================== */
/* ============== 4. Tableaux ================ */
/* =========================================== */

    table, table.spip { }
    table, table.spip, th, td {
        border: 1px solid #616161;
        border-collapse: collapse;}

    table caption, table.spip caption { /* titre tableau */
        margin: 1.5em 0 0.7em 0;
        font-size: 1.3em;
        font-weight: 600;
        caption-side: top;
        text-align:left;}

    th {font-weight: 600; background-color: #E8E8E8;} /* entête tableau */
    th, td {padding: 0.2em; text-align: left;}
    tr:nth-child(even) {} /* mettre couleur si alternance */
    tr:hover {background-color: #DBE3F0;}

    .size_10 {width: 10%;}
    .size_20 {width: 20%;}
    .size_30 {width: 30%;}
    .size_40 {width: 40%;}
    .size_50 {width: 50%;}
    .size_60 {width: 60%;}
    .size_70 {width: 70%;}
    .size_80 {width: 80%;}
    .size_90 {width: 90%;}
    .size_100 {width: 100%;}

/* en responsive,  lineariser le tableau pour eviter les scrolls*/

@media (max-width: 640px) {
    table th, table.spip th, table tr, table.spip tr, table td, table.spip td {
        display:block;
    }
}

/* ============================================== */
/* ================ 5. Divers =================== */
/* ============================================== */

/* Paragraphes */

    .dom_texte p,
    .rubrique_header p {
        margin-top: 0;
        margin-bottom: 0.3em; }

/* Soustitres */

    .soustitre { margin-top: 0.5em; margin-bottom: 0.5em; font-size: 1.1em; }
    .article_content ul.liste-articles .soustitre,
    .mot_content ul.liste-articles .soustitre,
    .rubrique_content ul.liste-articles .soustitre {
        margin-bottom: 0.1em;
        font-style: italic;}

/* Types */

    .types { margin-top: 0; margin-bottom: 0.4em; font-size: 1em; color: #616161;}

/* Chapo */

    .article_header .chapo p { font-weight: 500;} /* articles outils et acteurs */
    li.liste-articles-item .chapo p { margin-bottom: 0; }

    /* articles : logos des outils/acteurs */
    .article_header .spip_logo {margin: 0 0 0.3em 0.3em;}
    .mot_content .spip_logo {max-width: 120px !important;}

    @media screen and (max-width: 580px) {
        .article_header .spip_logo {
            float: none;
            margin: 0 0 0 0;
            max-width: 120px !important;}
            }

    /* articles outils : URL des outils */

    div .url { background-color: #EBEBEB; margin: 1em 0; padding: 0.5em; }

    /* articles outils : images */

    .outils img { margin: 1em 0; }

/* ==== Images domaines : information sur copyright === */

    .logo-credits {border-top: 1px solid #D4D4D4; font-size: 90%; font-style: italic;}