* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    font-family:'Segoe UI', 'Helvetica', Tahoma, Geneva, Verdana, sans-serif; 
    scroll-behavior: smooth;
    user-select: none;
}

input {
    margin:0;
    border:0;
    padding:0;
    display:inline-block;
    vertical-align:middle;
    white-space:normal;
    background:none;
    line-height:1;

    display: block; 
    width: 100%; 
    
    /* Browsers have different default form fonts */
    font-size:13px;
    font-family:Arial;
}

input[type="submit"] {
	/* Fix IE7 display bug */
	overflow:visible;
}


pre.error-info {
    padding: 1em;
    background: #f1f1f1;
    border-radius: 4px;
    border: solid 1px #d5d5d5;
    font-family: monospace;
    overflow: auto;
}

pre.error-info * {
    font-family: monospace; 
}


a {
    text-decoration: none; 
    color: #333333; 
}

a.main-link {
    text-decoration: none;
    border-bottom: 2px solid var(--main-color);
    color: var(--main-color); 
    font-weight: bold;
}
a.discret-link {
    text-decoration: none;
    border-bottom: 4px solid #00000025;
    opacity: .8;
}

a.noclick {
    cursor: not-allowed; 
}

button {
    cursor: pointer;
    cursor: pointer;
    background-color: transparent;
    border: none;
    padding: .6em;
    border-radius: 100px;
    transition: all ease-in-out 320ms; 
}
button:hover {
    background-color: var(--light-gray); 
}

button:disabled, button[disabled] {
    cursor: not-allowed; 
    opacity:.6; 
}


:root {
    --main-color: #e2001a;
    --text: #212121; 
    --light-gray: #f2f2f2; 
}

.body {
    display: flex; 
    min-height: 100vh;
    flex-direction: column;
    justify-content: space-between;
}


.displaynone {
    display: none !important; 
}


@keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1;
    }
}


@keyframes rotation {
    0% {
        transform: rotate(0); 
    }
    100% {
        transform: rotate(359deg);
    }
}

@keyframes glingling {
    0% {
        transform: rotate(8deg);
    }
    50% {
        transform: rotate(-12deg);
    }
    100% {
        transform: rotate(8deg); 
    }
}



























/* =========================================================================================
 ::::::::::::::::::::::::::::::::::::::::: Header ::::::::::::::::::::::::::::::::::::::::: 
========================================================================================= */ 
.header {
    box-shadow: 1px 0 8px grey;
    padding: .2em 1em;
    z-index: 60; 
    background: #fff;
    position: sticky;
    top: 0;
}
.header .identity-container {
    display: flex; 
    align-items: center;
    overflow: hidden; 
}
@media screen and (max-width: 420px) {
    .header .identity-container span {
        font-size: .65em;
    }
}
.header .heading1 {
    font-size: 1.6em; 
    display: flex;
    align-items: center;
}
.header .heading1 .header-logo {
    border-radius: 16px;
    margin: 0; 
    transform: scale(1.2);
}

.header #btn-open-floating-menu {
    z-index: 2000; 
}





.footer {
    padding: 1em; 
    color: #fff; 
    background-color: var(--main-color); 
}
.footer * {
    color: #fff; 
}






/** Switcher style : : */
.header #switch-displayed-content {
    position: relative;
    display: flex;
    align-items: center;
    margin-left: 2em;
}
.header #switch-displayed-content:hover {
    background-color: transparent;
}
.header #switch-displayed-content .switcher-background {
    width: 54px;
    height: 32px;
    background-color: #d5d5d5;
    border-radius: 100px;
    position: absolute;
    box-shadow: inset 1px 1px 12px #adadad;
}

.header #switch-displayed-content .switcher-top {
    height: 26px;
    width: 26px;
    background-color: #f5f5f5;
    border-radius: 100px;
    position: absolute;
    justify-self: flex-end;
    margin-left: 3px; 
    transition: all linear 120ms; 
    box-shadow: 1px 1px 2px #bdbdbd;
}
.header #switch-displayed-content .switcher-top.active {
    transform: translateX(22px);
    background-color: #6c6c6c;
}

























/** Layout */
.page {
    width: 95%; 
    max-width: 1200px; 
    margin: 1em auto auto auto; 
}
















/** Formulaire de connexion */ 
.form-page {
    margin: auto; 
    max-width: 800px;
}
.form-page .heading2 {
    text-align: center;
}
.form-page #form {
    /* padding: 1em;  */
    /* display: flex; */
    /* flex-direction: column; */
    max-width: 800px;
    margin: auto;
}

