@charset "iso-8859-1";
/*CSS responsive */

/*--------------Desktop low res--------------*/
@media (max-width: 1500px) {
    header img {
        margin-left: 30px;
    }
    header nav {
        width: 78%;
        margin-left : 30px;
    }
    header li > a, header li{
        font-size: 16px;
    }
    footer .footer-haut > div:first-child {
        width: 25%;
        padding: 0 20px;
    }
    div.texte-penche {
        width: 50%;
    }
    .inscription-texte:after {
        bottom: -82px;
    }
    #etablissement {
        height: 750px;
    }
    #etablissement img {
        object-position: 100% 100%;
        height:750px;
    }
    #etablissement .etablissement-titre {
        width: 50%;
        top: 315px;
        left: 25%;
        background: radial-gradient(rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0.5) 50%, rgba(255,255,255, 0) 70%, rgba(255,255,255, 0) 100%);
        padding: 35px;
        box-sizing: border-box;
    }
    .differents-etablissemnts > div {
        width: 32%;
    }

    /* qui sommes nous */
    .cadre-legislatif > div {
        width: 95%;
    }

    #quisommesnous .container .histoire h2{
        position : absolute;
        left:10%;
        top:-50px;
        margin-top:0;
    }
    .histoire-approche{
        top:20px;
    }
    .histoire-origines{
        position:absolute;
        left:10%;
        width:50%;
        bottom:0;
        background : #4eb749;
        padding : 60px 30px;
        z-index: 3;
    }
    .consul-bilan{
        flex-wrap: wrap;
    }
    .consul-bilan div {
        width: 45%;
        margin-bottom: 30px;
    }
    .consul-bilan div:nth-child(even) {
        margin-top: 0;
    }

}

