@import url("style_pc.css") screen and (min-width: 800px);
@import url("style_mob.css") screen and (max-width: 799px);
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

:root {
    --p: rgb(161, 48, 48);
    --p1: rgb(136, 29, 29);
    --p2: rgb(220, 85, 85);
    --s: #1B6DA1;
    --t: #ffcc00;
    --g: #505050;
    --g2: #606060;
    --g3: #F0F0F0;
    --g4: #404040;
    --g5: #707070;
    --g1: #ffffff;
    --g0: #000000;
    --g6: #BFBFBF;
    --error: #d30101;
    --shadow: #404040;
}

h1,
h2,
h3 {
    text-align: left;
    font-weight: 600;
}

em {
    color: var(--p2);
    font-size: 1.1em;
    font-weight: 700;
    font-style: normal;
}

a {
    color: var(--p2);
}

table {
    border-collapse: collapse;
    width: 100%;
    color: var(--p);
    font-weight: 400;
}

td,
th {
    padding: .5em;
    text-align: center;
    border: none;
}

th:first-child {
    background-color: transparent;
    border-right: var(--p1) solid .05em;
}

thead th {
    border-bottom: var(--p1) solid .05em;
}

thead {
    background-color: #f2c7c4;
    font-weight: 600;
}

tbody {
    background-color: #f6d8d6;
}

tfoot {
    background-color: #fbeceb;
}

table>thead th:first-child {
    background-color: white;
    border: none;
}

label {
    color: var(--g);
    font-size: .75em;
    font-style: italic;
}

.highlight {
    background-color: var(--p);
    color: var(--g1);
    padding: .15em .3em .15em .3em;
    border-radius: .15em;
}

.btLink:hover {
    cursor: pointer;
}

* .alert {
    color: var(--error);
    /* background-color: var(--error); */
}

.flexCol {
    display: flex;
    flex-flow: row wrap;
}

.flexCol .flexItem {
    margin: 0 auto 0 auto;
}

.ideateur {
    padding-left: .5em;
    border-left: #FECF55 solid 2em;
}

.concepteur {
    padding-left: .5em;
    border-left: #45C0C1 solid 2em;
}

.realisateur {
    padding-left: .5em;
    border-left: #FF6484 solid 2em;
}

.optimisiseur {
    padding-left: .5em;
    border-left: #36A2EB solid 2em;
}

.coacteur {
    padding-left: .5em;
    border-left: #00ffab solid 2em;
}

.coordinateur {
    padding-left: .5em;
    border-left: #14c38e solid 2em;
}

.profilLegend {
    margin: 0 0 1em 0em;
}

.indicator {
    display: flex;
    width: 24em;
    margin-bottom: 1em;
}

.indicator .legend {
    margin: 0 0 0 1em;
    font-size: .8em;
}

.indicator .legend p {
    line-height: .4em;
}

.indicator .legend h4 {
    margin: 1.4em 0 1.1em 0;
}

.indicator .p em {
    color: #53b2ac;
}

.indicator .a em {
    color: #f9c53c;
}

.indicator .i em {
    color: #d5e373;
}

.center {
    display: flex;
    justify-content: center;
}

.left {
    display: flex;
    justify-content: left;
}

#deco {
    text-align: right;
    padding-bottom: 1em;
}

#logo {
    width: 15em;
    margin-top: 2em;
    margin-bottom: 5em;
}

hr {
    margin-top: 4em;
}

.notespdf {
    display: none;
}

.fnowrap {
    display: flex;
    flex-wrap: nowrap;
    align-items: end;
}