.form-page #form input {
    margin-bottom: 14px;
}

.form-page #form input{
    padding: 1.2em 2em; 
    border-radius: 4px; 
    /* position: relative; */
    top: 12px;
    border-color: #80808057; 
    border-width: 1px;
    border-style: solid; 
    background-color: #fff; 
    box-shadow: 0px 0px 0px grey;
    transition: all ease-in-out 120ms;
}
.form-page #form input:focus {
    outline: none; 
    border-color: transparent; 
    box-shadow: 2px 2px 8px gray; 
}
.form-page #form #submit {
    color: #fff; 
    font-weight: bold;
    background-color: var(--main-color) !important; 
    border: none; 
    padding: 1.2em 2em 1.2em 2em;
    border-radius: 4px; 
    box-shadow: 0 0 0 gray; 
    transition: all ease 280ms;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.form-page #form #submit:hover {
    cursor: pointer;
    /* box-shadow: 1px 1px 8px gray; */
}

.form-page #form select {
    width: 100%;
    border: solid #80808057 1px;
    padding: 1em;
    margin-bottom: 2em;
}


.form-page #switch-login-method {
    cursor: pointer;
    text-decoration: underline;
    max-width: 800px;
    margin: auto;
    padding: 0 1em;
    font-weight: bold;
    font-style: italic;
    opacity: .6;
    display: block;
    transition: all ease 180ms;
}
.form-page #switch-login-method:hover {
    opacity: 1;
}




.form-page .warning-block {
    margin-bottom: 2em;
    /* font-size: 1.25rem; */
    line-height: 1.5;

}

.form-page .heading {
    font-size: 1.4rem;
    margin-bottom: 2em;
    text-align: center;
}

.form-page .heading + p {
    font-size: 1.25rem;
}

.form-page .domain-container {
    font-style: normal;
    position: relative; 
    /* font-weight: 700; */
    /* text-decoration: underline; */
    /* border-bottom: solid 5px #e2001a21; */
}
.form-page .domain-container::after {
    content: '';
    display: inline-block;
    height: 9px;
    width: 100%;
    background-color: #e2001a21;
    position: absolute;
    left: 0;
    bottom: -2px;
}
.form-page .acceptation {
    font-style: italic;
    margin:2em 0 1em 0;
}

.form-page .legal-notice {
    font-size: .75em;
    background-color: var(--light-gray);
    color: var(--text);
    margin-top: 4em;
    margin-bottom: 2em;
    padding: 1em;
    border-radius: 8px;
    font-style: italic;
    box-shadow: 1px 1px 2px #00000033;
}








.top-part-container {
    display: flex; 
    flex-wrap: wrap;
}
#offline-status-container, .guide-container {
    width: 100%; 
}
@media screen and (max-width: 799px) {
    #offline-status-container, .guide-container {
        width: 100%; 
    }
}
#offline-status-container {
    min-height: 44px; 
}
.guide-container {
    padding: 1em; 
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #e7e7e7b5; 
    border-radius: 4px;
    opacity: 0; 
    transition: opacity ease 520ms;
    background-image: url('../../instance_assets/images/sommaire/motif.png'); 
    background-repeat: repeat-y;
    background-position: right;
    background-size: 280px;
}

.guide-container .links-container {
    display: flex;
    align-items: flex-start;

}
.guide-container .links-container:hover img {
    opacity: 1;
}
.guide-container .links-container img {
    opacity: .4;
    transition: all ease 380ms; 
}
.guide-container .links-container a {
    display: block;
    width: 100%; 
    padding: .2em 1em; 
    margin: .6em; 
    border-radius: 4px 4px 16px 4px;
    box-shadow: 1px 1px 4px #b7b7b7;
    transition: all ease-in 120ms;
    background: #fff; 
}
.guide-container .btn-notice{
    padding-left: 12px;
    font-size: 1.2em;
    display: flex;
    align-items: center;
}


.content-container {
    display: flex;
    flex-wrap: wrap;
}



/* Alternative layout for .guide-container */
.guide-container.line-disposition {
    width: 95%;
    max-width: 1200px;
    margin: 1em auto auto auto;
}
.guide-container.line-disposition .links-container {
    align-items: flex-start;
}