/*--------------Tablettes--------------*/
@media (max-width: 1280px) {
    header{
        flex-wrap: wrap;
        justify-content: center;
        height: auto;
    }
    #logo {
        max-width: 150px;
        height: auto;
        margin: 0;
    }
    header nav {
        width: 100%;
        margin: 0;
        padding: 0 3%;
    }
    header li{
        padding: 10px 0;
    }
    header li,
    header li > a{
        font-size: 14px;
    }
    header .has_sm:hover > ul {
        top: 60px;
    }
    #intro h1 {
        max-width: 90%;
        font-size: 40px;
    }
    #intro h1 .big-letter{
        font-size: 50px;
    }
    #intro,
    #intro img{
        height: 450px;
    }
    #etablissement {
        height: auto;
    }
    #etablissement > p > img {
        position: absolute;
        height: 100%;
    }
    div.texte-penche{
        top: 25%;
        width: 70%;
    }
    #apropos,
    div.explication-vert,
    img.image-fond-vert{
        height: 500px;
    }
    #etablissement .etablissement-titre{
        position: relative;
        top: 130px;
        left: 0;
        right: 0;
        margin: auto;
    }
    .differents-etablissemnts{
        position: relative;
        top: 130px;
        flex-wrap: wrap;
        padding-bottom: 40px;
    }
    .differents-etablissemnts > div {
        width: 45%;
        margin: 10px auto;
    }
    .inscription-texte{
        margin-left: 0;
        width: 40%;
    }
    .inscription-formulaire{
        right: 5%;
        width: 500px;
    }
    .footer-haut{
        flex-wrap: wrap;
    }
    footer .footer-haut > div:first-child{
        width: 100%;
    }
    .footer-haut > div:first-child img{
        max-width: 200px;
        margin: 20px auto 0;
    }
    .footer-haut > div:first-child p{
        text-align: center;
    }
    .footer-haut > div:nth-child(2){
        width: 60%;
    }
    .footer-haut > div:nth-child(3){
        width: 40%;
    }
    .footer-bas{
        flex-direction: column;
        padding: 10px;
    }
    .footer-bas p{
        margin: 0;
    }

    /* Qui sommes nous */
    .missions{
        flex-direction: column;
        padding-bottom: 100px;
    }
    .missions .missions-image {
        position: relative;
        width: 70%;
    }
    .missions .missions-image::before{
        width: 100%;
    }
    .missions .missions-liste{
        position: relative;
        right: auto;
        bottom: auto;
        top: -100px;
        left: 5%;
        width: 95%;
    }
    .missions > div:first-child{
        margin-left: 10%;
        width: 90%;
    }
    .missions > div:nth-child(2) {
        margin-left: 10%;
        width: 70%;
    }
    div.les-equipes{
        height: auto;
        margin-bottom: 50px;
    }
    div.les-equipes img{
        height: 100%;
    }
    div.differentes-equipes{
        left: 0;
        width: 90%;
        margin: auto;
        flex-wrap: wrap;
    }
    .differentes-equipes > div{
        width: 50%;
        margin-top: 20px !important;
    }
    .differentes-equipes > div div{
        margin: auto;
    }
    .histoire{
        height: auto;
        padding: 0;
    }
    .histoire h2 {
        position: relative;
        left: auto;
        top: auto;
        display: inline-block;
        margin-left: 10%;
    }
    .histoire-approche{
        position: relative;
        left: auto;
        top: 0;
        margin: auto;
        width: 80%;
        padding: 30px 40px;
        margin-bottom: 40px;
    }
    .histoire-origines {
        position: relative;
        width: 80%;
        left: auto;
        bottom: auto;
        margin: auto;
    }
    .financement .financement-image{
        display: none;
    }
    .financement .financement-texte {
        width: 80%;
    }
    .inscription-lieux{
        flex-wrap: wrap;
    }
    .inscription-lieux > a {
        width: 45%;
        margin: 10px 0;
    }
    .inscription-wrap {
        width: 95%;
    }
    .inscription-documents {
        width: 80%;
    }
    .inscription-image {
        position: absolute;
        width: 60%;
        right: 0;
    }

    .table-wrap:nth-child(odd){
        flex-direction: column;
    }
    .table-wrap:nth-child(even){
        flex-direction: column-reverse;
    }
    .table-wrap div {
        width: 100%;
    }
    .table-wrap .col_img {
        margin-top: 20px;
    }

    .col_double{
        flex-direction: column;
    }
    .col_double .col_item{
        width: 100%;
        margin: 0;
    }
    .col_emploi{
        flex-direction: column-reverse;
    }
    .col_emploi .col_image,
    .col_emploi .col_texte {
        width: 100%;
        margin: 10px 0;
    }
    .col_emploi .col_image img {
        margin: auto;
    }

    .coordonnees_contact,
    .col_form{
        width: 80%;
        margin: 0 auto 80px;
        float: none;
    }

    .traitements-page-wrap{
        flex-direction: column;
    }
    .traitements-page-wrap #ligne_onglets {
        width: 100%;
    }
    .traitements-page-wrap #ligne_onglets ul{
        display: flex;
        flex-wrap: wrap;
    }
    .traitements-page-wrap #ligne_onglets ul li{
        flex-grow: 1;
        text-align: center;
    }
    .traitements-page-wrap #liste_onglets {
        width: 100%;
        margin-top: 20px;
    }
    .consultations-intro {
        width: 90%;
        margin-left: 5%;
    }
    .consultations-intro h2{
        font-size: 24px;
    }
    .entretien-wrap{
        flex-direction: column;
        padding: 0 5%;
    }
    .entretien-wrap div {
        width: 100%;
    }
    .traitements-wrap{
        padding: 40px 5% 0;
    }
    .service-social{
        margin-top: 50px;
    }
    .service-social .service-social-image{
        display: none;
    }
    .service-social-texte {
        width: 90%;
        margin: 0 5% 20px;
    }
    .consul-bilan-wrap{
        flex-direction: column-reverse;
        transform: none;
        width: 100%;
        margin-left: 0;
    }
    div.consul-bilan-wrap > div{
        transform: none;
        margin-top: 50px;
    }
    div.consul-bilan-wrap > div:last-of-type {
        margin-left: 5%;
        width: 90%;
    }
    .consul-bilan{
        width: 90%;
        z-index: 1;
    }

    /* Intranet */
    .compte_haut > div{
        width: 48%;
        margin-bottom: 20px;
    }
    .compte_dashboard{
        flex-direction: column;
    }
    .col_actus,
    .col_outils{
        width: 100%;
        max-width: 600px;
        margin: auto;
    }
    .actu_image{
        width: 300px;
    }
    .actu_details {
        width: 300px;
        padding-left: 20px;
    }
}


