/* Structure */
* {
    scroll-behavior: smooth;
}
body {
    background-color: #ddd5e2;
    font-family: 'Raleway', sans-serif;
    margin: 0;
    z-index: 1;
}
#corps {
    float: none;
    clear: both;
    margin: auto;
    padding: 2em 2em 3em 2em;
    background-color: white;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
}
@media screen and (min-width: 1296px) {
    #corps {
        width: 67.5%;
    }
}
hr {
    border: none;
    height: 1px;
    background-color: rgb(238, 238, 238);
    width: 80%;
    margin: 2em auto;
}
#alerte {
    text-align: center;
    font-size: large;
    font-weight: bold;
    color: red;
}
#alerte a {
    text-decoration: underline;
}
#alerte:before {
    font-family: "Material Icons";
    content: "priority_high";
    font-weight: bold;
    font-size: xx-large;
}
#update:before {
    font-family: "Material Icons";
    content: "mark_email_unread";
    padding-right: .5em;
    font-weight: bold;
    font-size: large;
}
#contribuer:before {
    font-family: "Material Icons";
    content: "lightbulb";
    padding-right: .5em;
    font-weight: bold;
    font-size: large;
}
#update, #contribuer {
    font-weight: bold;
    font-size: large;
    margin-bottom: 1em;
}
#update a, #contribuer a {
    display: inline;
}
#update span:before {
    content: "Restez informé.e de toute évolution de vos droits : ";
}
#contribuer span:before {
    content: "Participez au dialogue social : idée d'acquis social, désaccord sur les acquis existants, situation non couverte : ";
}
footer {
    text-align: center;
}
section, .signataires, .entreprises, .date, .validite {
    display: flex;
    align-items: center;
}
.signataires {
    margin-bottom: 0.5em;
}
section {
    margin-bottom: 2em;
}
#bref {
    background-color: #ddd5e2;
    box-shadow: 0 0 12px rgba(0,0,0,.15);
    font-weight: bold;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-right: 2em;
    padding-left: 2em;
    margin-bottom: 2em;
    margin-right: -2em;
    margin-left: -2em;
}
#bref.perime #bref-titre:after {
    content: " : Périmé";
}
#bref p {
    font-size: large;
    padding-left: 90px;
}
#bref a {
    text-decoration: underline;
}
#bref-icone:before  {
    font-family: "Material Icons";
    content: "short_text";
    padding-right: .5em;
    font-weight: bold;
    font-size: xx-large;
}
#bref-titre:before {
    content: "En bref";
    font-weight: bold;
    font-size: xx-large;
}
#details-icone:before {
    font-family: "Material Icons";
    content: "subject";
    padding-right: .5em;
    font-weight: bold;
    font-size: xx-large;
}
#sommaire {
    padding-left: 90px;
    font-weight: bold;
}
#sommaire ul {
    padding-left: 0;
}
#sommaire li {
    padding-bottom: .5em;
}
summary:hover {
    cursor: pointer;
}
#details summary {
    display: flex;
}
#details summary::after {
    content: "";
    width: 3em;
    height: 3em;
    background: url(images/icons/expand_more.svg);
    background-size: cover;
    margin-left: .75em;
    transition: .2s;
}
details[open] > summary::after {
    transform: rotate(180deg);
}
#recommandations ul {
    padding-left: 90px;
    font-weight: bold;
    list-style-type: none;
}
#details-titre:before {
    content: "En détails";
    font-weight: bold;
    font-size: xx-large;
}
#recommandations-titre:before {
    content: "Au-delà de Scalian";
    font-weight: bold;
    font-size: xx-large;
}
#recommandations-icone:before {
    font-family: "Material Icons";
    content: "subject";
    padding-right: .5em;
    font-weight: bold;
    font-size: xx-large;
}
.indente {
    border-left: 1px solid grey;
    margin-left: 1em;
    padding-left: 1em;
}
article {
    position: relative;
    flex: 4;
    padding-right: 2em;
    border-right: 1px solid black;
    border-radius: 3%;
}
@media screen and (max-width: 700px) {
    aside, article:before {
        display: none;
    }
    article {
        border: none;
    }
}
aside {
    padding-left: 2em;
    flex: 1;
}
main h2, main h3 {
    margin: 20px 0;
    text-align: center;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
}
main h2:before, main h2:after {
    content: '';
    border-top: 1px solid;
    margin: 0 30px 0 30px;
    flex: 1 0 20px;
}
main h3:before, main h3:after {
    content: '';
    border-top: 1px dotted;
    margin: 0 60px 0 60px;
    flex: 1 0 20px;
}
article h4 {
    margin: 10px 0 0 0;
}
article h5 {
    margin: 5px 0;
}
article p {
    margin: 10px 0;
}
#entredeux {
    display: flex;
}
.entredeux-bloc {
    flex: 1 0 50%;
}