.guide-container.line-disposition .links-container img {
    max-height: 32px;
    width: auto; 
    position: relative;
    top: 8px;
}

.guide-container.line-disposition .links-list {
    display: flex; 
    flex-wrap: wrap; 
}
.guide-container.line-disposition .links-list a {
    background-color: #fff;
}



















/* =========================================================================================
 :::::::::::::::::::::::::::::::::::::::: Sommaire :::::::::::::::::::::::::::::::::::::::: 
========================================================================================= */ 
.page-sommaire .heading2 {
    /* color: var(--main-color);  */
}



.page-sommaire #filter-string {
    margin: auto;
    display: block;
    max-width: 540px;
    padding: 1em 2em;
    border-radius: 100px;
    border: solid 1px gray;
    margin-top: 4em;
    margin-bottom: 4em;
}
.page-sommaire #filter-string:focus {
    border-color: transparent; 
    outline: none; 
    box-shadow: 1px 1px 6px rgba(0,0,0,.4); 
}

.highlight-filter {
    /* color: var(--main-color);  */
    /* font-weight: bold; */
    background-color: #fffc97;
}


.page-sommaire .block-container {
    margin: auto; 
}
.page-sommaire .block-container .block-title {
    font-weight: bold; 
    font-style: italic; 
    /* color: var(--main-color);  */
    font-size: 1.8em; 
    border-bottom: solid 12px #cfcfcf63; 
    padding-left: .5em;
    margin-top: 1em; 
    border-radius: 8px;
}
.page-sommaire .block-container .links-list {
    padding-left: 2em; 
    /* font-weight: bold; */
}
@media screen and (max-width: 340px) {
    .page-sommaire .block-container .links-list{
        padding-left: 0;
    }
}
.page-sommaire .block-container .links-list ul {
    list-style-type: none;
}

/* TEMPLATE LIST */
.page-sommaire .block-container.template-list .links-list ul {
    display: flex; 
    flex-wrap: wrap;
}
.page-sommaire .block-container.template-list .links-list ul a {
    width: 100%; 
    /* min-width: 350px; */
}

.page-sommaire .block-container.template-list .links-list ul a li {
    padding: .4em; 
    /* display: flex; */
    /* align-items: center; */
    border-top: solid 1px rgba(0,0,0,.15); 
    transition: all ease-in-out 240ms;
}
.page-sommaire .block-container.template-list .links-list ul a li::before {
    content: '';
    background-image: url(../images/puce.svg);
    background-size: 12px;
    font-style: normal;
    margin-right: 1em;
    font-size: 1.125em;
    display: inline-block;
    width: 14px;
    height: 21px;
    text-decoration: none;
    background-repeat: no-repeat;
    background-position: center;
    position: relative; 
    top: 4px; 
}
.page-sommaire .block-container.template-list .links-list ul a li:hover {
    border-bottom-color: transparent; 
    border-radius: 4px; 
    box-shadow: 1px 1px 8px rgba(0,0,0,.3);
    color: var(--main-color); 
}


/* GRID LIST */
.page-sommaire .block-container.template-grid .links-list ul {
    display: flex; 
    flex-wrap: wrap;
}
.page-sommaire .block-container.template-grid .links-list ul a {
    margin: 6px; 
    width: calc(25% - 12px);
}
.page-sommaire .block-container.template-grid .links-list ul a li {
    padding: 1em; 
    border: solid 1px rgba(0,0,0,.2); 
    transition: all ease-in-out 240ms;
    height: 108px; 
    display: flex; 
    align-items: center;
    border-radius: 8px; ;
}
.page-sommaire .block-container.template-grid .links-list ul a li:hover {
    border-color: transparent; 
    box-shadow: 1px 1px 8px rgba(0,0,0,.3);
    color: var(--main-color); 
}


@media screen and (max-width: 900px) {
    .page-sommaire .block-container.template-grid .links-list ul a {
        width: calc(33% - 12px);
    }
}
@media screen and (max-width: 640px) {
    .page-sommaire .block-container.template-grid .links-list ul a {
        width: calc(50% - 12px);
    }
}
@media screen and (max-width: 420px) {
    .page-sommaire .block-container.template-grid .links-list ul a {
        width: calc(100% - 12px);
    }
}
@media screen and (max-width: 360px) {
    .page-sommaire .block-container.template-grid .links-list ul a {
        width: calc(100% - 12px);
    }
}