/*--------------Téléphones (paysage)--------------*/
@media (max-width: 959px) {

    h1, div.titre h1 {
        font-size: 50px;
    }

    h2 {
        font-size: 24px;
    }

    h3 {

    }

    #header-content {
        padding: 0 5%;
    }

    header nav {
        display: none;
    }

    header nav > ul {
        flex-direction: column;
        margin-top: 10px;
    }

    header li {
        width: 100%;
        padding: 0;
        display: block;
        text-align: center;
    }

    header li.no_mobile {
        display: none;
    }

    header li a {
        display: block;
        width: 100%;
        padding: 5px 10px;
        border-top: 1px solid #ededed;
    }

    header .has_sm ul::before {
        display: none;
    }
    header .has_sm:hover > ul,
    header .has_sm ul {
        top: auto;
        box-shadow: none;
        background-color: #eee;
        position: relative;
        padding: 0;
        left: auto;
        width: 100%;
        visibility: visible;
        opacity: 1;
        display: none;
        transition: none;
    }
    header .has_sm ul li{
        padding: 0;
    }
    header .has_sm ul li a{
        border-color: #ddd;
    }
    #menu_mobile{
        display: block;
        margin-left: auto;
    }
    #menu_mobile img{
        width: 30px;
        height: 30px;
    }

    #intro h1 {
        font-size: 26px;
    }
    #intro h1 .big-letter{
        font-size: 32px;
    }
    #apropos,
    div.explication-vert,
    img.image-fond-vert{
        height: auto;
    }
    img.image-fond-vert{
        position: absolute;
        width: 100%;
        height: 100%;
    }
    div.explication-vert {
        position: relative;
        width: 100%;
        transform: none;
        margin-left: 0;
        margin-top: 0;
    }
    div.texte-penche {
        transform: none;
        position: relative;
        top: auto;
        left: auto;
        width: 80%;
        margin: auto;
        padding: 10px 0 30px;
    }
    div.texte-penche p{
        font-size: 16px !important;
    }
    #etablissement{
        margin-top: 0;
    }
    #etablissement .etablissement-titre{
        width: 80%;
    }
    #etablissement .etablissement-titre,
    .differents-etablissemnts{
        top: 0;
    }
    .differents-etablissemnts > div {
        width: 95%;
    }
    #inscrire{
        padding: 20px;
    }
    .inscription-texte{
        margin: 0 5%;
        width: 90%;
    }
    .inscription-formulaire{
        position: relative;
        right: auto;
        width: 550px;
        max-width: 90%;
        margin: auto;
        padding: 10px 30px;
        top: auto;
    }
    #inscrire::after{
        display: none;
    }
    .image-fin,
    .image-fin img{
        height: 200px;
    }

    .footer-coordonees{
        margin-bottom: 0;
    }
    .footer-haut > div:nth-child(2),
    .footer-haut > div:nth-child(3){
        width: 100%;
    }
    .footer-haut > div:nth-child(3) ul{
        padding: 0;
    }

    .missions > div:nth-child(2) {
        margin-left: 5%;
        width: 90%;
    }
    .histoire-approche{
        width: 90%;
    }
    .histoire-origines {
        width: 90%;
    }
    .cadre-legislatif > div{
        flex-direction: column;
    }
    .cadre-legislatif > div > div{
        width: 90%;
        margin: 0 5%;
    }
    .cadre-legislatif .bouton{
        margin: 10px auto 40px 0;
    }
    .traitements-wrap{
        padding: 40px 5% 0;
    }
    .traitements-wrap > div {
        width: 100%;
        max-width: none;
    }

    .timeline::after {
        left: 24px;
    }
    .container {
        width: 100%;
        padding-left: 50px;
        padding-right: 25px;
    }
    .item-left, .item-right{
        width: 100%;
        margin: 0;
    }
    .item-left{
        padding-bottom: 0;
        padding-top: 30px;
    }
    .container::before {
        left: 40px;
    }
    .item-left::after, .item-right::after {
        left: 12px;
    }
    .reunion-texte{
        width: 100%;
        margin: 0;
    }
    .reunion-img{
        display: none;
    }
    #intranet_form{
        flex-direction: column;
    }
    #intranet_form .col_txt,
    #intranet_form .col_form{
        width: 100%;
    }
}


