#popup>section[class="contenu"]>h1 {
    float: left;
    margin-top:20px;
    margin-left: 30px;
    width: calc(100% - 30px - 20px - 30px - 10px);
    height: 30px;
    text-align: left;
    
    font-family: var(--header_mobile);
    color: var(--color_bleufonce_neomedia);
    font-size: 18px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
#popup>section[class="contenu"]>div {
    float: left;
    width: calc(100% - 30px - 30px);
    height: calc(100% - 20px - 20px - 30px - 20px);
    margin-top:20px;
    margin-left: 30px;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    scroll-snap-type: none;
}

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



#popup>section[class="contenu"]>div>div {
    float: left;
    width: 100%;
    text-align: justify;
}

#popup h2,
#popup h3,
#popup p,
#popup ul,
#popup div[class="deco"],
#popup div[class="deco"]>img,
#popup div[class="youtube"],
#popup div[class="youtube"]>iframe{
    float: left;
    width: 100%;
    font-family: var(--header_font);
    font-size: 16px;
}

#popup h2{font-family: var(--header_mobile);}
#popup h3{
    color: var(--color_bleufonce_neomedia);
    font-family: var(--header_mobile);
}
#popup div[class="youtube"] {aspect-ratio: 16 / 9;}
#popup div[class="youtube"]>iframe {height: 100%;}


#popup h2 + p,
#popup h3 + p,
#popup h3 + ul,
#popup h3 + div[class="youtube"],
#popup h3 + div[class="deco"],
#popup ul + p,
#popup p + ul,
#popup p + div[class="youtube"],
#popup div[class="youtube"] + p,
#popup p + div[class="deco"],
#popup div[class="deco"] + p,
#popup ul + div[class="youtube"],
#popup div[class="youtube"] + ul,
#popup ul + div[class="deco"],
#popup div[class="deco"] + ul,
#popup div[class="deco"] + div[class="youtube"],
#popup div[class="youtube"] + div[class="deco"],
#popup p + p{margin-top: 20px;}

#popup p + h3,
#popup ul + h3,
#popup div[class="youtube"] + h3,
#popup div[class="deco"] + h3{margin-top: 50px;}

#popup ul {list-style: none;padding-left: 20px;}
#popup ul li {position: relative;padding-left: 40px;}
#popup ul li::before {
  position: absolute;
  left: 20px;
  font-weight: bold;
  color: var(--color_rosefonce_neomedia);
}

#popup ul[class="compteur"] {counter-reset: my-counter;}
#popup ul[class="compteur"] li {counter-increment: my-counter;}
#popup ul[class="compteur"] li::before{content: counter(my-counter) ". ";}

#popup ul[class="valide"] li::before {content: "✓";font-weight: bold;}

#popup ul[class="point"] li::before {
  content: "";
  top: 0.4em;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: var(--color_rosefonce_neomedia);
}

#popup ul[class="symbole"] li::before {
  content: "•";
  top: 0;
  font-size: 2.2em;
  line-height: 0.8;
}



@media (max-width: 580px) {

    #popup>section[class="contenu"]>h1 {font-size: 14px;}
    #popup h2,
    #popup h3,
    #popup p,
    #popup ul,
    #popup div[class="deco"],
    #popup div[class="deco"]>img,
    #popup div[class="youtube"],
    #popup div[class="youtube"]>iframe{font-size: 12px;line-height: 16px;}
    
    #popup h2 + p,
    #popup h3 + p,
    #popup h3 + ul,
    #popup h3 + div[class="youtube"],
    #popup h3 + div[class="deco"],
    #popup ul + p,
    #popup p + ul,
    #popup p + div[class="youtube"],
    #popup div[class="youtube"] + p,
    #popup p + div[class="deco"],
    #popup div[class="deco"] + p,
    #popup ul + div[class="youtube"],
    #popup div[class="youtube"] + ul,
    #popup ul + div[class="deco"],
    #popup div[class="deco"] + ul,
    #popup div[class="deco"] + div[class="youtube"],
    #popup div[class="youtube"] + div[class="deco"],
    #popup p + p{margin-top: 15px;}

    #popup p + h3,
    #popup ul + h3,
    #popup div[class="youtube"] + h3,
    #popup div[class="deco"] + h3{margin-top: 30px;}
    
    #popup ul {padding-left: 5px;}
    #popup ul li {padding-left: 20px;}
    #popup ul li::before {left: 5px;}
}