.page-sommaire .news-box {
    display: flex; 
    align-items: center;
    border-radius: 4px; 
    overflow: hidden;
    box-shadow: 1px 1px 2px #4e4e4e;
    margin: 1em 0;
    transition: all ease-in 240ms;
    height: 160px;
    background: #3a4364;
    color: white;
}


.page-sommaire .news-box .img-part {
    height: 160px;
}

.page-sommaire .news-box img {
    width: 200px; 
    height: 100%; 
    object-fit: cover;
    align-self: flex-start;
    border-radius: 4px;
}

.news-box:hover #icon-notification {
    animation: glingling 220ms ease both infinite;
}

.page-sommaire .news-box .text-part {
    padding: 1em;
}

.page-sommaire .news-box p {
    margin: 6px; 
}
.page-sommaire .news-box p a {
    color: #cfcfcf; 
    text-decoration: underline;
    font-style: italic;
}

.page-sommaire .news-box p a svg {
    position: relative;
    top: 2px;
}

.page-sommaire .news-box .news-box__close {
    color: currentColor; 
    margin: 4px; 
    margin-left: auto;
    align-self: flex-start; 
    opacity:.5; 
    cursor: pointer; 
    transition: all ease-in 120ms;
}
.page-sommaire .news-box .news-box__close:hover {
    opacity: 1;
    background-color: transparent;
}

@media screen and (max-width:530px) {
    .page-sommaire .news-box {
        flex-direction: column; 
        height: auto; 
    }
    .page-sommaire .news-box .img-part {
        width: 100%;
    }
    .page-sommaire .news-box img {
        width: 100%;
        height: 100%;
    }
}




.page-sommaire .bottom-content-container {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    margin-top: 6em;
}

.page-sommaire .twitter-feed {
    width: calc(50% - 8px); 
    margin: 1em 0; 
    border-radius: 16px;
    background-color: #3a4364;
    color: #fff; 
    padding: 1em;
}
.twitter-feed .twitter-timeline + a  {
    color: #fff;
}
.twitter-feed .twitter-timeline iframe {
    max-width: 100%; 
}

.page-sommaire .twitter-feed .heading3, .page-sommaire .alter-links .heading3 {
    /* color: var(--main-color);  */
    margin-bottom: 1em; 
    font-size: 1.6em;
    line-height: 1.1;
}

.alter-links {
    width: calc(50% - 8px); 
    margin-top: 1em; 
}
.alter-links .alter-links__item {
    height: 200px; 
    background: linear-gradient(45deg, #dddddd, transparent);
    display: flex;
    justify-content: center;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden; 
    transition: all ease-in 120ms;
}
.alter-links .item__background, .alter-links .item__content {
    position: absolute; 
}
.alter-links .item__background {
    width: 100%; 
}
.alter-links .item__content {
    text-align: center;
    background-color: #ffffffb5;
    border-radius: 8px;
    padding: 2em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 2px 2px 4px #20202021;
}

.alter-links .item__content img {
    width: 52px; 
}


.alter-links .item__background img {
    opacity: .75;
    filter: blur(1px); 
}

.alter-links .alter-links__item:hover img {
    transform: scale(1.05); 
    filter:blur(0); 
}

.alter-links .alter-links__item img {
    transition: all ease-in 240ms;
}

.alter-links .item__background img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

.alter-links .alter-links__item p {
    font-weight: 900; 
    font-size: 1.2em; 
    font-style: italic;
}

.alter-links .item__content img {
    /* filter: drop-shadow(2px 2px 4px rgba(0,0,0,.4));  */
}


@media screen and (max-width: 600px) {
    .page-sommaire .twitter-feed {
        width: 100%; 
    }
    .alter-links {
        width: 100%; 
        margin-top: 3em; 
    }
}











/** Page Liseuse */ 
.page-liseuse {
    margin: 0 auto auto auto; 
}

.navigation-menu .button-container {
    display: flex;
    position: sticky; 
    top: 16px;
}
.navigation-menu .button-container button {
    margin-left: auto; 
    line-height: 0;
}
.navigation-menu .navigation-menu__content {
    position: fixed;
    width: 700px; 
    height: 100vh;
    top: 0; 
    right: 0; 
    z-index: 1000; 
    background-color: #fff; 
    padding: 1em; 
    padding-bottom: 0; 
    overflow-x: hidden;
    overflow-y: auto; 
    box-shadow: -1px 1px 8px rgba(0,0,0,.2); 
    transition: all ease-in-out 320ms;
}

.navigation-menu.navigation-menu--closed .navigation-menu__content {
    transform: translateX(700px);
}

@media screen and (max-width: 720px) {
    .navigation-menu .navigation-menu__content {
        width: 90%; 
    }
    .navigation-menu.navigation-menu--closed .navigation-menu__content {
        transform: translateX(100%);
    }
}


.navigation-menu .navigation-menu__fullscreen-bg {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0,0,0,.7);
    z-index: 300;
    opacity: 1;
    transition: all ease-in-out 320ms; 
}
.navigation-menu.navigation-menu--closed .navigation-menu__fullscreen-bg {
    display: none; 
}



