body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
background:#f4ecf7;
}

header {
background-color: #fff;
color: #000;
padding: 1rem;
text-align: left;
font-size: 10px;
}


nav ul {
background-color:#0ecacb;
list-style: none;
padding: 1rem;
font-size: 10px;
padding-bottom:-150px;
padding-top:-40px;
overflow:hidden; 
position:fix; 
top:0;
}

nav ul li {
display: inline;
margin: 5 10rem; 
font-size: 10px;
width: 200px;

}

nav ul li a {
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 3px;
margin: 5 5rem; 
}

#searchInput{ 
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px 0 0 4px;
font-size: 16px;
width: 200px;
margin-left:1000px;
margin-top:-220px;
}


.dropdown { 
position: flex;
display: inline-block;
display: inline;
margin: 20 5rem; 
font-size: 20px;
width: 100px;
padding: 20px;
margin-right:30px;
margin-left:130px; 
}

.dropbtn {
color: white;
background-color:#0ECACB;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
border-radius: 4px;
}

.dropbtn:hover, .dropbtn:focus {
background-color: transparent;
}

.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 4px;
margin-left:720px;
margin-top:-40px;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {
background-color: #f1f1f1;
border-radius: 4px;
}

.submenu-trigger {
position: relative;
}

.submenu {
display: none;
position: absolute;
left: 100%;
top: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
border-radius: 4px;
}

.submenu a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.submenu a:hover {
background-color: #f1f1f1;
border-radius: 4px;
}

.show {
display: block;
}
 
div.lang {
	color: grey;
    float: left;
    font-size: 16px;
    margin-left: 20px;
    margin-top: -21px;
    padding-top: 23px;
}


h2 {
color: #333;
margin-bottom: 10px;
}

p {
color: #555;
line-height: 1.6;
margin-bottom: 10px;
}

footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 0,5rem;
position: fixed;
width: 100%;
bottom: 0;
}

#openPopupBtn { 
padding: 50px 100px;
font-size: 16px;
background-color: #0ECACB;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}

#openPopupBtn:hover {
background-color: #0ECACB;
}

.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}

.popup-content {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
position: relative;
width: 80%;
max-width: 500px;
}

.close-btn {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
cursor: pointer;
color: #aaa;
}

.close-btn:hover {
color: #000;
}

.carousel { 
position: flex;
width: 400px;
overflow: hidden;
border: 20px; solid #ccc;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
float: right;
margin-right: 200px;
margin-top:25px;
margin-bottom:150px;
}

.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
display: flex; 
transition: transform 0.5s ease; 
width: 100%; 
overflow: hidden;
}

.carousel-item {
min-width: 100%;
box-sizing: border-box;
width: 100%;
overflow: hidden;
}

.carousel-item img {
width: 100%; 
height: auto;
display: block;
flex: 0 0 100%;
}

.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 20px;
cursor: pointer;
}

.carousel-control.prev {
left: 10px;
}

.carousel-control.next {
right: 10px;
}

nav ul.main-menu { 
list-style: none;
padding: 0;
display: flex;
justify-content: center;
width:20px;
}

nav ul.main-menu li {
position: relative;
margin: 0 1rem;
}

nav ul.main-menu li a {
color: #fff;
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}

nav ul.main-menu li a:hover {
background-color: #555;
}

nav ul.main-menu li.has-submenu:hover .submenu { 
display: block;
}

nav ul.submenu {
list-style: none;
padding: 0;
position: absolute;
top: 100%;
left: 0;
background-color: #444;
display: none;
min-width: 150px;
}

nav ul.submenu li {
width: 100%;
}

nav ul.submenu li a {
padding: 0.5rem 1rem;
color: #fff;
text-decoration: none;
display: block;
}

nav ul.submenu li a:hover {
background-color: #555;
}


element.style {
}
.page-genetique .liste-romans ul li a, .page-edition .liste-romans ul li a { 
display: block;
padding: 5px;
width: 100%;
cursor: pointer;
color: inherit;
transition: all .25s ease 0s;
box-shadow: 0 0px 0px 0 #ddf7d4 inset;
}
a, a:active {
text-decoration: none;
color: #636b6f;
}
*, * * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}

li {
text-align: -webkit-match-parent;
}
.liste-romans ul, .page-edition { 
list-style: none;
padding: 0;
margin: 0;
}

ul ul {
list-style-type: circle;
}

ul {
list-style-type: disc;
}

