/*GENERAL *********************/
section[class="presentation"]>div {
    float: left;
    height: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    padding: var(--presentation_padding_left);
    
    --presentation_padding_left:100px;
    --presentation_font_title:30px;
    --presentation_font_resume:calc(var(--presentation_font_title) - 8px);
}             
section[class="presentation"]>div[class="left"]{width:60%;}
section[class="presentation"]>div[class="right"]{width:40%;padding:0px;}


/*TITLE *********************/
section[class="presentation"]>div[class="left"]>h1{
    float: left;
    width: 100%;
    font-family: var(--header_mobile);    
    font-size: var(--presentation_font_title);
    color: var(--color_rosefonce_neomedia);
}
section[class="presentation"]>div[class="left"]>h1>span{
    color: var(--color_bleufonce_neomedia);
}


/*VISUEL *********************/
section[class="presentation"]>div[class="right"]>div[class="deco"]{
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
section[class="presentation"]>div[class="right"]>div[class="deco"]>img{
    position: absolute;
    top:0px;
    left:0px;
    width: 100%;
    height: 100%;
}


/*BOUTON LECTURE *********************/
section[class="presentation"]>div[class="left"]>a[class="read"]{
    position: absolute;
    bottom:calc(var(--presentation_padding_left)/3);
    right:var(--presentation_padding_left);

    font-size: 20px;
    text-decoration: none;
    color:var(--color_grisfonce_neomedia);

    transition-property: color;
    transition-duration:var(--anim_time1);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);

    animation: clignoter 0.9s ease-in-out infinite alternate;
}
section[class="presentation"]>div[class="left"]>a[class="read"]:hover{
    color:var(--color_rosefonce_neomedia);
}
@keyframes clignoter {from { opacity: 0.2; };to{ opacity: 1;};}



/*ZONE DE TEXTE *********************/
section[class="presentation"]>div[class="left"]>div[class="text"],
section[class="presentation"]>div[class="left"]>div[class="text"]>div,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>h2,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>p{float: left;width: 100%; overflow: hidden;}

section[class="presentation"]>div[class="left"]>div[class="text"]>div>ul{float: left;}

section[class="presentation"]>div[class="left"]>div[class="text"]{
    margin-top: calc(var(--presentation_padding_left)/2);
    overflow: auto;
}

section[class="presentation"]>div[class="left"]>div[class="text"]>div>h2,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>ul,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>p{ 
    font-size: var(--presentation_font_resume);
    line-height: calc(var(--presentation_font_resume) + 5px);
    color: black;
    text-align: justify;
}
section[class="presentation"]>div[class="left"]>div[class="text"]>div>p,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>ul{font-family: var(--header_font);}
section[class="presentation"]>div[class="left"]>div[class="text"]>div>h2{font-family: var(--header_mobile);}

section[class="presentation"]>div[class="left"]>div[class="text"]>div>ul+ul,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>ul+p,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>p+ul,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>ul+h2,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>h2+ul,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>h2+p,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>p+h2,
section[class="presentation"]>div[class="left"]>div[class="text"]>div>p+p{
    margin-top: calc(var(--presentation_padding_left)/4);
}



section[class="presentation"]>div[class="left"]>div[class="text"]>div ul {list-style: none;padding-left: 0px;}
section[class="presentation"]>div[class="left"]>div[class="text"]>div ul li {position: relative;padding-left: 40px;}
section[class="presentation"]>div[class="left"]>div[class="text"]>div ul li::before {
  position: absolute;
  left: 15px;
  font-weight: bold;
  color: var(--color_rosefonce_neomedia);
}

section[class="presentation"]>div[class="left"]>div[class="text"]>div ul[class="compteur"] {counter-reset: my-counter;}
section[class="presentation"]>div[class="left"]>div[class="text"]>div ul[class="compteur"] li {counter-increment: my-counter;}
section[class="presentation"]>div[class="left"]>div[class="text"]>div ul[class="compteur"] li::before{content: counter(my-counter) ". ";}

section[class="presentation"]>div[class="left"]>div[class="text"]>div ul[class="valide"] li::before {content: "✓";font-weight: bold;}

section[class="presentation"]>div[class="left"]>div[class="text"]>div ul[class="point"] li::before {
  content: "";
  top: 0.4em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background-color: var(--color_rosefonce_neomedia);
}

section[class="presentation"]>div[class="left"]>div[class="text"]>div ul[class="symbole"] li::before {
  content: "•";
  top: 0;
  font-size: 2.2em;
  line-height: 0.8;
}

section[class="presentation"]>div[class="left"]>div[class="text"]::-webkit-scrollbar {width:0px;}
section[class="presentation"]>div[class="left"]>div[class="text"]::-webkit-scrollbar-thumb {background: #888;border-radius: 5px;}
section[class="presentation"]>div[class="left"]>div[class="text"]::-webkit-scrollbar-thumb:hover {background: #555;}


@media (min-width: 1260px) and (max-width: 1460px) {
    section[class="presentation"]>div {
        --presentation_padding_left:80px;
        --presentation_font_title:28px;
    }
}
@media (min-width: 1060px) and (max-width: 1260px) {
    section[class="presentation"]>div {
        --presentation_padding_left:50px;
        --presentation_font_title:26px;
    }
}
@media (min-width: 860px) and (max-width: 1060px) {
    section[class="presentation"]>div {
        --presentation_padding_left:50px;
        --presentation_font_title:24px;
    }
}
@media (min-width: 730px) and (max-width: 860px) {
    section[class="presentation"]>div {
        --presentation_padding_left:50px;
        --presentation_font_title:22px;
    }
    section[class="presentation"]>div[class="left"]:has(+ div[class="right"]) { width:100%;}
    section[class="presentation"]>div[class="left"] {width: 100%;}
    section[class="presentation"]>div[class="right"] {display: none;}
}
@media (min-width: 580px) and (max-width: 730px) {
    section[class="presentation"]>div {
        --presentation_padding_left:50px;
        --presentation_font_title:20px;
    }
    section[class="presentation"]>div[class="left"]:has(+ div[class="right"]) { width:100%;}
    section[class="presentation"]>div[class="left"] {width: 100%;}
    section[class="presentation"]>div[class="right"] {display: none;}
}
@media (max-width: 580px) {
    section[class="presentation"]>div {
        --presentation_padding_left:30px;
        --presentation_font_title:18px;
    }
    section[class="presentation"]>div[class="left"]:has(+ div[class="right"]) { width:100%;}
    section[class="presentation"]>div[class="left"] {width: 100%;}
    section[class="presentation"]>div[class="right"] {display: none;}
    section[class="presentation"]>div[class="left"]>a[class="read"]{bottom:5px;font-size: 15px;}
    
}