.navigation-menu .guide-link_in-sommaire {
    display: inline-block;
    margin-top: 2em; 
    border-radius: 120px;
    border: solid 1px #00000070; 
    padding: 12px 24px;
    z-index: 1;
    position: relative;
}







.offline-infos {
    background-color: #f6f6f6; 
    padding: 1em; 
    border-radius: 6px; 
    animation:420ms smooth-display both;
    transform-origin: top;
    height: 100%;
}

@keyframes smooth-display {
    from {
        opacity: 0; 
        /* transform: scaleY(0); */
        max-height: 0;
        padding: 0 1em; 

    }
    to {
        opacity: 1; 
        /* transform: scaleY(1); */
        max-height: auto;
        padding: 1em 1em; 
    }
}

.offline-infos * {
    margin: 6px; 
}

.offline-infos #download-offline-button {
    padding: 1em 2em;
    width: 320px; 
    max-width: 100%;
    font-weight: bold;
    position: relative; 
    overflow: hidden;
}
.offline-infos #download-offline-button:hover {
    box-shadow: 2px 2px 4px #c1c1c1;
}

.offline-infos #download-offline-button:disabled:hover {
    box-shadow: 0 0 0 transparent;
}




.bouncing-dots .dot {
    animation: 840ms bouncing ease-in-out infinite both; 
    display: inline-block;
    background-color: #222; 
    color: #222; 
    width: 8px; 
    height: 8px; 
    border-radius: 120px; ;
}
.bouncing-dots .dot--1 {
    animation-delay: 0ms; 
}
.bouncing-dots .dot--2 {
    animation-delay: 210ms; 
}
.bouncing-dots .dot--3 {
    animation-delay: 420ms; 
}
@keyframes bouncing {
    0% {
        transform: translateY(0); 
    }
    50% {
        transform: translateY(8px);
    }
    0% {
        transform: translateY(0); 
    }
}











/* Page livre */
#loading-loader .loader-icon {
    animation: rotation 1500ms ease-in-out infinite;
}





/** Ressources */
.feedback-message {
    background-color: #f1f1f1; 
    color: #676767; 
    padding: 1em;
}
.feedback-message--success {
    background-color: #c5f7dd; 
    color: #3bc279; 
    border-left: solid 8px #3bc279; 
    padding: 1em; 
}
.feedback-message--success a {
    color: #3bc279; 
}

.feedback-message--error {
    background-color: #ffd0cb; 
    color: #e9594c; 
    padding: 1em; 
    border-left: solid 8px #e9594c; 
}
.feedback-message--error a {
    color: #e9594c;
}
.feedback-message--info {
    background-color: #cce3ff; 
    color: #3f86e6; 
    padding: 1em; 
    border-left: solid 8px #3f86e6; 
}
.feedback-message--info a {
    color: #3f86e6;
}


.italic {
    font-style: italic; 
}
.fw-bold {
    font-weight: bold; 
}
.fw-normal {
    font-weight: normal; 
}






































/* ============================================================================
                                    CUSTOM SUAP 
  ============================================================================ */

:root {
    --color-prompt-secours: #49abc8; 
    --color-chef-dagres: #f0a961;
    --color-equipier-vsav: #69b97d; 
    --color-approfondissement: #d5cb69; 
}


@font-face {
    font-family: "Heading Pro Trial"; 
    src: url('../../instance_content/html/ressources/webfonts/Heading-Pro-Regular-trial.woff') format('woff'), 
            url('../../instance_content/html/ressources/webfonts/Heading-Pro-Regular-trial.ttf') format('ttf'); 

}

.suap-font {
    font-family: "Heading Pro Trial", 'Impact', sans-serif; 
}





