/* Custom Font Definition */
@font-face {
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* Apply word-wrap to all elements */
* {
    word-wrap: break-word;
}

/* Class for handling long unbroken text */
.long-text {
    width: 250px; /* Adjust as needed */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Add ellipsis to overflow text */
    white-space: nowrap; /* Prevent text from wrapping to next line */
}

/* Class for breaking words */
.break-word {
    word-wrap: break-word; /* Break long words */
}

/* Class for breaking at any character */
.break-all {
    word-break: break-all; /* Break at any character */
}

/* Main Page Elements */
body {
    background: url('images/fond_jaune.png');
    font-family: Georgia, 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}

#bloc_page {
    width: 80%;
    margin: auto;
}

section h1, footer h1, nav a {
    font-family: Dayrom, serif;
    font-weight: normal;
    text-transform: uppercase;
}

/* Navigation */
nav ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 15px;
}

nav li {
    margin-right: 15px;
    margin-top: 5px;
    margin-bottom: 15px;
}

nav a {
    font-size: 1.3em;
    color: #181818;
    padding-bottom: 3px;
    text-decoration: none;
}

nav a:hover /* Style for hovering over link */
{
    color: #760001;
    border-bottom: 3px solid #760001;
}

nav a:active /* Style for active link */
{
    background-color: #FFCC66;
}

nav img {
    width: 30px;
    margin-right: 5px;
    margin-left: 5px;
}

/* Header */
header {
    background: url('images/separateur.png') repeat-x bottom;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#titre_principal {
    display: flex;
    flex-direction: column;
}

header h1 {
    font-family: Dayrom, serif;
    font-size: 2.5em;
    font-weight: normal;
    margin: 0 0 0 0px;
}

/* Dropdown Menu */
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}

nav li {
    position: relative;
}

nav a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    color: #181818;
    white-space: nowrap; /* Prevents text from wrapping */
}

nav ul ul {
    display: none; /* Hide dropdown initially */
    position: absolute;
    background-color: #f9f9f9;
    list-style-type: none;
    margin: 0;
    padding: 0;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    white-space: nowrap; /* Prevent text wrapping */
    min-width: max-content; /* Makes the dropdown as wide as its content */
}

nav ul ul li {
    width: auto; /* Let the width adjust based on content */
}

nav ul ul a {
    padding: 10px;
    color: #181818;
}

nav ul ul a:hover {
    background-color: #f1f1f1;
}

nav li:hover > ul {
    display: block; /* Show dropdown on hover */
}

/* Banner */
#banniere_image {
    margin-top: 15px;
    width: 100%;
    height: 300px;
    border-radius: 5px;
    background: url('images/banniere.jpg') no-repeat;
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
    background-size: 1500px;
}

#banniere_description {
    position: absolute;
    bottom: 0;
    border-radius: 0px 0px 5px 5px;
    width: 99.5%;
    height: 33px;
    padding-top: 15px;
    padding-left: 4px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    font-size: 0.8em;
}

.bouton_rouge {
    height: 25px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    background: url('images/fond_degraderouge.png') repeat-x;
    border: 1px solid #760001;
    border-radius: 5px;
    font-size: 1.2em;
    text-align: center;
    padding: 3px 8px 0px 8px;
    color: white;
    text-decoration: none;
}

.bouton_rouge img {
    border: 0;
}

/* Body Section */
section {
    display: flex;
    margin-bottom: 20px;
}

section h1 {
    font-family: Dayrom, serif;
    font-size: 2em;
    font-weight: normal;
    margin: 0 0 0 0px;
}

section h2 {
    font-family: Dayrom, serif;
    font-size: 2em;
    margin-top: 0px;
    font-weight: normal;
}

section h3 {
    font-size: 1.3em;
    margin-top: 2em;
    margin-bottom: 1em;
}

ul li {
    margin-bottom: 1em;
}

article, aside {
    text-align: justify;
}

article {
    margin-right: 20px;
    flex: 3;
}

.ico_categorie {
    vertical-align: middle;
    margin-right: 8px;
    width: 60px;
}

article p {
    font-size: 1em;
    margin-bottom: 10px;
}

aside {
    flex: none; /* Prevent stretching */
    position: relative; /* Maintain relative positioning */
    background-color: #706b64; /* Background color */
    box-shadow: 0px 2px 5px #1c1a19; /* Subtle shadow */
    border-radius: 5px; /* Rounded corners */
    padding: 10px; /* Padding inside the box */
    color: white; /* Text color */
    font-size: 1em; /* Font size */
    max-width: 400px; /* Set a reasonable maximum width */
    max-height: 700px; /* Prevent unnecessary growth */
    overflow: hidden; /* Prevent content overflow */
    display: block; /* Ensure block-level behavior */
}

#fleche_bulle {
    position: absolute;
    top: 100px;
    left: -12px;
}

#photo_id {
    text-align: center;
}

#photo_id img {
    border: 1px solid #181818;
    width: 80%;
}

aside img {
    margin-right: 5px;
}

#apercu_logo img {
    width: 30px;
}

/* class for having two columns */
.flex-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.flex-list li {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;
    align-items: center; 
}

.flex-list .date {
    flex-shrink: 0;
    width: 7em;
    text-align: center;
}

.flex-list .details {
    flex-grow: 1;
}

/* Footer */
footer {
    display: flex;
    justify-content: space-around;
    background:  url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top;
    padding-top: 5px;
}

footer p, footer ul {
    font-size: 0.8em;
}

footer h1 {
    font-size: 1.1em;
}

.contact {
    text-align: center;
}

#logo {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

#logo img {
    width: 90px;
}

/* Section title */
#lectures h2 {
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: bold;
    text-align: left;
}

/* Lecture entries */
.lecture-entry {
    margin-bottom: 1em;
}

/* Time duration styling */
.lecture-hours {
    font-style: italic;
    color: #555;
}

/* Responsive Design for Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

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

/* Language Selection */
#langues a {
    display:block;
    color: #fff;
    text-decoration:none;
}

#langues > li,  
#langues > li li {
    position: relative;
    display:inline-block;
    width: 150px;
    padding: 6px 15px;
    background-image: linear-gradient(#aaa, #700 50%, #700 50%,#900);
}

#langues > li li { background: transparent none; }
#langues > li li a { color: #444; }
#langues > li li:hover { background:#ddd; }
#langues > li:hover { background-color: #999; background-image: linear-gradient(#ccc, #999 50%, #999 50%,#bbb); }
#langues ul { position: absolute; top: 2em; left:0; max-height:0em; margin:0; padding:0; background-color:#ddd; background-image: linear-gradient(#fff,#ddd); overflow:hidden; transition: 1s max-height 0.3s; border-radius: 0 0 8px 8px; }
#langues > li:hover ul { max-height:13em; }
#langues img { width: 30px; margin-right: 5px; margin-left: 5px; }





/* Base link styles */
a {
    color: #0066cc; /* Standard link color */
    text-decoration: none; /* Remove default underline */
    transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect for all links */
a:hover {
    text-decoration: underline; /* Add underline on hover */
}

/* Disable hover underline in the menu */
.menu a {
    text-decoration: none; /* Ensure no underline for menu links */
}

.menu a:hover {
    text-decoration: none; /* Disable underline on hover */
}