/*--------------Téléphones (paysage)--------------*/
@media (max-width: 769px) {

    body{
        font-size: 14px;
        line-height: 1.5;
    }
    h1, div.titre h1 {
        font-size: 36px;
    }
    h2, div.titre h2 {
        font-size: 20px;
        margin: 20px 0;
    }
    div.titre img,
    div.titre,
    .titre.titre_intranet img,
    .titre.titre_intranet{
        height: 200px;
    }
    .missions{
        padding: 50px 0;
    }
    .missions .missions-image::before{
        height: 250px;
    }
    .missions .missions-liste p{
        line-height: .8;
    }
    .missions-texte {
        margin-left: 2%;
    }
    .differentes-equipes > div{
        width: 100%;
        margin-top: 30px !important;
        font-size: 16px;
    }
    .financement .financement-texte {
        width: 90%;
        margin-right: 0;
    }
    .financement .financement-texte > div{
        flex-direction: column;
    }
    .financement .financement-texte > div > div{
        width: 100%;
        margin: 0;
    }
    .inscription-wrap{
        margin: 0 auto;
    }
    .inscription-lieux > a {
        width: 95%;
        flex-direction: column;
    }
    .inscription-lieux > a > div,
    .inscription-lieux > a > div img{
        width: 100% !important;
    }
    .inscription-documents {
        width: 100%;
        padding: 20px 15px;
    }
    .inscription-image {
        display: none;
    }

    .fil-ariane {
        margin: 20px auto;
        width: 90%;
    }
    .fil-ariane p {
        font-size: 13px;
    }
    .wrap{
        width: 90%;
    }
    .col_double .row{
        padding: 10px 30px;
    }
    section.wrapper {
        width: 90%;
    }
    #emploi .row > *:not(img) {
        padding: 0;
    }
    .col_emploi .col_texte{
        padding: 10px 20px;
    }
    .col_emploi .col_image img{
        max-width: 100%;
    }

    .coordonnees_contact,
    .col_form{
        width: 100%;
    }

    .chiffres-intro {
        width: 90%;
        margin-left: 5%;
    }
    .table-wrap{
        padding: 40px 20px;
    }
    .table-wrap .col_table{
        overflow: scroll;
    }
    .table-wrap h2 {
        margin-left: 0px;
    }

    .timeline-orga {
        overflow: scroll;
    }
    .timeline-orga .timeline-flex{
        min-width: 550px;
    }

    .consultations-accueil {
        width: 100%;
        margin: 0;
    }
    .consultations-accueil-wrap{
        margin-top: 0;
    }
    .service-social-texte > div{
        flex-direction: column;
        margin: 0;
    }
    .service-social-texte > div > div {
        width: 100%;
    }
    .tl-title {
        width: 100%;
    }
    .consul-bilan div {
        width: 100%;
    }

    /* Intranet */
    .compte_haut > div{
        width: 100%;
        max-width: 450px;
        margin: 0 auto 20px;
        padding: 20px 5%;
    }
    .compte_haut h2{
        font-size: 20px;
        margin-bottom: 10px;
    }
    .compte_options{
        align-items: flex-end;
        flex-direction: column;
    }
    .cadre_actu,
    .liste_actus .cadre_actu{
        width: 100%;
        flex-direction: column;
        min-width: 0;
    }
    .actu_titre{
        flex-direction: column;
    }
    .actu_image,
    .liste_actus .actu_image {
        width: 100%;
        max-width: 300px;
        margin: auto;
    }
    .actu_details,
    .liste_actus .actu_details{
        width: 100%;
        max-width: 300px;
        margin: 20px auto 0;
    }
    .col_actus .cadre_actu + p{
        text-align: center;
    }
    .actu_image::before{
        right: -10px;
    }
}


/*--------------Téléphones (portrait)--------------*/
@media (max-width: 479px) {

    h1, div.titre h1 {
        font-size: 24px;
    }

    #etablissement .etablissement-titre{
        width: 100%;
    }
    .differents-etablissemnts > div{
        flex-direction: column;
    }
    .differents-etablissemnts .etablissement-coordonnees,
    .differents-etablissemnts .etablissement-photo,
    .differents-etablissemnts .etablissement-photo img{
        width: 100%;
    }
    .differents-etablissemnts .etablissement-photo{
        height: 150px;
        margin: 0;
    }
    #inscrire {
        padding: 20px 0;
    }
    .inscription-formulaire{
        padding: 10px 30px;
        max-width: 100%;
    }
    .footer-coordonees{
        flex-direction: column;
    }
    .footer-coordonees > div{
        margin: 10px 0;
        width: 100%;
    }

    .missions > div:first-child {
        margin-left: 5%;
        width: 95%;
    }
    .missions .missions-image{
        width: 90%;
    }
    .missions .missions-image::before {
        height: 150px;
        left: 30px;
    }
    .missions .missions-liste{
        top: -40px;
    }
    .missions .missions-liste p{
        margin: 10px 0;
        font-size: 22px;
    }
    .histoire-approche{
        padding: 20px 30px;
        border-width: 5px;
    }
    .histoire-origines {
        padding: 30px;
    }
    .traitements-page-wrap .img_traitements {
        width: 100%;
    }
    .reunion-texte{
        padding: 20px;
    }
    #map{
        height: 400px;
    }

    /* Intranet */
    .compte_haut h2 {
        font-size: 16px;
        margin-bottom: 10px;
    }
    .compte_haut .bouton {
        margin: 5px 0 0;
        padding: 7px 15px;
        font-size: 12px;
    }
    #intranet_login h1{
        font-size: 22px;
    }
    #intranet_login p{
        font-size: 12px;
    }
    .msg_alert{
        font-size: 12px;
    }
    #intranet_login form,
    #intranet_mdp form{
        width: 100%;
        padding: 30px;
    }
    #intranet_login .champs_form,
    #intranet_mdp .champs_form {
        width: 100%;
    }
    #logo_intranet {
        max-width: 200px;
    }
    #preheader{
        padding: 6px 40px;
    }

}