.prompt-secours-bg {
    background-color: var(--color-prompt-secours);
}
.chef-dagres-bg {
    /* background-color: var(--color-chef-dagres);   */
}
.equipier-vsav-bg {
    /* background-color: var(--color-equipier-vsav);   */
}
.approfondissement-bg {
    background-color: var(--color-approfondissement);
}

.books-presentations {
    display: flex; 
    flex-wrap: wrap;
    margin-bottom: 4em;
}
.books-presentations.custom-documents {
    background-color: #f8f8f8; 
    border-radius: 6px;
}
.books-presentations .single-book {
    margin: 16px; 
    padding: 12px;
    width: 120px; 
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px 4px 16px 4px;
    box-shadow: 1px 1px 4px #b7b7b7; 
    transition: all ease-in 120ms; 
    position: relative;
    overflow: hidden;
    width: 36vw;
    height: 54vw;
    max-width: 160px; 
    max-height: 240px;
}

.books-presentations .single-book:hover {
    transform: scale(1.035);
    box-shadow: 6px 6px 28px #e1e1e1;
    z-index: 10;
}
.books-presentations .main-book {
    background-color: #ececec;
    background-size: cover; 
}
.books-presentations .main-book.suap-theorie {
    background-image: url('../../instance_assets/images/sommaire/couv-1.jpg');
}
.books-presentations .main-book.suap-pratique {
    background-image: url('../../instance_assets/images/sommaire/couv-2.jpg');
}
.books-presentations h3 {
    z-index:1; 
}

a.single-book.sliding-bg::after {
    content: '';
    align-self: flex-start;
    position: absolute;
    margin: 0;
    z-index: 0;
    background-color: #f6f6f6;
    width: 100%;
    height: 42px;
    bottom: 0;
    left: 0;
    transition: all ease 640ms;
}
a.single-book.sliding-bg:hover::after {
    height: 100%;
}

a.single-book.chef-dagres-bg::after {
    background-color: var(--color-chef-dagres);
}
a.single-book.equipier-vsav-bg::after {
    background-color: var(--color-equipier-vsav);
}




.custom-documents .single-book {
    flex-direction: column; 
    align-items: flex-start;
    justify-content: flex-start;
    height: auto; 
    border-radius: 4px;
    max-height: 1000px;
    box-shadow: 0 0 0 #00000000; 
    background-color: #fff;
    margin: 16px 8px; 
    max-width: 180px;
    /* width: 200px;  */
    /* height: 300px;  */
    aspect-ratio: .6666;
}
.custom-documents .image {
    width: 100%;
    height: 100%; 
    border-radius: 8px;
    box-shadow: 1px 1px 4px #00000035;
    margin-bottom: 12px;
    object-fit: cover;
}
.custom-documents h3 {
    font-size: 1em; 
    text-align: left; 
    font-weight: normal;
}





















/* ===========================================================================
............................. PAGE INSTALLATION .............................
=========================================================================== */


.page-installation section {
    margin-bottom: 10em; 
}

.page-installation .top-card__container {
    border-radius: 12px; 
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.2);
    transition: all ease 120ms; 
}
.page-installation .top-card__container .heading1, 
.page-installation .top-card__container .features-container, 
.page-installation .top-card__container .install-btn, 
.page-installation .top-card__container .available-devices {
    padding: 1.2em; 
}
.page-installation .top-card__container .heading1 {
    text-align: center;
    font-style: italic;
}



.page-installation .top-card__container .available-devices {
    border-top: solid 2px #e0e0e0; 
}


.page-installation .install-btn {
    height: 212px;
}
.page-installation .install-btn button, .page-installation .install-btn a {
    display: block; 
    width: 40%; 
    height: 52px;
    margin: .4em auto; 
    padding: 6px;
    min-width: 320px;
    text-align: center;
    border-radius: 4px;
    font-size: 1.2em; 
    display: flex; 
    align-items: center;
    justify-content: center;
    transition: none; 
}
@media screen and (max-width: 600px) {
    .page-installation .install-btn button, .page-installation .install-btn a {
        width: 100%; 
        min-width: 0;
    }
}
.page-installation .install-btn button#installation-button {
    background-color: var(--main-color);
    color: #fff; 
    font-weight: bold;
}
.page-installation .install-btn a#add-button {
    border: solid 2px var(--main-color); 
    font-weight: bold;
}
.page-installation .install-btn a#more-infos-link {
    border: solid 1px #cdcdcd; 
    color: #a1a1a1; 
    font-style: italic;
}