ul {
list-style-type: disc;
}
.liste-romans, .page-edition .liste-romans { 
width: 80%;
margin-left: 20%;
text-align: left;
height: 50vh;
height: 50%;
overflow: auto;
}
.pave-gauche { 
float: left;
left: 0;
text-align: right;
padding-right: 80px;
padding-top: 200px;
margin-top: 20 px; 
}

.pave-droite { 
float: right;
left: 0;
text-align: justify;
padding-right: 80px;
padding-top: 200px;
margin-top: 50 px;
}

.text-block{
float: right;
left: 0;
text-align: justify;
padding-right: 80px;
padding-top: 200px;
margin-top: 50 px; 
}

.texte-introduction{ 
tex align: right;
}

.carousel-inner {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
}

.wrapped-image { 
float: left;
margin-right: 20px;
margin-bottom: 20px;
max-width: 100%;
height: auto;
}

.carousel-item active{
float: left;
margin-right: 20px;
margin-bottom: 20px;
max-width: 100%;
height: auto;
}

.container { 
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
background-color: #fff;
padding: 20px;
border-radius: 8px;6
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
text-align: center;
margin-right:5px;
padding-right:5px;
padding-left:5px;
}

label {
grid-column: 1 / 3;
margin-bottom: 10px;
font-size: 1.2em;
color: #333;
text-align: left;
}

textarea {
grid-column: 2 / 3;
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
}

textarea:focus {
border-color: #a2d9ce;
outline: none;
}

.container {
display: flex;
justify-content: space-between; 
align-items: center; 
background-color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 700px;
}

.item {
background-color: #73abcb;
color: white;
padding: 20px;
border-radius: 4px;
text-align: center;
flex: 1; 
margin: 5px;
}

.item1 {
background-color: #white;
}

.item2 {
background-color: #white;
color: white;
}

.item3 {
background-color: #white;
}

.scroll-content {
text-align: left;
}

.scroll-content h2 {
margin-top: 0;
font-size: 1.5em;
color: #333;
}

.scroll-content p {
font-size: 1em;
color: #666;
line-height: 1.6;
margin-bottom: 15px;
}

a:href{ 
color: #0E82A7;
font-weight: normal;
text-decoration: underline;
}

 
.gallery-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 20px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 1200px;
}

.thumbnail {
position: relative;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
cursor: pointer;
}

.thumbnail img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
transition: transform 0.3s ease;
}

.thumbnail img:hover {
transform: scale(1.1);
}

.caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: white;
text-align: center;
padding: 10px;
opacity: 0;
transition: opacity 0.3s ease;
}

.thumbnail:hover .caption {
opacity: 1;
}

.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
justify-content: center;
align-items: center;
}

.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
border-radius: 8px;
}

.modal-caption {
margin-top: 10px;
text-align: center;
color: white;
font-size: 1.2em;
}

.close {
position: absolute;
top: 15px;
right: 35px;
color: white;
font-size: 40px;
font-weight: bold;
cursor: pointer;
}

.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}

.transcription-container { 
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 800px;
text-align: center;
}

h1 {
font-size: 2em;
color: #333;
margin-bottom: 20px;
margin-top: 10px;
}

h5{
 font-size:2em;
 margin-top: 2px;
}

.audio-controls {
margin-bottom: 20px;
}

audio { 
width: 100%;
margin-bottom: 10px;
}

button {
padding: 10px 20px;
margin: 5px;
border: none;
border-radius: 4px;
background-color: #007BFF;
color: white;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}

button:hover {
background-color: #0056b3;
}

textarea {
width: 100%;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
font-family: inherit;
resize: vertical;
box-sizing: border-box;
margin-bottom: 20px;
}

textarea:focus {
border-color: #007BFF;
outline: none;
}

.transcription-container { 
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 800px;
text-align: center;
}

h1 {
font-size: 2em;
color: #333;
margin-bottom: 20px;
margin-top: 2px;
}

.transcription-content {
text-align: left;
font-size: 1em;
color: #666;
line-height: 1.6;
}

.transcription-content p {
margin-bottom: 15px;
}

.transcription-content p:first-of-type {
margin-top: 0;
}

.book-container {
position: relative;
width: 80%;
max-width: 800px;
height: 90vh;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
margin-left: 220px;
}

.page {
position: absolute;
width: 50%;
height: 100%;
padding: 20px;
box-sizing: border-box;
transition: transform 0.5s ease-in-out;
}

.page h2 {
margin-top: 0;
font-size: 1.5em;
color: #333;
text-align: center;
}