@media screen {

    body {
        font-family: 'Roboto', sans-serif;
        text-align: justify;
        /*hyphens: auto;*/
        max-width: 1014px;
        align-content: center;
        margin: .1em auto 0 auto;
        padding: 0 1.2em 0 1.2em;
        background-color: var(--g1);
    }

    p {
        line-height: 1.6em;
    }

    nav ul {
        display: flex;
        padding: 2em 0 1em 0;
        list-style: none;
    }

    nav ul li a {
        text-decoration: none;
        color: var(--p2);
    }

    nav ul li {
        font-size: 2.2em;
    }

    nav .activ {
        color: var(--p);
    }

    nav .disabled {
        color: var(--g5);
    }


    header #lien {
        background-color: var(--g0);
        padding: .6em;
    }

    header #lien a {
        color: #ffffff;
        text-decoration: none;
    }


    #action {
        padding: 2em;
    }

    #facgrid {
        margin: 2em;
    }

    #result h1 {
        margin: 1.5em 0 1em 0;
    }

    #result h2 {
        margin: 1.5em 0 1em 0;
    }

    #result h3 {
        text-align: center;
        margin-top: 2em;
    }

    #menuc img {
        display: flex;
        height: 4em;
        margin: 2em auto 2em auto;
    }

    #menu {
        margin: .6em .8em .6em 0.6em;
        display: flex;
    }

    #menu img {
        height: 4em;
        margin: 0 auto 0 0;
    }

    #menu h1 {
        font-size: 1.7em;
    }

    #menu div {
        text-align: right;
    }

    #presentation {
        display: block;
    }


    footer {
        color: var(--g1);
    }

    footer img {
        height: 2em;
    }

    footer>div:first-child {
        padding: 1.8em 5em 1.8em 5em;
        background-color: var(--g);
    }

    footer>div:last-child {
        padding: 1.8em .5em 1.8em .5em;
        background-color: var(--p1);
        text-align: center;
        font-size: .8em;
    }

    footer .col {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    footer .col div:first-child {
        font-size: 1.1em;
    }

    footer h1 {
        font-size: 1.1em;
        font-weight: 700;
        margin: 0 0 1.2em 0;
    }

    footer .data {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        font-size: 1em;
        color: var(--g3);
    }

    footer .data img {
        height: 1.4em;
        margin: 0 0 .25em auto;
    }

    footer a {
        color: var(--g3);
    }

    #content {
        background-color: white;
    }

    #connect {
        background-color: #e7e7e7;
    }

    #connect form {
        margin: auto;
        background-color: var(--g1);
        border-left: var(--p) solid .3em;
    }

    #connect #links {
        margin-top: 1em;
    }

    #accueil {
        display: flex;
        padding: 2em;
        background-color: #e7e7e7;
    }

    #accueil h2 {
        font-size: 1.7em;
    }

    #accueil ul {
        list-style: none;
    }

    #accueil ul li {
        margin-top: .3em;
    }

    #accueil ul li a {
        text-decoration: none;
    }

    #accueil #ent {
        font-size: 1.1em;
        margin: 0;
        color: var(--g2);
    }

    #accueil #perso {
        margin: 0;
        font-size: 1.3em;
        font-weight: 500;
    }

    .pfooter {
        display: none;
    }

    .button {
        background-color: var(--p2);
        color: var(--g1);
        padding: 1em;
        border-radius: .3em;
        outline: none;
        border: none;
        margin: .9em .5em .9em 0;
        text-align: center;
        width: fit-content;
        text-decoration: none;
    }

    .button .disabled {
        background-color: var(--g2);
        cursor: not-allowed;
    }

    .input input {
        border: none;
        border-bottom: var(--g0) solid 1px;
        background-color: transparent;
        font-size: 1.2em;
    }

    .input input:focus {
        outline: none;
        border-bottom: var(--p) solid 2px;
    }

    .input span {
        margin-top: 1.5em;
        font-weight: 500;
        display: block;
    }

    .question {
        text-align: center;
        background-color: var(--g3);
        padding: 2em;
        vertical-align: middle;
    }

    .question h2 {
        margin-bottom: 2em;
    }

    .question #legend {
        font-size: 1.25em;
        font-weight: 500;
        color: var(--p1);
        margin: 0 1.5em 1em 1.5em;
        display: flex;
        justify-content: space-between;
    }

    .qnav {
        margin: 0.5em;
        display: flex;
        justify-content: space-between;
    }

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

    .hide {
        display: none;
    }


    .cur {
        font-size: 1.1em;
        text-align: left;
    }

    .cur .saisi {
        color: var(--g1);
        background-color: var(--p);
        border: var(--p1) solid 1px;
    }

    .notespdf {
        display: none;
    }


}