.page-installation .install-btn > *:active {
    opacity: .7;
    transform: translateY(2px); 
}








.page-installation .available-devices {
    font-style: italic;
    /* font-weight: bold; */
    font-size: 1.2em; 
}
.page-installation .available-devices p {
    margin-bottom: .6em;
}
.page-installation .available-devices .images-container {
    display: flex;
    align-items: center;
}
.page-installation .available-devices img + img {
    margin-left: 1.6em; 
}
@media screen and (max-width: 600px) {
    .page-installation .available-devices .images-container {
        flex-direction: column; 
        align-items: flex-start;
    }
    .page-installation .available-devices img + img {
        margin-left: 0;
        margin-top: .6em; 
    }
}







.page-installation .steps-device {
    padding: 2em; 
    margin: 1.2em 0; 
    border-radius: 12px; 
    border-bottom: solid #f6f6f6; 
    border-radius: 0; 
    opacity: .8;
    transition: opacity ease 240ms; 
}
@media screen and (max-width: 600px) {
    .page-installation .steps-device {
        padding: 2px;
    }
}
.page-installation .steps-device:hover {
    opacity: 1; 
}
.page-installation .steps-device img {
    max-width: 100%;
}

.page-installation .steps-device.main-system {
    background-color: #f6f6f6;
    border-radius: 12px;
    border: none; 
    font-size: 1.2em;
    margin-bottom: 6em; 
}
.page-installation .steps-device.main-system::after {
    content: '';
    width: 100%;
    height: 12px;
    background-color: #ececec;
    margin-top: 70px;
    display: block;
    border-radius: 0 0 6px 6px;
}
.page-installation .steps-device ol {
    margin-left: 2em; 
}
.page-installation .steps-device li {
    font-size: 1em; 
    margin-bottom: 18px;
    list-style-type: none;
    /* padding-left: 8px; */
    text-indent: -26px;
    counter-increment: item;
}
.page-installation .steps-device.main-system li {
    text-indent: -32px;
}
.page-installation .steps-device li:before {
    display: inline-block;
    width: 1.2em;
    padding-right: 0.5em;
    font-weight: bold;
    text-align: right;
    content: counter(item) " | ";
}


@media screen and (max-width: 600px) {
    .page-installation .steps-device li {
        padding-left: 0;
        margin-left: 0; 
    }
}




.page-installation .more-infos .heading2 {
    font-weight: 300;
    font-size: 2.1em;
    color: #5c5c5c; 
}

.page-installation .more-infos .more-infos__container {
    background-color: #f6f6f6;
    padding: 2em; 
    border-radius: 12px; 
}
@media screen and (max-width: 600px) {
    .page-installation .more-infos .more-infos__container {
        padding: 6px; 
    }
}

.page-installation .more-infos .more-infos__container .heading3 {
    font-weight: 500;
    border-bottom: solid #e7e7e7 2px;
    padding-bottom: 1.2em; 
    margin-bottom: 1.2em; 
}

.page-installation .more-infos .more-infos__container p {
    margin-bottom: .6em; 
}















/** Enhanced viewport opening **/
#ouverture-edito {
    height: 40vh;
    flex-direction: column;
    justify-content: space-evenly;
    padding-top: 40vh;
}
#ouverture-edito::after {
    content: '';
    display: block;
    background-image: url(https://static.thenounproject.com/png/512238-200.png);
    width: 59px;
    height: 103px;
    background-size: contain;
    background-repeat: no-repeat;
    /* margin-left: auto; */
    margin-top: auto;
    animation: 1000ms bouncing ease infinite both;
}























/**  ====================================================
 PAGE d'AIDE 
 ==================================================== */

.page-help .utilisation-guide__container {
    margin: 2em 0; 
}

.page-help .button-link {
    border: none;
    margin-top: 1em;
    color: var(--text);
    font-weight: normal;
    display: flex;
    font-size: 18px;
    background: var(--light-gray);
    padding: 1em 2em;
    width: 100%;
    text-align: center;
    border-radius: 4px;
    box-shadow: 2px 2px 4px #7676768f;
}

.page-help .separator {
    width: 60%; 
    margin: auto; 
    border-bottom: solid 1px #00000070; 
    margin-top: 4em; 
    margin-bottom: 4em; 
}







.page .card-message {
    padding: 2em; 
    border-radius: 8px;
    box-shadow: 2px 2px 8px #00000040;
}