/* Flèche aside */
article:before {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    border-left-color: black;
    border-width: 15px;
    margin-top: -15px;
}

/* Remonter en haut */
#up {
    position: fixed;
    bottom: 10px;
    right: 10px;
    font-size: 6em;
    font-weight: bold;
}

/* Typographie */
footer {
    font-weight: bold;
}
footer em {
    font-weight: normal;
}
article.due div:after {
    font-size: larger;
    font-style: italic;
    content : "Ce sujet fait l'objet de décisions unilatérales de l'employeur, non publiques. Si vous êtes salarié.e Scalian, vous pouvez accéder aux notes sur le sujet par l'intranet sous 'RH - UES SCALIAN'.";
}
aside {
    font-weight: bold;
}
.reference:before {
    content: "Référence";
}
.accord-entreprise:before {
    content: "Accord d'entreprise, signé par :";
}
.pap:before {
    content: "Protocole d'Accord Préélectoral, signé par :";
}
.accord-atypique:before {
    content: "Accord atypique, signé par :";
}
.accord-branche:before {
    content: "Accord de branche";
}
span.due:before {
    content: "Décision Unilatérale de l'Employeur";
}
.signataires {
    margin-top: .5em;
}
.signataires span:not(.syntec, .cse, .scalian, .cftc, .unsa, .cgt, .cfecgc):before {
    background-size: 3em 3em;
    width: 3em;
    height: 3em;
    display: inline-block;
    content: "";
    margin-right: 1em;
}
.cfecgc:before {
    content: "CFE-CGC";
    padding-right: 1em;
}
.cgt:before {
    content: "CGT";
    padding-right: 1em;
}
.cftc:before {
    content: "CFTC";
    padding-right: 1em;
}
.unsa:before {
    content: "UNSA";
    padding-right: 1em;
}
.cse:before {
    background-image: url("images/cse.png");
    background-size: 5em 4em;
    width: 5em;
    height: 4em;
    display: inline-block;
    content: "";
}
.syntec:before {
    background-image: url("images/syntec.png");
    background-size: 9em 4em;
    width: 9em;
    height: 4em;
    display: inline-block;
    content: "";
}
.scalian:before {
    background-image: url("images/scalian.png");
    background-size: 16em 4em;
    width: 16em;
    height: 4em;
    display: inline-block;
    content: "";
}
.date:before,
.validite:before {
    font-family: "Material Icons";
    padding-right: .5em;
}
.date:before {
    content: "edit";
}
.date-prefix:before {
    content: "En : ";
}
.validite:before {
    content: "timer";
}
.valide-infini:before {
    content: "Durée : indéterminée";
}
.valide-fini:before {
    content: "Durée : ";
}
.valide-reconduit:before {
    content: "Durée : tacite reconduction";
}
.perime, .perime:before {
    color: red;
}
article em {
    display: inline-block;
    width: 100%;
    text-align: right;
    font-size: 14px;
}
em { font-style: italic }
strong { font-weight: bold }
a { text-decoration: none }
a:link, a:hover, a:active { color: hsl(281, 98%, 23%) }
a:visited { color: hsl(281, 98%, 23%) }
a.mail:after {
    font-family: "Material Icons";
    content: "alternate_email";
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 3px;
}
a[target="_blank"]:after {
    font-family: "Material Icons";
    content: "open_in_new";
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 3px;
}
#back {
    padding-top: 1em;
    padding-bottom: 1em;
    font-weight: bold;
}
#back a:before {
    font-family: "Material Icons";
    content: "arrow_back";
    vertical-align: middle;
    margin-right: 3px;
    margin-left: 3px;
    font-weight: bold;
}
.material-icons {
    vertical-align: center;
    margin: 3px 3px;
}


#toggleDyslexic {
    display: inline-block;
    position: relative;
    width: 49px;
    height: 28px;
    cursor: pointer;
    overflow: hidden;
}
#toggleDyslexic input {
    position: absolute;
    width: 0;
    height: 0;
}
#toggleDyslexic input + span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ddd5e2;
    border-radius: 14px;
}
#toggleDyslexic input + span:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 3px;
    width: 22px;
    height: 22px;
    background: white;
    border-radius: 50%;
    transform: translateY(-50%);
    transition: all .5s;
}
#toggleDyslexic input:checked + span {
    background: #705082;
}
#toggleDyslexic input:checked + span:before {
    left: 24px;
}
#labelDyslexic, #visuelDyslexicOn, #visuelDyslexicOff {
    display: inline-block;
    height: 34px;
    vertical-align: middle;
    padding: 0 .5em;
}