/* =========================================== */
/* ======= Propriétés globales du site ======= */
/* =========================================== */

/* Validation W3C CSS :
    la propriété "font-optical-sizing: auto;" n’est pas reconnue (elle est pourtant correcte)
 */

/*
    1. html, body, wrapper
    2. Fonts
    3. Couleurs
    4. Typo
    5. Medias
    6. Hidden / Debug / Boutons d’administration
    7. Flexbox
    8. Float
    9. Header, menu, footer
    10. Divers (recherche, fil d’ariane)
    11. Impression et responsive
*/

/*
    Breakpoints :
    @media screen and (min-width: 580px) {}
    @media screen and (min-width: 720px) {}
    @media screen and (min-width: 992px) {}
    @media screen and (min-width: 1200px) {}
*/

/* ============================================= */
/* ========== 1. html, body, wrapper =========== */
/* ============================================= */

    html {
        font-family: sans-serif;
        font-size: 100.01%;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;}
        /* [en] http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100 */

    body {
        background: #375483;
        font-family: "Open Sans", sans-serif;
        font-weight: 400;
        line-height: 150%;
        text-align: left;
        color: #2a2e33;}

    .wrapper {
        width: 90%;
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1em;
        padding: 0;
        overflow: hidden;
        background: #fff;}

/* =========================================== */
/* ============== 2. Fonts =================== */
/* =========================================== */

/* Nunito pour titres, Open-sans pour textes */
/* Nunito */
/* <weight>: use a value from 200 to 1000 */

    .nunito-<uniquifier> {
        font-family: "Nunito", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;}

/* Open Sans */
/* <weight>: use a value from 300 to 800 */

    .open-sans-<uniquifier> {
        font-family: "Open Sans", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        font-variation-settings: "wdth" 100;}

/*
    300 - Light
    400 - Normal
    500 - Medium
    600 - Semi Bold
    700 - Bold
    800 - Extra/Ultra Bold
*/


/* ============================================= */
/* ================ 3. Couleurs =================*/
/* ============================================= */


/* Couleurs */
    .black      {color: #2a2e33;}  /* contrast ratio 13.66 */
    .dark-gray  {color: #4c4c4c;}  /* ratio 8.58 */
    .med-gray   {color: #7D7D7D;}  /* ratio 4.11 */
    .light-gray {color: #d8d8d8;}  /* ratio 1.42 */
    .navy       {color: #283854;}  /* ratio 11.7 */
    .dark-blue  {color: #293f64;}  /* ratio 10.5 */
    .med-blue   {color: #375483;}  /* ratio 7.61 */
    .blue       {color: #4468A7;}  /* ratio 5.54 */
    .med-orange {color: #ffaa46;}  /* ratio 1.89 */


/* ============================================= */
/* ================= 4. Typo =================== */
/* ============================================= */

    p,.p,ul,ol,dl,dd,blockquote,address,pre,.table,fieldset {color: #2a2e33;}
    p,.p,ul,ol {
        margin-bottom: 0.5em;
        margin-block-end: 0.5em; /* chrome */}

/* =================== Titres ===================*/

    h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
        display: block;
        font-family: "Nunito", sans-serif;
        font-size: 100%;
        font-weight: 400;
        margin: 0;
        padding: 0;}

    h1, .h1 {
        font-size: 2em;
        font-weight: 500;
        line-height: 1.5em;
        margin: 1em 0 0.75em 0;
        color: #326295;}

    h2, .h2, h2.spip {
        margin: 1em 0 0.5em 0;
        padding: 0 0 0 0.6em;
        font-size: 1.6em;
        font-weight: 500;
        line-height: 1.2em;
        color: #326295;
        border-left: 3px solid #ffaa46;}

    h3, .h3, h3.spip {
        margin-bottom: 1.2em;
        font-size: 1.4em;
        font-weight: 500;
        line-height: 1.2em;
        color: #326295;}

    h4, .h4 {
        font-size: 1.1em;
        font-weight: 500;
        line-height: 1.364em;
        margin-bottom: 1.364em;}

    h5, .h5 {
        font-size: 1em;
        font-weight: 500;
        margin-bottom: 1.5em;}

    h6, .h6 {
        margin: 1.5em 0 0.7em 0;
        font-size: 1.3em;
        font-weight: 600;}

    h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small,
    h4 small, .h4 small, h5 small, .h5 small, h6 small, .h6 small {
        font-size: 60%;
        line-height: 0;}

    /* Titres : bord gauche orange et espace */

    .orange {
        padding: 0 0 0 0.6em;
        border-left: 3px solid #ffaa46; }

    @media screen and (max-width: 580px) {
        .article_header h1 { margin-top: 0.5em; }}

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

    ol,ul {
        list-style-type: none;
        margin-left: 0;
        padding-left: 0;
        -webkit-margin-before: 0;
        -webkit-margin-after: 0;}

    ul ul {list-style-type: circle;}
    ul ul ul {list-style-type: square;}
    ol {list-style-type: decimal;}
    ol ol {list-style-type: lower-alpha;}
    ol ol ol {list-style-type: lower-greek;}
    ul ul, ol ol, ul ol, ol ul {margin-top: 0; margin-bottom: 0;}

    li { margin-bottom: 0.3em; }

/* Listes SPIP */
    ul.spip,
    ol.spip {
        margin-left: 2.5em;
        margin-bottom: 1.5em;}

    ul.spip { list-style-type: disc; }
    ol.spip { list-style-type: decimal;}

    .unstyled {list-style: none; padding-left: 0;} /* ul */

/* ======== Pagination ======== */

    .pagination {
        background-color: #F8F7F7;}
    p.pagination { margin-bottom: 0; }

    ul.pagination-items {
        margin: 2em 0 1em 0;
        padding: 0.6em 0; }

    li.pagination-item {
        display: inline;
        list-style-type: none;
        padding: 0.7em !important;
        border: 0 none;}

/* ================ Alignement ==================*/

    .text-left {text-align: left;}
    .text-right {text-align: right;}
    .text-center {text-align: center;}
    .text-justify {text-align: justify;}

/* ============= formats divers ================ */

    hr {
        margin: 1.5em 0;
        border: solid;
        border-width: 1px 0 0;}
    em, i, .i {font-style: italic;}
    .b {font-weight: bolder;}
    mark,.mark {background: #ff0;color: #000;}
    .smaller {font-size: 75%;}
    .small {font-size: 80%;}
    big,.big {font-size: 130%;}
    .bigger {font-size: 175%;}
    .biggest {font-size: 200%;}
    u,.u {text-decoration: underline;}
    sup, .sup, sub, .sub {
        position: relative;
        font-size: 80%;
        font-variant: normal;
        line-height: 0;
        vertical-align: baseline;}

    .sup {top: -0.5em;}
    .sub {bottom: -0.25em;}
    .lead {font-size: 120%;}
    .caps {font-variant: small-caps;}
    .quiet {color: #555555;}
    .blink {text-decoration: blink;}
    abbr[title], acronym[title] {text-decoration: none; cursor: help;}

    @media print {
        abbr[title] {border-bottom: 0;}
        abbr[title]:after {content: " (" attr(title) ")";}
        }

    dfn,.dfn {font-weight: bold;font-style: italic;}
    s,strike,del,.del {opacity: .5;text-decoration: line-through;}
    ins,.ins {background-color: rgba(255, 255, 204, 0.5);text-decoration: none;}

/* Quotes, code et poetry */

    q {quotes: "\201C" "\201D" "\2018" "\2019";}
    :lang(en) > q {quotes: "\201C" "\201D" "\2018" "\2019";}
    :lang(fr) > q {quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D" "\2018" "\2019";}
    :lang(es) > q {quotes: "\00AB" "\00BB" "\201C" "\201D";}
    :lang(it) > q {quotes: "\00AB\A0" "\A0\00BB" "\201C" "\201D";}
    :lang(de) > q {quotes: "\00BB" "\00AB" "\203A" "\2039";}
    :lang(no) > q {quotes: "\00AB\A0" "\A0\00BB" "\2039" "\203A";}

/* [en] http://en.wikipedia.org/wiki/International_variation_in_quotation_marks */

    q:before {content: open-quote;}
    q:after {content: close-quote;}
    blockquote {
        position: relative;
        padding-left: 1.5em;
        border: solid rgba(34, 34, 34, 0.19999999999999996);
        border-width: 0 0 0 5px;}

    blockquote:before {
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        content: "\00AB";
        line-height: 0;
        font-size: 10em;
        color: rgba(34, 34, 34, 0.09999999999999998);}

    cite,.cite {font-style: italic;}
    address {font-style: italic;}
    pre,var,tt {font-family: monospace; font-size: 1em;}
    pre {white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word;}
    kbd {
        white-space: nowrap;
        padding: .1em .3em;
        background-color: #eee;
        border: 1px solid #aaa;
        border-radius: 4px;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 1px #ffffff inset;
        color: #333;}

    samp {font-weight: bold;}
    var {font-style: italic;}

/* ============================================= */
/* =============== 5. Medias =================== */
/* ============================================= */

/* Rendre les images responsive par defaut */

    img, video, canvas, svg {
            max-width: 100%  !important;
            height: auto;}

    img {vertical-align: middle;}

    /* Images dans le corps d’un article*/

    .spip_document img {
        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);
        }

/* style effects */
    img.round {border-radius: 5px;}
    img.circle {border-radius: 50%;}
    img.border {
        padding: 4px;
        background-color: #fff;
        border: 1px solid #bbb;}

    img.shadow {
        box-shadow: -1px 2px 5px 1px rgba(0, 0, 0, 0.7), -1px 2px 20px rgba(255, 255, 255, 0.6) inset;
    }



/* Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
    audio, canvas, progress, video {vertical-align: baseline;}

 /* Prevent modern browsers from displaying `audio` without controls.
        Remove excess height in iOS 5 devices.*/

    audio:not([controls]) {
        display: none;
        height: 0;}

/* thumbnail */
    .thumb, .thumb.left {margin: 0 10px 10px 0;}
    .thumb.right {margin: 0 0 10px 10px;}

    /* figure */
    figure {
        margin: 0;
        margin-bottom: 0.75em;
        text-align: center;}

    figure.center {margin-bottom: 1.5em;}
    figure.left {margin-right: 1.5em;}
    figure.right {margin-left: 1.5em;}

/* ================================================== */
/* == 6. Hidden / Debug / Boutons d’administration == */
/* ================================================== */

    .hidden {visibility: hidden;}
    .none {display: none;}
    .offscreen {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;}

    /* debug */
    .todo {opacity: 0.5;}
    .todo:hover {opacity: 1;}

/* == Boutons d’administration === */

/* Pendant travaux */
    #icone_travaux {visibility: hidden;}

/*  Boutons d’administration */
    .spip-admin-bloc, .spip-admin-float {
        right: 1% !important;
        top: 96% !important;}

    .spip-admin-boutons {
        display: inline-block;
        padding: 0.2em 0.4em !important;
        border-radius: 0 0 !important;
        background: #1C5FD4 !important;
        opacity: .9 !important;
        }

/* ============================================= */
/* =============== 7. Flexbox ================== */
/* ============================================= */

    *, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;}

/* Box */

    .box {
        display: block;
        margin-bottom: 1.5em;
        padding: 1.5em 1.5em;
        padding-bottom: .1em;
        border: 1px solid;}

/* Agencement de blocs */

    .block {display: block; margin-bottom: 1.5em;}
    .inline {display: inline;}
    .inline-block {display: inline-block;}

    article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
        display: block;}

/* ============================================= */
/* ================= 8. Float ================== */
/* ============================================= */

    .left {float: left;}
    .right {float: right;}
    .center {margin-right: auto; margin-left: auto;}

/* Clear */

    .clear {clear: both;}

    br.clear {
        clear: both;
        margin: 0;
        padding: 0;
        border: 0;
        height: 0;
        line-height: 1px;
        font-size: 1px;}

    hr.clear {visibility: hidden;}

    /* clearfix */

    .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        overflow: hidden;
    }

    .clearfix {display: inline-table;}
    .clearfix {display: block;}

/* ============================================= */
/* ========== 9. Header, menu, footer ========== */
/* ============================================= */

/* ===================================== */
/*   Header avec logo et menu du site    */
/* ===================================== */


.site-header {
    padding-block: 1rem 0;
    background-color: #F1F4F9;
}

.site-header__inner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 1em 0 2em 1em;
}

.site-logo {
    margin: 0;
    line-height: 1;
    justify-self: start;
}

.site-logo__link {
    display: inline-block;
    text-decoration: none;
    max-width: 100%;
}

.site-logo__link .spip_logo,
.site-logo__link img,
.site-logo__link svg {
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    width: clamp(150px, 22vw, 240px); /*minimum : 140px (mobile) ; idéal : 20% de la largeur viewport ; maximum : 220px (desktop)*/
    max-width: 100%;
    height: auto;
}

/* Neutralisation explicite du style SPIP historique */
.header .spip_logo {
    float: none;
    margin: 0;
}

/* ============================= */
/*    Menu site avec recherche   */
/* ============================= */

.nav {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "main_menu"
        "search";
    border-top: 1px solid #ffaa46;
    border-bottom: 1px solid #ffaa46;
    background-color: #fff;
}

.menu {
    grid-area: main_menu;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
}

.recherche {
    grid-area: search;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 1rem;
    justify-content: flex-start;
}

@media screen and (min-width: 768px) {
    .nav {
        grid-template-columns: 1fr auto;
        grid-template-areas: "main_menu search";
        align-items: center;
    }

    .recherche {
        justify-content: flex-end;
    }
}

/* Menu principal */

.menu > ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.2em; /* gère l’espace uniquement ENTRE les éléments li de la liste */
    margin: 0.3rem 0;
    padding: 0;
    list-style: none;
}

@media screen and (min-width: 768px) {
    .menu > ul {
        gap: 0 1.5em; /* gére l’espace uniquement ENTRE les éléments li de la liste */
    }
}

.menu-item {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    font-size: 1.1em;
}

/* Liens du menu */
.menu-item a {
    display: inline-block;
    text-decoration: none;
}

/* Recherche */

.recherche .formulaire_spip {
    margin-bottom: 0;
}

/* ===== Footer ===== */

    /* main-grid-item du site avec un subgrid */

    footer {
        background-color: #F1F4F9;
        border-top: 1px solid #ffaa46;}

    .fo_titre {
        padding: 1em 0 0.5em 1em;
        font-size: 1.2em;
        font-weight: 600;
        text-align: center;
        color: #696969;}

    .fo_liens { text-align: center; padding: 1em 0 0 0; }

    .footer_galerie {
        display: grid;
        display: -ms-grid;
        grid-row-gap: 1em;
        grid-column-gap: 1em;
        padding: 1em 1em; }

    p.colophon {color: #696969;}

    @media screen and (min-width: 580px) {.footer_galerie {grid-template-columns: 1fr 1fr;}}
    @media screen and (min-width: 992px) {.footer_galerie {grid-template-columns: 1fr 1fr 1fr;}}
    @media screen and (min-width: 1200px) {.footer_galerie {
        grid-template-columns: 1fr 1fr 1fr 1fr;}
        .fo_titre { text-align: left; }
        }

    .footer_galerie_item {
        width:100%;
        background-color: #FFF;
        max-width: 240px;
        max-height: 140px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 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);}

    .fo_logo img {
        margin-left: auto;
        margin-right: auto;
        padding: 1em 0em; }

/* ============================================= */
/* =============== 10. Divers ================== */
/* ============================================= */

/* ====== Fil d’ariane ====== */

    .ariane {
        font-size: 1em;
        color: #293f64;
        margin-bottom: 1em; }

    .ariane * { font-weight: normal; }

/* ============================================= */
/* ====== 11. Impression et responsive ========= */
/* ============================================= */

/* Styles pour l'impression (HTML5 Boilerplate)
Inlined to avoid required HTTP connection: h5bp.com/r */

    @media print {

    /* Layout */
    .box {border: 1px solid !important;}

    /* Typo */
    pre,blockquote {page-break-inside: avoid;}
    thead {display: table-header-group;}
    tr,img {page-break-inside: avoid;}
    @page  {margin: 2cm .5cm;}
    p,h2,h3 {orphans: 3;widows: 3;}
    h2,h3 {page-break-after: avoid;}

    .spip-admin, #spip-admin { display: none;}
    .formulaire_spip { display: none; }
    .pagination { display: none; }

    }


/* ================ Responsive ================= */

/* Typographie pour petites ecrans
    [fr] http://www.alsacreations.com/astuce/lire/1177 */

    @media (max-width: 640px) {
    /* Fixer une largeur maximale  de 100 % aux elements potentiellement problematiques */
    img,table,td,blockquote,code,pre,textarea,input,iframe,object,embed,video {max-width: 100% !important;}

    /* Gestion des mots longs */
    textarea,table,td,th,pre,code,samp {overflow-wrap: break-word;}/* cesure forcee */
    pre,code,samp {white-space: pre-line;}/* Passage a la ligne specifique pour les elements a chasse fixe */

    figure {margin-bottom: 1.5em;}
    figure.left {float: none;margin-right: 0;}
    figure.right {float: none;margin-left: 0;}
    }

/* Orientation iOS5 font-size fix */

    @media (orientation: landscape) and (max-width: 640px) {
    html,body {-webkit-text-size-adjust: 100%;}
    }