.page p {
font-size: 1em;
color: #666;
line-height: 1.6;
text-align: justify;
}

.navigation {
position: absolute;
bottom: 20px;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 20px;
}

.navigation button {
padding: 10px 20px;
border: none;
border-radius: 4px;
background-color: #007BFF;
color: white;
font-size: 1em;
cursor: pointer;
transition: background-color 0.3s ease;
}

.navigation button:hover {
background-color: #0056b3;
}


.zoomable-image {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}

.image-container:hover .zoomable-image {
transform: scale(1.5); 
transform-origin: center;
}


.timeline {
position: relative;
max-width: 600px;
margin: 20px auto;
padding: 20px 0;
}

.timeline::before {
content: '';
position: absolute;
width: 4px;
background-color: #007BFF;
top: 0;
bottom: 0;
left: 50%;
margin-left: -2px;
}

.event {
position: relative;
margin-bottom: 40px;
padding-left: 40px;
clear: both;
}

.event-content {
background-color: #f5f5f5;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.event-date {
position: absolute;
left: 0;
top: 15px;
width: 100px;
text-align: right;
font-size: 14px;
color: #999;
}

.event::before {
content: '';
position: absolute;
width: 12px;
height: 12px;
border-radius: 50%;
left: 38px;
top: 15px;
z-index: 1;
}


.thumbnail-container {
padding: 10px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.thumbnail-image {
display: block;
width: 150px; /* Adjust the width as needed */
height: auto;
border-radius: 4px;
float: left; 
margin: 5px;
}


.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
width: 40%;
max-width: 800px;
}

.gallery-item {
overflow: hidden;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.gallery-image {
width: 10%;
height: auto;
display: block;
transition: transform 0.3s ease;
float: left; 
margin: 5px
}

.gallery-image:hover {
transform: scale(1.1);
}


p {
text-align: justify;
}
*, * * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
unicode-bidi: isolate;
}
.texte-introduction {
float: right;
padding: 10px 0 10px 0px;
text-align: justify;
}
@media (min-width: 600px) {
html, body {
font-size: 13.5px;
}
}

button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

.text-block {
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
text-align: justify;
}

.text-block h2 {
color: #333333;
margin-top: 40px;
}

.text-block p { 
color: #666666;
line-height: 1.6;
margin: 20px 0;
}

.text-block1 { 
float:left;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 650px;
text-align: justify;
margin-top: 5 px;
}

.text-block2 { 
float:right;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 650px;
text-align: justify;
margin-top: 10 px;
}

.text-block3 { 
float:right;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 650px;
text-align: justify;
margin-top: 5 px;
}

.text-block4 { 
float:right;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 800px;
text-align: justify;
margin-left: 900px;
margin-right:40px;
margin-top: -670px;
}

.text-block5 { 
float:right;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 40px;
max-width: 800px;
text-align: justify;
margin-top: -230px; 
margin-bottom:80px;
margin-left: 900px;
margin-right:40px;
}

.text-block6 { 
float:right;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 80px;
max-width: 600px;
text-align: justify;
margin-top: 100 px;
margin-bottom:80px;
margin-left: 900px;
}


.styled-image { 
    width: 200px; 
    height: auto; 
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
    transition: transform 0.3s ease; 
}

.styled-image:hover {
    transform: scale(1.05); 
}

.music-player { 
    background-color: black;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.track-info {
    margin-bottom: 20px;
}

.controls button {
    padding: 5px 5px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    width:5px;
}

.controls button:hover {
    background-color: #0056b3;
}

#audio-player{
    width:110px;
}



.music-player {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.track-info {
    margin-bottom: 20px;
}

.controls button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
}

.controls button:hover {
    background-color: #0056b3;
}

*{
    box-sizing:border-box;   
}
    
    video{
        width:150px;
        margin-right:10px;
        margin-bottom:-13px;
    }
    
    
    
    .noteTxt {
    display: none;  /* Masquer le panneau par défaut */
    margin-top: 20px;
    background-color: #f1f1f1;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
   
    
   .modal {
            display: none;
            position: fixed; 
            z-index: 1; 
            left: 0;
            top: 0;
            width: 100%; 
            height: 100%; 
            overflow: auto; 
            background-color: #a2d9ce; 
            background-color: #a2d9ce; 
        }

       
        .modal-content {
            background-color: white;
            margin: 15% auto; 
            padding: 20px;
            border: 1px solid #888;
            width: 80%; 
        }

        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    
   
    
     .noteTxt {
            display: none;
        }